carrd-flip crd tutorial ©️ viliarreai

<!---

(＼ ∧♛∧ .+° °*.
(ヾ( *･ω･) °・ cr viliarreai if used (this code is modified by @fyodorcrds) !
`し( つ つ━✩* .+°
(／しーＪ

--->

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Pacifico|Poppins:400,700'>
<style>
/*my credits! please dont remove, but you may the change the img to ur liking*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;800&display=swap');
/* width */
::-webkit-scrollbar {
width: 8px;
}
/* track */
::-webkit-scrollbar-track {
background: #FFFFFF;
}
/* handle */
::-webkit-scrollbar-thumb {
background: #FFBDE2;
border-radius: 25px;
border-right: 3px white solid;
}
/* handle hover */
::-webkit-scrollbar-thumb:hover {
background: #EAB0CF;
border-radius: 25px;
}

.dont-remove {
position:fixed;
z-index:99;
bottom:0;margin-bottom:5px;
left:0;margin-left:5px;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
transition: 1s cubic-bezier(0.59, -0.43, 0.17, 1.16);
}

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
perspective: 800px;
background: #ffc0e2;
}

figure {
width: 350px;
box-shadow: 3px 3px 40px 0 rgba(0, 0, 0, 0.4);
border-radius: 8px;
position: relative;
background: #ffc0e2;
transition: 0.3s ease-in-out;
}
figure .img {
width: 100%;
height: 200px;
border-radius: 8px 8px 0 0;
background: url("https://data.whicdn.com/images/34202019/original.jpg");
background-size: 350px auto;
background-repeat: no-repeat;
}
figure .img:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 150px;
background: linear-gradient(transparent, #ecf0f1 44%);
border-radius: 0 0 8px 8px;
}
figure figcaption {
height: 80px;
display: flex;
align-items: left;
justify-content: center;
flex-wrap: wrap;
position: relative;
overflow: visible;
background: #fff;
border-radius: 0 0 8px 8px;
}
figure figcaption span {
width: 100%;
}
figure figcaption span:nth-child(1) {
position: absolute;
font-family: "Pacifico", cursive;
font-size: 30px;
top: -40px;
opacity: 0;
left: 10;
color: #000;
text-shadow: 0 0 15px #FFCFE9;
}
figure figcaption span:nth-child(2) {
filter: url("#outline");
font-family: "Pacifico", cursive;
font-size: 52px;
overflow: visible;
position: absolute;
top: -42px;
left: -107px;
white-space: nowrap;
color: #ffc0e2;
z-index: 10px;
transform: rotate(-2deg);
text-shadow: 0 0 15px #FFCFE9;
transition: top 0.3s ease-in-out;
}
figure figcaption span:nth-child(3) {
font-family: poppins;
opacity: 0;
padding: 0 20px;
height: 20px;
font-size: 0.75em;
overflow-y: scroll;
cursor: text;
}
figure button {
position: absolute;
bottom: -10px;
width: 130px;
left: calc(50% - 65px);
background: #FFBDE2;
color: #fff;
border: 0;
height: 35px;
border-radius: 4px;
transform: rotate(1deg);
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
cursor: pointer;
pointer-events: auto;
transition: 0.3s ease-in-out;
overflow: hidden;
z-index: 20;
}
figure button:focus {
outline: 0;
}
figure button:before {
content: "more";
position: absolute;
top: 8px;
left: 49px;
opacity: 1;
transition: 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
}
figure button:after {
content: "back";
opacity: 0;
top: 8px;
left: 0;
position: absolute;
transition: 1s cubic-bezier(0.55, -0.62, 0.27, 1.2);
}
figure:hover {
transition: 0.3s ease-in-out;
transform: rotateX(-2deg);
box-shadow: 3px -3px 40px 0 rgba(0, 0, 0, 0.4);
}
figure:hover button {
background: #FFADDA;
bottom: -13px;
transition: 0.3s ease-in-out;
}
figure:hover span:nth-child(2) {
top: -39px;
transition: top 0.3s ease-in-out;
}
figure.open .img {
height: 0;
}
figure.open figcaption {
height: 280px;
border-radius: 8px;
}
figure.open figcaption span:nth-child(1) {
top: -25px;
opacity: 1;
}
figure.open figcaption span:nth-child(2) {
top: -18px;
}
figure.open figcaption span:nth-child(3) {
height: 100%;
opacity: 1;
padding: 80px 20px 40px 20px;
}
figure.open button:before {
opacity: 0;
left: 100%;
}
figure.open button:after {
opacity: 1;
left: 47px;
}
figure.open:hover figcaption span:nth-child(2) {
top: -15px;
transition: top 0.3s ease-in-out;
}
figure svg {
position: absolute;
bottom: 0;
width: 350px;
}

mark {
background: #FFBDE2;
color: #ffffff;
font-weight: 800;
}

@media screen and (max-width: 736px) { figure {
width: 320px;
}
}

@media screen and (max-width: 736px) { figure figcaption span:nth-child(2) {
font-size: 40px;
}
}
</style>

<a href="https://twitter.com/vilIarreaI" title="container code created by ximena!"><img class="dont-remove" src="https://64.media.tumblr.com/tumblr_lkl5s8Ay6F1qfamg6.gif"></a>

<figure>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<filter id="outline" mask="url(#mask)">
<feFlood flood-color="#ecf0f1" result="base" />
<feMorphology in="SourceGraphic" operator="dilate" radius="10" />
<feComposite in="base" operator="in" />
<feBlend in="SourceGraphic" mode="normal" />
<feDropShadow stdDeviation="6" />
</filter>
</defs>
</svg>
<div class="img"></div>
<figcaption>
<span></span>
<span>name!</span>
<span>text text <strong>name</strong> text text text text text text text text text text text text text text text text text text text text text text text text text text text text ~
<br></br>
<mark> text text </mark> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.
<br></br>
<mark> text text text </mark> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.
<br></br>
<mark> text text </mark> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.
</span>
</figcaption>
<button></button>
</figure>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script id="rendered-js">
$("button").click(function () {
$("figure").toggleClass("open");
});
</script>