Feedback: Build a Product Landing Page

HTML-CSS
1

Hey guys. I’d love to hear what you think about my project i just did (3 weeks into HTML/CSS).

I know it’s not very far from the example-website, but i’m also not into having my own designs, i want to get the finished designs and rebuild them, so this is mainly what i tried to do.

Still curious what you think…

Here is my CodePen Link: https://codepen.io/ilinio/pen/rNbWmPW

And here is my code:

HTML

<!DOCTYPE html>
<html lang="en">

<head>

  <title>Best Nike Shoes</title>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="styles.css">

</head>

<body>

    <header id="header">

      <img id="header-img" alt="nike logo" src="https://static.runnea.com/images/201502/logotipo-nike-838x285x80xX.jpg?1">

      <nav id="nav-bar">

        <ul class="navigation">

            <li><a class="nav-link" href="#topseller">Topseller</a></li>
            <span class="nav-strich"></span>
            <li><a class="nav-link" href="#comingsoon">Coming soon</a></li>
            <span class="nav-strich"></span>
            <li><a class="nav-link" href="#features">Feautures</a></li>
             
    
        </ul>

      </nav>

    </header>

<main class="main">

<div class="topseller-div">
  <section id="topseller">

    <div class="products product1">
      <div class="product-header">
        <h1>Snow White</h1>
      </div>

      <div class="product-bio">

        <div class="prices">
        <h2 class="old-price">320$</h2>
        <h2 class="new-price">250$</h2>
        </div>
        
        <img class="product-img" alt="Weiss-oranger Nike-Schuh" src="https://grailify.com/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBejBqQkE9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--2c42caa16743e632de6d5d03440ad20a201106c8/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdDRG9MWm05eWJXRjBTU0lJYW5CbkJqb0dSVlE2RW5KbGMybDZaVjkwYjE5bWFYUmJCMmtDSUFOcEFpQURPZ3h4ZFdGc2FYUjVhVjg9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--ea1da7d273fb4fac2f3bf305727b365ca4d6c39a/Image%200">
      </div>

      <div class="button-div">
      <button>Order</button>
      </div>
      
    </div>



  <div class="products product1">
      <div class="product-header">
        <h1>X-Ray</h1>
      </div>

      <div class="product-bio">

        <div class="prices">
        <h2 class="old-price">380$</h2>
        <h2 class="new-price">300$</h2>
        </div>

        <img class="product-img" alt="Color-mixed Nike-Schuh" src="https://thumbs.dreamstime.com/b/nike-lebron-xiii-bhm-multi-color-sneaker-vienna-austria-august-white-background-149297519.jpg">
      </div>

      <div class="button-div">
      <button>Order</button>
      </div>

    </div>

    <div class="products product1">
      <div class="product-header">
        <h1>Ripper</h1>
      </div>



      <div class="product-bio">

        <div class="prices">
        <h2 class="old-price">300$</h2>
        <h2 class="new-price">230$</h2>
        </div>

        <img class="product-img" alt="Color-mixed Nike-Schuh" src="https://grailify.com/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNzdyQXc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--97372744a925cd329ace1aa397c500dc020c6a63/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdDRG9MWm05eWJXRjBTU0lJYW5CbkJqb0dSVlE2RW5KbGMybDZaVjkwYjE5bWFYUmJCMmtDSUFOcEFpQURPZ3h4ZFdGc2FYUjVhVjg9IiwiZXhwIjpudWxsLCJwdXIiOiJ2YXJpYXRpb24ifX0=--ea1da7d273fb4fac2f3bf305727b365ca4d6c39a/Image%200">
      </div>

      <div class="button-div">
      <button>Order</button>
      </div>

    </div>


  </section>

  </div>

  <section id="comingsoon">

    <h2 class="productlearn">Coming soon...</h2>

<div class="youtube">
    <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/lky2P_aw6nc" allowfullscreen></iframe>
</div>
  
  </section>




  <section id="newsletter">

<div class="newsletter-texts">

    <h1 id="newsletter-titel">Want our weekly newsletter?</h1>

    <p class="newsletters">Every week, we provide our followers with the best trends of the previous week. Save time and money by just looking trough the selected items and enjoy the best sales up to 45%</p>

</div>

<div class="form-div">
    <form id="form" action="https://www.freecodecamp.com/email-submit">

      <label for="email"></label>
      <input type="email" name="email" id="email" placeholder="Enter your email" required>
      
      <input type="submit" id="submit" value="Receive newsletter" >


    </form>
  </div>

  </section>





  <section id="features">

    <img alt="Material Icon" class="icons" src="https://i.pinimg.com/originals/26/db/86/26db860f38a0269a3ed707cc2d6bb794.png">

        <div id="premium">

    <h2 class="feature-title">Premium Materials</h2>

    <p class="description">Enjoy the best quality materials, collected from around the world to make your feet feel like kings</p>

    </div>

    <img alt="Shipping Icon" class="icons" src="https://png.pngtree.com/png-vector/20191105/ourmid/pngtree-delivery-truck-icon-png-image_1959172.jpg">
    
    <div id="fast">

    <h2 class="feature-title">Fast Shipping</h2>

    <p class="description">We make sure, your products arrive within 1 week so you can enjoy them ASAP</p>

    </div>

    <img alt="Quality Icon" class="icons" src="https://static.thenounproject.com/png/426749-200.png">

    <div id="quality">

    <h2 class="feature-title">Quality Assurance</h2>

    <p class="description">Not pleased with our products? You can always return them and get your cash back within 30 days!</p>

    </div>
  
  </section>


</main>

<footer>

  <div class="footer">
  
    <p>© Copyright 2024, NIKE Cooperation</p>

  </div>

</footer>

</body>

</html>

CSS

@media (prefers-reduced-motion: no-preference) {
  *{scroll-behavior: smooth;}
}

:root {
  --grau: #6F6F6F;
  --dunkelgrau: #505050;
  --hellgrau: #B0B0B0;
}

html {
  width: 100%;
  height: 100vh;
  margin: 0;
  font-family: Lato, sans-serif;
}

body {
  margin-top: 10rem;
}

#header-img {
  width: 120px;
  height: 50px;
  padding-top: 0.2rem;
  padding-left: 8rem;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  background-color: white;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: 3px solid var(--grau);
}

.navigation {
  display: flex;
  justify-content: flex-end;
  font-size: 1.12rem;
  margin-right: 4rem;
}

li {
  list-style: none;
  margin-left: 4rem;
  font-weight: bold;
}

a {
  text-decoration: none;
  color: var(--dunkelgrau);
  transition: color 0.4s ease;

}

a:hover {
  color: #FFD500;
}

.product-img {
  max-width: 200px;
}

#topseller {
  width: 73%;
  display: flex;
  justify-content: space-around;
  margin: 0 auto 100px auto;
}

.products {
  border: 3px solid var(--dunkelgrau);
  border-radius: 15px;
  padding: 15px 20px;
  margin: 0 20px 0 20px;
  background-color: #e4e4e4;
}

.products:hover {
  background-color: #CDCDCD;
  border: 3px solid black;
}


h1 {
  font-size: 1.6rem;
  text-align: center;
}

.prices {
  display: flex;
  justify-content: space-between;
  margin-right: 4px;
}

.old-price {
  text-decoration: line-through;
  font-size: 1.1rem;
  padding-top: 11px;
  font-weight: normal;
}

.new-price {
  text-decoration: underline;
  font-size: 1.4rem;
  color: red;
}

button {
  margin-top: 30px;
  margin-bottom: 15px;
  width: 60%;
  height: 40px;
  font-size: 1.05rem;
  background-color: #FFE600;
  border: none;
  transition: background-color 0.4s ease;
}

button:hover {
  background-color: #FFD500;
  border: 2px solid #C1C1C1;
  
}

.button-div {
  display: flex;
  justify-content: center;
}

.youtube {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.productlearn {
  text-align: center;
  padding-bottom: 18px;
}

#newsletter {
  padding-top: 60px;
}

.newsletters {
  padding-bottom: 10px;
  padding-top: 10px;
  color: var(--dunkelgrau);
}

.newsletter-texts {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}

.form-div {
  display: flex;
  justify-content: center;
}

input[type=email] {
  width: 100%;
  margin-bottom: 23px;
}

input[type=submit] {
  width: 100%;
  height: 40px;
  font-size: 1.05rem;
  background-color: #FFE600;
  border: none;
  transition: background-color 0.4s ease;
}

input[type=submit]:hover {
  background-color: #FFD500;
}

#features {
  padding-top: 25px;
}

.icons {
  max-width: 75px;
  padding-top: 30px;
  display: flex;
  margin: 0 auto;
}

.icons:first-of-type {
  max-width: 90px;
  margin-bottom: -10px;
}

.icons:nth-of-type(2) {
  margin-bottom: -13px;
}

.icons:last-of-type {
  max-width: 65px;
  margin-bottom: 25px;
}


.feature-title {
  text-align: center;
  color: #F2A100;
}

.description {
  text-align: center;
  color: var(--dunkelgrau);
}

footer {
  width: 80%;
  height: 70px;
  background-color: lightgrey;
  margin-left: auto;
  margin-right: auto;
  margin-top: 65px;
  border-radius: 10px 10px 0 0;
}

.footer {
  display: flex;
  justify-content: flex-end;
  margin-right: 20px;
  padding-top: 15px;
}
2

It looks pretty good.

The responsiveness needs a little work. Adding flex-wrap: wrap to the nav links and products flex containers will help without too much effort. You might add a gap to the containers as well to give the flex items a little separation when they start to wrap.

Good job, keep it up.

1 Like
3

Ai thx mate, i just did this.
Looks way better now how it behaves if you shrink the window now, appreciate it a lot!

There are still many commands in css that i keep forgetting and doing the same little mistakes again… but i know it’s part of the process, 3 weeks into CSS^^

Anyways, appreciate it mate. Thank you

4

Hello!

Very nice job for just three weeks in.

Tips:
Give all texts a max-width, so they look better structured and are more readable on wide screens.

* {
  padding: 0;
  margin: 0;
}

Removes all default values and gives you better control of all paddings and margins.

Keep up the good work!

1 Like
5

Thank you, i’m doing my best in the time i got :slight_smile:

i’ll propably start doing this in the start of every project now.
i added a html-selector in the beginning with margin: 0; as you may’ve seen… i thougt that will do the same…?

Anyways, this is something i’ll keep doing in the beginning in my future projects.

Thank you anyways for your time, appreciate it a lot :pray:

6

You are right, didn’t see you already had that in the html selector. You can put it there as well plus padding: 0, any global selector.

If you want to see the effect, try this in code pen: Add the 0 values, then remove them , then add them again. You will see how the elements are shifting!

1 Like
7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.