Scribd
Upload
5K views

Build A Product Landing Page

The document is a website for a company that handcrafts trombones. It includes sections about features, how it works, and pricing. The features section highlights premium materials, fast shipping, and quality assurance. The how it works section contains an embedded YouTube video. Pricing lists various trombone models ranging in price from $600 to $1200. Styling and layout are defined in an included CSS stylesheet.

Uploaded by

chennelry
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5K views

Build A Product Landing Page

The document is a website for a company that handcrafts trombones. It includes sections about features, how it works, and pricing. The features section highlights premium materials, fast shipping, and quality assurance. The how it works section contains an embedded YouTube video. Pricing lists various trombone models ranging in price from $600 to $1200. Styling and layout are defined in an included CSS stylesheet.

Uploaded by

chennelry
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

** start of undefined **

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css" />
<meta charset="UTF-8" />
<title>Original Trombones</title>
<header id="header">
<img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-
fcc/images/product-landing-page-logo.png" />
<nav id="nav-bar">
<ul>
<li><a href="#features" class="nav-link">FEAUTURES</a></li>
<li><a href="#how-it-works" class="nav-link">HOW IT WORKS</a></li>
<li><a href="#pricing" class="nav-link">PRICING</a></li>
</ul>
</nav>
</header>
</head>
<body>
<h1>Handcrafted, home-made masterpieces</h1>
<form id="form" class="add" action="https://www.freecodecamp.com/email-submit">
<input name="email" type="email" id="email" placeholder="Enter your email
address"></input><br />
<input type="submit" for="email" id="submit" label="submit" value="Get
Started"></input>
</form>
<div id="features" class="meow">
<div>
<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>
<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>
<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>
<div id="how-it-works" class="meow">
<iframe id="video" src="https://www.youtube.com/embed/y8Yv4pnO7qc"
title="Roman Carnival Overture Op. 9 for Five Trombones" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;
picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<div id="pricing" class="meow">
<div class="item">
<p class="item-name">TENOR TROMBONE</p>
<p class="price">$600</p>
<p class="item-desc">Lorem ipsum</p>
<p class="item-desc">Lorem ipsum</p>
<p class="item-desc">Lorem ipsum dolor</p>
<p class="item-desc">Lorem ipsum</p>
<p class="get"><a href=".com">Get</a></p>
</div>
<div class="item">
<p class="item-name">BASS TROMBONE</p>
<p class="price">$900</p>
<p class="item-desc">Lorem ipsum</p>
<p class="item-desc">Lorem ipsum</p>
<p class="item-desc">Lorem ipsum dolor</p>
<p class="item-desc">Lorem ipsum</p>
<p class="get"><a href=".com">Get</a></p>
</div>
<div class="item">
<p class="item-name">VALVE TROMBONE</p>
<p class="price">$1200</p>
<p class="item-desc">Lorem ipsum</p>
<p class="item-desc">Lorem ipsum dolor</p>
<p class="item-desc">Lorem ipsum</p>
<p class="item-desc">Lorem ipsum</p>
<p class="get"><a href=".com">Get</a></p>
</div>
</div>
</body>
</html>

** end of undefined **

** start of undefined **

* {
margin: 0;
padding: 0;
}

header {
height: 5%;
background-color: #E8871E;
padding: 20px;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
position: fixed;
top: 0;
left: 0
}

ul {
display: flex;
justify-content: space-around;
}

li {
list-style-type: none;
margin-left: 15px;
font-family: sans-serif;
letter-spacing: 2px;
}

a {
text-decoration: none;
background-color: #edb458;
padding: 5px;
color: black;

#header-img {
max-width: 30%;
margin: 0;
}

body {
background-color: #ebf5df;
margin-top: 130px;
}

h1 {
text-align: center;
font-family: Helvetica, sans-serif;
}

.add {
text-align: center;
margin-top: 20px;
}

#email {
width: 200px;
height: 25px;
text-align: center;
border: 1px solid #bad4aa
}

#submit {
background-color: #edb458;
border: 1px solid #E8871E;
padding: 5px;
margin-top: 10px;
margin-bottom: -20px;
}

#submit:hover{
background-color: #E8871E;
cursor: pointer;
}

#features {
width: 70%;
}

h2 {
margin-top: 20px;
font-family: Helvetica;
}

p {
font-family: sans-serif;
}
#how-it-works{
text-align: center;
}

iframe {
width: 560;
height: 315;
}

#pricing {
display: flex;
justify-content: space-around;
}

.item {
width: 30%;
text-align: center;
background-color: #bad4aa;
padding-bottom: 10px
}

.item-name {
font-weight: bold;
text-align: center;
background-color: #E8871E;
padding: 10px;
margin: 0;
}

.price {
font-weight: bold;
margin: 20px;
font-size: 1.3rem;
}

.item-desc {
margin: 5px;
}

.get {
margin: 20px;
padding: 5px;
background-color: #edb458;
border: 1px solid #E8871E;
}

.meow {
width: 70%;
margin: 0 auto;
margin-bottom: 20px;
padding-top: 15%
}

@media (max-width: 550px) {


li {
font-size: 0.6rem;
flex-wrap: wrap;
letter-spacing: 0;
}

iframe {
width: 100%;
height: auto;
}

#pricing {
display: block;
}

.item {
width: 100%;
margin-bottom: 20px;
}
}

** end of undefined **

You might also like