I want to fix the nav section, but other sections get overlapped somehow when I click the nav links. I don’t know how to do this. Please help me.
Test case
Your
#nav-bar
should always be at the top of the viewport.
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
http-equiv="X-UA-Compatible"
content="IE=edge"
/>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-+qUZ5QYQ3QqZ7Z3Q3Z3Q3Z3Q3Z3Q3Z3Q3Z3Q3Z3Q3Q3Q3Z3Q3Q3Q3Z3Q3Z3Q3Z3Q3Q3Q3Q3Q3Q3Z3Q3Q3Q3Z3Q=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link
rel="preconnect"
href="https://fonts.gstatic.com"
/>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
rel="stylesheet"
/>
<script
src="https://kit.fontawesome.com/6d3b596002.js"
crossorigin="anonymous"
></script>
<link
rel="stylesheet"
href="styles.css"
/>
<title>Product Landing Page</title>
</head>
<body>
<header
id="header"
class="header-container"
>
<img
id="header-img"
src="https://cdn.cdnlogo.com/logos/d/26/death-note.svg"
alt="logo"
class="img-logo"
/>
<nav
id="nav-bar"
class="navbar-container"
>
<a
href="#home"
class="nav-link"
>Home</a
>
<a
href="#features"
class="nav-link"
>Features</a
>
<a
href="#products"
class="nav-link"
>Products</a
>
<a
href="#contact"
class="nav-link"
>Contact</a
>
</nav>
</header>
<main
id="home"
class="main-container"
>
<form
id="form"
action="https://www.freecodecamp.com/email-submit"
>
<section class="section-container first">
<h1
id="hero-title"
class="section-header header-black"
>
Anime action figures and collectibles for sale at the
best prices online.
</h1>
<p
id="hero-subtitle"
class="sub-title"
>
To get started, enter your email address below.
</p>
<input
type="email"
name="email"
id="email"
placeholder="Enter your email"
class="input-email"
/>
<input
type="submit"
name="submit"
id="submit"
value="Submit"
class="big-btn btn"
/>
</section>
<section class="section-container">
<iframe
src="https://www.youtube.com/embed/NlJZ-YgAt-c"
title="Death Note | OFFICIAL TRAILER"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
id="video"
loading="lazy"
></iframe>
</section>
<section
class="section-container"
id="features"
>
<h2
id="features-title"
class="section-header"
>
We offer the best selection of anime action figures and
collectibles.
</h2>
<p
id="features-subtitle"
class="sub-title"
>
The figurines are available in a range of sizes, from
tiny miniatures to enormous, intricate monuments.
Numerous points of articulation on figures enable a
variety of dynamic poses and display options.
</p>
<div class="widget-container">
<div class="widget-item">
<i class="fas fa-shipping-fast"></i>
<div class="widget-info">
<h3 class="widget-item-title">Fast Shipping</h3>
<p class="widget-item-subtitle">
We offer fast shipping on all orders.
</p>
</div>
</div>
<div class="widget-item">
<i class="fas fa-star"></i>
<div class="widget-info">
<h3 class="widget-item-title">
Quality Products
</h3>
<p class="widget-item-subtitle">
We offer the lowest prices on all of our
products.
</p>
</div>
</div>
<div class="widget-item">
<i class="fas fa-headset"></i>
<div class="widget-info">
<h3 class="widget-item-title">
Customer Service
</h3>
<p class="widget-item-subtitle">
We offer great customer service on all
orders.
</p>
</div>
</div>
</div>
</section>
<section
class="section-container"
id="products"
>
<h2
id="products-title"
class="section-header"
>
We offer a wide selection of anime action figures and
collectibles.
</h2>
<p
id="products-subtitle"
class="sub-title"
>
Capturing the Essence of Your Favorite Anime Characters:
The Intricately Designed and Highly Detailed World of
Anime Action Figures and Collectibles.
</p>
<div class="widget-container">
<div class="product">
<img
class="product-img"
loading="lazy"
src="https://oniri-creations.com/wp-content/uploads/2018/05/death-note-statue-1.png"
/>
<h3 class="product-title">Light and Ryuk</h3>
<ul class="product-features">
<li class="product-features-list">
<i class="fab fa-angellist"></i>
<span class="product-desc">
100% Authentic
</span>
</li>
<li class="product-features-list">
<i
class="fab fa-creative-commons-remix"
></i>
<span class="product-desc">
Brand New
</span>
</li>
<li class="product-features-list">
<i class="fas fa-route"></i>
<span class="product-desc">
Free Shipping
</span>
</li>
<li class="product-features-list">
<i class="fas fa-star"></i>
<span class="product-desc">
Quality Product
</span>
</li>
</ul>
<span class="price">$354</span>
<input
type="button"
value="Buy Now"
class="buy-btn"
/>
</div>
<div class="product">
<img
class="product-img"
loading="lazy"
src="https://oniri-creations.com/wp-content/uploads/2022/10/Misa-illustration.png"
alt="Misa Amane"
/>
<h3 class="product-title">Misa Amane</h3>
<ul class="product-features">
<li class="product-features-list">
<i class="fab fa-angellist"></i>
<span class="product-desc">
100% Authentic
</span>
</li>
<li class="product-features-list">
<i
class="fab fa-creative-commons-remix"
></i>
<span class="product-desc">
Brand New
</span>
</li>
<li class="product-features-list">
<i class="fas fa-route"></i>
<span class="product-desc">
Free Shipping
</span>
</li>
<li class="product-features-list">
<i class="fas fa-star"></i>
<span class="product-desc">
Quality Product
</span>
</li>
</ul>
<span class="price">$354</span>
<input
type="button"
value="Buy Now"
class="buy-btn"
/>
</div>
<div class="product">
<img
class="product-img"
loading="lazy"
src="https://oniri-creations.com/wp-content/uploads/2019/09/illustration.png"
alt="L and Watari"
/>
<h3 class="product-title">L and Watari</h3>
<ul class="product-features">
<li class="product-features-list">
<i class="fab fa-angellist"></i>
<span class="product-desc">
100% Authentic
</span>
</li>
<li class="product-features-list">
<i
class="fab fa-creative-commons-remix"
></i>
<span class="product-desc">
Brand New
</span>
</li>
<li class="product-features-list">
<i class="fas fa-route"></i>
<span class="product-desc">
Free Shipping
</span>
</li>
<li class="product-features-list">
<i class="fas fa-star"></i>
<span class="product-desc">
Quality Product
</span>
</li>
</ul>
<span class="price">$354</span>
<input
type="button"
value="Buy Now"
class="buy-btn"
/>
</div>
</div>
</section>
<section
class="section-container"
id="contact"
>
<h2
id="contact-title"
class="section-header"
>
Contact us for more information.
</h2>
<p
id="contact-subtitle"
class="sub-title"
>
We have a wide selection of anime action figures and
collectibles from your favorite anime series such as
Dragon Ball, Naruto, One Piece, Bleach, and more. Low
prices, fast shipping, and great customer service.
</p>
<address class="address">
<a
href="tel:1-555-555-5555"
class="contact"
>1-555-555-5555</a
>
<p class="contact">
600 Amphitheatre Parkway Mountain View, CA 94043 US
</p>
<a
href="mailto:animeshop@animie.co"
class="contact"
>
Email
</a>
</address>
</section>
</form>
</main>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url(https://fonts.googleapis.com/css?family=Raleway:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic);
@import url(https://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,regular,italic,500,500italic,700,700italic,900,900italic);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,regular,italic,600,600italic,700,700italic,800,800italic);
:root {
/* CSS HEX */
--smoky-black: rgba(16, 11, 0, 0.795);
--light-sea-green: #22aaa1ff;
--snow: #fcf7f8ff;
--dodger-blue: #2191fbff;
--icterine: #f5f749ff;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* border: 1px solid #df5924; */
}
.header-container {
display: flex;
flex-direction: row;
background-color: var(--snow);
align-items: center;
width: 100%;
position: fixed;
padding: 0.5em 0;
z-index: 1;
top: 0;
border-bottom: 2px solid var(--light-sea-green);
}
#header-img {
width: 20%;
display: block;
}
.navbar-container {
display: flex;
flex-direction: row;
justify-content: space-around;
width: 100%;
}
.nav-link {
font-size: 2em;
font-family: 'Open Sans', sans-serif;
text-decoration: none;
color: var(--smoky-black);
transition: all 0.3s ease-in-out;
}
.nav-link:hover {
color: var(--light-sea-green);
transform: scale(1.1);
transition: all 0.3s ease-in-out;
}
.main-container {
display: flex;
flex-direction: column;
background: var(--snow);
color: var(--smoky-black);
position: absolute;
top: 10%;
}
.section-container {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 auto;
margin-bottom: 3rem;
position: relative;
top: 10%;
}
.first {
background: linear-gradient(275deg,
rgba(0, 0, 0, 0.801),
rgb(0, 0, 0));
padding: 2rem;
color: var(--snow);
width: 100%;
}
.section-header {
font-size: 3em;
width: 80%;
font-family: 'Open Sans', sans-serif;
text-align: center;
margin-bottom: 1rem;
line-height: 1.2em;
color: var(--smoky-black);
}
#hero-title {
color: var(--snow);
}
.section-header::first-letter {
font-size: 1.5em;
color: var(--light-sea-green);
}
.sub-title {
font-size: 1.5em;
width: 80%;
font-family: 'Open Sans', sans-serif;
text-align: center;
margin-bottom: 3rem;
}
.input-email {
width: 60%;
color: var(--smoky-black);
padding: 1rem;
max-width: 755px;
min-width: 150px;
margin-bottom: 1rem;
font-family: 'Open Sans', sans-serif;
font-size: 1.5em;
border: none;
border-radius: .2em;
}
#email:focus {
outline: 2px solid var(--light-sea-green);
}
.big-btn {
width: 15%;
padding: 1em;
font-family: 'Raleway', sans-serif;
font-size: 1.5em;
color: var(--snow);
background-color: var(--light-sea-green);
border: none;
cursor: pointer;
border-radius: .5em;
max-width: 255px;
min-width: 155px;
}
.big-btn:hover {
background-color: var(--dodger-blue);
}
#video {
display: flex;
flex-direction: column;
place-items: center;
width: 80%;
min-width: 20%;
max-width: 1000px;
border-radius: 14px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}
.widget-container {
display: flex;
width: 100%;
justify-content: space-around;
flex-wrap: wrap;
}
.widget-item,
.product {
display: flex;
flex-direction: column;
align-items: center;
width: 20%;
padding: 1rem;
border-radius: 12px;
margin-bottom: 3rem;
min-width: 400px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
transition: all 0.3s ease-in-out;
border: none;
}
.product-img {
max-width: 100%;
max-height: 100%;
height: 350px;
display: block;
}
.widget-item:hover,
.product:hover {
transform: scale(1.1);
transition: all 0.3s ease-in-out;
}
.widget-item:focus {
background-attachment: fixed;
}
.widget-item-title,
.product-title {
font-size: 2em;
font-family: 'Open Sans', sans-serif;
color: var(--smoky-black);
text-align: center;
}
.widget-item-title::first-letter {
font-size: 1.5em;
color: var(--light-sea-green);
}
.widget-item-subtitle,
.price {
font-size: 1.5em;
font-family: 'Open Sans', sans-serif;
color: var(--smoky-black);
text-align: center;
}
i {
font-size: 3em;
color: var(--light-sea-green);
}
.product-features-list {
display: flex;
align-items: center;
font-size: 1.5em;
gap: 1em;
font-family: 'Open Sans', sans-serif;
color: var(--smoky-black);
text-align: center;
margin: 1rem 0;
}
.product-features-list i {
font-size: 1em;
color: var(--light-sea-green);
}
.buy-btn {
text-align: center;
width: 50%;
padding: 1rem;
border-radius: 12px;
margin: 1rem 0;
min-width: 150px;
background-color: var(--light-sea-green);
color: var(--snow);
font-size: 1.5em;
font-family: 'Raleway', sans-serif;
border: none;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.buy-btn:hover {
background-color: var(--smoky-black);
color: var(--snow);
}
.address {
display: flex;
flex-direction: column;
place-items: center;
gap: 1em;
}
.contact {
font-size: 1.5em;
font-family: 'Open Sans', sans-serif;
color: var(--smoky-black);
text-align: center;
}
@media screen and (max-width: 768px) {
.header-container {
flex-direction: column;
}
#header-img {
width: 90%;
max-width: 350px;
}
.navbar-container {
flex-direction: column;
gap: 1rem;
text-align: center;
font-size: 1em;
}
.nav-link {
font-size: 1.5em;
}
.section-header {
font-size: 2em;
}
.sub-title {
font-size: 1em;
}
.input-email {
width: 80%;
font-size: 1em;
}
.big-btn {
width: 30%;
font-size: 1em;
}
#video {
width: 100%;
min-width: 80%;
max-width: 90%;
}
.widget-item {
flex-direction: row;
}
}