<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cards</title>
<link href="https://fonts.googleapis.com/css?family=Squada+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat+Alternates&display=swap" rel="stylesheet">
</head>
<body>
<p>Made with love by <a href="https://t.me/raiszzz2019">Rais</a></p>
<section id="cards">
<div class="container">
<div class="cards">
<div class="card">
<div class="front">
<h2>F</h2>
</div>
<div class="back">
<h3>Fast</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum eligendi qui culpa magni architecto iure quas vel, natus nam eveniet, officia blanditiis corrupti velit nemo voluptate eaque eos perferendis corporis.</p>
</div>
</div>
<div class="card">
<div class="front">
<h2>Q</h2>
</div>
<div class="back">
<h3>Quality</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum eligendi qui culpa magni architecto iure quas vel, natus nam eveniet, officia blanditiis corrupti velit nemo voluptate eaque eos perferendis corporis.</p>
</div>
</div>
<div class="card">
<div class="front">
<h2>S</h2>
</div>
<div class="back">
<h3>Security</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum eligendi qui culpa magni architecto iure quas vel, natus nam eveniet, officia blanditiis corrupti velit nemo voluptate eaque eos perferendis corporis.</p>
</div>
</div>
</div>
</div>
</section>
<p>Made with love by <a href="https://t.me/raiszzz2019">Rais</a></p>
</body>
</html>/* Settings */
*{
padding: 0;
margin: 0;
text-decoration: none;
box-sizing: border-box;
list-style: none;
}
body{
background: #343334;
font-family: 'Squada One', cursive;
}
body>p{
color: #5B595B;
font-size: 20px;
text-align: center;
margin-top: 20px;
}
body>p>a{
color: #5B595B;
border-bottom: 3px solid #fff;
transition: 0.5s;
}
body>p>a:hover{
border-bottom: 3px solid #5B595B;
}
.container{
width: 1000px;
margin: 0 auto;
}
/* Cards */
.cards{
display: flex;
justify-content: space-between;
margin-top: 100px;
}
.cards .card{
width: 30%;
cursor: pointer;
}
.card:hover .front{
background: #ed00bc;
box-shadow: 0 0 40px 2px #ed00bc;
transform: translateY(0);
}
.card:hover .front h2{
color: #fff;
}
.card:hover .back{
transform: translateY(0);
box-shadow: 0 0 20px 1px rgba(0,0,0,0.5);
}
.front{
background: #343334;
position: relative;
z-index: 10;
text-align: center;
padding: 60px 0;
transition: 0.5s;
transform: translateY(100px);
box-shadow: 0 0 20px 1px rgba(0,0,0,0.5);
}
.front h2{
color: #5B595B;
font-size: 110px;
transition: 0.5s;
}
.back{
background: #fff;
position: relative;
z-index: 5;
padding: 10px;
transform: translateY(-122px);
transition: 0.5s;
}
.back h3{
font-size: 40px;
}
.back p{
font-size: 17px;
margin-top: 20px;
font-family: 'Montserrat Alternates', sans-serif;
}
/* Media */
@media (max-width: 1001px){
.container{
width: 800px;
}
.back h3{
font-size: 30px;
}
.back p{
font-size: 14px;
}
}
@media (max-width: 801px){
.container{
width: 600px;
}
.back h3{
font-size: 26px;
}
.back p{
font-size: 12px;
}
}
@media (max-width: 601px){
.container{
width: 100%;
}
.cards{
flex-direction: column;
justify-content: center;
align-self: center;
}
.card{
width: 60% !important;
margin: 0 auto;
margin-bottom: 50px;
}
.back{
transform: translateY(0);
box-shadow: 0 0 20px 1px rgba(0,0,0,0.5);
}
.front{
transform: translateY(0);
background: #ed00bc;
box-shadow: 0 0 40px 2px #ed00bc;
}
.front h2{
color: #fff;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.