Tell us what’s happening:
I’m basically trying to end all the steps for the Build a Product Landing Page and I keep missing Your Product Landing Page should use at least one media query step, even though I have a Iframe tag with his respective id =“video” already in the code.
Your code so far
HTML:
<body>
<header id="header">
<img id="header-img" src="https://placeit-assets1.s3-accelerate.amazonaws.com/custom-pages/make-a-basketball-logo/sports-logo-template-for-a-basketball-tournament-2703e-1024x1024.png" alt="amazing hoopers logo">
<nav id="nav-bar">
<ul>
<li>
<a class="nav-link" href="#lider"> El Lider </a>
</li>
<li><a class="nav-link" href="#jugandoBaloncesto"> A quien se parece jugando baloncesto </a>
</li>
<li> <a class="nav-link" href="#precio"> Precio
</a>
</li>
</ul>
</nav>
</header>
<section id="heroSection">
<h2> Los mejores, entrenados por el mejor. </h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" name="email" type="email" placeholder="Entre su correo aqui" required />
<input id="submit" type="submit" value="Let's hop!">
</form>
</section>
<div>
<section id="lider">
<div class="grid">
<div class="icon">
<img src="https://cdn-icons-png.flaticon.com/512/860/860454.png" alt="leadership icon">
</div>
<div class="desc">
<h2> El Mejor </h2>
<p> El lider siendo el mejor liderando a las personas siendo los mejores. </p>
</div>
<div>
</div>
</section>
<section
id="jugandoBaloncesto">
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/Cmx9AHjKUMk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
<section id="precio">
<div class="product" id="small">
<div class="level"> Small League </div>
<h2>$5000</h2>
<ol>
<li>Clidip codops</li>
<li>ododpop cosp</li>
<li> ringa adep </li>
<li> yinga rops</li>
</ol>
<button class="btn"> Select </button>
</div>
<div class="product" id="mid">
<div class= "level"> Mid league </div>
<h2>$1000</h2>
<ol>
<li>Clidip codops</li>
<li>ododpop cosp</li>
<li> ringa adep </li>
<li> yinga rops</li>
</ol>
<button class="btn"> select </button>
</div>
<div class="product" id="high">
<div class="level"> High class </div>
<h2> $15,000 </h2>
<ol>
<li>Clidip codops</li>
<li>ododpop cosp</li>
<li> <b> Un autografo del super lider </b> </li>
<li> yinga rops</li>
</ol>
<button class="btn"> select </button>
</div>
</section>
<footer>
<span> Copyright 2022, El lider
</span>
</footer>
</div>
</body>
CSS:
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#header
{
position:fixed;
display: flex;
width: 100%
top: 0;
left: 0;
padding: 0px 20px;
justify-content: space-around;
align-items: right;
}
#header-img
{
position:static;
width: 35%;
height:35%;
max-width: 300px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin: -25px;
}
#nav-bar
{
margin-top: 10px;
width: 100%;
display: flex;
flex-direction: column;
align-items: left;
text-align:left;
padding: 20px;
font-size: 20px;
}
nav
{
display: block;
}
.nav-link
{
color: inherit;
text-decoration:none;
}
li
{
list-style: none;
}
ol {
list-style: none;
}
}
li:hover
{
background-color: #F0F8FF;
color:#ff8000;
}
#heroSection
{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 400px;
}
.icon img
{
width: 50px;
height: 50px;
margin: 0px 0px 0px 0px;
align-items: center;
justify-content: center;
flex-direction: column;
}
.desc
{
display: flex;
flex-direction: column;
justify-content: center;
padding: 5px;
height: 125px;
width: 80vw;
}
#video
{
position: center;
}
#form
{
}
#email
{
}
#precio
{
margin: 50px 0 0 0px;
display: flex;
flex-direction: column;
justify-content: center;
}
.product
{
display:flex;
flex-direction: column;
width: calc(100%/3)
@media (max-width: 800px)
.product
{
max-width:300px;
width: 100%;
margin: 0 auto;
margin-bottom: 10px
}
align-items:center;
border: 1px solid #000;
text-align: center;
}
.level
{
background-color: #ddd;
width: 100%;
color: #000;
padding: 15px 0;
text-tranformation: uppercase;
weight: 800;
}
.btn
{
padding: 0 20px;
height: 40px;
font-size: 1em;
background-color: #ff8000;
}
.btn:hover
{
background-color: red;
transition: background-color 2s;
}
#submit
{
border-radius: 10px;
background-color: #ff8c1a;
font-size: 1em;
font-weight: 400;
padding: 0 10px;
}
#submit:hover
{
background-color: red;
transition: background-color 2s;
}
footer
{
margin-top: 30px;
background-color: #ddd;
padding: 20px;
}
Extra: I would also appreciate any helps regarding the header since the position is fixed, but it’s still overlapping the body content once I scroll down.
Thanks in advance~ !
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.64 Safari/537.36 Edg/101.0.1210.47
Challenge: Build a Product Landing Page
Link to the challenge:
