Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground
Initializing
Liveweave
Web
expand_more
home
Home
data_object
CSS Explorer
arrow_outward
Palette
Color Explorer
arrow_outward
Polyline
Graphics Editor
arrow_outward
data_array
Python Editor
New
arrow_outward
build
Tools
expand_more
restart_alt
Load "Hello Weaver!"
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> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <title><!-- title --></title> </head> <body> <!-- your content here --> <section id="showcase"> <h2 class="display-4">Carousel 1</h2> <div id="carousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel" data-slide-to="0" class="active"></li> <li data-target="#carousel" data-slide-to="1"></li> <li data-target="#carousel" data-slide-to="2"></li> <li data-target="#carousel" data-slide-to="3"></li> </ol> <div class="carousel-inner" > <div class="item active"> <img src="https://images.unsplash.com/photo-1543198474-7d73d64c21e9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1489&q=80" alt="Slide #1" class="d-block img-fluid" width="100%"> <div class="carousel-caption"> <h2 class="display-4">Slide A</h2> <p>Blah</p> </div> </div> <div class="item"> <img src="https://images.unsplash.com/photo-1543556080-68d6eb8cd8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1355&q=80" alt="Slide #2" class="d-block img-fluid" width="100%"> <div class="carousel-caption"> <h3 class="display-4">Slide A</h3> <p>Blah</p> </div> </div> <div class="item"> <img src="https://images.unsplash.com/photo-1509030450996-dd1a26dda07a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1395&q=80" alt="Slide #3" class="d-block img-fluid" width="100%"> <div class="carousel-caption"> <h3 class="display-4">Slide A</h3> <p>Blah</p> </div> </div> <div class="item"> <img src="https://images.unsplash.com/photo-1506236506587-53051b4197be?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="Slide #4" class="d-block img-fluid" width="100%"> <div class="carousel-caption"> <h3 class="display-4">Slide A</h3> <p>Blah</p> </div> </div> <div class="item"> <img src="http://toosmall.org/body/community-banner.png" alt="Slide #4" class="d-block img-fluid"> </div> </div> <a href="#carousel" class="left carousel-control" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a href="#carousel" class="right carousel-control" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div> </section> <section> <h2>Today deals</h2> <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="0"> <!-- Carousel indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Wrapper for carousel items --> <div class="carousel-inner"> <div class="item carousel-item active"> <div class="row"> <div class="col-sm-3"> <div class="thumb-wrapper"> <div class="img-box"> <img src="https://www.tutorialrepublic.com/examples/images/products/ipad.jpg" class="img-responsive img-fluid" alt=""> </div> <div class="thumb-content"> <h4>Apple iPad</h4> <p class="item-price"><strike>$400.00</strike> <span>$369.00</span></p> <div class="star-rating"> <ul class="list-inline"> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star-o"></i></li> </ul> </div> <a href="#" class="btn btn-primary">Go to deal</a> </div> </div> </div> <div class="col-sm-3"> <div class="thumb-wrapper"> <div class="img-box"> <img src="https://www.tutorialrepublic.com/examples/images/products/headphone.jpg" class="img-responsive img-fluid" alt=""> </div> <div class="thumb-content"> <h4>Sony Headphone</h4> <p class="item-price"><strike>$25.00</strike> <span>$23.99</span></p> <div class="star-rating"> <ul class="list-inline"> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star-o"></i></li> </ul> </div> <a href="#" class="btn btn-primary">Go to deal</a> </div> </div> </div> <div class="col-sm-3"> <div class="thumb-wrapper"> <div class="img-box"> <img src="https://www.tutorialrepublic.com/examples/images/products/macbook-air.jpg" class="img-responsive img-fluid" alt=""> </div> <div class="thumb-content"> <h4>Macbook Air</h4> <p class="item-price"><strike>$899.00</strike> <span>$649.00</span></p> <div class="star-rating"> <ul class="list-inline"> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star-half-o"></i></li> </ul> </div> <a href="#" class="btn btn-primary">Go to deal</a> </div> </div> </div> <div class="col-sm-3"> <div class="thumb-wrapper"> <div class="img-box"> <img src="https://www.tutorialrepublic.com/examples/images/products/nikon.jpg" class="img-responsive img-fluid" alt=""> </div> <div class="thumb-content"> <h4>Nikon DSLR</h4> <p class="item-price"><strike>$315.00</strike> <span>$250.00</span></p> <div class="star-rating"> <ul class="list-inline"> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star-o"></i></li> <li class="list-inline-item"><i class="fa fa-star-o"></i></li> </ul> </div> <a href="#" class="btn btn-primary">Go to deal</a> </div> </div> </div> </div> </div> <div class="item carousel-item"> <div class="row"> <div class="col-sm-3"> <div class="thumb-wrapper"> <div class="img-box"> <img src="https://www.tutorialrepublic.com/examples/images/products/play-station.jpg" class="img-responsive img-fluid" alt=""> </div> <div class="thumb-content"> <h4>Sony Play Station</h4> <p class="item-price"><strike>$289.00</strike> <span>$269.00</span></p> <div class="star-rating"> <ul class="list-inline"> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star-o"></i></li> </ul> </div> <a href="#" class="btn btn-primary">Go to deal</a> </div> </div> </div> <div class="col-sm-3"> <div class="thumb-wrapper"> <div class="img-box"> <img src="https://www.tutorialrepublic.com/examples/images/products/macbook-pro.jpg" class="img-responsive img-fluid" alt=""> </div> <div class="thumb-content"> <h4>Macbook Pro</h4> <p class="item-price"><strike>$1099.00</strike> <span>$869.00</span></p> <div class="star-rating"> <ul class="list-inline"> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star-half-o"></i></li> </ul> </div> <a href="#" class="btn btn-primary">Go to deal</a> </div> </div> </div> <div class="col-sm-3"> <div class="thumb-wrapper"> <div class="img-box"> <img src="https://www.tutorialrepublic.com/examples/images/products/speaker.jpg" class="img-responsive img-fluid" alt=""> </div> <div class="thumb-content"> <h4>Bose Speaker</h4> <p class="item-price"><strike>$109.00</strike> <span>$99.00</span></p> <div class="star-rating"> <ul class="list-inline"> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star-o"></i></li> <li class="list-inline-item"><i class="fa fa-star-o"></i></li> </ul> </div> <a href="#" class="btn btn-primary">Go to deal</a> </div> </div> </div> <div class="col-sm-3"> <div class="thumb-wrapper"> <div class="img-box"> <img src="https://www.tutorialrepublic.com/examples/images/products/galaxy.jpg" class="img-responsive img-fluid" alt=""> </div> <div class="thumb-content"> <h4>Samsung Galaxy S8</h4> <p class="item-price"><strike>$599.00</strike> <span>$569.00</span></p> <div class="star-rating"> <ul class="list-inline"> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star-o"></i></li> </ul> </div> <a href="#" class="btn btn-primary">Go to deal</a> </div> </div> </div> </div> </div> <div class="item carousel-item"> <div class="row"> <div class="col-sm-3"> <div class="thumb-wrapper"> <div class="img-box"> <img src="https://www.tutorialrepublic.com/examples/images/products/iphone.jpg" class="img-responsive img-fluid" alt=""> </div> <div class="thumb-content"> <h4>Apple iPhone</h4> <p class="item-price"><strike>$369.00</strike> <span>$349.00</span></p> <div class="star-rating"> <ul class="list-inline"> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star-o"></i></li> </ul> </div> <a href="#" class="btn btn-primary">Go to deal</a> </div> </div> </div> <div class="col-sm-3"> <div class="thumb-wrapper"> <div class="img-box"> <img src="https://www.tutorialrepublic.com/examples/images/products/canon.jpg" class="img-responsive img-fluid" alt=""> </div> <div class="thumb-content"> <h4>Canon DSLR</h4> <p class="item-price"><strike>$315.00</strike> <span>$250.00</span></p> <div class="star-rating"> <ul class="list-inline"> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star-o"></i></li> </ul> </div> <a href="#" class="btn btn-primary">Go to deal</a> </div> </div> </div> <div class="col-sm-3"> <div class="thumb-wrapper"> <div class="img-box"> <img src="https://www.tutorialrepublic.com/examples/images/products/pixel.jpg" class="img-responsive img-fluid" alt=""> </div> <div class="thumb-content"> <h4>Google Pixel</h4> <p class="item-price"><strike>$450.00</strike> <span>$418.00</span></p> <div class="star-rating"> <ul class="list-inline"> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star-o"></i></li> </ul> </div> <a href="#" class="btn btn-primary">Go to deal</a> </div> </div> </div> <div class="col-sm-3"> <div class="thumb-wrapper"> <div class="img-box"> <img src="https://www.tutorialrepublic.com/examples/images/products/watch.jpg" class="img-responsive img-fluid" alt=""> </div> <div class="thumb-content"> <h4>Apple Watch</h4> <p class="item-price"><strike>$350.00</strike> <span>$330.00</span></p> <div class="star-rating"> <ul class="list-inline"> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star"></i></li> <li class="list-inline-item"><i class="fa fa-star-o"></i></li> </ul> </div> <a href="#" class="btn btn-primary">Go to deal</a> </div> </div> </div> </div> </div> </div> <!-- Carousel controls --> <a class="carousel-control left carousel-control-prev" href="#myCarousel" data-slide="prev"> <i class="fa fa-angle-left"></i> </a> <a class="carousel-control right carousel-control-next" href="#myCarousel" data-slide="next"> <i class="fa fa-angle-right"></i> </a> </div> </section> </body> </html>
/* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width: 959px) {} /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) {} /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) {} /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) {} /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) {} #carousel .carousel-inner .item img{ position: absolute; margin-bottom: 20px; line-height:1; top:0; left:0; min-width:100%; min-height: 500px; max-height: 600px; // ADD a max height, so it doesn't keep increasing when you scroll dow } .carousel { margin: 50px auto; padding: 0 70px; } .carousel .item { min-height: 330px; text-align: center; overflow: hidden; } .carousel .item .img-box { height: 160px; width: 100%; position: relative; } .carousel .item img { max-width: 100%; max-height: 100%; display: inline-block; position: absolute; bottom: 0; margin: 0 auto; left: 0; right: 0; } .carousel .item h4 { font-size: 18px; margin: 10px 0; } .carousel .item .btn { color: #333; border-radius: 0; font-size: 11px; text-transform: uppercase; font-weight: bold; background: none; border: 1px solid #ccc; padding: 5px 10px; margin-top: 5px; line-height: 16px; } .carousel .item .btn:hover, .carousel .item .btn:focus { color: #fff; background: #000; border-color: #000; box-shadow: none; } .carousel .item .btn i { font-size: 14px; font-weight: bold; margin-left: 5px; } .carousel .thumb-wrapper { text-align: center; } .carousel .thumb-content { padding: 15px; } .carousel .carousel-control { height: 100px; width: 40px; background: none; margin: auto 0; background: rgba(0, 0, 0, 0.2); } .carousel .carousel-control i { font-size: 30px; position: absolute; top: 50%; display: inline-block; margin: -16px 0 0 0; z-index: 5; left: 0; right: 0; color: rgba(0, 0, 0, 0.8); text-shadow: none; font-weight: bold; } .carousel .item-price { font-size: 13px; padding: 2px 0; } .carousel .item-price strike { color: #999; margin-right: 5px; } .carousel .item-price span { color: #86bd57; font-size: 110%; } .carousel .carousel-control.left i { margin-left: -3px; } .carousel .carousel-control.left i { margin-right: -3px; } .carousel .carousel-indicators { bottom: -50px; } .carousel-indicators li, .carousel-indicators li.active { width: 10px; height: 10px; margin: 4px; border-radius: 50%; border-color: transparent; } .carousel-indicators li { background: rgba(0, 0, 0, 0.2); } .carousel-indicators li.active { background: rgba(0, 0, 0, 0.6); } .star-rating li { padding: 0; } .star-rating i { font-size: 14px; color: #ffc000; }
// Write JavaScript here
Check out the new AI-powered Python Playground
×