-
Your Product Landing Page should use at least one media query.
-
Failed:Your Product Landing Page should use CSS Flexbox at least once.
I have browsed the forum and notice others have had the same issue but I dont understand the solved comments.
`<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scotties Socks</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id="header">
<h1>Scotties Socks</h1>
<div class="gallery" class='flex-container'>
<img id='header-img' src='https://www.corgisocks.com/cdn/shop/files/women-s-corgi-dog-cotton-socks-corgi-socks-4_963965ac-b5a8-43df-b379-7ec855a062ea.jpg?v=1706536777'alt='corgi_socks'></img>
<img id='header-img' src='https://www.corgisocks.com/cdn/shop/files/women-s-corgi-dog-cotton-socks-corgi-socks-4_963965ac-b5a8-43df-b379-7ec855a062ea.jpg?v=1706536777'alt='corgi_socks'> </img>
<img id='header-img' src='https://www.corgisocks.com/cdn/shop/files/women-s-corgi-dog-cotton-socks-corgi-socks-4_963965ac-b5a8-43df-b379-7ec855a062ea.jpg?v=1706536777'alt='corgi_socks'></img>
<img id='header-img' src='https://www.corgisocks.com/cdn/shop/files/women-s-corgi-dog-cotton-socks-corgi-socks-4_963965ac-b5a8-43df-b379-7ec855a062ea.jpg?v=1706536777'alt='corgi_socks'></img>
</div>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#Scotties_Socks">Scotties Socks</a></li>
<li><a class="nav-link"id='education' href="#education">Education</a></li>
<li><a class='nav-link' id='offers' href='#offers'>The Offer</a></li></ul>
</nav>
</header>
<main id='main-doc'>
<title>Scotties Socks</title>
<section id="Scotties_Socks">
<h1>The socks</h1>
<p>Scotties Socks where designed to be completely the same as any other pair of socks, exept we "solely" use the image of the Scottie dog. We pride ourselves on being highly detailed to provied the best product available.</p>
<h1>Education</h1>
<p>We offer guidance of on how to care for and train your Scottie dog.</p>
<h1>The Offer</h1>
<p>Our subscription offers help get YOU the customer the best value for money. Our sponsors understand that most of Scotties Socks customers have some sort of ties to the best dog around so are able to offer exclusive prices for YOU.</p>
</section>
<video id="video" src="https://www.google.co.uk/url?sa=t&rct=j&q=&esrc=s&source=video&cd=&cad=rja&uact=8&ved=2ahUKEwiIipf-1ZmFAxWkQEEAHVLjAF0QtwJ6BAgPEAI&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Db8nnplEkdH0&usg=AOvVaw2KHNi2vRrHMORDSFwE6-9y&opi=89978449"></video>
<h1>Subcribe to our newsletter</h1>
<p>Subscribing to our news letter brings the latest and greatest offers to you inbox!
<div class='email'>
<form id='form' action='https://www.freecodecamp.com/email-submit'>
<input id ="email" name="email" type="email" placeholder="Email">
<input id="submit" type="submit">
</div>
</main>
</body>`
.flex-container {
display: flex;
flex-wrap: wrap;
}
header {
position: fixed;
z-index: 1;
width: auto;
}
h1 {
text-align: center;
text-transform: uppercase;
padding: 32px;
background-color: #0a0a23;
color: #fff;
border-bottom: 4px solid red;
}
header img {
width: 70px;
height: 60px;
left: 20rem;
}
body {
margin: 10;
font-family: sans-serif;
background: #f5f6f7;
position: relative;
}
.gallery {
display: flexbox;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 200px;
max-width: 1400px;
margin: 0 auto;
padding: 20px 10px;
}
.gallery img {
width: 20%;
max-width: 350px;
height: 100px;
object-fit: cover;
border-radius: 50px;
}
.email {
text-align: center;
}
Could someone have a look at my Code and point me in the right direction please. and on a side note, do you know how I fix my header and page scrolling, although that part passes the test it does look/work right.