<div class="hero">
<div class="hero__content">
<h2>Best Brownies in Town</h2>
<p>High quality ingredients and best in-class chef</p>
<a href="#">Order now</a>
</div>
<img class="hero__figure" src="https://picsum.photos/1920/500?random=1" alt="hero" />
</div>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
min-height: 100vh;
font-family: "Exo", Arial, sans-serif;
background-color: #557;
}
.hero__content {
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: #fff;
}
h2 {
font-size: 2rem;
font-weight: bold;
}
p {
margin: 0.5rem 0 1.5rem;
}
a {
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 10rem;
background-color: #feca53;
padding: 10px 20px;
color: #000;
text-decoration: none;
box-shadow: 0 3px 8px rgb(0 0 0 / 7%);
transition: all 0.2s linear;
}
a:hover {
background-color: #ff9800;
}
.hero {
display: grid;
height: 500px;
overflow: hidden;
}
.hero__content {
z-index: 1; /* [1] */
grid-area: 1/-1;
display: flex;
flex-direction: column;
margin: auto; /* [2] */
text-align: center;
}
.hero__figure {
grid-area: 1/-1;
object-fit: cover; /* [3] */
width: 100%;
height: 100%;
min-height: 0; /* [4] */
}
/* The overlay */
.hero::after,
.hero::before {
content: "";
background-image: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
background-color: rgb(0 0 0 / 0.5);
opacity: 0.5;
transform: skew(15deg);
width: calc(100vw + 50%);
animation: gradient 5s ease infinite;
grid-area: 1/-1;
}
.hero::before {
transform: skew(-15deg);
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.