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
<!DOCTYPE html> <html> <head> <title>HTML, CSS and JavaScript demo</title> </head> <body> <!-- Start your code here --> <div class="projectresponsive2"> <div class="projectresponsive"> <h2 id="demo15">15. Shine</h2> <div class="hover15 column"> <div> <figure><img src="https://images.unsplash.com/photo-1515161706666-f9a8d929723a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt=""/> </figure> <span>Hover</span> </div> <div> <figure><img src="https://images.unsplash.com/photo-1515161706666-f9a8d929723a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt=""/> </figure> <span>Hover</span> </div> <div> <figure><img src="https://images.unsplash.com/photo-1515161706666-f9a8d929723a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" alt=""/> </figure> <span>Hover</span> </div> </div> </div> </div> <!-- End your code here --> </body> </html>
body{ background-image:url(images/clearcontentbackground.jpg); height: auto; /* doesn't have to be '%' can also use 'px'*/ width: 100%; margin: 0 auto; padding: 0; background-position: top center; background-repeat: no-repeat; background-size: 100%; background-color: black; } img { max-width: 100%; height: auto; } .imagecontainer{ max-height: auto; max-width: auto; } .imageslider{ max-height: 300px; max-width: 1600px; padding-top: 13.2%; position: absolute; } .meny{ padding-top:39.5%; text-align: center; color: antiquewhite; font-size: 120%; font-family: Gill Sans, Gill Sans MT, Myriad Pro, DejaVu Sans Condensed, Helvetica, Arial," sans-serif"; word-spacing: 30px; } .content{ padding-top:500px; text-align: center; } .footer{ padding-top: 81.5%; width: auto; color: antiquewhite; font-family: Gill Sans, Gill Sans MT, Myriad Pro, DejaVu Sans Condensed, Helvetica, Arial," sans-serif"; } @keyframes slidy { 0% { left: 0%; } 20% { left: 0%; } 25% { left: -100%; } 45% { left: -100%; } 50% { left: -200%; } 70% { left: -200%; } 75% { left: -300%; } 95% { left: -300%; } 100% { left: -400%; } } body { margin: 0; } div#slider { overflow: hidden; } div#slider figure img { width: 20%; float: left; } div#slider figure { position: relative; width: 500%; margin: 0; left: 0; text-align: left; font-size: 0; animation: 30s slidy infinite; } .projectresponsive{ object-fit: contain; max-width: 100%; max-height: 100%; width: auto; height: auto; } .projectresponsive2{ max-height: 600px; max-width: 1000px; position: absolute; } /* Circle body css */ h1, h1+p { margin: 30px 15px 0; font-weight: 300; } h1+p a { color: #333; } h1+p a:hover { text-decoration: none; } h2 { margin: 60px 15px 0; padding: 0; font-weight: 300; } h2 span { margin-left: 1em; color: #aaa; font-size: 85%; } .column { margin: 15px 15px 0; padding: 0; } .column:last-child { padding-bottom: 60px; } .column::after { content: ''; clear: both; display: block; } .column div { /*position: relative; float: left; width: 300px; height: 200px; margin: 0 0 0 25px; padding: 0;*/ position: relative; float: left; width: 31%; margin-right: 3.33%; } .column div:last-child { margin-right: 0; } .column div span { position: absolute; bottom: -20px; left: 0; z-index: -1; display: block; width: 100%; margin: 0; padding: 0; color: #444; font-size: 18px; text-decoration: none; text-align: center; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; opacity: 0; } figure { /*width: 250px; height: 598px;*/ margin: 0; padding: 0; background: none; overflow: hidden; } figure:hover+span { bottom: -36px; opacity: 1; } /* Circle */ .hover15 figure { position: relative; } .hover15 figure::before { position: absolute; top: 50%; left: 50%; z-index: 2; display: block; content: ''; width: 0; height: 0; background: rgba(255,255,255,.2); border-radius: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; } .hover15 figure:hover::before { -webkit-animation: circle .75s; animation: circle .75s; } @-webkit-keyframes circle { 0% { opacity: 1; } 40% { opacity: 1; } 100% { width: 200%; height: 200%; opacity: 0; } } @keyframes circle { 0% { opacity: 1; } 40% { opacity: 1; } 100% { width: 200%; height: 200%; opacity: 0; } } @media screen and (max-width:480px){ .column div { width:100%; margin:0 0 50px } }
// Write JavaScript here