Bootstrap html snippet. About Us

HTML code

Clean, semantic HTML that powers this Bootstrap 5.2.0 snippet. Copy and paste it into your page (with Bootstrap loaded) to reproduce the exact layout shown in the preview.

 <!--font-->
 <link href="https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Square+Peg&display=swap" rel="stylesheet">
  
</head>

<body>

    <section class="about-sec">
         <div class="container">
              <div class="row">
                   <div class="col-md-6">
                        <img src="https://www.pngall.com/wp-content/uploads/8/Young-Man-PNG-Image.png" class="w-100 img-fluid">

                   </div>
                   <div class="col-md-6">
                        <span class="small-txt">About Us</span>
                        <h2 class="my-3">Welcome to A Bootstrap Guide</h2>
                        <div class="line-head">
                            <div class="empty"></div>
                            <p>Subheading for the main heading</p>
                        </div>
                        <p class="main-para">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                        
                        <p class="fst-italic text-muted mb-5">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>

                        <a class="btn btn-primary rounded-pill w-25" href="#">Get Started</a>
                   </div>
              </div>
         </div>
    </section>

    <section>
         <div class="container">
              <div class="row">
                   <div class="col-md-12">
                         <h1 class="text-center">About Us</h1>
                   </div>
              </div>
         </div>
    </section>

CSS code

Scoped CSS that styles the component. Paste it after Bootstrap 5.2.0 to keep the design, spacing, and responsiveness consistent.

body{margin-top:20px;}

        .text-div h3 {
    position: absolute;
    margin-top: 0pc;
    width: 222px;
    bottom: 8rem;
    left: 25rem;
    background-color: #18de82;
    padding: 13px 24px;
    color: white;
    font-family: 'Cabin', sans-serif;
    box-shadow: 6px 7px 1px -1px #00000029;}
    
   

    .small-txt {
    background-color: #0d6efd;
    padding: 6px 20px;
    color: white;}

    .about-sec h2 {
    font-family: 'Cabin', sans-serif;
    font-size: 40px;
    padding: 15px 0px 15px 0px;}

    .empty {
    width: 50px;
    height: 2px;
    background-color: #18de82;}

    .line-head {
    display: flex;}

    .line-head p {
    margin-top: -12px;
    margin-left: 15px;}

    .main-para {
    padding-top: 20px;
    padding-bottom: 6px;}

    a {
        font-family: 'Cabin', sans-serif;}

    h1 {
    position: absolute;
    top: -9%;
    z-index: -111;
    font-size: 249px;
    color: #cac8c812 !important;
    text-align: center !important;
    margin: 0px auto;
    display: block;}