Hey, developers welcome to Day 27 of our 90Days 90Projects challenge. And in Day 27 we are going to create an MBA Chai Wala Website Landing Page Design.
So to run the code you just need to copy the HTML and CSS code and run it into your code Editor.
Preview
Download Images: Click Here
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MBA Chai Wala</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" media="screen and (max-width: 724px)" href="responsive.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- Navbar Section -->
<header id="header" class="flex space-around my-2 margin-auto">
<img src="images/home-image.png" alt="" class="logo pointer">
<input type="checkbox" id="check">
<label for="check" class="checkBtn">
<i class="fa fa-bars"></i>
</label>
<ul class="flex items-center font-ubuntu">
<li><a href="#main">Home</a></li>
<li><a href="#cares">Cares</a></li>
<li><a href="#academy">Academy</a></li>
<li><a href="#location">About Us</a></li>
<li><a href="#contact">Contact Us</a></li>
</ul>
</header>
<main id="main" class="container margin-auto">
<!-- Top Home Section -->
<section class="flex justify-between items-center fd-col-rev">
<div class="top-left width-50 width-100 ">
<h1 class="font-3 h-primary main-col">Kaun Hai MBA Chai Wala?</h1>
<p class="para-font text-left t-center">Entrepreneurship is nothing but failing constantly and learning
from your mistakes till you make it big. The smart way to avoid making mistakes and grow
simultaneously is to learn from others' mistakes who made it big by defeating all the odds. Learn
from my mistakes before you start your entrepreneurial journey. Join my entrepreneurial mindset
workshop now.</p>
<button class="btn pointer">Explore</button>
</div>
<div class="top-right image-50 ">
<img src="images/main-image.png" class="pointer">
</div>
</section>
<!-- Academy Section of MBA Chai Wala Landing Page -->
<section class="common flex" id="academy">
<h1 class="font-3 h-primary center my-2 main-col">MBA Academy</h1>
<p class="width-80 text-center para-font t-center">You’re about to read a story of how an MBA dropout became
the second most famous Chai Wala of the world, an international celebrity Chai guy by selling chai on
the streets of Ahmedabad.</p>
<img src="images//praful-billore.png" alt="" class="res">
</section>
<!-- MBA Chai Wala in News Section -->
<section class="flex justify-between items-center my-5 fd-col-rev width-100">
<div class="top-right width-100 ">
<img src="images/in-the-news.gif" class="hover width-80" alt="">
</div>
<div class="top-left width-50 width-100">
<h1 class="font-3 h-primary main-col">Chai Wala in News!</h1>
<p class="para-font t-center">Explore MBA Chai Wala’s Masaledar coverage along with your Garma- Garam
cup of Chai brought to you by giant media houses like BRUT, BBC, TOI, TEDx, Josh Talks, ScoopWhoop &
more.</p>
<button class="btn margin-top pointer">Book </button>
</div>
</section>
</main>
<!-- India Ka Chai Wala MBA Chai Wala Section -->
<section class="common bg-yellow flex">
<h1 class="font-3 h-primary center my-2 main-colmain-col main-col">India Ka Chai Wala <br> MBA Chai Wala </h1>
<p class="width-80 text-center para-font t-center">Who amongst us has never gone through a heart break? Crying
for hours, getting blocked on WhatsApp. <br> Well.. Mine was a bit different. I got my heart broken from a
CAT.
</p>
<img src="images/chai-logo.png" alt="" class="res">
</section>
<!-- Location Section -->
<section class="m-auto flex justify-between items-center m-top fd-col width-80" id="location">
<div class="top-right ">
<img src="images/locations.png" alt="" class="location-img res">
</div>
<div class="top-left width-50 width-100">
<h1 class="font-3 h-primary main-col my-2">Chai Wala Locations!</h1>
<p class="para-font t-center">Humans of Ahmedabad, Bhopal, Chandigarh and Kolkata are already savouring our
refreshing cup of cutting chai, you won’t need to wait for us any longer. We are soon coming to your
city.</p>
</div>
</section>
<button class="btn text-center pointer">Book Now</button>
<!-- Chai Wala that cares Section -->
<section class="common flex" id="cares">
<h1 class="font-3 h-primary center my-2 main-col">Chai Wala That Cares</h1>
<p class="width-80 text-center para-font t-center">Both Chai & MBA Chai Wala cares for you; while you care for
others. <br> Need support regarding health care, business, overcoming social issues, fight against
climate change, <br> civil rights, fight against gender inequality, and more?</p>
<img src="images/mba-cares.gif" alt="" class="res">
</section>
<!-- Contact section of MBA Chai Wala Landing Page -->
<section class="margin-auto my-5 width-80 flex space-around contact" id="contact">
<div class="contact-items text-left">
<h3 class=" my-2 para-font">Social Media</h3>
<div class="left-align">
<p class="para-font">Twitter</p>
<p class="para-font">Facebook</p>
<p class="para-font">LinkedIn</p>
<p class="para-font">Instagram</p>
</div>
</div>
<div class="contact-items text-left">
<h3 class=" my-2 para-font">Locations</h3>
<div class="left-align">
<p class="para-font">Bhopal</p>
<p class="para-font">Kolkata</p>
<p class="para-font">Ahmedabad</p>
<p class="para-font">Chandigarh</p>
</div>
</div>
<div class="contact-items text-left">
<h3 class=" my-2 para-font">Direct Contact</h3>
<div class="left-align">
<p class="para-font">Ph: 7222905222</p>
<p class="para-font">Email: Info@mbachaiwala.com</p>
</div>
<p class="para-font">Email: Franchise@mbachaiwala.com</p>
</div>
</section>
<!-- Footer Area -->
<footer id="footer">
<p class="text-center my-2 para-font"> © Copyright 2022 MBA Chai Wala. Made by Raju Sheoran</p>
</footer>
</body>
</html>
CSS Code
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Ubuntu:wght@300;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
.container {
max-width: 85vw;
}
#check,
.checkBtn {
display: none;
}
ul li a:hover {
border-bottom: 2px solid #ed1e79;
color: #ed1e79;
}
.menu {
display: none;
}
#header {
position: sticky;
top: 0;
background-color: #fff;
z-index: 2;
}
.logo {
width: 5rem;
}
#main {
padding: 22px 0;
}
.top-right,
.top-left {
display: inline-block;
}
.top-right img {
width: 17rem;
}
.top-right .location-img {
width: 22rem;
}
.top-right {
overflow: hidden;
}
/* common class is mostly used*/
.common {
flex-direction: column;
align-items: center;
width: 100%;
justify-content: center;
margin: auto;
margin-top: 40px;
}
.contact .contact-items {
padding: 15px 10px;
border-radius: 6px;
height: 170px;
}
.main-col {
color: #ed1e79;
}
.font-ubuntu {
font-family: 'Ubuntu', sans-serif;
}
.text-left {
text-align: left;
}
.bg-yellow {
background-color: yellow;
}
.text-center {
text-align: center;
}
.width-80 {
width: 80%;
}
.items-center {
text-align: center;
}
.h-primary {
font-family: 'Ubuntu', sans-serif;
}
.my-2 {
margin: 10px 0px;
}
.my-5 {
margin: 55px 0px;
}
.para-font {
font-family: 'Poppins', sans-serif;
}
.light-300 {
font-weight: Light 300;
}
.flex {
display: flex;
}
.justify-between {
justify-content: space-between;
}
.space-around {
justify-content: space-around;
}
.items-center {
align-items: center;
}
li {
list-style: none;
padding: 0px 9px;
}
li a {
color: black;
text-decoration: none;
font-size: 1.2rem;
cursor: pointer;
}
.font-3 {
font-size: 3rem;
}
.top-para-font {
font-size: 1.1rem;
}
.margin-auto {
margin-left: auto;
margin-right: auto;
}
.width-50 {
width: 50%;
}
.m-top {
margin-top: 45px;
}
.location-img {
width: 22rem;
}
.top-right img:hover {
transform: scale(1.1);
transition: all 1s ease-in-out;
}
.left-align {
text-align: left;
}
.pointer {
cursor: pointer;
}
.m-auto {
margin: auto;
}
.btn {
display: flex;
justify-content: center;
align-items: center;
margin: auto;
font-weight: bold;
padding: 9px 30px;
font-size: 1.1rem;
border: none;
border-radius: 30px;
background: #ed1e79;
border: 2px solid #ed1e79;
color: white;
text-transform: uppercase;
transition: 1.5s all;
margin-top: 10px;
}
.btn:hover {
color: #ed1e79;
background-color: #fff;
border: 2px solid #ed1e79;
}
Responsive CSS Code
.contact { flex-wrap: wrap;}
.fd-col-rev { flex-direction: column-reverse;}
.width-100 { width: 100%;}
.width-80 { width: 80%;}
.fd-col { flex-direction: column;}
.font-3 { font-size: 2rem;}
.para-font { font-size: 14px;}
.t-center { text-align: center;}
#header ul { position: fixed; width: 100%; height: 100vh; background-color: #ed1e79; top: 0px; left: 100%; text-align: center; display: block; margin: 80px 0; line-height: 30px; transition: all .3s; opacity: 0.9; z-index: 500;}
#header ul { display: none;}
.res { width: 80%;}
.image-50 img { width: 55%;}
#cares h1 { text-align: center;}
.top-right .location-img { width: 90%;}
.menu { width: 20px; height: 20px; border: 2px solid black; display: block; margin: auto 0px; position: relative; left: 10%;}
#check { display: none; }
.checkBtn{ cursor: pointer; font-size: 30px; float: right; color: #000000; line-height: 80px;}
.checkBtn { display: block;}
#header ul li { margin: 25px;}
#header ul li a { font-size: 1.5rem; color: white;}
#check:checked ~ ul { transition: all .3s; padding-top: 5rem; top: -15%; left: 0%; display: block; z-index: -1;}
.contact {
flex-wrap: wrap;
}
.fd-col-rev {
flex-direction: column-reverse;
}
.width-100 {
width: 100%;
}
.width-80 {
width: 80%;
}
.fd-col {
flex-direction: column;
}
.font-3 {
font-size: 2rem;
}
.para-font {
font-size: 14px;
}
.t-center {
text-align: center;
}
#header ul {
position: fixed;
width: 100%;
height: 100vh;
background-color: #ed1e79;
top: 0px;
left: 100%;
text-align: center;
display: block;
margin: 80px 0;
line-height: 30px;
transition: all .3s;
opacity: 0.9;
z-index: 500;
}
#header ul {
display: none;
}
.res {
width: 80%;
}
.image-50 img {
width: 55%;
}
#cares h1 {
text-align: center;
}
.top-right .location-img {
width: 90%;
}
.menu {
width: 20px;
height: 20px;
border: 2px solid black;
display: block;
margin: auto 0px;
position: relative;
left: 10%;
}
#check {
display: none;
}
.checkBtn{
cursor: pointer;
font-size: 30px;
float: right;
color: #000000;
line-height: 80px;
}
.checkBtn {
display: block;
}
#header ul li {
margin: 25px;
}
#header ul li a {
font-size: 1.5rem;
color: white;
}
#check:checked ~ ul {
transition: all .3s;
padding-top: 5rem;
top: -15%;
left: 0%;
display: block;
z-index: -1;
}
