Agency Website Frontpage Design. Part II.

0 comments

here-to-share106.943 years agoPeakD4 min read

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 second part of the project.

First part

Let's jump to the codes.

About us

<section id="about-us">
    <div class="container">
        <h1 class='title title-us text-center'>Why Choose Us ?</h1>
    
    <div class="row">
        <div class="col-md-6 about-us">
            <p class="about-title">Why we are different</p>
            <ul>
                <li>Believe in doing business with honesty.</li>
                <li>Believe in doing business with honesty.</li>
                <li>Believe in doing business with honesty.</li>
                <li>Believe in doing business with honesty.</li>
                <li>Believe in doing business with honesty.</li>
                <li>Believe in doing business with honesty.</li>
                
            </ul>
        </div>
        <div class="col-md-6">
            <img src="images/net.png" class='net-img'>
        </div>
    </div>
    
   </div> 
</section>

Testimonials

<secton id='testimonials'>
    <div class="container">
        <h1 class='title text-center'>What clients say </h1>
        
        <div class="row offset-1">
            <div class="col-md-5 testimonials">
                <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>
                <img src="images/e.jpg" >
                <p class="user-details"><b>Jack</b><br>Founder at xyz.</p>
                
            </div>
            <div class="col-md-5 testimonials">
                <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>
                <img src="images/e1.jpg" >
                <p class="user-details"><b>Alex</b><br>Founder at xyz.</p>
            </div>
        </div>
    </div>
     
</secton>

So the full HTML code is:-

<!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>

(html comment removed: ---------------Banner 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> <p><a href="#"><img src="images/playicon.png" class='play-button'>Watch Tutorials</a></p>
       </div>
        <div class="col-md-6 text_center">
            <img src="images/mainpic.png" class='image-fluid'>
        </div>
    </div>
    </div>
    <img src="images/wave4.png" class='bottom-img'>
</section>

(html comment removed: ------services 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>

(html comment removed: ----------About us-------)

<section id="about-us">
    <div class="container">
        <h1 class='title title-us text-center'>Why Choose Us ?</h1>
    
    <div class="row">
        <div class="col-md-6 about-us">
            <p class="about-title">Why we are different</p>
            <ul>
                <li>Believe in doing business with honesty.</li>
                <li>Believe in doing business with honesty.</li>
                <li>Believe in doing business with honesty.</li>
                <li>Believe in doing business with honesty.</li>
                <li>Believe in doing business with honesty.</li>
                <li>Believe in doing business with honesty.</li>
                
            </ul>
        </div>
        <div class="col-md-6">
            <img src="images/net.png" class='net-img'>
        </div>
    </div>
    
   </div> 
</section>

(html comment removed: -------Testimonials-----------)

<secton id='testimonials'>
    <div class="container">
        <h1 class='title text-center'>What clients say </h1>
        
        <div class="row offset-1">
            <div class="col-md-5 testimonials">
                <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>
                <img src="images/e.jpg" >
                <p class="user-details"><b>Jack</b><br>Founder at xyz.</p>
                
            </div>
            <div class="col-md-5 testimonials">
                <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>
                <img src="images/e1.jpg" >
                <p class="user-details"><b>Alex</b><br>Founder at xyz.</p>
            </div>
        </div>
    </div>
     
</secton>

</html>

That's all for today. I will complete the HTML file in the next part of the post.