Build a Product Landing Page

** start of undefined **
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Landing Page</title>
<link rel="stylesheet" href="styles.css">
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-
50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous"
/>
</head>
<body>
<header id="header">
<div class="logo">
<img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-
fcc/images/product-landing-page-logo.png" alt="Original Trombones Logo">
</div>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#how_it_works">How It Works</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
</header>
<main>
<section id="hero">
<h2>Handcrafted, home-made masterpieces</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" placeholder="Enter your email address" type="email"
name="email" required>
<input id="submit" type="submit" value="GET STARTED" class="btn">
</form>
</section>
<section id="features">
<div class="grid">
<div class="icon"><i class="fa fa-3x 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="grid">
<div class="icon"><i class="fa fa-3x fa-truck"></i></div>
<div class="desc">
<h2>Fast Shipping</h2>
<p>We make sure you receive 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="grid">
<div class="icon"><i class="fa fa-3x 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.</p>
</div>
</div>
</section>
<section id="how_it_works">
<iframe id="video" height="240"
src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?
rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</section>
<section id="pricing">
<div class="product" id="tenor">
<h2>Tenor Trombone</h2>
<h3>$600</h3>
<ul>
<li>Lorem ipsum.</li>
<li>Lorem ipsum dolor.</li>
</ul>
<button class="btn">Select</button>
</div>
<div class="product" id="bass">
<h2>Bass Trombone</h2>
<h3>$900</h3>
<ul>
</ul>
</div>
<div class="product" id="valve">
<h2>Valve Trombone</h2>
<h3>$1200</h3>
<ul>
<li>Plays similar to a Trumpet</li>
<li>Great for Jazz Bands</li>
</ul>
</div>
</section>
</main>
<footer>
<ul>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Contact</a></li>
</ul>
<p>© 2016 Original Trombones</p>
</footer>
</body>
</html>
** end of undefined **
** start of undefined **
/* General Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Raleway', sans-serif;
line-height: 1.6;
background-color: #f4f4f4;
}
/* Header Styles */
header {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: white;
padding: 10px 20px;
z-index: 1000;
}
#header-img {
height: 50px;
}
#nav-bar ul {
display: flex;
list-style: none;
}
#nav-bar li {
margin: 0 10px;
}
.nav-link {
color: white;
text-decoration: none;
}
.nav-link:hover {
text-decoration: underline;
}
/* Hero Section */
#hero {
margin-top: 70px; /* Add space for fixed header */
text-align: center;
padding: 50px 20px;
background-color: #ff7f50;
}
#form {
margin-top: 20px;
}
input[type="email"],
input[type="submit"] {
padding: 10px;
margin: 5px 0;
width: 80%;
}
/* Features Section */
#features {
padding: 20px;
}
.grid {
display: flex;
margin-bottom: 20px;
}
.icon {
margin-right: 20px;
}
/* Pricing Section */
#pricing {
padding: 20px;
text-align: center;
}
.product {
margin: 20px;
padding: 20px;
border: 1px solid #ccc;
}
/* Footer */
footer {
text-align: center;
padding: 20px;
background-color: #333;
color: white;
}
footer ul {
list-style: none;
display: flex;
justify-content: center;
margin-bottom: 10px;
}
footer ul li {
margin: 0 10px;
}
footer ul a {
color: white;
text-decoration: none;
}
footer ul a:hover {
text-decoration: underline;
}
/* Media Query for Responsive Design */

@media (max-width: 768px) {
#nav-bar ul {
flex-direction: column;
}
#nav-bar li {
margin: 5px 0;
}
#hero {
padding: 20px 10px;
}
.grid {
flex-direction: column;
text-align: center;
}
.icon {
margin: 0 0 10px 0;
}
.product {
margin: 10px 0;
}
}
** end of undefined **

Build a Product Landing Page

Uploaded by

Copyright:

Available Formats

Build a Product Landing Page

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Build a Product Landing Page

Uploaded by

Copyright:

Available Formats

start of undefined

/* Media Query for Responsive Design */

You might also like