FreeCodeCamp assignment 3
A Pen by Geetesh Singh on CodePen.
Created
February 25, 2019 08:24
-
-
Save GeeteshSingh/7ca56e70472c97fff301ba4001410bcb to your computer and use it in GitHub Desktop.
Product landing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Product Landing</title> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script> | |
| <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> | |
| <link rel="stylesheet" type="text/css" href="style.css"> | |
| <link rel="icon" type="image/x-icon" href="favicon.ico"> | |
| </head> | |
| <body> | |
| <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script> | |
| <header id="header"> | |
| <nav id="nav-bar" class="navbar fixed-top navbar-expand-sm bg-dark navbar-dark"> | |
| <!-- Brand/logo --> | |
| <a class="navbar-brand" href="#"> | |
| <img id="header-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRH4kaGAZk22O2y1b3a1N7trapswOeQNPt_ei6ECjD3iOwhrH44" alt="logo" style="width:40px;"> | |
| </a> | |
| <!-- Links --> | |
| <ul class="navbar-nav"> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="#hf3">Home</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="#fram">Features</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="#grid-container">About</a> | |
| </li> | |
| </ul> | |
| </nav> | |
| </header> <br> <br><br> | |
| <div id="hf3"> | |
| <h3>Handcrafted, home-made masterpieces </h3><br> | |
| <form id="form" action="https://www.freecodecamp.com/email-submit" > | |
| <input id="email" type="email" name="email" placeholder="Enter your Mail address"><br><br> | |
| <input id="submit" type="submit" value=" Get Started " style="font-size:12pt;color:white;background-color:yellowgreen;border:2px solid #336600;padding:3px"> | |
| </form> | |
| </div> | |
| <br> | |
| <div class="contain"> | |
| <section id="features"> | |
| <div class="grid"> | |
| <div class="icon"> | |
| <i class="fa fa-3x fa-fire"></i> | |
| </div> | |
| <div class="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="grid"> | |
| <div class="icon"> | |
| <i class="fa fa-3x fa-truck"></i> | |
| </div> | |
| <div class="desc"> | |
| <h2>Fast Shipping</h2> | |
| <p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p> | |
| </div> | |
| </div> | |
| <div class="grid"> | |
| <div class="icon"> | |
| <i class="fa fa-3x fa-battery-full" aria-hidden="true"></i> | |
| </div> | |
| <div class="desc"> | |
| <h2>Quality Assurance</h2> | |
| <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <br><br> | |
| <div id="fram"> | |
| <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/a_qvFlv7Lok" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| </div> | |
| <div id="grid-container"> | |
| <div class="row"> | |
| <div class="grid-item col-xl-3"> | |
| <header id="tenor"> | |
| <h5><b>TENOR TROMBONE</b></h5> | |
| </header> | |
| <b>$600</b> <br> | |
| Lorem ipsum. <br> | |
| Lorem ipsum. <br> | |
| Lorem ipsum dolor. <br> | |
| Lorem ipsum. <br> | |
| <button type="submit">select</button> | |
| </div> | |
| <div class="grid-item col-xl-3"> | |
| <header id="bass"> | |
| <h5><b>BASS TROMBONE</b></h5> | |
| </header> | |
| <b>$900 </b> <br> | |
| Lorem ipsum. <br> | |
| Lorem ipsum. <br> | |
| Lorem ipsum dolor. <br> | |
| Lorem ipsum. <br> | |
| <button type="submit">select</button> | |
| </div> | |
| <div class="grid-item col-xl-3"> | |
| <header id="valve"> | |
| <h5><b>VALVE TROMBONE</b></h5> | |
| </header> | |
| <b>$1200</b> <br> | |
| Plays similar to a Trumpet <br> | |
| Great for Jazz Bands <br> | |
| Lorem ipsum dolor. <br> | |
| Lorem ipsum. <br> | |
| <button type="submit">select</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="about"> | |
| <h2>Information</h2> | |
| </div> | |
| <footer> | |
| <div id="ul"> | |
| <a href="#">Privacy </a> | |
| <a href="#"> Terms</a> | |
| <a href="singh.geetesh98@gmail.com" target="_blank"> Contact </a> | |
| </div> | |
| <span>Copyright 2019, Product Landing</span> | |
| </footer> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| background-color: bisque; | |
| } | |
| ul{ | |
| width: 35vw; | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: space-around; | |
| } | |
| .nav-item{ | |
| display: flex; | |
| align-items: flex-end; | |
| } | |
| @media screen and (max-width: 992px){ | |
| #hf3{ | |
| background-color: aliceblue; | |
| } | |
| } | |
| #hf3{ | |
| margin: 0 auto; | |
| text-align: center; | |
| font-style: italic; | |
| } | |
| form{ | |
| margin: 0 auto; | |
| } | |
| #submit{ | |
| padding-top: 2px; | |
| } | |
| .contain { | |
| max-width: 1000px; | |
| width: 100%; | |
| margin: 0 auto; | |
| } | |
| #features { | |
| margin-top: 30px; | |
| } | |
| .icon { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| height: 125px; | |
| width: 20vw; | |
| color: darkorange; | |
| } | |
| .desc { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| height: 125px; | |
| width: 80vw; | |
| padding: 5px; | |
| } | |
| .grid { | |
| display: flex; | |
| } | |
| #fram{ | |
| width: 50%; | |
| margin: 0 auto; | |
| } | |
| .button { | |
| background-color: #4CAF50; | |
| border: none; | |
| color: white; | |
| padding: 15px 32px; | |
| text-align: center; | |
| text-decoration: none; | |
| display: inline-block; | |
| font-size: 16px; | |
| margin: 4px 2px; | |
| cursor: pointer; | |
| } | |
| .grid-item{ | |
| border: 2px solid black; | |
| margin: 2%; | |
| box-sizing: border-box; | |
| } | |
| .row{ | |
| margin-left: 2%; | |
| text-align: center; | |
| } | |
| #grid-container{ | |
| margin-top: 10px; | |
| } | |
| #tenor{ | |
| background-color: gray; | |
| margin: 0 auto; | |
| padding: 0; | |
| } | |
| #bass{ | |
| background-color: gray; | |
| margin: 0 auto; | |
| } | |
| #valve{ | |
| background-color: gray; | |
| margin: 0 auto; | |
| } | |
| #about { | |
| margin: 10px; | |
| padding: 10px; | |
| display: -webkit-flex; | |
| display: flex; | |
| } | |
| @media only screen and (min-width: 1100px) { | |
| #about { | |
| display: -webkit-flex; /* Safari */ | |
| display: flex; | |
| } | |
| } | |
| footer { | |
| margin-top: 30px; | |
| background-color: #ddd; | |
| padding: 20px; | |
| text-align: right; | |
| letter-spacing: 2px; | |
| } | |
| #ul { | |
| display: flex; | |
| justify-content: flex-end; | |
| text-decoration: none; | |
| } | |
| span { | |
| margin-top: 5px; | |
| display: flex; | |
| justify-content: flex-end; | |
| font-size: 0.9em; | |
| color: #444; | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment