Scribd
Upload
754 views8 pages

B3

The document is an HTML and CSS code for a landing page focused on mechanical keyboards, featuring sections for a header, hero, features, how it works, pricing, and footer. It includes a form for email sign-up, a video embed, and multiple pricing options for different keyboard models. The CSS styles ensure a responsive design across various screen sizes.

Uploaded by

aksharadeepa853
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
754 views8 pages

B3

The document is an HTML and CSS code for a landing page focused on mechanical keyboards, featuring sections for a header, hero, features, how it works, pricing, and footer. It includes a form for email sign-up, a video embed, and multiple pricing options for different keyboard models. The CSS styles ensure a responsive design across various screen sizes.

Uploaded by

aksharadeepa853
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/ 8

** start of undefined **

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Mechanical Keyboard Landing Page" />
<title>Mechanical Keyboard</title>
<link rel="stylesheet" href="./styles.css" >
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/
all.min.css"
/>
</head>
<body>

<!-- HEADER -->


<header id="header">
<div id="logo">
<img
id="header-img"
src="https://lh3.googleusercontent.com/pw/AIL4fc-6syEsfP4GseETf4-
HHxdbPT_MaDHklH8od9744GN2HWuy8BpxsB6LbNxzyAt5k2k3vjYa5FCOfjQWPOigyKpDL1W_nJvl5E7uMg
EZqRBpKuh30jO4bk1rNwif15H2zMDd9hj75-XFvxkc1zaPRf6P=w1257-h707-s-no?authuser=0"
alt="mechanical keyboard"
>
<p>Mech Keyboards</p>
</div>
<nav id="nav-bar">
<a class="nav-link" href="#features">Features</a>
<a class="nav-link" href="#how-it-works">How It Works</a>
<a class="nav-link" href="#pricing">Pricing</a>
</nav>
</header>

<!-- HERO SECTION -->


<div class="hero">
<h1>Durable, Ergonomic Products</h1>
<form
id="form"
method="get"
action="https://www.freecodecamp.com/email-submit"
>
<input
id="email"
type="email"
name="email"
placeholder="Enter your email address"
>
<input
id="submit"
type="submit"
value="SIGN UP"
>
<form>
</div>
<!-- FEATURES SECTION -->
<section id="features">
<ul id="feature-list">
<li class="feature-items">
<i class="fa-solid fa-face-grin-stars feature-image"></i>
<div class="feature-text">
<h2 class="feature-heading">Exquisite Craftmanship</h2>
<p class="feature-description">
Crafted from top-tier materials, our keyboards offer longevity and a
premium feel.
</p>
</div>
</li>
<li class="feature-items">
<i class="fa-solid fa-truck feature-image"></i>
<div class="feature-text">
<h2 class="feature-heading">Swift Delivery</h2>
<p class="feature-description">
Rest assured. We make sure you receive your keyboards very quickly.
</p>
</div>
</li>
<li class="feature-items">
<i class="fa-solid fa-heart-circle-check feature-image"></i>
<div class="feature-text">
<h2 class="feature-heading">Guaranteed Quality</h2>
<p class="feature-description">
For every purchase you make, we make sure your keyboard undergoes
rigorous testing for a perfect typing experience
</p>
</div>
</li>
</ul>
</section>

<!-- HOW IT WORKS SECTION -->


<section id="how-it-works">
<iframe
id="video"
src="https://www.youtube.com/embed/eGXbCUXAKYs"
>
</iframe>
</section>

<!-- PRICING SECTION -->


<section id="pricing">
<ul id="pricing-list">
<li class="pricing-item">
<h2>BLUE AND WHITE</h2>
<p class="price">$140</p>
<ul class="price-details">
<li class="price-details-items">Lorem Ipsum<li>
<li class="price-details-items">Lorem Ipsum<li>
<li class="price-details-items">Lorem Ipsum Dolor<li>
<li class="price-details-items">Lorem Ipsum<li>
</ul>
<button class="select-btn">SELECT</button>
</li>
<li class="pricing-item">
<h2>WHITE AND ORANGE</h2>
<p class="price">$100</p>
<ul class="price-details">
<li class="price-details-items">Lorem Ipsum<li>
<li class="price-details-items">Lorem Ipsum<li>
<li class="price-details-items">Lorem Ipsum Dolor<li>
<li class="price-details-items">Lorem Ipsum<li>
</ul>
<button class="select-btn">SELECT</button>
</li>

<li class="pricing-item">
<h2>BLACK AND GOLD</h2>
<p class="price">$150</p>
<ul class="price-details">
<li class="price-details-items">Lorem Ipsum<li>
<li class="price-details-items">Lorem Ipsum<li>
<li class="price-details-items">Lorem Ipsum Dolor<li>
<li class="price-details-items">Lorem Ipsum<li>
</ul>
<button class="select-btn">SELECT</button>
</li>
</ul>
</section>

<footer>
<ul class="footer-list">
<li class="footer-items">
<a href="#">Privacy</a>
</li>
<li class="footer-items">
<a href="#">Terms</a>
</li>
<li class="footer-items">
<a href="#">Contact</a>
</li>
</ul>

<p>Copyright 2023, Mechanical Keyboards</p>


</footer>
</body>
</html>

** end of undefined **

** start of undefined **

@import url('https://fonts.googleapis.com/css2?
family=Lato:wght@100;300;400;700;900&display=swap');

* {
margin: 0;
padding: 0;
}

body {
font-family: lato, sans-serif;
background-color: #fefefe;
}

section {
margin-top: 75px;
}

ul {
list-style: none;
padding: 0;
}

/* HEADER */

#header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 5%;
position: fixed;
top: 0;
width: 90%;
background-color: #fefefe;
}

#header-img {
width: 100px;
height: 25px;
}

#logo {
display: flex;
align-items: center;
gap: 10px;
}

#logo p {
font-weight: bold;
font-size: 1.2rem;
}

.nav-link {
text-decoration: none;
color: black;
margin-right: 10px;
}

/* HERO SECTION */

.hero {
margin-top: 120px;
display: flex;
flex-direction: column;
align-items: center
}

h1 {
margin: 25px;
}
#form {
display: flex;
flex-direction: column;
}

#email {
width: 300px;
margin-bottom: 15px;
padding: 5px ;
}

#submit {
width: 150px;
margin: 0 auto;
padding: 7px 10px;
background-color: orange;
border: none;
font-weight: bold;
font-size: 16px;
}

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

/* FEATURES SECTION */

#features {
width: 95%;
max-width: 750px;
margin-left: auto;
margin-right: auto;
}

.feature-items {
margin-bottom: 50px;
display: flex;
align-items: center;
padding: 0 10px;
}

.feature-image {
color: orange;
font-size: 50px;
margin-right: 50px
}

.feature-heading {
margin: 0;
}

.feature-description {
margin: 2px 0;
}

/* HOW IT WORKS SECTION */


#how-it-works {
text-align: center;
}

#video {
aspect-ratio: 16/9;
width: 80%;
max-width: 600px;
border: none;
}

/* PRICING SECTION */

#pricing-list {
display: flex;
flex-direction: row;
justify-content: center;
max-width: 1000px;
margin: 0 auto;
}

.pricing-item {
border: 1px solid gray;
margin: 20px;
text-align: center;
width: 60%;
}

.pricing-item h2 {
font-size: 16px;
background-color: #ddd;
color: #010101;
margin: 0;
padding: 8px;
}

.price {
font-size: 24px;
margin: 15px;
font-weight: 900;
color: #090909;
}

.price-details-items {
margin-top: 10px;
}

.select-btn {
width: 100px;
margin-top: 30px;
margin-bottom: 15px;
background-color: orange;
border: none;
padding: 10px 15px;
}

/* FOOTER */

footer {
display: flex;
flex-direction: column;
align-items: flex-end;
background-color: #ddd;
margin-top: 20px;
padding: 15px 20px;
}

.footer-list {
display: flex;
}

footer li {
margin-left: 20px;
margin-bottom: 5px;
}

footer a {
text-decoration: none;
color: #191919
}

footer p {
font-size: 14px;
color: #505050;
}

/* MEDIA QUERIES @800PX */

@media only screen and (max-width: 800px) {


#pricing-list {
flex-direction: column;
align-items: center;
}

.pricing-item {
width: 45%;
}
}

/* MEDIA QUERIES @600PX */

@media only screen and (max-width: 600px) {


header {
flex-direction: column;
}

#nav-bar {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 15px;
}

.nav-link {
margin-bottom: 5px;
}

h1 {
margin-top: 50px;
}
}

/* MEDIA QUERIES @500PX */

@media only screen and (max-width: 500px) {


h1 {
text-align: center;
}

.feature-image {
display: none;
}

.feature-text {
text-align: center;
}

.pricing-item {
width: 50%;
}
}

** end of undefined **

You might also like