FEATURE: initial cwbs template for homepage
This commit is contained in:
peter
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,462 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Custom Wristbands.cz</title>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
|
||||
<link href='https://fonts.googleapis.com/css?family=Ubuntu:400,300,500,700&subset=latin-ext,latin' rel='stylesheet' type='text/css'>
|
||||
<link href="foundation.min.css" type="text/css" rel="stylesheet">
|
||||
<script src="vendor/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="foundation.min.js" type="text/javascript"></script>
|
||||
<link href="layout.css" type="text/css" rel="stylesheet">
|
||||
<link href="style.css" type="text/css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="top-bar">
|
||||
<div class="top-bar-left">
|
||||
<ul class="menu">
|
||||
<li class="menu-text">
|
||||
<a href="/"><img src="images/cwbs_logo_medium.png" alt="Custom Wristbands Logo"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="top-bar-right">
|
||||
<ul class="menu">
|
||||
<li><a href="#" class="active">Home</a></li>
|
||||
<li><a href="#">Sortiment</a></li>
|
||||
<li><a href="#">Doprodej</a></li>
|
||||
<li><a href="#">Galerie</a></li>
|
||||
<li><a href="#">O nás</a></li>
|
||||
<li><a href="#">Kontakt</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="orbit header" role="region" aria-label="Favorite Space Pictures" data-orbit>
|
||||
<ul class="orbit-container">
|
||||
<button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span><i class="fa fa-fw fa-2x fa-chevron-left"></i></button>
|
||||
<button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span><i class="fa fa-fw fa-2x fa-chevron-right"></i></button>
|
||||
<li class="orbit-slide is-active">
|
||||
<h2>Silikonové náramky1</h2>
|
||||
<h3>všeho druhu</h3>
|
||||
<div class="img" style="background-image: url(images/Sabaton.jpg);"></div>
|
||||
</li>
|
||||
<li class="orbit-slide">
|
||||
<h2>Silikonové náramky2</h2>
|
||||
<h3>všeho druhu</h3>
|
||||
<div class="img" style="background-image: url(images/background_o_nás.jpg);"></div>
|
||||
</li>
|
||||
<li class="orbit-slide">
|
||||
<h2>Silikonové náramky3</h2>
|
||||
<h3>všeho druhu</h3>
|
||||
<div class="img" style="background-image: url(images/Sabaton.jpg);"></div>
|
||||
</li>
|
||||
<li class="orbit-slide">
|
||||
<h2>Silikonové náramky4</h2>
|
||||
<h3>všeho druhu</h3>
|
||||
<div class="img" style="background-image: url(images/Sabaton.jpg);"></div>
|
||||
</li>
|
||||
</ul>
|
||||
<nav class="orbit-bullets">
|
||||
<button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
|
||||
<button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
|
||||
<button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
|
||||
<button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
|
||||
</nav>
|
||||
<i id="chevron-down" class="fa fa-2x fa-chevron-circle-down text-center white-text pointer" onclick="animateScroll()"></i>
|
||||
<script>
|
||||
|
||||
function animateScroll() {
|
||||
var body = $("html, body");
|
||||
body.stop().animate({scrollTop:$('#assortment').offset().top}, '200', 'swing');
|
||||
}
|
||||
|
||||
</script>
|
||||
</div>
|
||||
<div id="content">
|
||||
<div class="row column text-center m-t-25">
|
||||
<h2 id="assortment">Náš sortiment</h2>
|
||||
<hr>
|
||||
<p class="text-center">
|
||||
The city needs Bruce Wayne, your resources, your knowledge. It doesn't need your body or your life. That time is past.
|
||||
<br>
|
||||
Seven hundred twelve counts of extortion. Eight hundred and forty-nine counts of racketeering. Two hundred and forty-six counts of fraud. Eighty-seven counts of conspiracy murder.Five hundred and twenty-seven counts of obstruction of justice. How do the defendants plead?
|
||||
<br>
|
||||
You know how to fight six men. We can teach you how to engage 600.
|
||||
<br>
|
||||
You have inspired good. But you spat in the faces of Gotham's criminals. Didn't you think there might be casualties? Things always get worse before they get better.
|
||||
|
||||
</p>
|
||||
</div>
|
||||
<div class="row small-up-2 large-up-4">
|
||||
<div class="column">
|
||||
<img class="thumbnail" src="http://placehold.it/250x250">
|
||||
<h5 class="assortment-h5">Silikonové<br>náramky</h5>
|
||||
<p class="assortment-p">Lorem ipsum dolor<br>
|
||||
sit amet, consectetur<br>
|
||||
adipiscing elit,<br>
|
||||
sed do eiusmod<br>
|
||||
tempor incididunt<br>
|
||||
ut labore et dolore<br>
|
||||
magna aliqua.</p>
|
||||
<a href="#" class="assortment-more-btn text-center">- více zde -</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
<img class="thumbnail" src="http://placehold.it/250x250">
|
||||
<h5 class="assortment-h5">Atypické<br>náramky</h5>
|
||||
<p class="assortment-p">Lorem ipsum dolor<br>
|
||||
sit amet, consectetur<br>
|
||||
adipiscing elit,<br>
|
||||
sed do eiusmod<br>
|
||||
tempor incididunt<br>
|
||||
ut labore et dolore<br>
|
||||
magna aliqua.</p>
|
||||
<a href="#" class="assortment-more-btn text-center">- více zde -</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
<img class="thumbnail" src="http://placehold.it/250x250">
|
||||
<h5 class="assortment-h5">Papírové a látkové náramky</h5>
|
||||
<p class="assortment-p">Lorem ipsum dolor<br>
|
||||
sit amet, consectetur<br>
|
||||
adipiscing elit,<br>
|
||||
sed do eiusmod<br>
|
||||
tempor incididunt<br>
|
||||
ut labore et dolore<br>
|
||||
magna aliqua.</p>
|
||||
<a href="#" class="assortment-more-btn text-center">- více zde -</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
<img class="thumbnail" src="http://placehold.it/250x250">
|
||||
<h5 class="assortment-h5">Silikonové<br>klíčenky</h5>
|
||||
<p class="assortment-p">Lorem ipsum dolor<br>
|
||||
sit amet, consectetur<br>
|
||||
adipiscing elit,<br>
|
||||
sed do eiusmod<br>
|
||||
tempor incididunt<br>
|
||||
ut labore et dolore<br>
|
||||
magna aliqua.</p>
|
||||
<a href="#" class="assortment-more-btn text-center">- více zde -</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grey-wrapper m-t-25 clearfix">
|
||||
<div class="row column" id="sale-images">
|
||||
<h2 class="m-b-25">Doprodej zboží</h2>
|
||||
<div class="column medium-2 sale-image-holder">
|
||||
<img src=" http://placehold.it/250x250">
|
||||
<div class="sale-item-data text-center">
|
||||
<h5>Název produktu</h5>
|
||||
<p>popis</p>
|
||||
<p>počet ks</p>
|
||||
<p class="price">cena: 39,-Kč/ks</p>
|
||||
<a href="#" class="button secondary rounded m-t-25">DETAIL</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column medium-2 sale-image-holder">
|
||||
<img src=" http://placehold.it/250x250">
|
||||
<div class="sale-item-data text-center">
|
||||
<h5>Název produktu</h5>
|
||||
<p>popis</p>
|
||||
<p>počet ks</p>
|
||||
<p class="price">cena: 39,-Kč/ks</p>
|
||||
<a href="#" class="button secondary rounded m-t-25">DETAIL</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column medium-2 sale-image-holder">
|
||||
<img src=" http://placehold.it/250x250">
|
||||
<div class="sale-item-data text-center">
|
||||
<h5>Název produktu</h5>
|
||||
<p>popis</p>
|
||||
<p>počet ks</p>
|
||||
<p class="price">cena: 39,-Kč/ks</p>
|
||||
<a href="#" class="button secondary rounded m-t-25">DETAIL</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column medium-2 sale-image-holder">
|
||||
<img src=" http://placehold.it/250x250">
|
||||
<div class="sale-item-data text-center">
|
||||
<h5>Název produktu</h5>
|
||||
<p>popis</p>
|
||||
<p>počet ks</p>
|
||||
<p class="price">cena: 39,-Kč/ks</p>
|
||||
<a href="#" class="button secondary rounded m-t-25">DETAIL</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column medium-2 sale-image-holder">
|
||||
<img src=" http://placehold.it/250x250">
|
||||
<div class="sale-item-data text-center">
|
||||
<h5>Název produktu</h5>
|
||||
<p>popis</p>
|
||||
<p>počet ks</p>
|
||||
<p class="price">cena: 39,-Kč/ks</p>
|
||||
<a href="#" class="button secondary rounded m-t-25">DETAIL</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column medium-2 sale-image-holder">
|
||||
<img src=" http://placehold.it/250x250">
|
||||
<div class="sale-item-data text-center">
|
||||
<h5>Název produktu</h5>
|
||||
<p>popis</p>
|
||||
<p>počet ks</p>
|
||||
<p class="price">cena: 39,-Kč/ks</p>
|
||||
<a href="#" class="button secondary rounded m-t-25">DETAIL</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column medium-2 sale-image-holder">
|
||||
<img src=" http://placehold.it/250x250">
|
||||
<div class="sale-item-data text-center">
|
||||
<h5>Název produktu</h5>
|
||||
<p>popis</p>
|
||||
<p>počet ks</p>
|
||||
<p class="price">cena: 39,-Kč/ks</p>
|
||||
<a href="#" class="button secondary rounded m-t-25">DETAIL</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column medium-2 sale-image-holder">
|
||||
<img src=" http://placehold.it/250x250">
|
||||
<div class="sale-item-data text-center">
|
||||
<h5>Název produktu</h5>
|
||||
<p>popis</p>
|
||||
<p>počet ks</p>
|
||||
<p class="price">cena: 39,-Kč/ks</p>
|
||||
<a href="#" class="button secondary rounded m-t-25">DETAIL</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column medium-2 sale-image-holder">
|
||||
<img src=" http://placehold.it/250x250">
|
||||
<div class="sale-item-data text-center">
|
||||
<h5>Název produktu</h5>
|
||||
<p>popis</p>
|
||||
<p>počet ks</p>
|
||||
<p class="price">cena: 39,-Kč/ks</p>
|
||||
<a href="#" class="button secondary rounded m-t-25">DETAIL</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column medium-2 sale-image-holder">
|
||||
<img src=" http://placehold.it/250x250">
|
||||
<div class="sale-item-data text-center">
|
||||
<h5>Název produktu</h5>
|
||||
<p>popis</p>
|
||||
<p>počet ks</p>
|
||||
<p class="price">cena: 39,-Kč/ks</p>
|
||||
<a href="#" class="button secondary rounded m-t-25">DETAIL</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column medium-2 sale-image-holder">
|
||||
<img src=" http://placehold.it/250x250">
|
||||
<div class="sale-item-data text-center">
|
||||
<h5>Název produktu</h5>
|
||||
<p>popis</p>
|
||||
<p>počet ks</p>
|
||||
<p class="price">cena: 39,-Kč/ks</p>
|
||||
<a href="#" class="button secondary rounded m-t-25">DETAIL</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column medium-2 sale-image-holder">
|
||||
<img src=" http://placehold.it/250x250">
|
||||
<div class="sale-item-data text-center">
|
||||
<h5>Název produktu</h5>
|
||||
<p>popis</p>
|
||||
<p>počet ks</p>
|
||||
<p class="price">cena: 39,-Kč/ks</p>
|
||||
<a href="#" class="button secondary rounded m-t-25">DETAIL</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$('.sale-image-holder').mouseenter(function() {
|
||||
$(this).find('.sale-item-data').animate({opacity: 1}, 100, 'swing');
|
||||
}).mouseleave(function() {
|
||||
$(this).find('.sale-item-data').animate({opacity: 0}, 300, 'swing');
|
||||
})
|
||||
</script>
|
||||
</div>
|
||||
<div class="green-wrapper clearfix">
|
||||
<div class="row column text-center" id="questions">
|
||||
<h4 class="w-t">MÁTE DOTAZY? NEBO NÁM CHCETE ZASLAT RYCHLOU POPTÁVKU?</h4>
|
||||
<a href="#" class="button secondary m-t-25 large rounded">RYCHLÝ FORMULÁŘ</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="white-wrapper clearfix">
|
||||
<div class="row column" id="design">
|
||||
<div class="columns medium-7">
|
||||
<h6>Design a potisk</h6>
|
||||
<p>
|
||||
<strong><i>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||
incididunt ut labore et dolore magna aliqua, amet, consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</i></strong>
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
|
||||
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
|
||||
eu fugiat nulla pariatur.
|
||||
</p>
|
||||
</div>
|
||||
<div class="columns medium-5">
|
||||
<ul class="design-ul-block">
|
||||
<li>
|
||||
|
||||
<h6 class="lowercase">
|
||||
Proč si vybrat právě nás?
|
||||
</h6>
|
||||
<p class="small">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||
incididunt ut labore et dolore magna aliqua, amet, consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h6 class="lowercase">
|
||||
Jaký používáme materiál?
|
||||
</h6>
|
||||
<p class="small">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||
incididunt ut labore et dolore magna aliqua, amet, consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="large">
|
||||
<div class="row column text-center">
|
||||
<h2 id="galerie">Galerie</h2>
|
||||
<hr>
|
||||
</div>
|
||||
<div class="orbit footer" role="region" aria-label="Favorite Space Pictures" data-orbit>
|
||||
<ul class="orbit-container text-center">
|
||||
<button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span><i class="fa fa-fw fa-2x fa-chevron-left"></i></button>
|
||||
<button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span><i class="fa fa-fw fa-2x fa-chevron-right"></i></button>
|
||||
<li class="orbit-slide is-active row p-lr-15">
|
||||
<div class="column medium-3">
|
||||
<img src=" http://placehold.it/250x250">.
|
||||
</div>
|
||||
<div class="column medium-3">
|
||||
<img src=" http://placehold.it/250x250">
|
||||
</div>
|
||||
<div class="column medium-3">
|
||||
<img src=" http://placehold.it/250x250">
|
||||
</div>
|
||||
<div class="column medium-3">
|
||||
<img src=" http://placehold.it/250x250">
|
||||
</div>
|
||||
</li>
|
||||
<li class="orbit-slide row p-lr-15">
|
||||
<div class="column medium-3">
|
||||
<img src=" http://placehold.it/250x250">.
|
||||
</div>
|
||||
<div class="column medium-3">
|
||||
<img src=" http://placehold.it/250x250">
|
||||
</div>
|
||||
<div class="column medium-3">
|
||||
<img src=" http://placehold.it/250x250">
|
||||
</div>
|
||||
<div class="column medium-3">
|
||||
<img src=" http://placehold.it/250x250">
|
||||
</div>
|
||||
</li>
|
||||
<li class="orbit-slide row p-lr-15">
|
||||
<div class="column medium-3">
|
||||
<img src=" http://placehold.it/250x250">.
|
||||
</div>
|
||||
<div class="column medium-3">
|
||||
<img src=" http://placehold.it/250x250">
|
||||
</div>
|
||||
<div class="column medium-3">
|
||||
<img src=" http://placehold.it/250x250">
|
||||
</div>
|
||||
<div class="column medium-3">
|
||||
<img src=" http://placehold.it/250x250">
|
||||
</div>
|
||||
</li>
|
||||
<li class="orbit-slide row p-lr-15">
|
||||
<div class="column medium-3">
|
||||
<img src=" http://placehold.it/250x250">.
|
||||
</div>
|
||||
<div class="column medium-3">
|
||||
<img src=" http://placehold.it/250x250">
|
||||
</div>
|
||||
<div class="column medium-3">
|
||||
<img src=" http://placehold.it/250x250">
|
||||
</div>
|
||||
<div class="column medium-3">
|
||||
<img src=" http://placehold.it/250x250">
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="large">
|
||||
<div class="row text-center">
|
||||
<ul class="menu social-icons">
|
||||
<li>
|
||||
<a href="#" target="_blank">
|
||||
<span class="fa-stack fa-lg">
|
||||
<i class="fa fa-circle fa-stack-2x"></i>
|
||||
<i class="fa fa-facebook fa-stack-1x w-t"></i>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">
|
||||
<span class="fa-stack fa-lg">
|
||||
<i class="fa fa-circle fa-stack-2x"></i>
|
||||
<i class="fa fa fa-google-plus fa-stack-1x w-t"></i>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">
|
||||
<span class="fa-stack fa-lg">
|
||||
<i class="fa fa-circle fa-stack-2x"></i>
|
||||
<i class="fa fa-instagram fa-stack-1x w-t"></i>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" target="_blank">
|
||||
<span class="fa-stack fa-lg">
|
||||
<i class="fa fa-circle fa-stack-2x"></i>
|
||||
<i class="fa fa-pinterest-p fa-stack-1x w-t"></i>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
<ul class="menu">
|
||||
<li><a href="#" class="active">Home</a></li>
|
||||
<li><a href="#">Sortiment</a></li>
|
||||
<li><a href="#">Doprodej</a></li>
|
||||
<li><a href="#">Galerie</a></li>
|
||||
<li><a href="#">O nás</a></li>
|
||||
<li><a href="#">Kontakt</a></li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
<hr>
|
||||
<p>
|
||||
<a href="#">Název</a> -
|
||||
<a href="#">Adresa</a> -
|
||||
<a href="#">www.url.cz</a> -
|
||||
<a href="#">email@email</a> -
|
||||
<a href="#">00420147852369</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$(document).foundation();
|
||||
});
|
||||
</script>
|
||||
<script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 895 B |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
+656
@@ -0,0 +1,656 @@
|
||||
.slide-in-down.mui-enter, .slide-in-left.mui-enter, .slide-in-up.mui-enter, .slide-in-right.mui-enter, .slide-out-down.mui-leave, .slide-out-right.mui-leave, .slide-out-up.mui-leave, .slide-out-left.mui-leave, .fade-in.mui-enter, .fade-out.mui-leave, .hinge-in-from-top.mui-enter, .hinge-in-from-right.mui-enter, .hinge-in-from-bottom.mui-enter, .hinge-in-from-left.mui-enter, .hinge-in-from-middle-x.mui-enter, .hinge-in-from-middle-y.mui-enter, .hinge-out-from-top.mui-leave, .hinge-out-from-right.mui-leave, .hinge-out-from-bottom.mui-leave, .hinge-out-from-left.mui-leave, .hinge-out-from-middle-x.mui-leave, .hinge-out-from-middle-y.mui-leave, .scale-in-up.mui-enter, .scale-in-down.mui-enter, .scale-out-up.mui-leave, .scale-out-down.mui-leave, .spin-in.mui-enter, .spin-out.mui-leave, .spin-in-ccw.mui-enter, .spin-out-ccw.mui-leave {
|
||||
transition-duration: 500ms;
|
||||
transition-timing-function: linear;
|
||||
}
|
||||
|
||||
.slide-in-down.mui-enter {
|
||||
-webkit-transform: translateY(-100%);
|
||||
transform: translateY(-100%);
|
||||
transition-property: -webkit-transform, opacity;
|
||||
transition-property: transform, opacity;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.slide-in-down.mui-enter.mui-enter-active {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.slide-in-left.mui-enter {
|
||||
-webkit-transform: translateX(-100%);
|
||||
transform: translateX(-100%);
|
||||
transition-property: -webkit-transform, opacity;
|
||||
transition-property: transform, opacity;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.slide-in-left.mui-enter.mui-enter-active {
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.slide-in-up.mui-enter {
|
||||
-webkit-transform: translateY(100%);
|
||||
transform: translateY(100%);
|
||||
transition-property: -webkit-transform, opacity;
|
||||
transition-property: transform, opacity;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.slide-in-up.mui-enter.mui-enter-active {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.slide-in-right.mui-enter {
|
||||
-webkit-transform: translateX(100%);
|
||||
transform: translateX(100%);
|
||||
transition-property: -webkit-transform, opacity;
|
||||
transition-property: transform, opacity;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.slide-in-right.mui-enter.mui-enter-active {
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.slide-out-down.mui-leave {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
transition-property: -webkit-transform, opacity;
|
||||
transition-property: transform, opacity;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.slide-out-down.mui-leave.mui-leave-active {
|
||||
-webkit-transform: translateY(-100%);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
.slide-out-right.mui-leave {
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
transition-property: -webkit-transform, opacity;
|
||||
transition-property: transform, opacity;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.slide-out-right.mui-leave.mui-leave-active {
|
||||
-webkit-transform: translateX(100%);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.slide-out-up.mui-leave {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
transition-property: -webkit-transform, opacity;
|
||||
transition-property: transform, opacity;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.slide-out-up.mui-leave.mui-leave-active {
|
||||
-webkit-transform: translateY(-100%);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
.slide-out-left.mui-leave {
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
transition-property: -webkit-transform, opacity;
|
||||
transition-property: transform, opacity;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.slide-out-left.mui-leave.mui-leave-active {
|
||||
-webkit-transform: translateX(-100%);
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.fade-in.mui-enter {
|
||||
opacity: 0;
|
||||
transition-property: opacity;
|
||||
}
|
||||
|
||||
.fade-in.mui-enter.mui-enter-active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.fade-out.mui-leave {
|
||||
opacity: 1;
|
||||
transition-property: opacity;
|
||||
}
|
||||
|
||||
.fade-out.mui-leave.mui-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hinge-in-from-top.mui-enter {
|
||||
-webkit-transform: perspective(2000px) rotateX(-90deg);
|
||||
transform: perspective(2000px) rotateX(-90deg);
|
||||
-webkit-transform-origin: top;
|
||||
transform-origin: top;
|
||||
transition-property: -webkit-transform, opacity;
|
||||
transition-property: transform, opacity;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hinge-in-from-top.mui-enter.mui-enter-active {
|
||||
-webkit-transform: perspective(2000px) rotate(0deg);
|
||||
transform: perspective(2000px) rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hinge-in-from-right.mui-enter {
|
||||
-webkit-transform: perspective(2000px) rotateY(-90deg);
|
||||
transform: perspective(2000px) rotateY(-90deg);
|
||||
-webkit-transform-origin: right;
|
||||
transform-origin: right;
|
||||
transition-property: -webkit-transform, opacity;
|
||||
transition-property: transform, opacity;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hinge-in-from-right.mui-enter.mui-enter-active {
|
||||
-webkit-transform: perspective(2000px) rotate(0deg);
|
||||
transform: perspective(2000px) rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hinge-in-from-bottom.mui-enter {
|
||||
-webkit-transform: perspective(2000px) rotateX(90deg);
|
||||
transform: perspective(2000px) rotateX(90deg);
|
||||
-webkit-transform-origin: bottom;
|
||||
transform-origin: bottom;
|
||||
transition-property: -webkit-transform, opacity;
|
||||
transition-property: transform, opacity;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hinge-in-from-bottom.mui-enter.mui-enter-active {
|
||||
-webkit-transform: perspective(2000px) rotate(0deg);
|
||||
transform: perspective(2000px) rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hinge-in-from-left.mui-enter {
|
||||
-webkit-transform: perspective(2000px) rotateY(90deg);
|
||||
transform: perspective(2000px) rotateY(90deg);
|
||||
-webkit-transform-origin: left;
|
||||
transform-origin: left;
|
||||
transition-property: -webkit-transform, opacity;
|
||||
transition-property: transform, opacity;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hinge-in-from-left.mui-enter.mui-enter-active {
|
||||
-webkit-transform: perspective(2000px) rotate(0deg);
|
||||
transform: perspective(2000px) rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hinge-in-from-middle-x.mui-enter {
|
||||
-webkit-transform: perspective(2000px) rotateX(-90deg);
|
||||
transform: perspective(2000px) rotateX(-90deg);
|
||||
-webkit-transform-origin: center;
|
||||
transform-origin: center;
|
||||
transition-property: -webkit-transform, opacity;
|
||||
transition-property: transform, opacity;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hinge-in-from-middle-x.mui-enter.mui-enter-active {
|
||||
-webkit-transform: perspective(2000px) rotate(0deg);
|
||||
transform: perspective(2000px) rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hinge-in-from-middle-y.mui-enter {
|
||||
-webkit-transform: perspective(2000px) rotateY(-90deg);
|
||||
transform: perspective(2000px) rotateY(-90deg);
|
||||
-webkit-transform-origin: center;
|
||||
transform-origin: center;
|
||||
transition-property: -webkit-transform, opacity;
|
||||
transition-property: transform, opacity;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hinge-in-from-middle-y.mui-enter.mui-enter-active {
|
||||
-webkit-transform: perspective(2000px) rotate(0deg);
|
||||
transform: perspective(2000px) rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hinge-out-from-top.mui-leave {
|
||||
-webkit-transform: perspective(2000px) rotate(0deg);
|
||||
transform: perspective(2000px) rotate(0deg);
|
||||
-webkit-transform-origin: top;
|
||||
transform-origin: top;
|
||||
transition-property: -webkit-transform, opacity;
|
||||
transition-property: transform, opacity;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hinge-out-from-top.mui-leave.mui-leave-active {
|
||||
-webkit-transform: perspective(2000px) rotateX(-90deg);
|
||||
transform: perspective(2000px) rotateX(-90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hinge-out-from-right.mui-leave {
|
||||
-webkit-transform: perspective(2000px) rotate(0deg);
|
||||
transform: perspective(2000px) rotate(0deg);
|
||||
-webkit-transform-origin: right;
|
||||
transform-origin: right;
|
||||
transition-property: -webkit-transform, opacity;
|
||||
transition-property: transform, opacity;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hinge-out-from-right.mui-leave.mui-leave-active {
|
||||
-webkit-transform: perspective(2000px) rotateY(-90deg);
|
||||
transform: perspective(2000px) rotateY(-90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hinge-out-from-bottom.mui-leave {
|
||||
-webkit-transform: perspective(2000px) rotate(0deg);
|
||||
transform: perspective(2000px) rotate(0deg);
|
||||
-webkit-transform-origin: bottom;
|
||||
transform-origin: bottom;
|
||||
transition-property: -webkit-transform, opacity;
|
||||
transition-property: transform, opacity;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hinge-out-from-bottom.mui-leave.mui-leave-active {
|
||||
-webkit-transform: perspective(2000px) rotateX(90deg);
|
||||
transform: perspective(2000px) rotateX(90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hinge-out-from-left.mui-leave {
|
||||
-webkit-transform: perspective(2000px) rotate(0deg);
|
||||
transform: perspective(2000px) rotate(0deg);
|
||||
-webkit-transform-origin: left;
|
||||
transform-origin: left;
|
||||
transition-property: -webkit-transform, opacity;
|
||||
transition-property: transform, opacity;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hinge-out-from-left.mui-leave.mui-leave-active {
|
||||
-webkit-transform: perspective(2000px) rotateY(90deg);
|
||||
transform: perspective(2000px) rotateY(90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hinge-out-from-middle-x.mui-leave {
|
||||
-webkit-transform: perspective(2000px) rotate(0deg);
|
||||
transform: perspective(2000px) rotate(0deg);
|
||||
-webkit-transform-origin: center;
|
||||
transform-origin: center;
|
||||
transition-property: -webkit-transform, opacity;
|
||||
transition-property: transform, opacity;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hinge-out-from-middle-x.mui-leave.mui-leave-active {
|
||||
-webkit-transform: perspective(2000px) rotateX(-90deg);
|
||||
transform: perspective(2000px) rotateX(-90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hinge-out-from-middle-y.mui-leave {
|
||||
-webkit-transform: perspective(2000px) rotate(0deg);
|
||||
transform: perspective(2000px) rotate(0deg);
|
||||
-webkit-transform-origin: center;
|
||||
transform-origin: center;
|
||||
transition-property: -webkit-transform, opacity;
|
||||
transition-property: transform, opacity;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hinge-out-from-middle-y.mui-leave.mui-leave-active {
|
||||
-webkit-transform: perspective(2000px) rotateY(-90deg);
|
||||
transform: perspective(2000px) rotateY(-90deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.scale-in-up.mui-enter {
|
||||
-webkit-transform: scale(0.5);
|
||||
transform: scale(0.5);
|
||||
transition-property: -webkit-transform, opacity;
|
||||
transition-property: transform, opacity;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.scale-in-up.mui-enter.mui-enter-active {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.scale-in-down.mui-enter {
|
||||
-webkit-transform: scale(1.5);
|
||||
transform: scale(1.5);
|
||||
transition-property: -webkit-transform, opacity;
|
||||
transition-property: transform, opacity;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.scale-in-down.mui-enter.mui-enter-active {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.scale-out-up.mui-leave {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
transition-property: -webkit-transform, opacity;
|
||||
transition-property: transform, opacity;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.scale-out-up.mui-leave.mui-leave-active {
|
||||
-webkit-transform: scale(1.5);
|
||||
transform: scale(1.5);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.scale-out-down.mui-leave {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
transition-property: -webkit-transform, opacity;
|
||||
transition-property: transform, opacity;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.scale-out-down.mui-leave.mui-leave-active {
|
||||
-webkit-transform: scale(0.5);
|
||||
transform: scale(0.5);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.spin-in.mui-enter {
|
||||
-webkit-transform: rotate(-0.75turn);
|
||||
transform: rotate(-0.75turn);
|
||||
transition-property: -webkit-transform, opacity;
|
||||
transition-property: transform, opacity;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.spin-in.mui-enter.mui-enter-active {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.spin-out.mui-leave {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
transition-property: -webkit-transform, opacity;
|
||||
transition-property: transform, opacity;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.spin-out.mui-leave.mui-leave-active {
|
||||
-webkit-transform: rotate(0.75turn);
|
||||
transform: rotate(0.75turn);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.spin-in-ccw.mui-enter {
|
||||
-webkit-transform: rotate(0.75turn);
|
||||
transform: rotate(0.75turn);
|
||||
transition-property: -webkit-transform, opacity;
|
||||
transition-property: transform, opacity;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.spin-in-ccw.mui-enter.mui-enter-active {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.spin-out-ccw.mui-leave {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
transition-property: -webkit-transform, opacity;
|
||||
transition-property: transform, opacity;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.spin-out-ccw.mui-leave.mui-leave-active {
|
||||
-webkit-transform: rotate(-0.75turn);
|
||||
transform: rotate(-0.75turn);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slow {
|
||||
transition-duration: 750ms !important;
|
||||
}
|
||||
|
||||
.fast {
|
||||
transition-duration: 250ms !important;
|
||||
}
|
||||
|
||||
.linear {
|
||||
transition-timing-function: linear !important;
|
||||
}
|
||||
|
||||
.ease {
|
||||
transition-timing-function: ease !important;
|
||||
}
|
||||
|
||||
.ease-in {
|
||||
transition-timing-function: ease-in !important;
|
||||
}
|
||||
|
||||
.ease-out {
|
||||
transition-timing-function: ease-out !important;
|
||||
}
|
||||
|
||||
.ease-in-out {
|
||||
transition-timing-function: ease-in-out !important;
|
||||
}
|
||||
|
||||
.bounce-in {
|
||||
transition-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important;
|
||||
}
|
||||
|
||||
.bounce-out {
|
||||
transition-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important;
|
||||
}
|
||||
|
||||
.bounce-in-out {
|
||||
transition-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important;
|
||||
}
|
||||
|
||||
.short-delay {
|
||||
transition-delay: 300ms !important;
|
||||
}
|
||||
|
||||
.long-delay {
|
||||
transition-delay: 700ms !important;
|
||||
}
|
||||
|
||||
.shake {
|
||||
-webkit-animation-name: shake-7;
|
||||
animation-name: shake-7;
|
||||
}
|
||||
|
||||
@-webkit-keyframes shake-7 {
|
||||
0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {
|
||||
-webkit-transform: translateX(7%);
|
||||
transform: translateX(7%);
|
||||
}
|
||||
5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {
|
||||
-webkit-transform: translateX(-7%);
|
||||
transform: translateX(-7%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shake-7 {
|
||||
0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {
|
||||
-webkit-transform: translateX(7%);
|
||||
transform: translateX(7%);
|
||||
}
|
||||
5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {
|
||||
-webkit-transform: translateX(-7%);
|
||||
transform: translateX(-7%);
|
||||
}
|
||||
}
|
||||
|
||||
.spin-cw {
|
||||
-webkit-animation-name: spin-cw-1turn;
|
||||
animation-name: spin-cw-1turn;
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin-cw-1turn {
|
||||
0% {
|
||||
-webkit-transform: rotate(-1turn);
|
||||
transform: rotate(-1turn);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin-cw-1turn {
|
||||
0% {
|
||||
-webkit-transform: rotate(-1turn);
|
||||
transform: rotate(-1turn);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
.spin-ccw {
|
||||
-webkit-animation-name: spin-cw-1turn;
|
||||
animation-name: spin-cw-1turn;
|
||||
}
|
||||
|
||||
@keyframes spin-cw-1turn {
|
||||
0% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(1turn);
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
|
||||
.wiggle {
|
||||
-webkit-animation-name: wiggle-7deg;
|
||||
animation-name: wiggle-7deg;
|
||||
}
|
||||
|
||||
@-webkit-keyframes wiggle-7deg {
|
||||
40%, 50%, 60% {
|
||||
-webkit-transform: rotate(7deg);
|
||||
transform: rotate(7deg);
|
||||
}
|
||||
35%, 45%, 55%, 65% {
|
||||
-webkit-transform: rotate(-7deg);
|
||||
transform: rotate(-7deg);
|
||||
}
|
||||
0%, 30%, 70%, 100% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wiggle-7deg {
|
||||
40%, 50%, 60% {
|
||||
-webkit-transform: rotate(7deg);
|
||||
transform: rotate(7deg);
|
||||
}
|
||||
35%, 45%, 55%, 65% {
|
||||
-webkit-transform: rotate(-7deg);
|
||||
transform: rotate(-7deg);
|
||||
}
|
||||
0%, 30%, 70%, 100% {
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
.infinite {
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.slow {
|
||||
-webkit-animation-duration: 750ms !important;
|
||||
animation-duration: 750ms !important;
|
||||
}
|
||||
|
||||
.fast {
|
||||
-webkit-animation-duration: 250ms !important;
|
||||
animation-duration: 250ms !important;
|
||||
}
|
||||
|
||||
.linear {
|
||||
-webkit-animation-timing-function: linear !important;
|
||||
animation-timing-function: linear !important;
|
||||
}
|
||||
|
||||
.ease {
|
||||
-webkit-animation-timing-function: ease !important;
|
||||
animation-timing-function: ease !important;
|
||||
}
|
||||
|
||||
.ease-in {
|
||||
-webkit-animation-timing-function: ease-in !important;
|
||||
animation-timing-function: ease-in !important;
|
||||
}
|
||||
|
||||
.ease-out {
|
||||
-webkit-animation-timing-function: ease-out !important;
|
||||
animation-timing-function: ease-out !important;
|
||||
}
|
||||
|
||||
.ease-in-out {
|
||||
-webkit-animation-timing-function: ease-in-out !important;
|
||||
animation-timing-function: ease-in-out !important;
|
||||
}
|
||||
|
||||
.bounce-in {
|
||||
-webkit-animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important;
|
||||
animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important;
|
||||
}
|
||||
|
||||
.bounce-out {
|
||||
-webkit-animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important;
|
||||
animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important;
|
||||
}
|
||||
|
||||
.bounce-in-out {
|
||||
-webkit-animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important;
|
||||
animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important;
|
||||
}
|
||||
|
||||
.short-delay {
|
||||
-webkit-animation-delay: 300ms !important;
|
||||
animation-delay: 300ms !important;
|
||||
}
|
||||
|
||||
.long-delay {
|
||||
-webkit-animation-delay: 700ms !important;
|
||||
animation-delay: 700ms !important;
|
||||
}
|
||||
+93
@@ -0,0 +1,93 @@
|
||||
@font-face {font-family: "Lobster"; src: url(fonts/lobster_1_4.woff);}
|
||||
|
||||
body,h1,h2,h3,h4,h5,h6, * {font-family: 'Ubuntu', sans-serif; color: #414042;}
|
||||
|
||||
.m-t-25 {margin-top: 25px;}
|
||||
.m-b-25 {margin-bottom: 25px;}
|
||||
.m-l-40 {margin-left: 40px;}
|
||||
.p-lr-15 {padding-left: 15px; padding-right: 15px;}
|
||||
.rounded {border-radius: 3px;}
|
||||
.large.rounded {border-radius: 6px;}
|
||||
.button {padding: 0.4em 2.3em; font-size: 0.7rem;}
|
||||
.button.secondary {background-color: #4D4D4F;}
|
||||
.button.large {font-size:0.9rem; padding: 0.9em 2.4em; font-weight: 700; margin-bottom: 0;}
|
||||
.w-t {color: #ffffff}
|
||||
|
||||
.top-bar {position: absolute; top: 0; width: 100%;}
|
||||
.top-bar, .top-bar ul {background-color: transparent; z-index: 500;}
|
||||
|
||||
.menu > li:not(.menu-text) > a {font-weight: 700; text-transform:uppercase; color: #4D4D4F}
|
||||
.menu > li:not(.menu-text) > a.active {color: #46c1be}
|
||||
.top-bar-right {position: absolute; bottom: 5px; right: 0;}
|
||||
|
||||
.orbit.header {position: relative; z-index: 1;}
|
||||
.orbit.header .orbit-next, .orbit.header .orbit-previous { background-color: #ffffff; color: #4d4d4f; padding: 40px;}
|
||||
.orbit.header .orbit-next:hover, .orbit.header .orbit-previous:hover { background-color: #46c1be; color: #ffffff;}
|
||||
.orbit.header .orbit-next {border-top-left-radius: 50%; border-bottom-left-radius: 50%; right: -70px;}
|
||||
.orbit.header .orbit-next i {position: relative; left: -30px;}
|
||||
.orbit.header .orbit-previous {border-top-right-radius: 50%; border-bottom-right-radius: 50%; left: -70px;}
|
||||
.orbit.header .orbit-previous i {position: relative; left: 30px;}
|
||||
.orbit.header .orbit-slide {position: relative;}
|
||||
.orbit.header .orbit-slide:before {content: ''; position: absolute; top: 20%; width: 100%; display: block; height: 60%; background-color: rgba(77, 77, 79, 0.70); }
|
||||
.orbit.header .orbit-slide .img {width: 100%; height: 800px; background-size: cover; background-position: center center}
|
||||
.orbit.header .orbit-slide h2, .orbit.header .orbit-slide h3 {
|
||||
position: absolute; top: 0; color: #ffffff; font-family: Lobster, Helvetica, Arial, sans-serif;
|
||||
text-align: center; width: 100%;
|
||||
}
|
||||
.orbit.header .orbit-slide h2 {top: 35%; font-size: 5.2rem;}
|
||||
.orbit.header .orbit-slide h3 {top: calc(38% + 4.2rem); font-size: 3.5rem;}
|
||||
.orbit.header .orbit-bullets {position: absolute; margin: auto; width: 100%; top: 63%;}
|
||||
.orbit.header .orbit-bullets button {width: .95rem; height: .95rem; margin: .35rem; background-color: #ffffff;}
|
||||
.orbit.header .orbit-bullets button.is-active, .orbit-bullets button:hover {background-color: #f58020;}
|
||||
#chevron-down {position: absolute; z-index: 350; display: block; top: 75%; left: calc(50% - 12px); opacity: 0.6; color: #ffffff; cursor: pointer;}
|
||||
#chevron-down:hover {color: #f58020}
|
||||
|
||||
#content h2 {text-transform: uppercase; font-size: 1.5rem; font-weight: 400; text-align: center;}
|
||||
#content h3 {text-align: center; text-transform: uppercase; }
|
||||
#content h4 {font-size: 1.35rem;}
|
||||
hr {border-bottom: 0;width: 5%; margin: 0 auto; position: relative; top: -15px; display:inline-block; height: 1px; background-color: #46c1be}
|
||||
#content p {line-height: 1.3; font-size: 0.9rem;}
|
||||
#content p.small {font-size: .75rem;}
|
||||
|
||||
.grey-wrapper {background-color: #f1f1f1; padding: 50px 0; display: block;}
|
||||
.green-wrapper {background-color: #46c1be; padding: 50px 0; display: block;}
|
||||
.white-wrapper {background-color: #ffffff; padding: 50px 0; display: block;}
|
||||
|
||||
.assortment-h5 {text-align: center; text-transform: uppercase; font-weight: 500; font-size: 1.1rem;}
|
||||
.assortment-p {font-size: 0.8rem; text-align: center; margin: 15px auto 10px;}
|
||||
.assortment-more-btn {color: #46c1be; text-transform: uppercase; font-style: italic; text-align: center; font-size: 0.85rem; width: 100%; display: inline-block; font-weight: 500;}
|
||||
img.thumbnail {border-radius: 50%; box-shadow: none; border-width: 2px; border-color: #ffffff;}
|
||||
img.thumbnail:focus, img.thumbnail:hover {box-shadow: none; border-color: #ffffff;}
|
||||
|
||||
.sale-image-holder>img {width: 100%; height: auto; border: 1px solid #414042;}
|
||||
.sale-image-holder {margin-bottom: 15px; position: relative; cursor: pointer;}
|
||||
.sale-item-data {display: block; opacity: 0; width: calc(100% - 0.9375rem * 2);height: 100%; position: absolute; top: 0; left: 0.9375rem; background-color: rgba(70, 193, 190, 0.7); color: #ffffff;}
|
||||
.sale-item-data * {color: #ffffff;}
|
||||
.sale-item-data h5 {text-transform: uppercase; font-size: 0.9rem; text-align: center; padding: 15px 10px 0 10px; font-weight: 700; margin-bottom: 0;}
|
||||
.sale-item-data p {margin: -5px auto 0; padding: 0 auto; text-align: center; font-size: 0.8rem;}
|
||||
.sale-item-data p.price {margin-top: 10px; font-weight: 700; font-size: 0.9rem;}
|
||||
|
||||
.white-wrapper h6 {color: #46c1be; text-transform: uppercase; font-size: 1.3rem;}
|
||||
.white-wrapper h6.lowercase {text-transform: none; font-size: 1.2rem;}
|
||||
|
||||
.design-ul-block li {list-style-image: url(images/bullet.png); margin: 15px 30px 25px 30px;}
|
||||
.design-ul-block li h6 {position: relative; top: -7px;}
|
||||
|
||||
.orbit.footer .orbit-next, .orbit.footer .orbit-previous { background-color: #46c1be; padding: 40px;}
|
||||
.orbit.footer .orbit-next:hover, .orbit.footer .orbit-previous:hover { background-color: #f58020;}
|
||||
.orbit.footer .fa {color: #ffffff;}
|
||||
.orbit.footer .orbit-next {border-top-left-radius: 50%; border-bottom-left-radius: 50%; right: -70px;}
|
||||
.orbit.footer .orbit-next i {position: relative; left: -30px;}
|
||||
.orbit.footer .orbit-previous {border-top-right-radius: 50%; border-bottom-right-radius: 50%; left: -70px;}
|
||||
.orbit.footer .orbit-previous i {position: relative; left: 30px;}
|
||||
.orbit.footer .orbit-slide {position: relative; height: 300px;}
|
||||
.orbit.footer .orbit-slide img {width: 100%; height: auto;}
|
||||
|
||||
footer {padding-top: 50px;}
|
||||
footer .menu {display: inline-block;}
|
||||
footer a {color: #414042; font-weight: 500;}
|
||||
footer a:hover {color: #46c1be;}
|
||||
.social-icons .fa-stack-2x {color: #46c1be;}
|
||||
.social-icons a:hover .fa-stack-2x {color: #414042;}
|
||||
.social-icons .fa.w-t {color: #ffffff;}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
|
||||
!function(e,t){"function"==typeof define&&define.amd?define([],function(){return t()}):"object"==typeof exports?module.exports=t():e.whatInput=t()}(this,function(){"use strict";function e(e){clearTimeout(s),n(e),f=!0,s=setTimeout(function(){f=!1},1e3)}function t(e){f||n(e)}function n(e){var t=o(e),n=r(e),d=w[e.type];"pointer"===d&&(d=i(e)),p!==d&&(!y&&p&&"keyboard"===d&&"tab"!==v[t]&&m.indexOf(n.nodeName.toLowerCase())>=0||(p=d,a.setAttribute("data-whatinput",p),-1===h.indexOf(p)&&h.push(p))),"keyboard"===d&&u(t)}function o(e){return e.keyCode?e.keyCode:e.which}function r(e){return e.target||e.srcElement}function i(e){return"number"==typeof e.pointerType?b[e.pointerType]:e.pointerType}function u(e){-1===c.indexOf(v[e])&&v[e]&&c.push(v[e])}function d(e){var t=o(e),n=c.indexOf(v[t]);-1!==n&&c.splice(n,1)}var s,c=[],a=document.body,f=!1,p=null,m=["input","select","textarea"],y=a.hasAttribute("data-whatinput-formtyping"),w={keydown:"keyboard",mousedown:"mouse",mouseenter:"mouse",touchstart:"touch",pointerdown:"pointer",MSPointerDown:"pointer"},h=[],v={9:"tab",13:"enter",16:"shift",27:"esc",32:"space",37:"left",38:"up",39:"right",40:"down"},b={2:"touch",3:"touch",4:"mouse"};return function(){var n="mousedown";window.PointerEvent?n="pointerdown":window.MSPointerEvent&&(n="MSPointerDown"),a.addEventListener(n,t),a.addEventListener("mouseenter",t),"ontouchstart"in document.documentElement&&a.addEventListener("touchstart",e),a.addEventListener("keydown",t),a.addEventListener("keyup",d)}(),{ask:function(){return p},keys:function(){return c},types:function(){return h},set:n}});
|
||||
Reference in New Issue
Block a user