bohemian soul - Liveweave

Initializing

Liveweave Web expand_more
build Tools expand_more
library_add Library expand_more
- AAlgolia JS
- Animate CSS
- Apex Charts JS
- BBulma CSS
- Bootstrap
- CChart JS
- Chartist
- Create JS
- DD3
- Dojo
- FFoundation
- Fullpage JS
- GGranim JS
- Google Charts
- HHalfmoon
- JjQuery
- MMaterialize
- Moment JS
- Masonry JS
- Milligram CSS
- PPure CSS
- Primer CSS
- Popper JS
- Pattern CSS
- Picnic CSS
- RReact JS
- Raphael JS
- Raisin CSS
- SSemantic UI
- Skeleton CSS
- Spectre CSS
- Tachyons CSS
- TTailwind
- Three JS
- UUI Kit
- Vis JS
- WWater CSS
download Download expand_more
- developer_mode Download as HTML
- folder_zip Download as .ZIP
account_circle Login
settings Settings expand_more
smart_display Run

<style>
.flip-card {
margin: auto;
width: 1000px; /*change the sizing*/
height: 1000px; /*change the sizing*/
perspective: 1000px;
border-radius:10px;
}
 
.flip-card-inner {
width: 100%;
height: 100%;
transition: transform 1.5s;
transform-style: preserve-3d;
transition-timing-function: cubic-bezier(.175, .885, .32, 1.275);
}
 
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
 
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
 
.flip-card-front {
/*change the appearance of the front here*/
background: linear-gradient(-180deg, #FFFFFF40 30%, #b8cef360 100%);
backdrop-filter: blur(5px); /*delete if you don't want the frosted glass effect*/
box-shadow:0px 0px 5px 1px #61616130;
border-radius:10px;
border:1px solid #f5f5f5;
padding: 10px;
color: #000;
font-size: 0.9em;
}
 
.flip-card-back {
/*change the appearance of the back here*/
background: linear-gradient(-180deg, #FFFFFF40 30%, #b8cef360 100%);
backdrop-filter: blur(5px); /*delete if you don't want the frosted glass effect*/
box-shadow:0px 0px 5px 1px #61616130;
transform: rotateY(180deg);
border-radius:10px;
border:1px solid #f5f5f5;
padding: 10px;
color: #000;
font-size: 0.9em;
}
 
h1 {
background: -webkit-linear-gradient(-90deg, #ffffff 0%, #b8cef3 70%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #FFDBF1;
font-size: 2.3em;
font-weight: 900;
line-height: 1.2em;
-webkit-filter: drop-shadow(0px 0px 1px #919191);
}
 
h2 {
background: -webkit-linear-gradient(-90deg, #ffffff 0%, #B8BAF3 70%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 1.4em;
font-weight: 600;
line-height: 1.2em;
-webkit-filter: drop-shadow(0px 0px 1px #919191);
}
</style>
 
<body>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-back">
<img src="https://cdn.discordapp.com/attachments/1318142346843656226/1353259605341372517/0101.jpg?ex=67e100b8&is=67dfaf38&hm=1887de092b593cc2ef1c4afe6428ab35d4bcc71829afb35826de30bbc159f499&"alt="." style="wtdht:100%;heght:auto;position;relative;top:10px;filter: drop-shadow(0 0 0.75rem whight);">
<div class="flip-card-front">
<h1> FRONT </h1>
<p>hello</p>
</div>

<h1> GARBAGE TIME </h1>
<p>click here</p>
</div>

<div class="flip-card-back">
<h2> 2123 </h2>
<p></p>
</div>
<h2> BACK </h2>
<p>hello</p>
</div>
 
</div>
</div>
</body>