Hello friends how are you? Hopefully, you all are fine and I am also well. I have designed an agency website front page recently. I used HTML and CSS only here. I will post this project into four parts. I will post the HTML file into two different parts and CSS file into two different parts. This is the first part of the project.
Let's jump to the codes.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Agency Website Template</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<section id='nav-bar'>
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#"><img src="images/1200px-Logo!_Logo.svg.png" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#top">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about-us">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#testimonials">TESTIMONIALS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#footer">CONTACT</a>
</li>
</ul>
</div>
</nav>
</section>
<section id='banner'>
<div class="container">
<div class="row">
<div class="col-md-6">
<p class="promo-title">Best Digital Agency</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin ex a lorem facilisis, congue fermentum ante ullamcorper. Proin aliquet in ipsum at Proin aliquet in ipsum at posuere. Maecenas venenatis, dolor vel tristique feugiat, justo nisl tincidunt augue.</p> .png" class='play-button'>Watch Tutorials
col-md-6 text_center">
![]()
images/mainpic.png" class='image-fluid'>
![]()
images/wave4.png" class='bottom-img'>
</section>
<section id="services">
<div class="container text-center">
<h1 class="title text-center">What We Do ?</h1>
<div class="row text-center">
<div class="col-md-4 services">
<img src="images/growth.webp" class='service-img'>
<h4>Growth Marketing</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin ex a lorem facilisis, congue fermentum ante ullamcorper. Proin aliquet in ipsum at Proin aliquet in ipsum at posuere. Maecenas venenatis, dolor vel tristique feugiat</p>
</div>
<div class="col-md-4 services">
<img src="images/growth.webp" class='service-img'>
<h4>Online Branding</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin ex a lorem facilisis, congue fermentum ante ullamcorper. Proin aliquet in ipsum at Proin aliquet in ipsum at posuere. Maecenas venenatis, dolor vel tristique feugiat</p>
</div>
<div class="col-md-4 services">
<img src="images/growth.webp" class='service-img'>
<h4>Animated Ads</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sollicitudin ex a lorem facilisis, congue fermentum ante ullamcorper. Proin aliquet in ipsum at Proin aliquet in ipsum at posuere. Maecenas venenatis, dolor vel tristique feugiat</p>
</div>
</div>
<button type="button" class="btn btn-primary">All Services</button>
</div>
</section>
<br><br><br>
That's all for today. I will complete the HTML file in the next part of the post.