<div class="season one">
	<p class="text__one"> WINTER </p>
</div>
<div class="season two">
	<p class="text__two">SPRING </p>
</div>
<div class="season three">
	<p class="text__three"> SUMMER </p>
</div>
<div class="season four">
	<p class="text__four"> AUTUMN </p>
</div>
body,
html {
	height: 100%;
	display: flex;
	flex-direction: column;
	margin: 0;
}

.season {
	height: 25vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

p {
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Luckiest Guy", cursive;
	font-size: 8rem;
	letter-spacing: 0.7rem;
	width: 100%;
	height: 100%;
	color: white;
	background: black;
	text-align: center;
	mix-blend-mode: multiply;
	text-shadow: -5px 5px 0px black, -10px 10px 0px white, -20px 20px 0px purple;
}

.one {
	background: url("https://images.unsplash.com/photo-1634474559500-c934afa9f01f?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzNzA4OTcyNg&ixlib=rb-1.2.1&q=85");
	background-position: bottom right;
	background-size: cover;
}

.two {
	background: url("https://images.unsplash.com/photo-1634151527394-02a59150c521?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzNzA4OTMwNA&ixlib=rb-1.2.1&q=85");
	background-position: top;
	background-size: cover;
}

.three {
	background: url("https://images.unsplash.com/photo-1490750967868-88aa4486c946?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzNzA5MDU2NQ&ixlib=rb-1.2.1&q=85");
	background-position: bottom left;
	background-size: cover;
}

.four {
	background: url("https://images.unsplash.com/photo-1453959022778-cfda85dbe0f9?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzNzA4NjY0NQ&ixlib=rb-1.2.1&q=85");
	background-position: center;
	background-size: cover;
}

External CSS

  1. https://fonts.googleapis.com/css2?family=Modak&amp;display=swap"rel="stylesheet

External JavaScript

This Pen doesn't use any external JavaScript resources.