Initializing...
Liveweave
expand_more
home
Home
data_object
CSS Explorer
arrow_outward
Palette
Color Explorer
arrow_outward
Polyline
Graphics Editor
arrow_outward
outbox_alt
Generative AI
arrow_outward
build
Tools
expand_more
restart_alt
Load base template
post_add
Generate Lorem ipsum...
code
Format HTML
code_blocks
Format CSS
data_object
Format JavaScript
library_add
Library
expand_more
A
Algolia JS
Animate CSS
Apex Charts JS
B
Bulma CSS
Bootstrap
C
Chart JS
Chartist
Create JS
D
D3
Dojo
F
Foundation
Fullpage JS
G
Granim JS
Google Charts
H
Halfmoon
J
jQuery
M
Materialize
Moment JS
Masonry JS
Milligram CSS
P
Pure CSS
Primer CSS
Popper JS
Pattern CSS
Picnic CSS
R
React JS
Raphael JS
Raisin CSS
S
Semantic UI
Skeleton CSS
Spectre CSS
Tachyons CSS
T
Tailwind
Three JS
U
UI Kit
Vis JS
W
Water CSS
download
Download
expand_more
developer_mode
Download as HTML
folder_zip
Download as .ZIP
cloud_upload
Save
account_circle
Login
settings
Settings
expand_more
14
px
Live mode
Night mode
Line number
Mini map
Word wrap
sync_alt
Reset Settings
smart_display
Run
<!---cr @solieilos and @biogger99 for the base code---> <style> @font-face { src: url(https://dl.dropbox.com/s/1479f8x52y3z5u4/rainyhearts.ttf); font-family: rainy; } @font-face { src: url(https://dl.dropbox.com/s/7hl5zpktyp1p2cs/tebal.ttf); font-family: tebal; } mark { background: #fff; border: 1px solid #e0afb6; border-radius: 10px 5px 10px 5px; font-family: tebal; color: #e0afb6; padding-left: 14px; padding-right:14px; padding-top: 3px; font-size: 0.75em; letter-spacing: 1.5px; text-align: center; text-decoration: none; display: inline-block; font-size: 15px; margin: 0px 1px; cursor: hidden; } .hae { border-width: 2px; border: 2px solid #e0afb6; border-radius: 5px; height: 120px; width: 125px; padding: 2px; font-size: 0.85em; font-family: rainy; color: #453F55; overflow: auto; -webkit-transform: rotate(0deg); position: relative; overflow: hidden; } .hae:hover .sip { height: 0%; } .hea { font-size: 25px; width: 100%; height: 100%; background: #ffffff00; } .sip { color: #ffffff00; width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: 0.8s; -moz-transition: 0.8s; -webkit-transition: 0.8s; -o-transition: 0.8s; object-fit: cover; z-index: 1; } #choco { height: 100%; width: 100%; background: #ffffff00; position: relative; top: 0; padding: 10px; white-space: nowrap; margin-left: 10px; } .tem { height: 100%; object-fit: cover; white-space: normal; float: left; -webkit-mask-size: 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } </style> <title></title> </head> <body> <div class="hae"> <div class="hea"> <br> <div class="tem"> <center> <div id="inside"> <center> <style> #fart { height: 125px; width: 125px; padding: 0px 6px 0px 6px; font-size: 13px; font-family: rainy; color: #000; overflow: scroll; position: relative; bottom: 2.2em; right: 0.5em; z-index: 1; background: rgb(224,175,182); background: radial-gradient(circle, rgba(224,175,182,1) 0%, rgba(255,255,255,1) 100%); } </style> <center> <div id="fart"><br> <mark>about</mark><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br> <br> <mark>interests</mark><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br> <br> <mark>rules</mark><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br> <br> </div> </center> <div id="overlay"><img class="sip" src="https://media.discordapp.net/attachments/957960883374526546/997723297456328764/power.jpg"></div>