How to create a simple responsive website landing page template using HTML CSS and Bootstrap 5.
Final output:
Lorem ipsum dolor sit amet consectetur adipiscing elit
Why Us?
Lorem ipsum | consectetur adipiscing | dolor sit
Lorem
Ipsum
Consectetur
“Maecenas sit amet nisi vel lacus feugiat gravida at at augue.”
– Sed Vulputate
About Us?
Enim excepteur voluptate laboris magna et laborum dolore elit eiusmod incididunt. Nisi occaecat ipsum nostrud esse consectetur deserunt esse veniam veniam ex dolore irure minim ipsum.
Lorem ipsum dolor sit amet consectetur adipiscing elit
Final Output Code for Responsive Website Landing Page Template using HTML CSS Bootstrap 5:
HTML
<nav class="navbar navbar-expand-lg fixed-top shadow" data-bs-theme="dark">
<div class="container-lg">
<a class="navbar-brand fw-bold" href="#">Coding Yaar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Products
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link">Blog</a>
</li>
</ul>
<a class="btn btn-outline-light" href="#">Contact Us</a>
</div>
</div>
</nav>
<div class="hero d-flex align-items-center justify-content-center text-center">
<div class="hero-content position-relative">
<h1 class="text-light bg-dark p-3 pb-4" style="--bs-bg-opacity: .5;">Lorem ipsum dolor sit amet
consectetur
adipiscing elit</h1>
<button class="btn position-absolute top-100 start-50 translate-middle">View Products</button>
</div>
</div>
<div class="why-us text-center position-relative pt-5">
<div class="container">
<h2 class="fw-bold">Why Us?</h2>
<h5 class="text-uppercase text-secondary p-3"><span class="p-3">Lorem ipsum</span> | <span
class="p-3">consectetur adipiscing
| <span class="p-3">dolor
sit</span> </span>
</h5>
<div class="why-sub-section">
<div class="row g-4">
<div class="col-sm-4">
<img src="..." class="img-fluid" alt="">
<h5 class="p-2">Lorem</h5>
<button class="btn">KNOW MORE</button>
</div>
<div class="col-sm-4">
<img src="..." class="img-fluid" alt="">
<h5 class="p-2">Ipsum</h5>
<button class="btn">KNOW MORE</button>
</div>
<div class="col-sm-4">
<img src="..." class="img-fluid" alt="">
<h5 class="p-2">Consectetur</h5>
<button class="btn">KNOW MORE</button>
</div>
</div>
</div>
<div class="quote pt-3 text-center">
<p class="fs-5">"Maecenas sit amet nisi vel lacus feugiat gravida at at augue."</p class="fs-5">
<p class="text-uppercase">- Sed Vulputate</p>
</div>
<div class="quote-bg py-5 position-absolute bottom-0 start-0 end-0 z-n1 d-none d-lg-block">
</div>
</div>
</div>
<div class="about position-relative py-5">
<div class="container">
<h2 class="fw-bold py-3 px-4">About
Us?</h2>
<div class="row align-items-end">
<div class="col-xl-6 col-lg-7">
<img src="..." class="img-fluid" alt="">
</div>
<div class="col-xl-6 col-lg-5">
<p class="py-2">Enim excepteur voluptate laboris magna et laborum dolore elit eiusmod
incididunt. Excepteur cupidatat qui veniam ut anim consequat in
officia et. Nisi occaecat ipsum nostrud esse consectetur deserunt esse veniam veniam ex dolore
irure
minim ipsum. </p>
<button class="btn">LEARN MORE</button>
</div>
</div>
</div>
</div>
<div class="contact hero d-flex align-items-center justify-content-center text-center">
<div class="hero-content position-relative">
<h1 class="text-light bg-dark p-3 pb-4" style="--bs-bg-opacity: .5;">Lorem ipsum dolor sit amet
consectetur
adipiscing elit</h1>
<button class="btn position-absolute top-100 start-50 translate-middle">View Products</button>
</div>
</div>
<footer class="text-light pt-5">
<div class="container-lg">
<div class="row">
<div class="col-6 col-lg-4">
<h3 class="fw-bold">Coding Yaar</h3>
<p class="pt-2">321, Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="mb-2">0987654321</p>
<p>1234567890</p>
</div>
<div class="col">
<h4>Menu</h4>
<ul class="list-unstyled pt-2">
<li class="py-1">Home</li>
<li class="py-1">Shorts</li>
<li class="py-1">About</li>
<li class="py-1">Contact</li>
</ul>
</div>
<div class="col">
<h4>More</h4>
<ul class="list-unstyled pt-2">
<li class="py-1">Landing Pages</li>
<li class="py-1">FAQs</li>
</ul>
</div>
<div class="col">
<h4>Categories</h4>
<ul class="list-unstyled pt-2">
<li class="py-1">Navbars</li>
<li class="py-1">Cards</li>
<li class="py-1">Buttons</li>
<li class="py-1">Carousels</li>
</ul>
</div>
<div class="col-6 col-lg-3 text-lg-end">
<h4>Social Media Links</h4>
<div class="social-media pt-2">
<a href="#" class="text-light fs-2 me-3"><i class="bi bi-facebook"></i></a>
<a href="#" class="text-light fs-2 me-3"><i class="bi bi-pinterest"></i></a>
<a href="#" class="text-light fs-2 me-3"><i class="bi bi-instagram"></i></a>
<a href="#" class="text-light fs-2"><i class="bi bi-linkedin"></i></a>
</div>
</div>
</div>
<hr>
<div class="d-sm-flex justify-content-between py-1">
<p>2023 © Coding Yaar. All Rights Reserved. </p>
<p>
<a href="#" class="text-light text-decoration-none pe-4">Terms of use</a>
<a href="#" class="text-light text-decoration-none"> Privacy policy</a>
</p>
</div>
</div>
</footer>CSS
:root {
--primary-color: #2f4054;
--accent-color: #ffd24c;
}
:root * {
border-radius: 0;
}
h2 {
color: var(--primary-color);
}
.navbar,
.navbar .dropdown-menu,
.why-us .quote-bg,
footer {
background-color: var(--primary-color);
}
.navbar-brand {
color: #ffffff;
font-size: 1.5rem;
}
.navbar .navbar-nav .nav-link {
color: #ffffff;
}
.hero {
background: url("...") center no-repeat;
background-size: cover;
height: 50vh;
}
.hero .hero-content {
width: 90%;
}
.why-us .quote-bg {
height: 30vw;
}
@media screen and (orientation: landscape) {
.hero {
height: 100vh;
}
.why-us .quote-bg {
height: 40vh;
}
}
@media screen and (min-width: 768px) {
.hero .hero-content {
width: 50%;
}
.navbar .navbar-nav .nav-link {
font-size: 1.2rem;
padding: 0.5rem 1.5rem;
}
}
.btn:not(.btn-outline-light) {
background-color: var(--accent-color);
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
padding: 0.7rem 1.2rem;
}
.why-us {
color: #ffffff;
}
.why-sub-section .img-fluid {
border: 0.5rem solid #ffffff;
}
@media screen and (min-width: 768px) {
.contact {
height: 70vh;
}
}
@media screen and (min-width: 992px) {
.container {
padding: 2rem 5rem;
}
.about h2 {
position: absolute;
left: 50%;
transform: translateX(-40%);
background-color: rgba(0, 0, 0, 0.4);
color: #ffffff;
}
}
@media screen and (max-width: 991px) {
.about {
text-align: center;
}
.about {
padding: 0 1.5rem;
}
.why-us {
padding: 2rem 1rem 0;
color: #000000;
}
}
.contact {
background: url("...") center no-repeat;
}If you have any doubts or stuck somewhere, you can reach out through Coding Yaar's Discord server.
