By Espina Studio
Suscribe to our newsletter & get early
access to new content.
Hero section
Overview
Hero sections are usually the first section of a website. They are often composed of an image, title and a call-to-action button.
Bienvenidos
<!-- HERO -->
<section class="section-hero absolute-caption">
<div class="container-fluid">
<div class="row">
<div class="col-12 px-0">
<figure class="img-wrap mb-0">
<img src="https://images.pexels.com/photos/2684383/pexels-photo-2684383.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="" class="w-100 lazyload">
<figcaption>
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-9 text-center c-white text-shadow">
<h1 class="h1-uppercase">Bienvenidos</h1>
</div>
</div>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
</section>
<!-- END: HERO -->.section-hero {
&.absolute-caption {
.img-wrap {
position: relative;
img {
object-fit: cover;
object-position: center;
}
figcaption {
position: absolute;
bottom: 60px;
width: 100%;
left: 0;
z-index: 1;
}
}
}
}
Copied to clipboard