FEATURE: some small changes in homepage, added assortment layout
This commit is contained in:
peter
@@ -15,7 +15,7 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="top-bar">
|
<div class="top-bar homepage">
|
||||||
<div class="top-bar-left">
|
<div class="top-bar-left">
|
||||||
<ul class="menu">
|
<ul class="menu">
|
||||||
<li class="menu-text">
|
<li class="menu-text">
|
||||||
@@ -457,6 +457,5 @@
|
|||||||
$(document).foundation();
|
$(document).foundation();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<script type="text/javascript" src="https://intercom.zurb.com/scripts/zcom.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -0,0 +1,195 @@
|
|||||||
|
<!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="#">Home</a></li>
|
||||||
|
<li><a href="#" class="active">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 id="content">
|
||||||
|
<div class="grey-wrapper">
|
||||||
|
<div class="row column text-center m-b-25">
|
||||||
|
<h2 id="galerie">Silikonové náramky</h2>
|
||||||
|
</div>
|
||||||
|
<div class="row text-center">
|
||||||
|
<div class="product-category column medium-4 text-right">
|
||||||
|
<a href="#" class="button success large long rounded active">S debossem</a>
|
||||||
|
</div>
|
||||||
|
<div class="product-category column medium-4">
|
||||||
|
<a href="#" class="button success large long rounded">S embossem</a>
|
||||||
|
</div>
|
||||||
|
<div class="product-category column medium-4 text-left">
|
||||||
|
<a href="#" class="button success large long rounded">S potiskem</a>
|
||||||
|
</div>
|
||||||
|
<div class="clearfix"></div>
|
||||||
|
<p class="m-b-25 m-t-50">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore<br>
|
||||||
|
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo<br>
|
||||||
|
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br>
|
||||||
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
|
||||||
|
HOME SORTIMENT GALERIE O NÁS KONTAKT<br>
|
||||||
|
</p>
|
||||||
|
</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>
|
||||||
|
<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>
|
||||||
|
<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="#">Home</a></li>
|
||||||
|
<li><a href="#" class="active">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>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+7
-2
@@ -3,6 +3,7 @@
|
|||||||
body,h1,h2,h3,h4,h5,h6, * {font-family: 'Ubuntu', sans-serif; color: #414042;}
|
body,h1,h2,h3,h4,h5,h6, * {font-family: 'Ubuntu', sans-serif; color: #414042;}
|
||||||
|
|
||||||
.m-t-25 {margin-top: 25px;}
|
.m-t-25 {margin-top: 25px;}
|
||||||
|
.m-t-50 {margin-top: 50px;}
|
||||||
.m-b-25 {margin-bottom: 25px;}
|
.m-b-25 {margin-bottom: 25px;}
|
||||||
.m-l-40 {margin-left: 40px;}
|
.m-l-40 {margin-left: 40px;}
|
||||||
.p-lr-15 {padding-left: 15px; padding-right: 15px;}
|
.p-lr-15 {padding-left: 15px; padding-right: 15px;}
|
||||||
@@ -10,10 +11,14 @@ body,h1,h2,h3,h4,h5,h6, * {font-family: 'Ubuntu', sans-serif; color: #414042;}
|
|||||||
.large.rounded {border-radius: 6px;}
|
.large.rounded {border-radius: 6px;}
|
||||||
.button {padding: 0.4em 2.3em; font-size: 0.7rem;}
|
.button {padding: 0.4em 2.3em; font-size: 0.7rem;}
|
||||||
.button.secondary {background-color: #4D4D4F;}
|
.button.secondary {background-color: #4D4D4F;}
|
||||||
|
.button.success {background-color: #46c1be;}
|
||||||
|
.button.success:hover, .button.success:focus, .button.success:active, .button.success.active {background-color: #4D4D4F;}
|
||||||
.button.large {font-size:0.9rem; padding: 0.9em 2.4em; font-weight: 700; margin-bottom: 0;}
|
.button.large {font-size:0.9rem; padding: 0.9em 2.4em; font-weight: 700; margin-bottom: 0;}
|
||||||
|
.button.large.long {padding: 0.9em 4em;}
|
||||||
.w-t {color: #ffffff}
|
.w-t {color: #ffffff}
|
||||||
|
|
||||||
.top-bar {position: absolute; top: 0; width: 100%;}
|
.top-bar {position: relative; top: 0; width: 100%;}
|
||||||
|
.top-bar.homepage {position: absolute; top: 0; width: 100%;}
|
||||||
.top-bar, .top-bar ul {background-color: transparent; z-index: 500;}
|
.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 {font-weight: 700; text-transform:uppercase; color: #4D4D4F}
|
||||||
@@ -80,7 +85,7 @@ img.thumbnail:focus, img.thumbnail:hover {box-shadow: none; border-color: #fffff
|
|||||||
.orbit.footer .orbit-next i {position: relative; left: -30px;}
|
.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 {border-top-right-radius: 50%; border-bottom-right-radius: 50%; left: -70px;}
|
||||||
.orbit.footer .orbit-previous i {position: relative; left: 30px;}
|
.orbit.footer .orbit-previous i {position: relative; left: 30px;}
|
||||||
.orbit.footer .orbit-slide {position: relative; height: 300px;}
|
.orbit.footer .orbit-slide {position: relative; height: 260px;}
|
||||||
.orbit.footer .orbit-slide img {width: 100%; height: auto;}
|
.orbit.footer .orbit-slide img {width: 100%; height: auto;}
|
||||||
|
|
||||||
footer {padding-top: 50px;}
|
footer {padding-top: 50px;}
|
||||||
|
|||||||
Reference in New Issue
Block a user