PROWAREtech
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
Comment
