|
@@ -0,0 +1,265 @@
|
|
|
+<style>
|
|
|
+ body {
|
|
|
+ background-color: rgb(237,237,237);
|
|
|
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
|
+ }
|
|
|
+
|
|
|
+ h2 {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ header {
|
|
|
+ background-color: rgb(237,237,237);
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ position: fixed;
|
|
|
+ top: 0px;
|
|
|
+ left: 0px;
|
|
|
+ padding-bottom: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ footer {
|
|
|
+ background-color: rgb(220,220,220);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ #header-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ max-width: 300px;
|
|
|
+ margin: 0 auto 0 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ #nav-bar {
|
|
|
+ position: fixed;
|
|
|
+ top: 0px;
|
|
|
+ right: 0px;
|
|
|
+ margin: 0 0 0 auto;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ }
|
|
|
+
|
|
|
+ ul {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ list-style: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-link {
|
|
|
+ text-decoration: none;
|
|
|
+ color: black;
|
|
|
+ margin: auto 20px auto 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #Login {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #form {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin: auto;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ background-color: rgb(255, 208, 0);
|
|
|
+ color: black;
|
|
|
+ font-weight: bold;
|
|
|
+ border:none;
|
|
|
+ font-size: 18px;
|
|
|
+ padding: 8px 20px 8px 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #email {
|
|
|
+ border: none;
|
|
|
+ width: 300px;
|
|
|
+ height: 28px;
|
|
|
+ padding: 6px;
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-margin {
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #features {
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ #HowItWorks {
|
|
|
+ display: flex;
|
|
|
+ margin: 20px auto 40px auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ #video {
|
|
|
+ background-color: aquamarine;
|
|
|
+ width: 800px;
|
|
|
+ height: 600px;
|
|
|
+ margin-left: auto;
|
|
|
+ margin-right: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .features-title {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: bolder;
|
|
|
+ }
|
|
|
+
|
|
|
+ .features-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 30px;
|
|
|
+ height: auto;
|
|
|
+ margin: 60px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #Pricing {
|
|
|
+ background-color: blue;
|
|
|
+ width: 940px;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr 1fr;
|
|
|
+ column-gap: 20px;
|
|
|
+ margin: 40px auto 40px auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .priceItem {
|
|
|
+ height: 300px;
|
|
|
+ background-color: aquamarine;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: black;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 940px) {
|
|
|
+ #Pricing {
|
|
|
+ background-color: blue;
|
|
|
+ width: 100%;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr 1fr;
|
|
|
+ column-gap: 20px;
|
|
|
+ margin: 40px auto 40px auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 800px) {
|
|
|
+ header {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ ul {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ list-style: none;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ #header-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ max-width: 300px;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ #nav-bar {
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .href-text {
|
|
|
+ text-decoration: none;
|
|
|
+ color: black;
|
|
|
+ margin: auto 40px auto auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|
|
|
+<header id="header">
|
|
|
+ <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png">
|
|
|
+ <nav id="nav-bar" class="nav-link">
|
|
|
+ <ul>
|
|
|
+ <li><a href="#features" class="nav-link">Features</a></li>
|
|
|
+ <li><a href="#HowItWorks" class="nav-link">How It Works</a></li>
|
|
|
+ <li><a href="#Pricing" class="nav-link">Pricing</a></li>
|
|
|
+ </ul>
|
|
|
+ </nav>
|
|
|
+</header>
|
|
|
+
|
|
|
+<main>
|
|
|
+<section id="login">
|
|
|
+ <h2>Handcrafted, home-made masterpieces</h2>
|
|
|
+ <form id="form" action="https://www.freecodecamp.com/email-submit">
|
|
|
+ <input id="email" type="email" name="email" placeholder="Enter your email address" class="form-margin" required>
|
|
|
+ <input id="submit" type="submit" value="GET STARTED" class="btn">
|
|
|
+ </form>
|
|
|
+</section>
|
|
|
+
|
|
|
+<section id="features">
|
|
|
+ <div class="features-item">
|
|
|
+ <div class="features-icon">
|
|
|
+ <img src="./img/icon.png" class="icon">
|
|
|
+ </div>
|
|
|
+ <div class="features-desc">
|
|
|
+ <h2>Premium Materials</h2>
|
|
|
+ <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="features-item">
|
|
|
+ <div class="features-icon">
|
|
|
+ <img src="./img/icon.png" class="icon">
|
|
|
+ </div>
|
|
|
+ <div class="features-desc">
|
|
|
+ <h2>Premium Materials</h2>
|
|
|
+ <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="features-item">
|
|
|
+ <div class="features-icon">
|
|
|
+ <img src="./img/icon.png" class="icon">
|
|
|
+ </div>
|
|
|
+ <div class="features-desc">
|
|
|
+ <h2>Premium Materials</h2>
|
|
|
+ <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+
|
|
|
+<section id="HowItWorks">
|
|
|
+ <iframe id="video" src="https://www.bilibili.com/video/BV1Y54y1r7Cg?from=search&seid=3208808148645764628" frameborder="0"></iframe>
|
|
|
+</section>
|
|
|
+
|
|
|
+<section id="Pricing">
|
|
|
+ <div class="priceItem">
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="priceItem">
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="priceItem">
|
|
|
+
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+
|
|
|
+</main>
|
|
|
+
|
|
|
+<footer>
|
|
|
+ <p>Copyright 2016, Original Trombones</p>
|
|
|
+ <p>Copyright 2016, Original Trombones</p>
|
|
|
+</footer>
|