I am trying to prevent the nav-bar from overlapping the page’s content.
<!DOCTYPE html>
<html lang="en"></html>
<head>
<title>Product Landing Page</title>
<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=Amatic+SC:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/5e9c68f162.js" crossorigin="anonymous"></script>
</head>
<body>
<header id="header">
<div class="logo">
<img id="header-img" alt="Logo" src="https://upload.wikimedia.org/wikipedia/commons/8/89/Infinity_Rainbow_%2824075520546%29.png" width="60" />
<span class="the-title">Autism Literature</span>
</div>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#reviews">Reviews</a></li>
<li><a class="nav-link" href="#forSale">For Sale</a></li>
</ul>
</nav>
</header>
<section id="infinity">
<h2>Spectacular Empowering Literature</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input type="email" id="email" placeholder="Enter your email address" name="email" required/>
<input type="submit" id="submit" value="SUBMIT" />
</form>
</section>
<div class="container">
<div id="features">
<div class="grid">
<div class="icon">
<i class="fa-solid fa-book"></i>
</div>
<div class="text">
<h2>Best-Selling Books</h2>
<p>Books that are well-received by the neurodivergent community and organizations.</p>
</div>
</div>
<div class="grid">
<div class="icon">
<i class="fa-solid fa-truck-fast"></i>
</div>
<div class="text">
<h2>Free Shipping</h2>
<p>All orders will get free shipping. Our goal is to have your order shipped in no time.</p>
</div>
</div>
<div class="grid">
<div class="icon">
<i class="fa-solid fa-face-surprise"></i>
</div>
<div class="text">
<h2>New and Pre-Owned</h2>
<p>Our selection of books can be purchased as brand-new or pre-owned. All books are carefully stored and packed while pre-owned will be good just as new.</p>
</div>
</div>
</div>
<div id="reviews">
<iframe id="video" src="https://www.youtube-nocookie.com/embed/20oWX12JcMQ?rel=0&controls=0&showinfo=0" width="500" height="315" title="Product Video" frameborder="0"></iframe>
</div>
<div id="forSale">
<div class="product">
<div class="level">BUT YOU DON'T LOOK AUTISTIC AT ALL</div>
<h2>$14</h2>
<p>Bianca Toeps</p>
<p>
In her book, Bianca Toeps offers a detailed exploration of life with autism, debunking misconceptions and providing a genuine perspective. Through scientific insights, personal anecdotes, and interviews, she sheds light on the daily challenges faced by autistic individuals. Bianca's refreshing and humorous approach also provides valuable tips for non-autistic people, fostering understanding and dismantling stereotypes.</p>
<button class="btn">ADD TO CART</button>
</div>
<div class="product">
<div class="level">SAME BUT DIFFERENT: TEEN LIFE ON THE AUTISM EXPRESS</div>
<h2>$10</h2>
<p>Holly Robinson Peete</p>
<p>
Actress and activist Holly Robinson Peete collaborates with her twins in a poignant narrative that delves into the challenges and triumphs of being a teenager with autism, highlighting its impact on family, school, friends, and life. Ryan Elizabeth Peete and her twin brother, Rodney, openly share their personal experiences, tackling topics such as dating, parties, sports, body changes, and the difficulties of being understood by their peers. SAME BUT DIFFERENT is a powerful book that emphasizes acceptance, love, and the celebration of individuality, while fearlessly addressing often overlooked issues surrounding teen autism.</p>
<button class="btn">ADD TO CART</button>
</div>
<div class="product">
<div class="level">SENSORY: LIFE ON THE SPECTRUM: AN AUTISTIC COMICS ANTHOLOGY</div>
<h2>$11</h2>
<p>Bex Ollerton</p>
<p>
Sensory: Life on the Spectrum is an anthology curated by artist Bex Ollerton, showcasing the works of thirty autistic creators. Through vibrant comic-style illustrations, this collection offers a glimpse into the experiences of living in a world that often struggles to understand or accept autism. The comics cover a range of topics, from personal journeys before and after diagnosis, to advice on explaining autism to neurotypical individuals, and strategies for self-soothing during overwhelming moments. Combining artistic expression with memoir-like vulnerability, this book provides unique insights and emotional depth that can only be conveyed by those who have lived through it.</p>
<button class="btn">ADD TO CART</button>
</div>
</div>
</div>
</body>
</html>
body {
background-color: red;
font-family: Lato, sans-serif;
}
#header{
position: fixed;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.logo {
width: 60vw;
}
header-img {
max-width: 300px;
width: 100%;
height: 100%;
}
#nav-bar {
font-weight: 400;
width: 40vw;
}
ul {
display: flex;
flex-direction: row;
justify-content: space-around;
}
li {
list-style: none;
}
.nav-link {
color: black;
text-decoration: none;
padding: 0 10px;
}
.the-title {
font-size: 25px;
margin-left: 10px;
font-weight: 700;
font-family: 'Amatic SC', cursive;
}
#infinity, #form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#infinity input[type="email"] {
max-width: 275px;
min-width: 100px;
width: 275px;
height: 30px;
margin-bottom: 15px;
}
#infinity input[type="submit"] {
max-width: 150px;
width: 100%;
height: 30px;
background-color: #AF7AC5;
border: none;
font-weight: 900;
font-size: 1em;
}
.features {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 80%;
max-width: 700px;
margin: 0;
padding: 0;
}
.grid {
display: flex;
flex-direction: row;
}
.icon {
width: 15vw;
display: flex;
justify-content: center;
align-items: center;
}
.fa-solid {
color: green;
font-size: 50px;
}
#reviews {
margin: 30px;
display: flex;
justify-content: center;
align-items: center;
}
#forSale {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
margin-top: 60px;
margin-bottom: 90px;
}
.product {
display: flex;
flex-direction: column;
align-items: center;
width: calc(80%/3);
border: 1px solid black;
margin: 20px;
border-radius: 3px;
}
.level {
background-color: #808080;
color: black;
width: 100%;
padding: 15px 0;
font-weight: 700;
text-align: center;
}
p {
text-align: center;
}
.btn {
background-color: #AF7AC5;
margin: 15px 0;
font-weight: 400;
border: 0;
width: 30%;
height: 30px;
font-size: 1em;
min-width: 100px;
}
@media(max-width: 700px) {
#forSale {
flex-direction: column;
align-items: center;
}
.product {
width: 300px;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36
Challenge: Product Landing Page - Build a Product Landing Page
Link to the challenge:
