<!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>
.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(https://bootstraplily.com/demo/images/hex.svg);
mask-image: url(https://bootstraplily.com/demo/images/hex.svg);
}
.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;
}
</style>
</head>
<body>
<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="https://source.unsplash.com/0Zx1bDv5BNY" alt="" /></div>
</div>
<!-- /column -->
</div>
<!-- /.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>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="overflow-hidden">
<div class="divider text-white mx-n2">
<svg xmlns="http://www.w3.org/2000/svg" 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>
</div>
</div>
<!-- /.overflow-hidden -->
</section>
<!-- /section -->
</body>
</html>
