Product Landing Page Help

HTML-CSS
1

I’ve been having a problem of trying to get my feature section to shift to the right. I’ve tried using the margin , position & left settings but neither of them are working. What do I do solve this problem.

Screenshot 2025-01-19 at 14.35.22
Screenshot 2025-01-19 at 14.35.222880×1800 409 KB

HTML 
 <section>
    <div class="feature">
    <img src="https://static.vecteezy.com/system/resources/previews/034/819/899/non_2x/simple-chef-hat-icon-restaurant-chef-vector.jpg" alt="Chef Icon" class="feature-icon">
    <div class="feature-text">
      <h3>Chef-Crafted Gourmet Meals</h3>
      <p>Indulge in restaurant-quality dishes, expertly crafted by professional chefs using premium, fresh ingredients.</p>
    </div>
  </div>
 <div class="feature">
    <img src="https://static.vecteezy.com/system/resources/thumbnails/002/206/240/small_2x/fast-delivery-icon-free-vector.jpg" alt="Delivery Van Icon" class="feature-icon">
    <div class="feature-text">
      <h3> Fast and Reliable Delivery</h3>
      <p>Enjoy gourmet meals delivered fast and fresh, ready to savor whenever your hunger strikes.</p>
    </div>
  </div>
</div>
  <div class="feature">
    <img src="https://cdn-icons-png.freepik.com/512/3438/3438379.png" alt="Sustainable Icon" class="feature-icon">
    <div class="feature-text">
      <h3>Sustainability and Freshness</h3>
      <p>Feel good about your meals with locally sourced ingredients and eco-friendly packaging that puts the planet first.</p>
    </div>
  </div>
</div>

   </section>
CSS 
.feature {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  font-family: 'Lato', sans-serif;
  padding: 20px;
}


.features-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  background-color: #f9f9f9; 
 position: relative; 
  left: -30px;
  align-items: flex-start;
}



.feature-icon {
  height: 50px;
  width: auto;
}

.feature-text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.feature h3 {
  margin: 0 0 5px 0;
  font-size: 1.25em;
  color: #333;
  padding: 10px;
}

.feature p {
  margin: 0;
  font-size: 1em;
  color: #666;
  line-height: 1.5;
}
2

Can you copy and paste the link for this project, also it might be a good Idea to post all of your HTML

3

Hi this is the whole of my HTML:



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css"> 
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bungee+Tint&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet"> 
    <title>Product Landing Page</title>
</head>
<body>

 <header id="header">
   <img id="header-img" src="https://cdn-icons-png.flaticon.com/512/7657/7657673.png" alt="Gourmet To Go logo">
   <h1 id="header-h1">Gourmet To Go</h1>
   <nav id="nav-bar">
       <ul>
           <li><a class="nav-link" href="#features">Features</a></li>
            <li><a class="nav-link" href="#how-it-works">How It Works</a></li>
            <li><a class="nav-link" href="#subscription">Subscription</a></li> 
       </ul>
     </nav>
   </header>
   

     <section id="section-1">
         <h2 id="slogan">Elevated Meals, Delivered to Your Doorstep</h2>     
         <form action="form">
        <input type="email" id="email" name="email" placeholder="Enter Email Your Address" required>
        <button type="submit">Get Started</button>
    </form>
   </section> 
   <section>
    <div class="feature">
    <img src="https://static.vecteezy.com/system/resources/previews/034/819/899/non_2x/simple-chef-hat-icon-restaurant-chef-vector.jpg" alt="Chef Icon" class="feature-icon">
    <div class="feature-text">
      <h3>Chef-Crafted Gourmet Meals</h3>
      <p>Indulge in restaurant-quality dishes, expertly crafted by professional chefs using premium, fresh ingredients.</p>
    </div>
  </div>
 <div class="feature">
    <img src="https://static.vecteezy.com/system/resources/thumbnails/002/206/240/small_2x/fast-delivery-icon-free-vector.jpg" alt="Delivery Van Icon" class="feature-icon">
    <div class="feature-text">
      <h3> Fast and Reliable Delivery</h3>
      <p>Enjoy gourmet meals delivered fast and fresh, ready to savor whenever your hunger strikes.</p>
    </div>
  </div>
</div>
  <div class="feature">
    <img src="https://cdn-icons-png.freepik.com/512/3438/3438379.png" alt="Sustainable Icon" class="feature-icon">
    <div class="feature-text">
      <h3>Sustainability and Freshness</h3>
      <p>Feel good about your meals with locally sourced ingredients and eco-friendly packaging that puts the planet first.</p>
    </div>
  </div>
</div>

   </section>
</body>
</html>
4

Hi there! You didn’t have any css selector to target the required section element.

1 Like
5

I ran your code an its passing 15 out of 25, so are you trying to do this on your own or is it part of the test requirements?

1 Like