Bootstrap about page snipp example v04

Bootstrap about page snipp example v04

bootstrap snipp

Whole html/css code


<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.lineicons.com/2.0/LineIcons.css" rel="stylesheet">

<title>About snipp</title>
<style>
figure {
    margin: 0;
    padding: 0;
}
.rounded img {
    border-radius: 0.4rem;
}
figure img {
    width: 100%;
    max-width: 100%;
    height: auto!important;
}

.bg-dot.primary {
    background-image: radial-gradient(#3f78e0 2px,transparent 2.5px);
}

.shape.rellax {
    z-index: 1;
}
.shape.rellax {
    position: absolute;
}
.bg-dot {
    background-size: 0.75rem 0.75rem;
}
.bg-dot, .bg-line {
    opacity: .4;
}
.icon-list {
    padding-left: 0;
    list-style: none;
}
.icon-list.bullet-bg li {
    padding-left: 1.5rem;
}
.h-20 {
    height: 10rem!important;
}
.w-16 {
    width: 6rem!important;
}
.overlap-grid {
    display: flex;
    flex-wrap: wrap;
    position: relative;
}
.icon-list.bullet-soft-primary.bullet-bg i {
    background-color: #dce7f9;
}
.icon-list li {
    position: relative;
}
.icon-list.bullet-bg i {
    border-radius: 100%;
    width: 1rem;
    height: 1rem;
    top: 0.4rem;
    font-size: .8rem;
    line-height: 1;
    letter-spacing: normal;
    text-align: center;
    display: table;
}
.icon-list.bullet-soft-primary i {
    color: #3f78e0;
}
.icon-list i {
    position: absolute;
    left: 0;
}
.icon-svg-md {
    width: 3.6rem;
    height: 3.6rem;
}
@media (min-width: 768px){
.overlap-grid-2 .item:nth-child(1) {
    width: 70%;
    margin-top: 0;
    margin-left: 30%;
    z-index: 3;
}
.overlap-grid-2 .item:nth-child(2) {
    width: 55%;
    margin-top: -45%;
    margin-left: 0;
    z-index: 4;
}
}
</style>
</head>
<body>


<section class="wrapper bg-light">
  <div class="container py-5 py-md-5">
    <div class="row gx-lg-5 py-5 gx-xl-5 gy-5 align-items-center">
      <div class="col-lg-6 position-relative order-lg-2">
        <div class="shape bg-dot primary rellax w-16 h-20"  style="top: 3rem; left: 5.5rem"></div>
        <div class="overlap-grid overlap-grid-2">
          <div class="item">
            <figure class="rounded shadow"><img src="https://bootstraplily.com/wp-content/uploads/2021/11/about2.jpg" alt=""></figure>
          </div>
          <div class="item">
            <figure class="rounded shadow"><img src="https://bootstraplily.com/wp-content/uploads/2021/11/about3.jpg"  alt=""></figure>
          </div>
        </div>
      </div>
      <!--/column -->
      <div class="col-lg-6">
        <img src="https://cdn-icons.flaticon.com/png/512/4213/premium/4213224.png?token=exp=1637298645~hmac=12a88d20864723853b12ffe1496628ae" class="icon-svg-md mb-4" alt="" />
        <h2 class="display-4 mb-3">Who Are We?</h2>
        <p class="lead fs-lg">We are a digital and branding company that believes in the power of creative strategy and along with great design.</p>
        <p class="mb-5">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
        <div class="row gy-3 gx-xl-8">
          <div class="col-xl-6">
            <ul class="icon-list bullet-bg bullet-soft-primary mb-0">
              <li><span><i class="lni lni-checkmark-circle"></i></span><span>Aenean eu leo quam ornare curabitur blandit tempus.</span></li>
              <li class="mt-3"><span><i class="lni lni-checkmark-circle"></i></span><span>Nullam quis risus eget urna mollis ornare donec elit.</span></li>
            </ul>
          </div>
          <!--/column -->
          <div class="col-xl-6">
            <ul class="icon-list bullet-bg bullet-soft-primary mb-0">
              <li><span><i class="lni lni-checkmark-circle"></i></span><span>Etiam porta sem malesuada magna mollis euismod.</span></li>
              <li class="mt-3"><span><i class="lni lni-checkmark-circle"></i></span><span>Fermentum massa vivamus faucibus amet euismod.</span></li>
            </ul>
          </div>
          <!--/column -->
        </div>
        <!--/.row -->
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->





</body>
</html>

jsfiddle example

Spread the love

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top