PROWAREtech

articles » current » css » flip-card-landing-page

CSS: Flip Cards Based Website Landing Page

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


This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
CLOSE