Good day, i am building my Product landing page and i would love assiatence on my last 2 code, how can i add * (Your Product Landing Page should use at least one media query.) and (Your Product Landing Page should use CSS Flexbox at least once.)
Here is my code below
<!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">
<title>HTML Image, Video, and Form Example</title>
<style>
/* Add a global style for the body to provide space at the top for the fixed navbar */
body {
margin-top: 40px;
}
/* Style for the fixed navigation bar */
#nav-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-link {
color: white;
text-decoration: none;
margin: 0 15px;
}
@media (max-width: 600px) {
/* Adjust styles for smaller screens */
#nav-bar {
flex-direction: column;
align-items: center;
}
.nav-link {
margin: 10px 0;
}
}
/* Rest of your styles... */
</style>
</head>
<body>
<script src="script.js"></script>
<header id="header">
<img src="path/to/your-logo.png" alt="Logo" id="header-img">
<nav id="nav-bar">
<a href="#section1" class="nav-link">Section 1</a>
<a href="#section2" class="nav-link">Section 2</a>
<a href="#section3" class="nav-link">Section 3</a>
</nav>
</header>
<!-- Rest of your HTML... -->
</body>
</html>
<title>Dove Landing Page</title>
</head>
<body>
<!-- Header -->
<header id="header">
<img src="dove_logo.png" alt="Dove Logo" id="header-img">
<nav id="nav-bar">
<a href="#section1" class="nav-link">Section 1</a>
<a href="#section2" class="nav-link">Section 2</a>
<a href="#section3" class="nav-link">Section 3</a>
</nav>
</header>
<!-- Section 1 -->
<section id="section1">
<h1>Discover Dove: Elevating User Experience through Research</h1>
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/your-youtube-video-id" title="YouTube Video"
frameborder="0" allowfullscreen></iframe>
<img src="path/to/your-image.jpg" alt="Dove Soap">
</a>
<form id="form" action="https://www.freecodecamp.com/email-submit" method="post">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>
<input type="submit" id="submit" value="Submit">
<p>Dove UX Research Insights</p>
</section>
<!-- Section 2 -->
<section id="section2">
<h2>Dove</h2>
<p> Dove, understand the importance of creating products that resonate with users.Dove is a popular brand that offers a range of personal care products, and there are several reasons why people choose Dove.</p>
</section>
<section id="video">
<iframe width="560" height="315" src="https://youtu.be/7wAujGf2LnQ?si=uu08Jm82TaayuNzc" title="YouTube Video"
frameborder="0" allowfullscreen></iframe>
</section>
<!-- Embedded video goes here -->
</section>
<!-- Section 3 -->
<section id="section3">
<h2>Why Choose Dove?</h2>
<ol>
<li><strong>In-Depth User Understanding:</strong> Dove has built a positive brand image, focusing on inclusivity, real beauty, and a commitment to ethical practices. UX researchers would explore how these brand values resonate with users and contribute to building trust and positive perceptions..</li>
<li><strong>Tailored Solutions:</strong> Through user interviews, surveys, and usability testing, researchers may uncover insights into users' preferences for mild and gentle formulas. The brand focuses on creating products that are suitable for sensitive skin, making them a popular choice for individuals who may have allergies or skin sensitivities.</li>
<li><strong>Data-Driven Design:</strong> Dove often emphasizes a sensory experience with its products, focusing on fragrance and texture. Dove is known for its "Real Beauty" campaign, which promotes a positive body image and celebrates the diversity of women's appearances. </li>
<li><strong>Long-Standing Reputation:</strong> Dove has been in the personal care industry for many years and has built a strong reputation for delivering quality products. Consumers often trust established brands with a history of producing reliable and effective items.</li>
</ol>
</section>
<!-- Video Section -->
<div id="video">
<!-- Embedded video goes here -->
</div>
<!-- Form Section -->
<section id="form">
<h2>How It Works</h2>
<p><strong>Soaps and Body Washes:</strong>Dove soaps and body washes are known for their moisturizing properties. They often contain a unique blend of mild cleansers and moisturizing ingredients, such as Dove's signature 1/4 moisturizing cream.</p>
<p><strong>Shampoos and Conditioners</strong> Dove shampoos and conditioners are formulated to cleanse and nourish the hair.
Shampoos typically contain gentle cleansing agents to remove dirt and excess oil from the hair and scalp.
Conditioners focus on providing moisture and improving the texture of the hair.</p>
<p><strong>Real Beauty Campaign:</strong> Dove's "Real Beauty" campaign is not about the functional aspects of the products but rather a marketing and social messaging strategy. It focuses on promoting a positive body image, challenging beauty stereotypes, and celebrating diversity.</p>
</section>
</section>
<!-- Get Started Section -->
<section id="get-started">
<h2>Get Started Today</h2>
<p>Ready to take your user experience to the next level? Contact our team at <a href="mailto:contact@doveuxresearch.com">contact@doveuxresearch.com</a> to schedule your personalized consultation.</p>
<p><strong>Dove UX Research - Elevate Your Product's User Experience!</strong></p>
</section>
<style>
<!-- Footer -->
<footer>
<p>Contact Us | Learn More</p>
</footer>
<body>
</nav>
</header>
</body>
</html>
.
Thank you