Tell us what’s happening:
There is this task that says ’ Your #nav-bar should always be at the top of the viewport’. I already set the position fixed in my header so my nav-bar be always at the top, and I even tried to set it on my #nav-bar as well, but I am still unable to conclude that task, even tho my #nav-bar is always at the top of my viewport.
UPDATE: I checked the page source code of the website they provide us to make our website similar to (https://product-landing-page.freecodecamp.rocks/) and I noticed they haven’t set any positioning, such as position: fixed, on the #nav-bar, but they set it on the #header, which is the same thing I did.
Now, I copied the html and css code to check if their website would fullfill the ’ Your #nav-bar should always be at the top of the viewport’ task, and it didn’t, so I believe this is a problem of the task itself. I don’t know what should I do for some staff to fix this
Your code so far
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
HTML
<!DOCTYPE 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" />
<title>Home page</title>
<link rel="stylesheet" href="styles.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>
<body>
<header id='header'>
<a href="index.html" class="logo"><img id='header-img' src="https://fabiosroadstop.com/wp-content/uploads/elementor/thumbs/Logotipo-01-oz75j78g8ee3o10sckagsjt2vs6dsqay2g19n6nd98.png" alt="" /></a>
<nav id='nav-bar'>
<ul class="nav-links">
<li><a class="nav-link active" href="#home">HOME</a></li>
<li><a class="nav-link" href="#about">ABOUT</a></li>
<li><a class="nav-link" href="#menu">MENU</a></li>
</ul>
<div class="cart">
<i id="menu-bar" class="fa fa-hamburger"></i>
<a href="#"><i class="fa fa-shopping-bag"></i></a>
</div>
</nav>
</header>
<div id="home">
<div class="board">
<div class="separator-board">
<div class="flex">
<div class="line-board first-line"></div>
</div>
<div class="flex">
<div class="line-board second-line"></div>
</div>
<div class="yellow">
<h1>TODAY</h1>
</div>
</div>
<div class="flex">
<div class="line-red"></div>
<div class="red is">
<h2>is a</h2>
</div>
<div class="line-red"></div>
</div>
<div class="separator-board">
<div class="yellow">
<h1>good</h1>
<h1>DAY</h1>
</div>
<div class="flex">
<div class="line-board second-line"></div>
</div>
<div class="flex">
<div class="line-board first-line"></div>
</div>
</div>
</div>
</div>
<div class="flex container" id="about">
<div class="col text">
<div class="global-headline">
<h2 class="sub-headline">
<span class="first-letter">D</span>iscover
</h2>
<h1 class="headline">our story</h1>
</div>
<p class="restaurant-description">Fabio’s Roadstop is a personal dream of mine, which came true. An American diner in conjunction with our own
unique
concept
within which we value the quality of our produce and perform daily tests to improve the final results of our
confections.
All our attention is devoted to detail and therefore all our dishes are served in a careful and uniquely special
way.
We are a supportive team with the ambition to serve better and do better. We are in constant learning mode,
testing,
retrying, until we produce our products to the highest standard of quality. Our only goal is to offer something
unique
served with quality and great service.
In our restaurant we want you to feel completely at home, to share happy moments whether they are with family or
friends
and to enjoy the best we have to offer, from the best drinks to a delicious meal.</p>
</div>
<div class="col">
<video id='video' src="elementor-video"
src="https://fabiosroadstop.com/wp-content/uploads/2020/11/Fabios-Roadstop-sem-Logo-Final-Updated.mp4" controls>
</div>
</div>
</div>
<div id="menu" class="main-font small-container">
<h2 class="tittle">
<span class="first-letter">M</span>enu
</h2>
<div class="row">
<div class="col-4">
<img
src="https://images.unsplash.com/photo-1584178639036-613ba57e5e39?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0MDY4ODA0MA&ixlib=rb-1.2.1&q=85">
<div class="name">
<h4>Burger</h4>
<i class='fas fa-cart-plus cart'></i>
</div>
</div>
<div class="col-4">
<img class="img"
src="https://images.unsplash.com/photo-1541592106381-b31e9677c0e5?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0MDY4ODMwOA&ixlib=rb-1.2.1&q=85">
<div class="name">
<h4>Fries</h4>
<i class='fas fa-cart-plus cart cart'></i>
</div>
</div>
<div class="col-4">
<img
src="https://images.unsplash.com/photo-1508254919937-d4a498e3366c?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0MDY4ODgyMw&ixlib=rb-1.2.1&q=85">
<div class="name">
<h4>Lemonade</h4>
<i class='fas fa-cart-plus cart'></i>
</div>
</div>
</div>
</div>
<form id='form' action='https://www.freecodecamp.com/email-submit'>
<h3>
Tell us your email, so we know you would like to receive our promotions and discounts !
</h3>
<input id='email' type='email' placeholder='email' name='email'>
<input id='submit' type='submit' placeholder='submit'>
</form>
<footer>
<div class="box-container">
<div class="box">
<h3>Contact info</h3>
<p><i class="fa fa-map-marker"></i>Rua Dr. Manuel de Arriaga
Edf. Mar Salgado, Lote 1
Loja E, 8365-140, Armação de Pêra</p>
<p><i class="fa fa-envelope"></i>fabio@fabiosroadstop.com</p>
<p><i class='fa fa-phone'></i>(+351) 282 317 025</p>
</div>
<div class="box">
<h3>Opening hours</h3>
<p>Tuesday to Saturday from 8:00 to 22:30</p>
</div>
<div class="box">
<h3>Follow us</h3>
<a href="">Instagram</a>
<a href="">Facebook</a>
<a href="">Youtube</a>
<a href="https://www.tripadvisor.pt/Restaurant_Review-g189113-d17755337-Reviews-Fabio_s_RoadStop-Armacao_de_Pera_Faro_District_Algarve.html">TripAdvsor</a>
</div>
</div>
<hr>
<p class="credit">Fabio's Roadstop - All rights reserved</p>
</footer>
</body>
<script>
"use strict";
const burger = document.querySelector("#menu-bar");
const navLinks = document.querySelector(".nav-links");
const link = document.querySelectorAll(".nav-link");
burger.addEventListener("click", function () {
burger.classList.toggle("fa-times");
navLinks.classList.toggle("nav-toggle");
});
link[0].addEventListener("click", function () {
link[0].classList.add("active");
if (link[0].classList.contains("active")) {
link[1].classList.remove("active");
link[2].classList.remove("active");
link[3].classList.remove("active");
}
});
link[1].addEventListener("click", function () {
link[1].classList.add("active");
if (link[1].classList.contains("active")) {
link[0].classList.remove("active");
link[2].classList.remove("active");
link[3].classList.remove("active");
}
});
link[2].addEventListener("click", function () {
link[2].classList.add("active");
if (link[2].classList.contains("active")) {
link[0].classList.remove("active");
link[1].classList.remove("active");
link[3].classList.remove("active");
}
});
</script>
</html>
CSS
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Herr+Von+Muellerhoff&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap");
:root {
--main-font: "Souce Sans Pro", sans-serif;
--secondary-font: "Herr Von Muellerhoff";
--body-font: "Cabin", sans-serif;
--main-font-color-dark: #252525;
--secondary-font-color: #ffc477;
--body-font-color: #515151;
--animation-color: #fff;
/* CSS HEX */
--rich-black-fogra-29: #101417ff;
--gold-metallic: #d5ad3fff;
--ruby-red: #942427ff;
--gray-web: #807e7fff;
--rich-black-fogra-29-2: #101417ff;
/* CSS HEX */
--black: #000000ff;
--azure: #0080ffff;
--dim-gray: #69656cff;
--cg-red: #e6362eff;
--verdigris: #00aaaaff;
--gold-web-golden: #fcd40bff;
--lemon-yellow: #faed3dff;
--yellow: #f7ca3e;
}
html {
scroll-behavior: smooth;
overflow-x: hidden;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style-type: none;
outline: none;
border: none;
transition: all 0.2s linear;
/* font-family: "Poppins", sans-serif; */
}
/* HEADER */
header {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
background-color: #fff;
padding: 0.8rem 14%;
box-shadow: 0 0.3rem 0.2rem rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: space-between;
}
.logo img {
height: 5.5rem;
}
#nav-bar {
display: flex;
font-size: 1.1rem;
}
#nav-bar .nav-links {
display: flex;
align-items: center;
justify-content: space-between;
}
#nav-bar .nav-links li {
margin-right: 2rem;
}
.nav-link {
color: #666;
}
.cart {
font-size: 1.3rem;
}
.cart i {
color: #666;
}
.active {
color: var(--yellow);
}
#menu-bar {
display: none;
}
/* HEADER END */
/* HOME */
#home {
display: flex;
align-items: center;
justify-content: center;
height: 85vh;
background: #54a8c9;
margin-top: 15vh;
}
.board {
font-family: "Dancing Script", cursive;
border: 10px solid;
width: 23%;
padding: 50px;
text-align: center;
font-size: 2vw;
}
.flex {
display: flex;
align-items: center;
justify-content: center;
}
.line-board {
width: 100%;
height: 0.25rem;
background-color: var(--cg-red);
margin: 5px;
}
.first-line {
width: 75%;
}
.second-line {
width: 85%;
}
.yellow {
color: var(--lemon-yellow);
}
.line-red {
background-color: var(--cg-red);
width: 100%;
height: 0.25rem;
margin: 5px -2px 0 -2px;
}
.red {
color: var(--cg-red);
width: 50%;
flex: none;
}
/* HOME END */
/* ABOUT */
.container {
font-size: 1.6vw;
height: 100vh;
display: flex;
justify-content: center;
padding: 0 40px;
}
.col {
flex-basis: 50%;
margin: 0 10px;
}
.text {
margin-top: -10.75vw;
}
.global-headline {
text-align: center;
font-family: var(--secondary-font);
color: var(--lemon-yellow);
}
.headline {
font-size: 4.5vw;
font-weight: 100;
letter-spacing: -1px;
margin-top: -3.125vw;
}
.sub-headline {
font-size: 3vw;
font-weight: 100;
letter-spacing: -1px;
}
.first-letter {
text-transform: uppercase;
font-size: 4vw;
}
video {
width: 100%;
}
/* ABOUT END */
/* MENU */
.tittle {
margin: 0 0 17vh;
font-size: 4.5rem;
font-family: var(--secondary-font);
color: var(--gold-web-golden);
font-weight: 100;
line-height: 0.6;
letter-spacing: 2px;
text-align: center;
}
.tittle .first-letter {
text-transform: uppercase;
font-size: 4.3rem;
}
.small-container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: auto;
padding-bottom: 10vh;
}
.row {
display: flex;
justify-content: center;
align-items: center;
}
.col-4 {
min-width: 20vw;
margin-bottom: 50px;
transition: transform 0.5s;
}
.col-4 img {
width: 15vw;
}
.name {
display: flex;
justify-content: space-between;
width: 15vw;
}
.cart:hover {
cursor: pointer;
color: var(--lemon-yellow);
}
.col-4:hover {
transform: translateY(-5px);
}
/* MENU END */
/* FORM */
form {
font-size: 1.6vw;
text-align: center;
padding: 10px 50px 50px;
}
form input {
display: flex;
align-items: center;
justify-content: center;
margin: 10px auto;
}
#email {
padding: 10px;
border: 2px solid var(--lemon-yellow);
}
#submit {
cursor: pointer;
padding: 10px;
background: var(--lemon-yellow);
border: 1px solid white;
border-radius: 10px;
color: white;
}
#submit:hover {
color: var(--lemon-yellow);
background: white;
border: 1px solid var(--lemon-yellow);
}
/* FOOTER */
footer {
background: #000;
padding: 1rem 7%;
font-family: poppins;
display: flex;
flex-direction: column;
justify-content: center;
}
footer .box-container {
display: flex;
justify-content: flex-end;
}
footer .box-container .box {
color: #fff;
flex-basis: 30%;
padding: 0 10px;
}
footer .box-container .box p {
color: #eee;
padding: 1rem 0;
}
footer .box-container .box a {
color: #eee;
padding: 1rem 0;
display: block;
}
footer .box-container .box a:hover {
color: var(--lemon-yellow);
}
footer .box-container .box p i {
padding-right: 0.5rem;
color: var(--lemon-yellow);
}
footer hr {
border: none;
background: #b5b5b5;
height: 1px;
margin: 20px 0;
}
.credit {
text-align: center;
color: white;
}
/* FOOTER END */
@media screen and (max-width: 770px) {
/* NAV */
#nav-bar .nav-links {
border-top: 5px solid black;
position: fixed;
top: 7rem;
left: 0;
width: 100%;
background: var(--lemon-yellow);
display: flex;
flex-flow: column;
transform: scaleY(0);
transform-origin: top;
opacity: 0;
}
#nav-bar .nav-links.nav-toggle {
transform: scaleY(1);
opacity: 1;
}
#nav-bar .nav-links li {
margin-right: 2rem;
padding: 10px;
}
.cart {
display: flex;
font-size: 1.4rem;
}
.cart i {
margin: 0 5px;
}
#menu-bar {
display: block;
margin-top: 3px;
}
.fa-times {
transform: rotate(180deg);
}
/* NAV END */
.board {
border: 8px solid;
width: 32vw;
padding: 45px;
}
/* ABOUT */
.container {
height: 80vh;
}
.headline {
font-size: 5.5vw;
}
.sub-headline {
font-size: 4vw;
}
.first-letter {
text-transform: uppercase;
font-size: 5vw;
}
video {
width: 100%;
}
.col-4 {
min-width: 25vw;
margin-bottom: 50px;
transition: transform 0.5s;
}
.col-4 img {
width: 20vw;
}
.name {
display: flex;
justify-content: space-between;
width: 20vw;
}
/* FORM */
form {
font-size: 2vw;
}
/* FOOTER */
footer {
font-size: 2vw;
}
}
@media screen and (max-width: 430px) {
.board {
width: 52vw;
padding: 40px;
font-size: 3.2vw;
}
/* ABOUT */
.container {
flex-flow: column;
font-size: 2.7vw;
height: 70vh;
padding: 0 9vw;
margin-top: 10vh;
}
.col {
flex-basis: 50%;
display: flex;
align-items: center;
flex-direction: column;
}
.text {
padding: 0 0 30px;
}
.headline {
font-size: 8.5vw;
font-weight: 100;
letter-spacing: -1px;
margin-top: -5.125vw;
}
.sub-headline {
font-size: 7vw;
font-weight: 100;
letter-spacing: -1px;
}
.first-letter {
text-transform: uppercase;
font-size: 8vw;
}
video {
width: 100%;
}
}
Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.67 Safari/537.36
Challenge: Build a Product Landing Page
Link to the challenge:
