Tell us what’s happening:
#24 and #25 is where I am stuck on. I seem to have all of this in my code and I can’t seem to get it to pass. Can anyone help?
Your code so far
<!-- file: index.html -->
<!DOCTYPE>
<html lang="en">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<body>
<div id="container">
<header id="header">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<div id="image">
<div id="title">
<img id="header-img" alt="product logo thing" src="https://cdn4.iconfinder.com/data/icons/sheep/500/Animal_lamb_sheep_wool_lamb_1-512.png">
<h1 style="color: black">Just <span style="color:hsl(35, 90%, 50%)">OKR</span></h1>
</div>
</div>
<div>
<nav id="nav-bar">
<a class="nav-link" href="#features-anchor">FEATURES</a>
<a class="nav-link" href="#video-anchor">DEMO</a>
<a class="nav-link" href="#form">PLANS</a>
</nav>
</div>
</header>
<div id="main-body">
<p id="features-anchor"></p>
<div>
<h2>PRODUCT</h1>
</div>
<div id="feature-container">
<div class="features">
<h3>Top-Down Goals</h3>
<p>Individual contributors can set their own OKRs<br> </p>
</div>
<div class="features">
<h3>Alignment</h3>
<p>Align all company goals</p>
</div>
<div class="features">
<h3 id="video-anchor">Custom Metrics</h3>
<p>Customizable Objectives & Key Results</p>
</div>
</div>
<div id="video-wrapper">
<div>
<p>OKR Product Video Overview</p>
</div>
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/7sR-BowlNMg" frameborder="0" allowfullscreen></iframe>
</div>
<div id="models">
<div class="model-class">
<div class="model-name">
<h2>Small Businesses</h2>
</div>
<div class="model-description">
<p>+Early stage to small start ups<br>
+2 tiers goal alignment<br>
+Standard metrics</p>
</div>
<button type="submit" style="width:100%;font-weigth:lighter">$2.99/user</button>
</div>
<div class="model-class">
<div class="model-name">
<h2>Mid Market</h2>
</div>
<div class="model-description">
<p>+Late stage start ups to mid size companies<br>
+5 tier goal alignment<br>
+More customizable metrics and analytics dashboard</p>
</div>
<button type="submit" style="width:100%;font-weigth:lighter">$4.99/user</button>
</div>
<div class="model-class">
<div class="model-name">
<h2>Enterprise</h2>
</div>
<div class="model-description">
<p>+ Large companie sizes<br>
+Multiple tiers of goal alignment<br>
+ Custom metrics and analytics </p>
</div>
<button type="submit" style="width:100%;font-weigth:lighter">Custom pricing</button>
</div>
</div>
<div id="info">
<h3>1-Week Free Trial</h3>
<form id="form" action="https://www.freecodecamp.com/email-submit" method="get">
<label for="email" id="email-label"><input id="email" name="email" type="email" placeholder="Enter your email"></input></label>
<div id="button-container">
<input type="submit" id="submit" value="Start Now!"></input>
</div>
</form>
</div>
</div>
<footer class="text-center">
<hr>
<p id="bottom_text"> <a href=" https://codepen.io/alexsjcho/" target="_blank">Alex Cho 2018 </a>| <a
href="https://alexsjcho.com" target="_blank">Blog</a> | <a href="https://www.linkedin.com/in/" target="_blank"><i class="fa fa-linkedin-square"></i></a> | <a
href="https://github.com/alexsjcho" target="_blank"><i
class="fa fa-github-square"></i></a> | <a
href="https://www.instagram.com/alexsjch0/" target="_blank"><i class="fa fa-instagram"></i></a></p>
</footer>
</div>
</div>
</body>
</html>
/* file: styles.css */
body{
background:linear-gradient(75deg, #C0C0C0, #ffb499);
margin: 0px;
font-family: "Open Sans", sans-serif;
}
#image{
display: flex;
flex-flow: row wrap;
flex: 1;
}
#image > div{
background-color: hsl(0,0%,80%);
display: flex;
flex-wrap: wrap;
flex: 1;
justify-content: flex-start;
}
#image > div >img{
max-height: 100px;
max-width: 100px;
}
#container{
display: flex;
flex-flow: column wrap;
}
#main-body{
width: 100%;
margin: auto;
margin-top: 50px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
}
a{
font-family: "Open Sans", sans-serif;
color: #FFF;
text-decoration: none;
}
a:hover{
animation-name: color-change-nav;
animation-duration: 500ms;
animation-fill-mode: forwards;
}
#features-anchor{
margin-bottom: 100px;
}
#header{
width: 100%;
position: fixed;
background-color: hsl(240, 1%, 20%);
color: #FFF;
display: flex;
flex-wrap: wrap;
}
#header > div{
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
}
#header > div > nav{
width: 40%;
display: flex;
justify-content: space-around;
}
#feature-container{
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
.features{
margin: 0px 20px 50px 20px;
width: 300px;
margin-bottom: 100px;
display: inline-flex;
flex-wrap: wrap;
align-content: flex-start;
justify-content: center;
text-align: center;
}
.features > p{
width: 100%;
}
.features > h3{
width: 100%;
border-bottom: 2px solid hsl(35, 100%, 60%);
background-color: hsl(0, 0%, 90%);
}
#video-wrapper{
width: 100%;
margin: auto;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
#button-container{
margin-top: 25px;
display: flex;
justify-content: center;
}
#submit{
background-color: hsl(196, 100%, 47%);
border: 1px solid hsl(196, 100%, 47%);
text-transform: uppercase;
font-weight: bold;
font-family: "Open Sans", sans-serif;
}
#submit:hover{
animation-name: color-change-cyan;
animation-duration: 1s;
animation-fill-mode: forwards;
}
button{
background-color: hsl(35, 100%, 60%);
border: 1px solid hsl(35, 100%, 60%);
text-transform: uppercase;
font-family: "Open Sans", sans-serif;
}
button:hover{
animation-name: color-change-orange;
animation-duration: 1s;
animation-fill-mode: forwards;
}
#info{
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 100px;
}
#video-wrapper > div{
width: 100%;
display: flex;
justify-content: center;
}
#models{
margin-top: 100px;
margin-bottom: 100px;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
.model-class{
width: 300px;
min-width: 100px;
background-color: #FFF;
margin: 0px 20px 0px 20px;
border: 1px solid black;
flex-wrap: wrap;
justify-content: space-around;
flex: 1;
}
.model-name{
width: 100%;
background-color: hsl(0,0%,80%);
border-bottom: 1px solid black;
display: flex;
justify-content: center;
}
.model-description{
display: flex;
line-height: 40px;
justify-content: center;
}
footer{
width: 100%;
height: 45px;
background-color: hsl(240, 1%, 20%);
display: flex;
align-items: center;
}
footer > div{
width: 100%;
}
footer > div > nav{
width: 40%;
display: flex;
justify-content: space-around;
}
footer > div > nav > a{
border-right: 2px solid hsla(240, 1%, 25%, 1);
margin-right: 5px;
}
#signature{
width: 100%;
margin-right: 10px;
display: flex;
color: #FFF;
flex-direction: row;
font-size: 0.8em;
justify-content: flex-end;
}
@keyframes color-change-orange{
100%{
background-color: hsl(35, 100%, 50%);
}
}
@keyframes color-change-cyan{
100%{
background-color: hsl(177, 100%, 47%);
border-color: hsl(177, 100%, 47%);
}
}
@keyframes color-change-nav{
100%{
background-color: hsl(240, 1%, 25%);
}
}
@media (max-width: 1000px){
.model-class{
min-width: 300px;
max-width: 300px;
margin-top: 20px;
}
footer > div > nav{
width: 60%;
}
#header > div > nav{
width: 100%;
}
}
@media (max-width: 700px){
.model-class{
margin-top: 20px;
}
footer > div > nav{
width: 80%;
}
}
@media (max-width: 500px){
footer > div > nav{
width: 100%;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.3 Safari/605.1.15
Challenge Information:
Product Landing Page - Build a Product Landing Page