Create About Section Using Bootstrap & CSS With Free Source Code By Indian Coding Wala

Omnath Dubey 5/12/2023 04:10:00 AM

HTML Source Code :- 

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Hero Section</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="mt-5">
<section id="about" class="about">

<div class="container" data-aos="fade-up">
  <div class="row gx-0">
  
<div class="col-lg-6 d-flex flex-column justify-content-center" data-aos="fade-up" data-aos-delay="200">
  <div class="content">
<h3>Welcome to Indian Coding Wala</h3>
<h2>Create About Section Using Bootstrap & CSS With Free Source Code <br>
By- Indian Coding Wala.</h2>
<p>
  
The "about section" typically refers to a section on a website, social media profile, or document that provides information about the organization, company, or individual behind the content.

In the case of a website, the about section is often found in the main navigation menu and can include details about the website's purpose, mission, history, team members, and contact information. It can also provide information about the products or services offered, the target audience, and any other relevant information that may help visitors understand the website's content and purpose.
</p>
<div class="text-center text-lg-start">
  <a href="#" class="btn-read-more  ">
<span>Thank You</span>
  </a>
</div> 
  </div>
</div>
  
<div class="col-lg-6 d-flex align-items-center" data-aos="zoom-out" data-aos-delay="200">
  <img src="https://www.freepnglogos.com/uploads/flour-png/flour-flower-png-transparent-png-images-pluspng-2.png" class="img-fluid" alt="">
</div>
  
  </div>
</div>
  
  </section>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>


CSS Source Code :-  

/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about .content {
    background-color: #b1b1b1;
    padding: 40px;
  }
  
  .about h3 {
    font-size: 14px;
    font-weight: 700;
    color: #010107;
    text-transform: uppercase;
  }
  
  .about h2 {
    font-size: 24px;
    font-weight: 700;
    color: #012970;
  }
  
  .about p {
    margin: 15px 0 30px 0;
    line-height: 24px;
  }
  
  .about .btn-read-more {
    line-height: 0;
    padding: 15px 40px;
    border-radius: 4px;
    transition: 0.5s;
    color: #fff;
    background: #03349d;
    box-shadow: 0px 5px 25px rgba(65, 84, 241, 0.3);
  }
  
  .about .btn-read-more span {
    font-family: "Nunito", sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 1px;
  }
  
  .about .btn-read-more i {
    margin-left: 5px;
    font-size: 18px;
    transition: 0.3s;
  }
  
  .about .btn-read-more:hover i {
    transform: translateX(5px);
  }

 

Omnath Dubey

Posted by Omnath Dubey