<head>
<script src="https://kit.fontawesome.com/c253558678.js" crossorigin="anonymous"></script>
<title>Landing Page</title>
<link rel="stylesheet" href="landingpage.css">
</head>
<body>
<header id="header">
<div id="navigation">
<div id="logo">
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png">
</div>
<nav id="nav-bar">
<ul>
<li><a href="#features">Features</a></li>
<li><a href="#video">How it Works</a></li>
<li><a href="#pricing">Pricing</a></li>
</ul>
</nav>
</div>
</header>
<div id="container">
<div id="subscription">
<h3 id="subscribe">Handcrafted, home-made masterpieces</h3>
<form class="form">
<input type="email" placeholder="E-mail" id="email" required><br />
<button id="submit">Get Started</button>
</form>
</div>
<div id="features" class="features-container">
<div class="row">
<div class="icons">
<i class="fas fa-fire"></i>
</div>
<div class="desc">
<h2>
Premium Materials
</h2>
<p>
Our trombones use the shiniest brass which is sourced locally. This
will increase the longevity of your purchase.
</p>
</div>
</div>
<div class="row">
<div class="icons">
<i class="fas fa-shipping-fast"></i>
</div>
<div class="desc">
<h2>
Fast Shipping
</h2>
<p>
We make sure you recieve your trombone as soon as we have finished making it.
We also provide free returns if you are not satisfied.
</p>
</div>
</div>
<div class="row">
<div class="icons">
<i class="fas fa-battery-full"></i>
</div>
<div class="desc">
<h2>
Quality Assurance
</h2>
<p>
For every purchase you make, we will ensure there are no damages or faults and
we will check and test the pitch of your instrument.
</div>
</div>
<div id="video" class="video" style="text-align: center;margin-top: 20px;">
<iframe width="560" height="315" src="https://www.youtube.com/embed/65JrtwtTOdc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div>
</div>
<div id="pricing" class="pricing">
<div class="block">
<h5>Bass</h5>
<h4>$600</h4>
<h6>Lorem ipsum</h6>
<h6>Lorem ipsum</h6>
<h6>Lorem ipsum</h6>
<button class="submit">SELECT</button>
</div>
<div class="block">
<h5>Valve</h5>
<h4>$900</h4>
<h6>Lorem ipsum</h6>
<h6>Lorem ipsum</h6>
<h6>Lorem ipsum</h6>
<button class="submit">SELECT</button>
</div>
<div class="block">
<h5>Tenor</h5>
<h4>$1200</h4>
<h6>Lorem ipsum</h6>
<h6>Lorem ipsum</h6>
<h6>Lorem ipsum</h6>
<button class="submit">SELECT</button>
</div>
</div>
<footer style="background-color: #dddddd;height: 50px;text-align: right;padding: 8px;">
<nav id="nav-bar">
<ul>
<li><a href="#features">Privacy</a></li>
<li><a href="#how">Terms </a></li>
<li><a href="#pricing">Contact</a></li>
</ul>
</nav>
</footer>
</body>
body{
padding: 0%;
margin: 0%;
font-family: open sans;
background-color: #eeeeee;
}
#container{
height: max-content;
width: 80vw;
margin-left: 10%;
}
#header{
overflow: hidden;
}
#navigation{
display: flex;
width: 100%;
align-items: center;
background-color: #fff;
position: fixed;
background-color: #eeeeee
}
#logo{
flex:2;
}
img{
height: 33px;
width: 250px;
margin-top: 1rem;
margin-left: 3rem;
}
#nav-bar{
flex: 1;
flex-direction: row;
}
li{
list-style-type: none;
display: inline;
}
a{
text-decoration: none;
padding: 25px;
color: black;
}
a:visited{
color: black;
}
a:hover{
color:darkorange;
}
#subscription{
margin-top: 30px;
padding: 5px;
text-align: center;
}
h3{
font-size: 1.5rem;
margin-bottom: 10px;
}
#email{
margin: 0%;
width: 300px;
height: 18px;
border: 1.5px solid black;
border-radius: 2px;
padding: 5px;
font-family: open sans;
}
button{
border: none;
background-color: rgba(255, 255, 0, 0.61);
padding: 10px;
border-radius: 5px;
font-family: open sans;
font-size: 1rem;
margin-top: 10px;
font-weight: 700;
}
button:hover{
background-color: darkorange;
cursor: pointer;
}
.features-container{
margin-top: 80px;
display: flex;
flex-direction: column;
}
i{
color: darkorange;
font-size: 2.5rem;
}
.grid{
display: flex;
}
.row{
display: flex;
flex-direction: row;
}
.icons{
flex:0.05;
display: flex;
padding: 25px;
}
.desc{
flex:1;
padding: 30px;
}
h2{
margin: 0px;
padding: 0px;
line-height: 0;
}
.pricing{
display: flex;
}
.block{
flex:1;
text-align: center;
border: 1px solid #000;
margin: 10px;
height: max-content;
padding-bottom: 5px;
}
h5{
background-color: #dddddd;
padding: 10px;
font-size: 1.25rem;
margin: 0px;
}
h4{
font-size: 1.1rem;
font-weight: 400;
}
h6{
font-size: 1rem;
margin: 8px;
}
@media(max-width:1220px){
.pricing{
display: block;
}
iframe{
width: 400px;
height: 250px;
}
#subscription{
margin-top: 130px;
}
h2{
font-size: 18px;
}
#navigation{
flex-direction: column;
}
li{
display: block;
}
}
@media(max-width:1024px){
li{
display: inline;
}
}
@media(max-width:400px){
h2{
font-size: 14px;
}
p{
font-size: 12px;
}
#email{
width: 200px ;
}
i{
font-size: 2rem;
}
iframe{
width: 300px;
height: 200px;
}
#navigation{
flex-direction: column;
}
li{
display: block;
}
#subscription{
margin-top: 130px;
}
h5{
background-color: #dddddd;
padding: 10px;
font-size: 1.25rem;
margin: 0px;
}
h4{
font-size: 1rem;
font-weight: 400;
}
h6{
font-size: .9rem;
margin: 8px;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.