I am having issues getting my code to pass for the Product Landing Page. Can anyone offer feedback on what I am doing wrong?
Your code so far
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”/>
<title>Artsy Fartsy</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=Honk:MORF@8&display=swap" rel="stylesheet">
<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=Honk:MORF@8&family=Satisfy&display=swap" rel="stylesheet">
<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=Asul:wght@400;700&family=Honk:MORF@8&family=Satisfy&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles.css"/>
<link
href="https://cdn.jsdelivr.net/npm/remixicon@4.1.0/fonts/remixicon.css"
rel="stylesheet"
/>
</head>
<body>
<link rel="stylesheet" href="styles.css">
<div class="flex-container">
<header id="header">
<nav id="nav-bar">
<div class="logo-container">
<img src="https://www.nicepng.com/png/full/361-3619749_the-foundation-of-your-brand-identity-design-creative.png" alt="logo" id="header-img"/>
<span class="the-product">Artsy Fartsy</span>
</div>
<ul class="nav-links">
<li><a href="#painting" class="nav-link">Painting</a></li>
<li><a href="#drawing" class="nav-link">Drawing</a></li>
<li><a href="#other_medias" class="nav-link">Other Medias</a></li>
</ul>
</nav>
</header>
<section id="email-section">
<h2>Artsy Fartsy Online Community</h2>
<form action="https://www.freecodecamp.com/email-submit" id="form">
<input id="email" type="email" required placeholder="Enter your email adress" name="email"/>
<input type="submit" id="submit" value="GET STARTED">
</form>
</section>
<section id="features">
<div class="feature"><i class="ri-brush-line ri-4x icon"></i>
<div>
<h2>Quality Paints</h2>
<p>
We offer the highest quality paints in the industry.</p>
</div>
</div>
<div class="feature"><i class="ri-pencil-line ri-4x icon"></i>
<div>
<h2>Drawing Materials</h2>
<p> We stock thousands of drawing materials for all of your drawing needs.</p>
</div>
</div>
<div class="feature"><i class="ri-ink-bottle-line ri-4x icon"></i>
<div>
<h2>Other Medias</h2>
<p>If painting and drawing aren't your chosen media, do not fear! Artsy Fartsy has now expanded to include inks, clays, and more.</p>
</div>
</div>
</section>
<section id="audio">
<iframe id="video" height="400" src="https://www.youtube.com/embed/a7krTnIygdw?si=zdg9MuhtMvV6fheo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</section>
<section id="Inventory">
<h2>Inventory</h2>
<div class="product-cards">
<div class="card">
<div class="product-image product1"></div>
<div class="inner-card">
<div class="type" id="painting">Acrylic Paints</div>
<h1 class="header">Van Gogh Paints</h1>
<p class="content">Cadmium Yellow, Cadmium Red, Burnt Sienna, Pure White</p>
<div class="flex">
<p class="main-price">$11.99</p>
<p class="old-price">$14.99</p>
</div>
<button class="add">
Add to Cart
</button>
</div>
<div class="card">
<div class="product-image product2"></div>
<div class="inner-card">
<div class="type" id="drawing">Sketch Pencils</div>
<h1 class="header">Artist's Best Pencils</h1>
<p class="content">2H, HB, 4B, 6B, 9B</p>
<div class="flex">
<p class="main-price">$4.99</p>
<p class="old-price">$6.99</p>
</div>
<button class="add">Add to Cart</button>
</div>
<div class="card">
<div class="product-image product3"></div>
<div class="inner-card">
<div class="type" id="other_medias">Clay</div>
<h1 class="header">Earth Mama's Clays</h1>
<p class="content">Ceramic Clay, Polymer Clay, Dough Clay</p>
<div class="flex">
<p class="main-price">$18.99</p>
<p class="old-price">$24.99</p>
</div>
<button class="add">Add to Cart</button>
</div>
</div>
<div class="card"></div>
</div>
</section>
</body>
</html>
:root{
--dark: black;
--pale: #F5F5F5;
--gray: #BEBEBE;
}
*{
margin: 0;
scroll-behavior: smooth;
}
body{
background-color: var(--pale);
}
#header-img{
width: 60px;
object-fit: contain;
}
#nav-bar{
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
position: fixed;
width: 100%;
top: 0;
background-color: var(--dark);
padding: 10px;
}
.nav-links{
display: flex;
list-style: none;
}
.nav-links a{
text-decoration: none;
background: linear-gradient(to right, #ef5350, #f48fb1, #7e57c2, #2196f3, #26c6da, #43a047, #eeff41, #f9a825, #ff5722);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding: 0 10px;
font-family: "Asul";
}
.logo-container{
display: flex;
align-items: center;
}
.the-product{
font-size: 25px;
margin-left: 10px;
font-weight: 700;
font-family: "Honk";
}
#email-section{
margin-top: 100px;
}
input{
padding: 8px;
border-radius: 5px;
border: 1px solid var(--gray);
font-family: "Asul";
}
#submit{
background: linear-gradient(to right, #ef5350, #f48fb1, #7e57c2, #2196f3, #26c6da, #43a047, #eeff41, #f9a825, #ff5722);
color: var(--dark);
cursor: pointer;
font-family: "Asul";
}
section::before{
display: block;
content: " ";
margin-top: -100px;
height: 100px;
visibility: hidden;
pointer-events: none;
}
section{
margin: 40px 20px;
text-align: center;
}
h2{
font-family: "satisfy";
margin-bottom: 10px;
background: linear-gradient(to right, #ef5350, #f48fb1, #7e57c2, #2196f3, #26c6da, #43a047, #eeff41, #f9a825, #ff5722);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.icon{
background: linear-gradient(to right, #ef5350, #f48fb1, #7e57c2, #2196f3, #26c6da, #43a047, #eeff41, #f9a825, #ff5722);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-right: 30px;
}
#features{
text-align: left;
max-width: 800px;
margin: auto;
}
.feature{
display: flex;
align-items: center;
justify-content: center;
margin: 20px;
font-family: "Asul";
}
#video{
width: 100%;
}
.product-image{
width: 100%;
margin: auto;
height: 300px;
border: 1px solid var(--text);
border-radius: 10px 10px 10px 10px;
background-repeat: no-repeat;
background-size: cover;
}
.product1{
background-image: url(https://www.darngoodyarn.com/cdn/shop/products/24-color-acrylic-paint-set-eco-friendly-yarn-crochet-knit-boho-plus-size-womens-clothing-111092.jpg?v=1699893482&width=1080);
}
.product2{
background-image: url(https://i.etsystatic.com/13129235/r/il/ba7237/4617897826/il_1588xN.4617897826_5ukb.jpg)
}
.product3{
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQWkP9PfZnkDUbHWk95bSXrJwvDGUx7Mhiz7w&usqp=CAU)
}
.card{
background-color: var(--pale);
border-radius: 10px;
width: 90%;
margin: auto;
margin-bottom: 10px;
}
.inner-card{
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 10px;
}
.content{
font-family: "Asul";
color: var(--dark);
margin-bottom: 10px;
}
.flex{
display: flex;
align-items: center;
margin-bottom: 10px;
}
.main-price{
margin-right: 20px;
font-size: 30px;
font-family: "Satisfy";
color: var(--dark);
}
.old-price{
text-decoration: line-through;
color: var(--gray);
}
.type{
font-family: "Asul";
letter-spacing: 5px;
color: var(--dark);
text-transform: uppercase;
}
.header{
font-family: "Asul";
margin: 10px 0;
background: linear-gradient(to right, #ef5350, #f48fb1, #7e57c2, #2196f3, #26c6da, #43a047, #eeff41, #f9a825, #ff5722);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.add{
background: linear-gradient(to right, #ef5350, #f48fb1, #7e57c2, #2196f3, #26c6da, #43a047, #eeff41, #f9a825, #ff5722);
cursor: pointer;
padding: 15px;
border: none;
border-radius: 10px;
width: 100%;
color: var(--pale);
font-family: "Asul";
font-weight: 700;
margin-bottom: 10px;
}
@media only screen and (min-width: 600px){
#nav-bar{
flex-direction: row;
}
}
@media only screen and (450px < width < 600px){
.card{
font-size: 0.85 rem;
}
.product-image{
height: 400px;
}
}
@media only screen and (450px <= width) {
.card{
display: flex;
max-width: 525px;
}
.inner-card{
width: 300px;
padding: 20px;
}
.product-image{
width: 400px;
border-radius: 10px 0 0 10px;
}
@media only screen and (width >= 1000px){
#video{
width: 70%;
}
.product-cards{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36
Challenge Information:
Product Landing Page - Build a Product Landing Page