Responsive Website Landing Page with Flip Cards Using Only HTML and CSS

This landing page has a cool three-dimensional flip of the cards when hovering over them and is a responsive page for when a mouse is not available like on mobile devices.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Flip Card Landing Page</title>
	<style>
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}
	body {
		font-family: sans-serif;
		background-color: burlywood;
		padding: 0;
		margin: 0;
		overflow-x: hidden; /* fixes IE11 bug */
	}
	header {
		height: 15vh;
		background-image: radial-gradient(rgba(0,0,0,0.33),rgba(0,0,0,0.33)), url(https://picsum.photos/id/1005/1920/500);
		background-size: cover;
		background-position: center center;
		padding: 0;
		margin: 0;
	}
	header h1 {
		line-height: 15vh;
		padding: 0 0 0 30px;
		margin: 0;
		color: white;
	}
	a {
		text-decoration: none;
		color: inherit;
	}
	.flex-container {
		display: flex;
		flex-direction: column;
	}
	.card-container .back {
		display: block;
	}
	.card-container .front {
		display: none;
	}
	.card-container .back.contact { /* remove the radial gradient to lighten the images */
		background-image: radial-gradient(rgba(0,0,0,0.33),rgba(0,0,0,0.33)), url(https://picsum.photos/id/3/1000/1000);
	}
	.card-container .back.services {
		background-image: radial-gradient(rgba(0,0,0,0.33),rgba(0,0,0,0.33)), url(https://picsum.photos/id/1011/1000/1000);
	}
	.card-container .back.products {
		background-image: radial-gradient(rgba(0,0,0,0.33),rgba(0,0,0,0.33)), url(https://picsum.photos/id/18/1000/1000);
	}
	.card-container .back {
		background-size: cover;
		background-position: center center;
		padding: 20px;
		color: white;
	}
	@media (min-width: 769px) { /* DESKTOP CSS */

		.card-container .card,
		.card-container .back-text {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		.flex-container {
			flex-direction: row;
		}
		.card-container {
			padding: 0;
			margin: 10vh 6.66666667vw; /* margin width carefully calculated based on .card width, which is 20vw */
		}
		.card-container .back-text div a {
			background-color: transparent;
			color: inherit;
		}
		.card-container .back-text div a:hover {
			background-color: black;
			color: crimson;
		}
		.card-container .front {
			display: block;
			background-position: center center;
			background-size: cover;
		}
		.card-container .front.contact {
			background-image: url(https://picsum.photos/id/3/1000/1000);
		}
		.card-container .front.services {
			background-image: url(https://picsum.photos/id/1011/1000/1000);
		}
		.card-container .front.products {
			background-image: url(https://picsum.photos/id/18/1000/1000);
		}
		.card-container .back.contact,
		.card-container .back.services,
		.card-container .back.products {
			background-image: none;
		}
		.card-container .card {
			position: relative;
			width: 20vw; /* works with margin to center cards */
			height: 50vh;
		}
		.card-container .front,
		.card-container .back {
			position: absolute;
			width: 100%;
			height: 100%;
			overflow: hidden;
			backface-visibility: hidden;
			transition: transform .5s;
		}
		.card-container .front {
			transform: perspective(40vw) rotateY(0deg); /* set perspective to twice the width of the .card */
		}
		.card-container .back {
			transform: perspective(40vw) rotateY(180deg);
			background-color: crimson;
			color: black;
		}
		.card-container .card:hover .front {
			transform: perspective(40vw) rotateY(-180deg);
		}
		.card-container .card:hover .back {
			transform: perspective(40vw) rotateY(0deg);
		}
	}
	</style>
</head>
<body>
<header><h1>Acme, Inc.</h1></header>
<div class="flex-container">
	<div class="card-container">
		<div class="card">
			<div class="front contact"></div>
			<a class="back contact" href="#">
				<div class="back-text">
					<h1>Contact</h1>
					<p>Lorem ipsum dolor sit amet.</p>
				</div>
			</a>
		</div>
	</div>
	<div class="card-container">
		<div class="card">
			<div class="front services"></div>
			<a class="back services" href="#">
				<div class="back-text">
					<h1>Services</h1>
					<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, quo.</p>
				</div>
			</a>
		</div>
	</div>
	<div class="card-container">
		<div class="card">
			<div class="front products"></div>
			<a class="back products" href="#">
				<div class="back-text">
					<h1>Products</h1>
					<p>Lorem ipsum dolor sit amet.</p>
				</div>
			</a>
		</div>
	</div>
</div>
</body>
</html>

Coding Video

https://youtu.be/iUKOt8mXNac