First, Add an embed Element for HTML
Add this code to the embed element
Don't forget to modify it to your needs. Fonts, Texts, images, colors, links, shadows
This is the icon's library
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"/>
This is the card HTML.
You have to edit it to customize your card with your texts and links
<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>
Then, add the CSS to your element
Add this CSS code to your "custom CSS" element
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
And add the word "card" to your CSS class
This is the card CSS.
You have to edit it to customize your card with colors, fonts, shadows, margins, effects etc...
.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;
}
Add this CSS to your Flipbox Container to center the Flipbox.
This goes to the custom CSS part of the CONTAINER of your embedded element. You can then use the padding and margin of this container to adapt your flipbox.
CSS
element .card {
margin: auto;
}
How to add Flipboxes to Brizy
Any ideas or Requests
Thanks
Feel free to contact us.
if you have any Hacks that would be great to add or any ideas you would like to be solved with Brizy cloud, You can write at contact@monsieurclick.com or use the form to upload images and ideas. Thanks a lot !!!
If you want just to say thank you or help us maintain this page, Feel free to donate whatever you want
Thanks a lot for your help, It's greatly appreciated !!
And feel free to ask for tutorials or tips that you would like to discover on the site