Bootstrap hero header snipp with gradient image

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap header snipp</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
   .georgia{
    font-family: Georgia, 'Times New Roman', Times, serif;
    position: relative;
   }
   .bg-lines {
    position: relative;
   }
   .gradient-8 {
    background-image: linear-gradient(0deg,#2c46a7,#3757c4);
    }
   .bg-lines:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://i.ibb.co/gwhxvHW/lines.png) no-repeat center center;
    background-size: cover;
    pointer-events: none;
    }
    .georgia:after {
    content: "";
    display: block;
    border-radius: 5rem;
    position: absolute;
    width: 102.5%;
    height: 10%;
    left: -1.5%;
    bottom: 4%;
    margin-top: 0;
    transition: all .2s ease-in-out;
    background: linear-gradient(45deg,#08aeea 0,#2af598 100%);
    }
  </style>
</head>

<body>
  <div class="py-5 gradient-8 bg-lines">  
    <div class="container text-center">
      <div class="row py-5">
        <div class="col-lg-10 col-xl-9 col-xxl-8 mx-auto">
          <h2 class="h6 text-uppercase text-white mb-5">Hello! We are Dropbox</h2>
          <h1 class="display-4 fw-bold pb-5 text-white">We have considered our solutions to <span class="georgia">assist</span> every stage of your growth.</h1>
          <div class="d-flex justify-content-center pt-2">
            <a href="#" class="btn btn-light px-5 py-3 fw-semibold">Explore Now</a>
          </div>
        </div>
        <!-- /column -->
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container -->
  </div>
</body>

</html>
Spread the love
Related Posts

Related Posts
