Bootstrap hero header snipp with gradient image – v29

bootstrap hero header snipp

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

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap header snipp</title>
  <link href="" rel="stylesheet">
    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( 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%);

  <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>
        <!-- /column -->
      <!-- /.row -->
    <!-- /.container -->

Spread the love

Related Posts

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

Back To Top