Agency Website Frontpage Design. Part III.

here-to-share(60)

Published in

#webdesign

Words

104

Reading

1 min

Listen

Play

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

Second Part

Let's jump to the codes.

social media

<section id="social-media">
    <div class="container text-center">
        <p>Find Us On Social Medias</p>
    
    <div class="social-icons text-center">
        <a href="#"><img src="images/twitter.png" alt=""></a>
        <a href="#"><img src="images/facebook.png" alt=""></a>
        <a href="#"><img src="images/instagram.png" alt=""></a>
        <a href="#"><img src="images/linkedin.png" alt=""></a>
        <a href="#"><img src="images/youtube.png" alt=""></a>
        <a href="#"><img src="images/whatsapp.png" alt=""></a>
        
       </div> 
    </div>
</section>

footer

<section id="footer">
    <img src="images/wave6.png" class='footer-img'>
    <div class="container">
        <div class="row">
            <div class="col-md-4 footer-box">
                <img src="images/1200px-Logo!_Logo.svg.png">
                <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 footer-box">
                <p><b>CONTACT US</b></p>
                <p><i class="fa fa-map-marker"></i> Wonder Island, Mars</p>
                <p><i class="fa fa-phone"></i> +39485746475348</p>
                <p><i class="fa fa-envelope-o"></i> [email protected]</p>
            </div>
            <div class="col-md-4 footer-box">
                <p><b>SUBSCRIBE NEWSLETTER</b>
                </p>
                <input type="email" class="form-control" placeholder="Your Email">
                <input type="submit" class="btn btn-primary" value="Subscribe">
            </div>
        </div>
        <div>
    <hr>
    <p class='copyright'>Copyright owned by Ekram.</p>
    
</div>
    </div>
    
</section>




<script src="smooth-scroll.js"></script>
<script>
    var scroll = new SmoothScroll('a[href*="#"]');
</script>

so the full 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>



<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> playicon.png" class='play-button'>Watch Tutorials
       
        col-md-6 text_center">
            images/mainpic.png" class='image-fluid'>
        
    
    
    images/wave4.png" class='bottom-img'>




services">
   container text-center">
      title text-center">What We Do ?
       row text-center">
           col-md-4 services">
               images/growth.webp" class='service-img'>
               Growth Marketing
               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
           
           col-md-4 services">
               images/growth.webp" class='service-img'>
               Online Branding
               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
               
           
           col-md-4 services">
               images/growth.webp" class='service-img'>
               Animated Ads
               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
           
           
       
       button" class="btn btn-primary">All Services
   
    








about-us">
    container">
        Why Choose Us ?
    
    row">
        col-md-6 about-us">
            about-title">Why we are different
            
                Believe in doing business with honesty.
                Believe in doing business with honesty.
                Believe in doing business with honesty.
                Believe in doing business with honesty.
                Believe in doing business with honesty.
                Believe in doing business with honesty.
                
            
        
        col-md-6">
            images/net.png" class='net-img'>
        
    
    
    





    container">
        What clients say 
        
        row offset-1">
            col-md-5 testimonials">
                "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."
                images/e.jpg" >
                user-details">Ekram
Founder at xyz.
                
            
            col-md-5 testimonials">
                "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."
                images/e1.jpg" >
                user-details">Ekram
Founder at xyz.
            
        
    
     




social-media">
    container text-center">
        Find Us On Social Medias
    
    social-icons text-center">
        #">
        <a href="#"><img src="images/facebook.png" alt=""></a>
        <a href="#"><img src="images/instagram.png" alt=""></a>
        <a href="#"><img src="images/linkedin.png" alt=""></a>
        <a href="#"><img src="images/youtube.png" alt=""></a>
        <a href="#"><img src="images/whatsapp.png" alt=""></a>
        
       </div> 
    </div>
</section>



<section id="footer">
    <img src="images/wave6.png" class='footer-img'>
    <div class="container">
        <div class="row">
            <div class="col-md-4 footer-box">
                <img src="images/1200px-Logo!_Logo.svg.png">
                <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 footer-box">
                <p><b>CONTACT US</b></p>
                <p><i class="fa fa-map-marker"></i> Wonder Island, Mars</p>
                <p><i class="fa fa-phone"></i> +39485746475348</p>
                <p><i class="fa fa-envelope-o"></i> [email protected]</p>
            </div>
            <div class="col-md-4 footer-box">
                <p><b>SUBSCRIBE NEWSLETTER</b>
                </p>
                <input type="email" class="form-control" placeholder="Your Email">
                <input type="submit" class="btn btn-primary" value="Subscribe">
            </div>
        </div>
        <div>
    <hr>
    <p class='copyright'>Copyright owned by Ekram.</p>
    
</div>
    </div>
    
</section>




<script src="smooth-scroll.js"></script>
<script>
    var scroll = new SmoothScroll('a[href*="#"]');
</script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J" crossorigin="anonymous"></script>
  </body>
</html>