2
\$\begingroup\$

I have created a product landing page for a freeCodeCamp responsive web design project which requires me to create a "Product Landing Page".

Requirements to keep in mind:

User Story #1: My product landing page should have a header element with a corresponding id="header".
User Story #2: I can see an image within the header element with a corresponding id="header-img". A company logo would make a good image here.
User Story #3: Within the #header element I can see a nav element with a corresponding id="nav-bar".
User Story #4: I can see at least three clickable elements inside the nav element, each with the class nav-link.
User Story #5: When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.
User Story #6: I can watch an embedded product video with id="video".
User Story #7: My landing page has a form element with a corresponding id="form".
User Story #8: Within the form, there is an input field with id="email" where I can enter an email address.
User Story #9: The #email input field should have placeholder text to let the user know what the field is for.
User Story #10: The #email input field uses HTML5 validation to confirm that the entered text is an email address.
User Story #11: Within the form, there is a submit input with a corresponding id="submit".
User Story #12: When I click the #submit element, the email is submitted to a static page (use this mock URL: https://www.freecodecamp.com/email-submit) that confirms the email address was entered and that it posted successfully.
User Story #13: The navbar should always be at the top of the viewport.
User Story #14: My product landing page should have at least one media query.
User Story #15: My product landing page should utilize CSS flexbox at least once.

Here is my code:

body {
  background-color: whitesmoke;
  text-align: center;
}

body,
input,
button {
  font-family: 'Ubuntu', sans-serif;
}

h1,
h2,
h3,
.nav-link {
  font-family: 'Trocchi', serif;
}

header {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 50px;
  background: #3b3b3b;
  text-align: right;
  z-index: 1;
}

#header-img {
  max-width: 100%;
  position: fixed;
  top: 0;
  left: 0px;
}

#nav-bar a {
  float: right;
  display: block;
  color: white;
  transition-duration: 0.4s;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#nav-bar a:hover {
  background-color: #ddd;
  color: black;
}

#form {
  margin-top: 55px;
}

#email {
  height: 2em;
  width: 15em;
  border-radius: 1em;
  padding-left: 0.6em;
}

#submit {
  height: 3em;
  width: 7em;
  border-radius: 1em;
  cursor: pointer;
}

#features-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#features {
  background-color: lightgray;
  width: 75%;
  border-radius: 4em;
}

#features,
#working,
#offers {
  margin-top: 0px;
  padding: 55px;
}

.material-icons {
  font-size: 5em;
}

#video-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}

#video {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

#offers-container {
  display: flex;
  justify-content: center;
}

#offers {
  background-color: grey;
  width: 85%;
  border-radius: 4em;
}

.offer {
  background-color: lightgray;
  margin: 0.5em;
  padding: 0.5em;
  border-radius: 1em;
}


/*.specs {
  display: inline-flex;
  background-color: blanchedalmond;
  float: center;
  height: 3em;
  width: 6em;
  text-decoration: none;
  color: black;
  font-weight: bold;
  border-radius: 1.5em;
}*/

button {
  height: 3em;
  width: 6em;
  border-radius: 1.5em;
  font-weight: bold;
  cursor: pointer;
}

footer {
  width: 100%;
  background-color: lightgray;
  padding: 0.3em;
}

footer a {
  text-decoration: none;
  color: black;
  margin-left: 0.5em;
}

footer p {
  color: #606060;
}

@media (max-width: 600px) {
  #nav-bar {
    display: none;
  }
}

@media (min-width: 700px) {
  #video-container {
    padding-top: initial;
  }
  #video {
    position: static;
    height: 315px;
    width: 560px;
  }
}
<!doctype html>
<html lang="en" class="">

<head>
  <link href="https://fonts.googleapis.com/css?family=Trocchi|Ubuntu" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
  <!--learn.freecodecamp.org Responsive Web Design Projects - Build a Product Landing Page-->



  <header id="header">
    <img id="header-img" src="https://lh3.googleusercontent.com/0ir39yY3qdd6tjpgZbSZ9DiLA8Vy2BZaR4YOPrDF9tfJTf7z2m2TzM0RICdDDvO0XQrsEuGBunq1tRTD4HSyASAGtQXAcaCfqYGLzDRWqFc2UcReYMfnsc03_6J_axINZfQXYj9bNXZkUmzi2hYgGzRb-HxT_45-z18ijDQtu0GvNCHk9hX34nLbzCnj-2uNc1F0fqX-lPZmcoHLQkXc2BjnB7IDB3h-xPL2l7NqFl8pa8-9QulpH_v2KS4uB_8cYuNMErEgUXFShExxKXTXWvTuTjvEUU6h24et4jz7Vpx9AygTm8IKJL8Wb3xDzgWSG_NHdmCoEitHnzf92ns3d_LSdMnaCabIAIPTydiTln-2T0zaS6Wq61OGC3UFV_fSOSV-r4Z6NTNSw9kr63TF-VCbkAcHRYxTSbWKh-Ug3970kDaikTagL-iqpJVhC-EDyMLMNQWwoWTa_stvcnFJjZ6FGF7uPQtbiTraiFAbF5S3Qqfp2daXXiB4zxGdsm6_TJp9LbmIZHRBUoGMsooi0NXkIVkweuZnRAFK1l_RPIHMAcYuk2Hn1tQEYhBD7u1UL7U0t9XtTFfDHFYKefBs1Lxo43FpD6CMr8DKJVeAZXG88-Ctn4b3ijVuLNn2FxACDP3rIzESqTplIThhMxb1MH3argwr73Nm3oWCuWVpfY6geOXiEQBtZDRP=w300-h50-no"
      alt="Logo">
    <nav id="nav-bar">
      <a class="nav-link" href="#offers">Offers</a>
      <a class="nav-link" href="#working">Working</a>
      <a class="nav-link" href="#features">Features</a>
    </nav>
  </header>
  <form id="form" action="https://www.freecodecamp.com/email-submit">
    <p>Let's get started. Remain updated about the latest tech from <span style="font-family: 'Trocchi', serif;">Original Nukes</span> with our email feed subscription.</p>
    <p><input id="email" type="email" name="email" placeholder="Enter your email" required=""></p>
    <p><input id="submit" type="submit" value="Subscribe"></p>
  </form>
  <br>


  <div id="features-container">
    <div id="features">
      <div>
        <i class="material-icons">security</i>
        <h2>Premium Materials</h2>
        <div>Our nuclear explosives use the purest form of Uranium-365 which is sourced overseas. This ensures longer shelf life and a smoother destruction.</div>
      </div><br>
      <div>
        <i class="material-icons">local_shipping</i>
        <h2>Safest Shipping</h2>
        <div>We make sure that the nuclear arsenals reach their destination in a safe and environment friendly way. We also provide insurance for any kind of environmental damage and transportation losses.</div>
      </div><br>
      <div>
        <i class="material-icons">check_box</i>
        <h2>Quality Assurance</h2>
        <div>For every purchase you make, we will ensure there are no damages or faults. We check and verify that there do not remain faults of any kind in any model of our nukes.</div>
      </div>
    </div>
  </div>

  <br>



  <div id="working">
    <h1>Get an idea of how the nukes appear when they are in action.</h1>
    <div id="video-container"><iframe id="video" src="https://www.youtube-nocookie.com/embed/ETag3issaSE?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe></div>
  </div>


  <div id="offers-container">
    <div id="offers">
      <div class="offer">
        <h2>Alert series</h2>
        <i class="material-icons">battery_alert</i>
        <div>$40 million</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a lacus euismod, interdum.</div><br>
        <button>Specs</button>
      </div>
      <div class="offer">
        <h2>Full charge series</h2>
        <i class="material-icons">battery_charging_full</i>
        <div>$ 60 million</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque facilisis est ut elit.</div><br>
        <button>Specs</button>
      </div>
      <div class="offer">
        <h2>Unknown series</h2>
        <i class="material-icons">battery_unknown</i>
        <div>$ 50 million</div>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi viverra neque a turpis.</div><br>
        <button>Specs</button>
      </div>
    </div>
  </div><br>



  <footer>
    <a href="#">Privacy</a>
    <a href="#">Terms</a>
    <a href="https://www.freecodecamp.org/ayudh-khajne">Contact</a>
    <p>Copyright 2100, Original Nukes</p>
  </footer>

  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>

</html>


For review

I would like to receive "code review" & suggestions on the following:

  • iframe & related CSS: whether the code can be simplified. The video should be responsive, maximum 560 px wide, horizontally centred, and maintain its aspect ratio.
  • footer: there is some unwanted margin around footer.
  • design & positioning etc.: some basic (nothing much difficult and more than the freeCodeCamp curriculum)
  • colour: suggestions for better colour combinations (without changing the overall theme), keeping in mind readability and accessibility like colour blindness, etc.
  • optimizations: code optimization, simplification, tidying, spotting duplicate code, etc.
  • grammar, maybe.
  • And finally, review for entire code is welcome.

Link to Web Page

Codepen - This code may be updated anytime.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.