<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"/>
<div class="card">
<div class="card-inner">
<div class="card-front">
<div class="card-content">
<h2>FlipBoxes</h2>
<p>Tutos dev</p>
<p>HTML, CSS, JS</p>
</div>
</div>
<div class="card-back">
<div class="card-top">
<div class="card-image"></div>
</div>
<p>Follow me on</p>
<div class="card-icons">
<a href="https://www.kent1media.com" target="_blank">
<i class="fas fa-link"></i>
</a>
<a href="https://www.youtube.com/c/BrizyWordPressWebsiteBuilder" target="_blank">
<i class="fab fa-youtube"></i>
</a>
<a href="https://brizy.io" target="_blank">
<i class="fab fa-instagram"></i>
</a>
</div>
</div>
</div>
You can modify anything CSS related here. fonts, Colors, sizes etc…
The font in your typography settings must be the same as the one in your CSS
.card {
margin:0 auto;
width:240px;
height:320px;
perspective: 1000px;
text-align: center;
font-family: montserrat;
}
.card-inner {
position:relative;
width: 100%;
height:100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.card:hover .card-inner {
transform: rotateY(180deg);
}
.card-front, .card-back {
position:absolute;
height:100%;
width: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
padding:16px;
border-radius:8px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.card-front {
background-image:url(https://k1m.fr/wp-content/uploads/2022/04/thalia-karr-V83aFY738OI-unsplash-1.jpg);
background-size:cover;
background-position:center center;
display:flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
overflow: hidden;
}
.card-front:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0px;
background: linear-gradient(0deg, black, transparent);
}
.card-front .card-content {
z-index: 1;
color:white;
}
.card-front .card-content p {
color:#ececec;
}
.card-back {
transform: rotateY(180deg);
background:white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.card-back .card-image {
width:120px;
height:120px;
margin:0 auto;
border:solid 1px #cecece;
border-radius:100%;
background-image:url(https:///k1m.fr/wp-content/uploads/2022/04/logoK1Mrond.png);
background-size:cover;
background-position:center center;
}
.card-back p {
margin-top:12px;
}
.card-back .card-icons {
display:flex;
justify-content: center;
align-items: center;
}
.card-back .card-icons a {
font-size:18px;
color:white;
background:black;
width:42px;
height:42px;
border-radius:100%;
margin:8px;
display:flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition:opacity .2s;
}
.card-back .card-icons a:hover {
cursor:pointer;
opacity:0.7;
}
.card-front {
transition: opacity .6s;
}
.card:hover .card-front {
opacity:0;
}
CSS
element .card {
margin: auto;
}
Thanks
If you want just to say thank you or help us maintain this page, Feel free to donate whatever you want