Scribd
Upload
5K views7 pages

Build A Product Landing Page

The document is a website for a product called Magic Wheel. It includes sections about features, how it works, and pricing. There are three wheel options available in different sizes and prices ranging from $699 to $1,499. A video demonstrates how the Magic Wheel works and it uses premium materials with fast shipping and quality assurance.

Uploaded by

juan castex
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5K views7 pages

Build A Product Landing Page

The document is a website for a product called Magic Wheel. It includes sections about features, how it works, and pricing. There are three wheel options available in different sizes and prices ranging from $699 to $1,499. A video demonstrates how the Magic Wheel works and it uses premium materials with fast shipping and quality assurance.

Uploaded by

juan castex
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 7

** 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>Magic Wheel</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>
<div id="page-wrapper">
<header id="header">
<div class="logo">
<img id="header-img" src="https://drive.google.com/uc?id=1kmQegCtW8FWs9-
fCirbr4Ao5DO_ZVM6k" alt="logo">
</div>
<nav id="nav-bar">
<ul>
<li><a class='nav-link' href="#Features">Features</a></li>
<li><a class='nav-link' href="#HowItWorks">How It
Works</a></li>
<li><a class='nav-link' href="#Pricing">Pricing</a></li>
</ul>

</nav>
</header>
</header>
<div class="container"></div>
<section id="hero">

<h1>Magic Wheel™️
</h1>
<form id='form' method="post" action="https://www.freecodecamp.com/email-
submit" >

<input id='email' name='email' type='email' placeholder="Enter your e-


mail address" required />

<input id='submit' class='btn' type="submit" id="submit"


value="Submit" />
</form>
</section>
<div class="container"></div>
<div class="container">
<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>Magic Wheel™️use the finest raw Materials. 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 recieve your Magic Wheel™️as soon as
possible. 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" aria-hidden="true"></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 your Magic Wheel™️.</p>
</div>
</div>

</section>
<div class="container"></div>
<section id="HowItWorks">
<iframe id='video' width="560" height="315"
src="https://www.youtube.com/embed/ZNAaI_zlI_c" title="YouTube video player"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media;
gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

</section>
<div class="container"></div>
<section id="Pricing">
<div class="box">
<div class="product">Classic</div>
<ul>
<li class="carac">Rodado: 26</li>
<li class="carac">Brake Pedal</li>
<li class="carac">Brake Light with Battery (CR-2032)</li>
<li class="carac">Load Max.: 120 Kg.</li>
</ul>
<h4 class="price">$ 1,499.-</h4>
<button class="btn">Buy Now!!</button>
</div>
<div class="box">
<div class="product">Teen</div>
<ul>
<li class="carac">Rodado: 24</li>
<li class="carac">Brake Pedal</li>
<li class="carac">Load Max.: 80 Kg.</li>
</ul>
<h4 class="price">$ 899.-</h4>
<button class="btn">Buy Now!!</button>
</div>
<div class="box">
<div class="product">Mini</div>
<ul>
<li class="carac">Rodado: 20</li>
<li class="carac">Brake Pedal</li>
<li class="carac">Load Max.: 50 Kg.</li>
<li class="carac">Vibrant Colors:</li>
</ul>
<div class="catalog">

<div id='paint' class="paint1"></div>


<div id='paint' class="paint2"></div>
<div id='paint' class="paint3"></div>
</div>
<h4 class="price">$ 699.-</h4>
<button class="btn">Buy Now!!</button>
</div>
</section>
<div class="container"></div>
<footer>
<div class="line"></div>
<p class="author">&copy; 2023<a href="http://www.drbiker.com">
DrBiKeR</a></p>
</footer>
</div>
</div>

</body>
</html>

** end of undefined **

** start of undefined **

@media(prefers-reduced-motion: no-preference){
* {
scroll-behavior: smooth;
}
}

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

#page-wrapper{
position: relative;
}

#header {
position: fixed;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 150px;
background-color: #203A43;
}

#header-img {
width: 128px;
height: 128px;
padding: 15px;
}
#nav-bar {
background: red;
}

#nav-bar li{
list-style: none;
}

a {
text-decoration: none;
}

nav > ul {
width: 35vw;
display: flex;
flex-direction: row;
justify-content: space-around;
}

.nav-link {
color:springgreen;
font-size: 30px;
font-weight: bold;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

.container {
padding-top: 60px
}

#hero{
display: relative;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 200px;
padding-top: 120px;
padding-bottom: 120px;
}

#hero > h1 {
font-size: 100px;
font-weight: bolder;
text-align: center;
padding: 10px;
font-family: cursive;
color: red;
}

#hero input[type='email']{
max-width: 275px;
width: 100%;
padding: 5px;
}

.btn {
max-width: 150px;
width: 100%;
height: 30px;
margin: 15px 0;
border: 0;
background-color: magenta;
border-radius: 5px;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 16px;
font-weight: bold;
}

#hero input[type='submit']:hover {
background-color: crimson;
transition: background-color 1s;
}

h1 {

margin-block-start: 0,83em;
margin-block-end: 0,83em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}

#features {
margin-top: 50px;
display: absolute;
}

.grid {
padding-top: 60px;
display: flex;
flex-direction: row;
}

.icon {
display: flex;
align-items: center;
justify-content: center;
color: red;
padding: 10px;
}

#HowItWorks {
display: flex;
align-items: center;
justify-content: center;
}

#Pricing {
display: flex;
flex-direction: row;
justify-content: center;
}

.box {
display: flex;

text-align: center;
align-items: center;
flex-direction: column;
width: calc(100% /3);
max-width: 300px;
margin: 20px;
border: 1px solid red;
border-radius: 5px;
}

.box ul {
padding: 10px;
}

.box li{
list-style: none;
font-family:'Courier New', Courier, monospace;
font-size: 18px;
font-weight: bold;

.product {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 24px;
background-color: #ddd;
color: red;
padding: 15px 0;
width: 100%;
text-transform: uppercase;
font-weight: 700;
border-radius: 5px 5px 0 0;
border-bottom: 1px solid red;
}

.catalog {
display: flex;
flex-direction: row;
align-content: center;
justify-content: center;
}

#paint {
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
width: 25px;
height: 25px;
margin: 5px;
border: 1px solid black;
border-radius: 5px;
}

.paint1 {
background-color: red;
}

.paint2 {
background-color: blue;
}

.paint3 {
background-color: green;
}

.price {

color: red;
font-size: 20px;
font-weight: bold;
padding-top: 10px;

.line {
width: 100%;
border-color: black;
border-style: solid;
border-width: 1px;
}

.author {
padding-top: 10px;
text-align: center;
}

** end of undefined **

You might also like