Build a Landing Page for practice using html and css
The working demo and the repository of the project is here:
https://abhishek-singh77.github.io/Yoga-instructor-landing-page/
https://github.com/abhishek-singh77/Yoga-instructor-landing-page
Now let's start:
Download the images from the above repository and add it in your workspace.
Now create two files in the same directory index.html and style.css
Here's the HTML part:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
href="https://fonts.googleapis.com/css?family=Lato:300,400,700"
rel="stylesheet"
/>
<link
href="https://unpkg.com/ionicons@4.4.8/dist/css/ionicons.min.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Product Landing Page</title>
</head>
<body>
<header id="header">
<div class="logo">
<img id="header-img" src="https://png.pngtree.com/png-clipart/20190604/original/pngtree-creative-company-logo-png-image_1420804.jpg" alt="bicycle logo" />
<h1>Yoga.</h1>
</div>
<nav id="nav-bar">
<ul class="nav-list">
<li><a href="#features" class="nav-link">Features</a></li>
<li><a href="#products" class="nav-link">Products</a></li>
<li><a href="#showcase" class="nav-link">Showcase</a></li>
</ul>
</nav>
</header>
<section class="banner">
<div>
<h2>Lets do Yoga together.</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input
type="email"
id="email"
name="email"
placeholder="Enter your email"
required
/>
<input type="submit" id="submit" value="Get started" />
</form>
</div>
</section>
<main>
<section id="features">
<div class="feature-box">
<i class="icon ion-ios-bicycle"></i>
<h3>A Better Body Image</h3>
<p>
Yoga develops inner awareness. It focuses your attention on your body's abilities at the present moment. It helps develop
breath and strength of mind and body. It's not about physical appearance.
</p>
</div>
<div class="feature-box">
<i class="icon ion-ios-bicycle"></i>
<h3>Becoming a Mindful Eater</h3>
<p>
Mindfulness refers to focusing your attention on what you are experiencing
in the present moment without judging yourself.Practicing yoga has been
shown to increase mindfulness not just in class, but in other areas of
a person's life.
</p>
</div>
<div class="feature-box">
<i class="icon ion-ios-bicycle"></i>
<h3>Cardiovascular Benefits</h3>
<p>
People who practice yoga and are mindful eaters are more in tune with their bodies.
They may be more sensitive to hunger cues and feelings of fullness.
</p>
</div>
<div class="feature-box">
<i class="icon ion-ios-bicycle"></i>
<h3>Enhancing Fitness</h3>
<p>
Yoga is known for its ability to soothe tension and anxiety in the mind and body.
But it can also have an impact on a person's exercise capacity.
</p>
</div>
</section>
<section id="showcase">
<p>Watch this video on how this man rambo our bicycle</p>
<iframe
id="video"
width="560"
height="315"
src="https://youtu.be/yLtV80mATGw"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</section>
<section id="products">
<div id="flex-container">
<div class="prod-box">
<h3>Begginer Instructor</h3>
<img src="https://static01.nyt.com/images/2016/12/02/well/move/yoga_body_images-slide-LGN0/yoga_body_images-slide-LGN0-blog480.jpg" alt="bicycle logo" />
<div class="price-tag">
<p class="only">Child's Pose</p>
<p class="price">Do it: When you want to get a nice gentle stretch through your neck spine and hips.</p>
<button>Try it</button>
</div>
</div>
<div class="prod-box">
<h3>Intermidiate Instructor</h3>
<img src="https://static01.nyt.com/images/2016/12/02/well/move/yoga_body_images-slide-ZRO9/yoga_body_images-slide-ZRO9-blog480.jpg" alt="bicycle logo" />
<div class="price-tag">
<p class="only">Downward Facing Dog</p>
<p class="price">Downward-facing dog strengthens the arms, shoulders and back while stretching the hamstrings, calves and arches of your feet. It can also help relieve back pain.</p>
<button>Try it</button>
</div>
</div>
<div class="prod-box">
<h3>Advanced Instructor</h3>
<img src="https://static01.nyt.com/images/2016/12/02/well/move/yoga_body_images-slide-NMNW/yoga_body_images-slide-NMNW-blog480.jpg" alt="bicycle logo" />
<div class="price-tag">
<p class="only">Plank Pose</p>
<p class="price">A commonly seen exercise, plank helps build strength in the core, shoulders, arms and legs..</p>
<button>Try it</button>
</div>
</div>
</div>
</section>
</main>
<footer>
<div>
<ul>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Contact</a></li>
</ul>
<p>© Yoga and wellnes</p>
</div>
<p>
Coded by :
<a href="https://www.linkedin.com/in/abhisheksingh772000/" target="_blank">Abhishek Singh</a>
</p>
</footer>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>
</html>
And now for the css
:root {
--color-primary: #3faf8a;
--color-green-dark: #28b485;
--color-green-light: #47cf73;
--color-white: #fff;
--color-gray: #f7f7f7;
--color-black: rgb(194, 193, 192);
}
* {
margin: 0;
padding: 0;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
font-size: 62.5%;
box-sizing: inherit;
}
body {
font-size: 1.5rem;
padding: 0 3rem;
font-family: 'Lato', sans-serif;
color: #777;
}
#features,
#showcase,
#products {
padding: 4.5rem 0;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 3rem;
right: 3rem;
}
.logo {
display: flex;
align-items: center;
}
#header-img {
max-width: 100%;
height: 6rem;
border-radius: 50%;
margin: 0.3rem;
}
h1 {
color: #2990ff;
color: var(--color-primary);
text-transform: uppercase;
font-size: 2.5rem;
}
ul {
list-style: none;
}
.nav-list {
display: flex;
}
.nav-link {
display: inline-block;
margin: 1.2rem;
text-decoration: none;
color: #2990ff;
color: var(--color-primary);
border-bottom: 2px solid transparent;
transition: all 0.8s;
}
.nav-link:hover {
border-bottom: 2px solid #2990ff;
border-bottom: 2px solid var(--color-primary);
}
.banner {
height: 70vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-image:url(https://s01.sgp1.cdn.digitaloceanspaces.com/article/122276-qhjhmgddsm-1561042147.jpg);
background-size: cover;
background-position: center;
}
h2 {
margin-top: 5rem;
margin-bottom: 1.8rem;
text-transform: uppercase;
color: #fff;
color: var(--color-white);
letter-spacing: 2px;
font-size: 4.5rem;
font-weight: 400;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1);
}
#form input {
padding: 1rem;
font-family: inherit;
border: 1px solid transparent;
font-size: 1.6rem;
border-radius: 0.3rem;
}
#submit {
background-color: #28b485;
background-color: var(--color-green-dark);
color: #fff;
color: var(--color-white);
border: 1px solid #28b485;
border: 1px solid var(--color-green-dark);
border-radius: 0.3rem;
font-family: inherit;
font-size: 1.6rem;
}
#features {
display: flex;
background: #f7f7f7;
background: var(--color-gray);
}
/*feature-box*/
.feature-box {
background-color: rgba(255, 255, 255, 0.7);
text-align: center;
padding: 2.5rem;
box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.15);
margin: 2rem;
border-radius: 0.5rem;
width: calc(100% / 4);
}
.feature-box .icon {
font-size: 6rem;
color: #2990ff;
color: var(--color-primary);
display: inline-block;
margin-bottom: 0.5rem;
}
.feature-box h3 {
font-size: 1.7rem;
text-transform: uppercase;
margin-bottom: 2rem;
}
.feature-box p {
line-height: 1.45;
}
/* showcase */
#showcase {
text-align: center;
}
#showcase p {
margin: 2rem auto 4rem auto;
text-transform: uppercase;
font-weight: 700;
}
#video {
max-width: 100%;
}
/* products */
#products {
background: #f7f7f7;
background: var(--color-gray);
display: flex;
justify-content: center;
align-items: center;
}
.prod-box {
background-color: #fff;
background-color: var(--color-white);
box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, 0.15);
margin: 2rem;
text-align: center;
border-radius: 1rem;
}
.prod-box h3 {
padding: 1.5rem;
font-weight: 300;
font-size: 2.1rem;
text-transform: uppercase;
color: #fff;
color: var(--color-white);
background-color: #2990ff;
background-color: var(--color-primary);
}
.prod-box .price-tag {
background-color: #2990ff;
background-color: var(--color-primary);
color: #fff;
color: var(--color-white);
padding: 2rem 0;
}
.only {
font-size: 1.4rem;
text-transform: uppercase;
margin-bottom: 1rem;
}
.price {
font-size: 3rem;
font-weight: 300;
margin-bottom: 1.5rem;
}
.prod-box button {
padding: 1rem 2rem;
background-color: #47cf73;
background-color: var(--color-green-light);
text-transform: uppercase;
border: none;
color: #fff;
color: var(--color-white);
box-shadow: 0 0 2rem rgba(0, 0, 0, 0.3);
border-radius: 5rem;
cursor: pointer;
}
/* footer */
footer {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
background-color: var(--color-black);
color: #fff;
color: var(--color-white);
padding: 2rem;
}
footer ul {
display: flex;
margin-bottom: 0.5rem;
}
footer a {
text-decoration: none;
text-transform: uppercase;
margin-right: 1.2rem;
color: #fff;
color: var(--color-white);
transition: all 0.3s;
}
footer a:hover {
color: #2990ff;
color: var(--color-primary);
}
And thst's it, comment for any doubt.
0 Comments