Tell us what’s happening:
I’ll start by saying that I haven’t finished yet, I’m still missing the form and the submit button. But I noticed that it gives me the error (9. Each .nav-link element should have an href attribute) and (10. Each .nav- link element should link to a corresponding element on the landing page (has an href with a value of another element’s id.).
but it doesn’t seem to me that there is any wrong nav-link, what am i missing?
Your code so far
<!DOCTYPE html>
<html lang="en">
<head>
<title>Product Landing Page</title>
<link rel="stylesheet" href="styles.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header id="header">
<img id="header-img" src="https://i.imgur.com/3jWGCKb.jpeg" alt="gennai cat logo">
<nav id="nav-bar">
<ul>
<li class="nav-link"><a href="#yago">Yago</a></li>
<li class="nav-link"><a href="#darko">Darko</a></li>
<li class="nav-link"><a href="#arturo">Arturo</a></li>
<li class="nav-link"><a href="#odino">Odino</a></li>
<li class="nav-link"><a href="#renato">Renato</a></li>
</ul>
</nav>
</header>
<main>
<section id="hero">
<div class="hero-text">
<img id="hero-img"src="https://i.imgur.com/8kxtP5S.jpeg" alt="the whole family">
<h2>Benvenuti a</h2>
<h1>"Casa De' Gennai"</h1>
<p>Iscriviti alla pagina per ricevere le nostre bellissime foto, in cambio chiediamo
solo...<br><span class="important-text">qualche croccantino!</span></p>
</div>
<video id="video" controls>
<source src="percorso/del/tuo/video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</section>
<section id="yago">
<div class="cat-text">
<h1>YAGO</h1>
<h2>"Saccottino"</h2>
<p>Il padrone indiscusso di casa.<br>Ha gusti culinari molto ricercati, predilige il tortino dal cuore morbido e va matto per il budino alla vaniglia.
</p>
</div>
<img id="yago-img" src="https://i.imgur.com/RXKFY1M.jpeg" alt="yago's image">
</section>
<section id="darko">
<div class="cat-text">
<h1>DARKO</h1>
<h2>"Senzacoda"</h2>
<p>Il gigante dal cuore buono.<br>Spunta solo a notte fonda e va via appena sorge il sole, è però puntualissimo all'ora di cena.
</p>
</div>
<img id="darko-img" src="https://i.imgur.com/3dhokND.jpeg" alt="darko's image">
</section>
<section id="arturo">
<div class="cat-text">
<h1>ARTURO</h1>
<h2>"il Garettano"</h2>
<p>Gran cacciatore, è il guardiano della casa.<br>Amico di tutti, è il collante della famiglia.</p>
</div>
<img id="arturo-img" src="https://i.imgur.com/C7tFTIx.jpeg" alt="arturo's image">
<img id="arturo-img" src="https://i.imgur.com/VPNer2O.jpeg" alt="arturo's image">
</section>
<section id="odino">
<div class="cat-text">
<h1>ODINO</h1>
<h2>"104"</h2>
<p>Il cocco di mamma<br>L'angioletto di casa, buono e silenzioso. Unico difetto: un piccolo problema con la bilancia.
</p>
</div>
<img id="odino-img" src="https://i.imgur.com/phA4f5L.jpeg" alt="odino's image">
</section>
<section id="renato">
<div class="cat-text">
<h1>RENATO</h1>
<h2>"la Peste"</h2>
<p>Bello e dannato.<br>Paura di nulla e rispetto per nessuno, pronto per la malavita e lo spaccio di erbagatta.
</p>
</div>
<img id="renato-img" src="https://i.imgur.com/5YOe4PB.jpeg" alt="renato's image">
</section>
</main>
<footer>
<p>Creato da Michael Gennai - Progetto per certificazione del corso "Responsive Web Design"</p>
<p>Contattami: michael.gennai@gmail.com</p>
<p>Cercami anche sui social.</p>
</footer>
</body>
</html>
* {
box-sizing: border-box;
}
html {
--color-header: #f6dfac;
--color-hero: #eff2eb;
}
body {
margin: 0;
padding:0;
background-image: url(https://i.imgur.com/J3QI7te.jpeg);
background-repeat: repeat;
background-size: contain;
}
main{
padding-top: 13vh;
}
#header {
display: flex;
position: fixed;
width: 100vw;
height: 90px;
justify-content: space-between;
align-items: flex-end;
background-color: #222222;
border-bottom: 4px solid var(--color-header);
padding: 0;
margin: 0 auto;
box-shadow: inset 0 -3px 10px rgb(246, 223, 172, 1);
z-index: 1;
}
#header-img {
height: 86px;
width: 220px;
border-left: 4px solid var(--color-header);
border-right: 4px solid var(--color-header);
border-radius: 10px;
}
.nav-link {
display: inline-block;
font-size: 1.7rem;
margin: 0 1.5vw;
}
.nav-link a{
text-decoration: none;
color: var(--color-header);
padding-top: 50%;
}
.nav-link a:hover{
color: #222222;
border: 2px solid var(--color-header);
border-radius: 50px 50px 2px 2px;
background-color: var(--color-header);
}
#nav-bar {
padding-right: 7vw;
margin-bottom: -1vh;
}
section:not(#hero) {
display: flex;
color: var(--color-hero);
margin-top: 10vh;
padding: 15vh 0 0 4vw;
justify-content: space-between;
}
#hero {
display: grid;
grid-template-columns: 1fr 1fr;
color: var(--color-hero);
margin: 0 4vw;
}
.hero-text {
margin-top: 11vh;
font-family: merienda;
}
#hero-img{
width: 500px;
margin: 0 5vh;
border: 5px solid var(--color-hero);
border-radius: 20px;
}
#video{
margin-top: 33vh;
width: 80%;
margin: auto;
padding-top: 40vh;
}
section img:not(#renato-img, #hero-img){
margin: 3vh 0 5vh 0;
border: 5px solid var(--color-hero);
border-radius: 20px;
margin-right: 6vw;
width: 390px;
height: 500px;
}
#renato-img{
margin: 3vh 0 5vh 0;
border: 10px solid var(--color-hero);
border-radius: 20px;
margin-right: 6vw;
width: 600px;
height: 400px;
}
.cat-text{
width: 40vw;
font-size: 2rem;
text-align: justify;
}
footer{
background-color: var(--color-header);
text-align: center;
padding: 5px;
color: var(#222222);
font-family: Arial, sans-serif;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
Challenge Information:
Product Landing Page - Build a Product Landing Page