Bootstrap hero header snipp – v19

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">
    .bg-gradient-blend {
      background: linear-gradient(160deg, #ffb7b7 9%, #727272 100%), radial-gradient(100% 100% at 30% 10%, #ffd1d1 0, #260000 100%), linear-gradient(180deg, #0ff 0, #fff 100%), radial-gradient(100% 100% at 70% 0, red 0, #00ffe0 100%), linear-gradient(280deg, #dbff00 0, #30f 100%);
      background-blend-mode: screen, overlay, color-burn, color-dodge, normal;

    .img-mask.mask-2 img {
      -webkit-mask-image: url(;
      mask-image: url(;

    .img-mask img {
      -webkit-mask-position: center center;
      mask-position: center center;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      height: auto;
      width: 100%;
      max-width: 100%;
      -webkit-mask-size: auto auto;
    .georgia {
    font-family: Georgia, 'Times New Roman', Times, serif;

  <section class="bg-gradient-blend">
    <div class="container py-5">
      <div class="row">
        <div class="col-lg-3 col-7 mx-auto">
          <div class="img-mask mask-2"><img src="" alt="" /></div>
        <!-- /column -->
      <!-- /.row -->
      <div class="row mt-10">
        <div class="col-md-10 col-lg-9 col-xxl-8 mx-auto text-center">
          <h2 class="fs-5 text-uppercase text-black-50 mb-3 fw-bold">Hello! I'm Brian Perez</h2>
          <h3 class="display-5 fw-bold mb-4">I’m a corporate <span class="georgia fst-italic">brand designer</span> based in New York City.</h3>
          <p class="fs-5 fw-medium text-black-50 pb-5">I’m very passionate about the work that I do, and if you are curious you can find my works on <a href="#" class="link-primary"">Dribbble</a>, my portfolio on <a href="#" class="link-danger"">Behance</a>, and my shots on <a href="#" class="link-info"">Instagram</a>.</p>
        <!-- /column -->
      <!-- /.row -->
    <!-- /.container -->
    <div class="overflow-hidden">
      <div class="divider text-white mx-n2">
        <svg xmlns="" viewBox="0 0 1440 92.26"><path fill="currentColor" d="M1206,21.2c-60-5-119-36.92-291-5C772,51.11,768,48.42,708,43.13c-60-5.68-108-29.92-168-30.22-60,.3-147,27.93-207,28.23-60-.3-122-25.94-182-36.91S30,5.93,0,16.2V92.26H1440v-87l-30,5.29C1348.94,22.29,1266,26.19,1206,21.2Z"/></svg>
    <!-- /.overflow-hidden -->
  <!-- /section -->

Spread the love

Related Posts

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

Back To Top