Scribd
Upload
5K views

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
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 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
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