Merge branch 'cwbs_template' into dev

This commit is contained in:
Michal Kváček
2016-04-02 13:26:21 +02:00
7 changed files with 354 additions and 188 deletions
@@ -0,0 +1,5 @@
<h1>{{$page->title}}</h1>
@foreach($images as $image)
<img src="{{config('app.upload_url')}}/{{$image->filename}}" alt="" />
@endforeach
@@ -16,27 +16,26 @@
<body>
<div class="top-bar">
<div class="top-bar-left">
<ul class="menu pull-right hide-for-large">
<li>
<a href="#" onclick="showResponsiveMenu()">MENU<i class="fa fa-fw fa-lg fa-navicon"></i></a>
</li>
</ul>
<div id="responsive-menu">
<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 id="hidden-menu-divider" class="hide-for-large pointer" onclick="hideResponsiveMenu()">MENU<br><span class="dark">-</span></li>
<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="#" class="active">O nás</a></li>
<li><a href="#">O nás</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
</div>
<div id="content">
<div class="white-wrapper backgrounded text-center">
<div class="white-wrapper backgrounded text-center p-lr-50-sm">
<div class="row column text-center m-b-25">
<h2 id="about">O nás</h2>
</div>
@@ -68,11 +67,11 @@
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
</p>
</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 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>
<footer class="large">
@@ -112,7 +111,7 @@
</li>
</ul>
<div class="clearfix"></div>
<ul class="menu">
<ul class="menu hide-for-small-only">
<li><a href="#">Home</a></li>
<li><a href="#">Sortiment</a></li>
<li><a href="#">Doprodej</a></li>
@@ -136,6 +135,21 @@
$(function() {
$(document).foundation();
});
function showResponsiveMenu() {
var menuHolder = document.getElementById('responsive-menu');
menuHolder.style.display="block";
menuHolder.style.height = document.documentElement.clientHeight + 'px';
menuHolder.style.height = window.innerHeight + 'px';
menuHolder.style.height = '100%;';
}
function hideResponsiveMenu() {
var menuHolder = document.getElementById('responsive-menu');
menuHolder.style.display="none";
}
</script>
</body>
</html>
@@ -16,17 +16,16 @@
<body>
<div class="top-bar">
<div class="top-bar-left">
<ul class="menu pull-right hide-for-large">
<li>
<a href="#" onclick="showResponsiveMenu()">MENU<i class="fa fa-fw fa-lg fa-navicon"></i></a>
</li>
</ul>
<div id="responsive-menu">
<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 id="hidden-menu-divider" class="hide-for-large pointer" onclick="hideResponsiveMenu()">MENU<br><span class="dark">-</span></li>
<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>
@@ -37,42 +36,44 @@
<div id="content">
<div class="grey-wrapper p-b-0">
<div class="row column text-center m-b-25">
<div class="row column text-center m-b-25 show-for-large">
<h2>Kontakt</h2>
</div>
<div class="medium-6 column p-lr-0">
<div class="text-right">
<div class="medium-12 large-6 column columns p-lr-0 contact-detail">
<div class="column text-right large-12 medium-6 p-lr-0">
<h2 class="hide-for-large">Kontakt</h2>
<p class="contact-p green-text"><b>CUSTOM WRISTBANDS s.r.o.</b></p>
<p class="contact-p">Pražská 222/22</p>
<p class="contact-p">120 00 Praha 2</p>
<p class="contact-p">IČ: 012 345 67</p>
<p class="contact-p">Pražská 222/22<br>
120 00 Praha 2<br>
IČ: 012 345 67<br>
<br>
<p class="contact-p">-</p>
<p class="contact-p">tel.: +420 606 666 111</p>
<p class="contact-p">e-mail: <a href="mailto:">info@cw.cz</a></p>
-<br>
tel.: +420 606 666 111<br>
e-mail: <a href="mailto:">info@cw.cz</a></p>
<br>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2560.626144078246!2d14.390829515545695!3d50.074562779425236!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470b95000e41d5fb%3A0xf58ae0d8a9f480ed!2zxaB2w6lkc2vDoSAxMTI3LzI5LCBTbcOtY2hvdiwgMTUwIDAwIFByYWhhLVByYWhhIDU!5e0!3m2!1scs!2scz!4v1458938407867" width="100%" height="240" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<iframe class="column large-12 medium-6 p-lr-0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2560.626144078246!2d14.390829515545695!3d50.074562779425236!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470b95000e41d5fb%3A0xf58ae0d8a9f480ed!2zxaB2w6lkc2vDoSAxMTI3LzI5LCBTbcOtY2hvdiwgMTUwIDAwIFByYWhhLVByYWhhIDU!5e0!3m2!1scs!2scz!4v1458938407867" width="100%" height="250" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<div class="medium-6 column green-wrapper p-25" id="contact-form">
<h6 class="text-center uppercase m-b-25 bold">Rychlý formulář</h6>
<div class="column medium-6">
<input type="text" class="rounded large" placeholder="jméno a příjmení">
<input type="text" class="rounded large" placeholder="e-mail">
</div>
<div class="column medium-6">
<input type="text" class="rounded large" placeholder="telefon">
<input type="text" class="rounded large" placeholder="počet kusů">
</div>
<div class="column medium-12">
<textarea class="rounded large" placeholder="zpráva"></textarea>
</div>
<div class="column medium-4">
<input type="text" class="rounded large" placeholder="2+5=?">
</div>
<div class="column medium-6 right">
<a href="#" class="button expanded long secondary rounded">ODESLAT</a>
<div class="large-6 column green-wrapper p-25" id="contact-form">
<div class="column large-12 medium-8 medium-centered p-lr-0 p-lr-50-sm">
<h6 class="text-center uppercase m-b-25 bold">Rychlý formulář</h6>
<div class="column medium-6">
<input type="text" class="rounded large" placeholder="jméno a příjmení">
<input type="text" class="rounded large" placeholder="e-mail">
</div>
<div class="column medium-6">
<input type="text" class="rounded large" placeholder="telefon">
<input type="text" class="rounded large" placeholder="počet kusů">
</div>
<div class="column medium-12">
<textarea class="rounded large" placeholder="zpráva"></textarea>
</div>
<div class="column medium-4">
<input type="text" class="rounded large" placeholder="2+5=?">
</div>
<div class="column medium-6 right">
<a href="#" class="button expanded long secondary rounded">ODESLAT</a>
</div>
</div>
</div>
<div class="clearfix"></div>
@@ -139,6 +140,21 @@
$(function() {
$(document).foundation();
});
function showResponsiveMenu() {
var menuHolder = document.getElementById('responsive-menu');
menuHolder.style.display="block";
menuHolder.style.height = document.documentElement.clientHeight + 'px';
menuHolder.style.height = window.innerHeight + 'px';
menuHolder.style.height = '100%;';
}
function hideResponsiveMenu() {
var menuHolder = document.getElementById('responsive-menu');
menuHolder.style.display="none";
}
</script>
</body>
</html>
@@ -16,19 +16,18 @@
<body>
<div class="top-bar">
<div class="top-bar-left">
<ul class="menu pull-right hide-for-large">
<li>
<a href="#" onclick="showResponsiveMenu()">MENU<i class="fa fa-fw fa-lg fa-navicon"></i></a>
</li>
</ul>
<div id="responsive-menu">
<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 id="hidden-menu-divider" class="hide-for-large pointer" onclick="hideResponsiveMenu()">MENU<br><span class="dark">-</span></li>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Sortiment</a></li>
<li><a href="#">Doprodej</a></li>
<li><a href="#" class="active">Galerie</a></li>
<li><a href="#">Galerie</a></li>
<li><a href="#">O nás</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
@@ -225,7 +224,7 @@
</li>
</ul>
<div class="clearfix"></div>
<ul class="menu">
<ul class="menu hide-for-small-only">
<li><a href="#">Home</a></li>
<li><a href="#">Sortiment</a></li>
<li><a href="#">Doprodej</a></li>
@@ -249,6 +248,21 @@
$(function() {
$(document).foundation();
});
function showResponsiveMenu() {
var menuHolder = document.getElementById('responsive-menu');
menuHolder.style.display="block";
menuHolder.style.height = document.documentElement.clientHeight + 'px';
menuHolder.style.height = window.innerHeight + 'px';
menuHolder.style.height = '100%;';
}
function hideResponsiveMenu() {
var menuHolder = document.getElementById('responsive-menu');
menuHolder.style.display="none";
}
</script>
</body>
</html>
@@ -19,19 +19,27 @@
<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>
<a href="/"><img id="logo" 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 class="menu pull-right hide-for-large">
<li>
<a href="#" onclick="showResponsiveMenu()">MENU<i class="fa fa-fw fa-lg fa-navicon"></i></a>
</li>
</ul>
<div id="responsive-menu">
<ul class="menu">
<li id="hidden-menu-divider" class="hide-for-large pointer" onclick="hideResponsiveMenu()">MENU<br><span class="dark">-</span></li>
<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>
@@ -77,7 +85,7 @@
</script>
</div>
<div id="content">
<div class="row column text-center m-t-25">
<div class="row column text-center m-t-25 p-lr-50-sm">
<h2 id="assortment">Náš sortiment</h2>
<hr>
<p class="text-center">
@@ -91,58 +99,58 @@
</p>
</div>
<div class="row small-up-2 large-up-4">
<div class="column">
<div class="row m-b-25 m-t-25 p-lr-50-sm" data-equalizer data-equalize-on="medium">
<div class="column text-center small-12 medium-6 large-3" data-equalizer-watch>
<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>
<h5 class="assortment-h5">Silikonové náramky</h5>
<p class="assortment-p">Lorem ipsum dolor
sit amet, consectetur
adipiscing elit,
sed do eiusmod
tempor incididunt
ut labore et dolore
magna aliqua.</p>
<a href="#" class="assortment-more-btn text-center">- více zde -</a>
</div>
<div class="column">
<div class="column text-center small-12 medium-6 large-3" data-equalizer-watch>
<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>
<h5 class="assortment-h5">Atypické náramky</h5>
<p class="assortment-p">Lorem ipsum dolor
sit amet, consectetur
adipiscing elit,
sed do eiusmod
tempor incididunt
ut labore et dolore
magna aliqua.</p>
<a href="#" class="assortment-more-btn text-center">- více zde -</a>
</div>
<div class="column">
<div class="column text-center small-12 medium-6 large-3" data-equalizer-watch>
<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>
<p class="assortment-p">Lorem ipsum dolor
sit amet, consectetur
adipiscing elit,
sed do eiusmod
tempor incididunt
ut labore et dolore
magna aliqua.</p>
<a href="#" class="assortment-more-btn text-center">- více zde -</a>
</div>
<div class="column">
<div class="column text-center small-12 medium-6 large-3" data-equalizer-watch>
<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>
<h5 class="assortment-h5">Silikonové klíčenky</h5>
<p class="assortment-p">Lorem ipsum dolor
sit amet, consectetur
adipiscing elit,
sed do eiusmod
tempor incididunt
ut labore et dolore
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="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">
@@ -274,14 +282,14 @@
$(this).find('.sale-item-data').animate({opacity: 0}, 300, 'swing');
})
</script>
</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>
<div class="white-wrapper clearfix">
<div class="white-wrapper clearfix p-lr-50-sm">
<div class="row column" id="design">
<div class="columns medium-7">
<h6>Design a potisk</h6>
@@ -336,58 +344,58 @@
<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">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3 small-6">
<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">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3 small-6">
<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">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3 small-6">
<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">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
</li>
@@ -432,7 +440,7 @@
</li>
</ul>
<div class="clearfix"></div>
<ul class="menu">
<ul class="menu hide-for-small-only">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Sortiment</a></li>
<li><a href="#">Doprodej</a></li>
@@ -456,6 +464,21 @@
$(function() {
$(document).foundation();
});
function showResponsiveMenu() {
var menuHolder = document.getElementById('responsive-menu');
menuHolder.style.display="block";
menuHolder.style.height = document.documentElement.clientHeight + 'px';
menuHolder.style.height = window.innerHeight + 'px';
menuHolder.style.height = '100%;';
}
function hideResponsiveMenu() {
var menuHolder = document.getElementById('responsive-menu');
menuHolder.style.display="none";
}
</script>
</body>
</html>
@@ -16,17 +16,16 @@
<body>
<div class="top-bar">
<div class="top-bar-left">
<ul class="menu pull-right hide-for-large">
<li>
<a href="#" onclick="showResponsiveMenu()">MENU<i class="fa fa-fw fa-lg fa-navicon"></i></a>
</li>
</ul>
<div id="responsive-menu">
<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 id="hidden-menu-divider" class="hide-for-large pointer" onclick="hideResponsiveMenu()">MENU<br><span class="dark">-</span></li>
<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>
@@ -40,18 +39,18 @@
<div class="row column text-center m-b-25">
<h2 id="assortment">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 class="row text-center assorment-holder">
<div class="product-category column medium-4 small-12 text-right">
<a href="#" class="button success large long rounded active small-extra-large">S debossem</a>
</div>
<div class="product-category column medium-4">
<a href="#" class="button success large long rounded">S embossem</a>
<div class="product-category column medium-4 small-12">
<a href="#" class="button success large long rounded small-extra-large">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 class="product-category column medium-4 small-12 text-left">
<a href="#" class="button success large long rounded small-extra-large">S potiskem</a>
</div>
<div class="clearfix"></div>
<p class="m-b-25 m-t-50">
<p class="m-b-25 m-t-50 p-lr-50-sm">
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>
@@ -64,69 +63,69 @@
<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">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3 small-6">
<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">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3 small-6">
<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">
<div class="column medium- small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3 small-6">
<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">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3">
<div class="column medium-3 small-6">
<img src=" http://placehold.it/250x250">
</div>
<div class="column medium-3 small-6">
<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 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>
<footer class="large">
@@ -166,7 +165,7 @@
</li>
</ul>
<div class="clearfix"></div>
<ul class="menu">
<ul class="menu hide-for-small-only">
<li><a href="#">Home</a></li>
<li><a href="#" class="active">Sortiment</a></li>
<li><a href="#">Doprodej</a></li>
@@ -190,6 +189,21 @@
$(function() {
$(document).foundation();
});
function showResponsiveMenu() {
var menuHolder = document.getElementById('responsive-menu');
menuHolder.style.display="block";
menuHolder.style.height = document.documentElement.clientHeight + 'px';
menuHolder.style.height = window.innerHeight + 'px';
menuHolder.style.height = '100%;';
}
function hideResponsiveMenu() {
var menuHolder = document.getElementById('responsive-menu');
menuHolder.style.display="none";
}
</script>
</body>
</html>
+84 -4
View File
@@ -19,12 +19,14 @@ a:hover {text-decoration: underline;}
.button.success {background-color: #46c1be;}
.button.success:hover, .button.success:focus, .button.success:active, .button.success.active {background-color: #4D4D4F;}
.button.large, .button.expanded {font-size:0.9rem; padding: 0.9em 2.4em; font-weight: 700; margin-bottom: 0;}
.button.large.long {padding: 0.9em 4em;}
.button.large.long {padding: 0.9em 4em; text-transform: uppercase;}
.button.expanded.long {height: 3rem; padding: 1em 4em;}
.w-t {color: #ffffff}
.green-text {color: #46c1be !important;}
.dark {color: #414042 !important;}
.uppercase {text-transform: uppercase;}
.bold {font-weight: 700;}
.pointer {cursor: pointer;}
[type="text"], [type="password"], [type="date"], [type="datetime"], [type="datetime-local"], [type="month"], [type="week"], [type="email"],
[type="number"], [type="search"], [type="tel"], [type="time"], [type="url"], [type="color"], textarea,
@@ -45,7 +47,7 @@ textarea, textarea:focus {height: 120px;}
.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;}
.top-bar-right {margin-top: 75px;}
.orbit.header {position: relative; z-index: 1;}
.orbit.header .orbit-next, .orbit.header .orbit-previous { background-color: #ffffff; color: #4d4d4f; padding: 40px;}
@@ -82,7 +84,7 @@ hr {border-bottom: 0;width: 5%; margin: 0 auto; position: relative; top: -15px;
.backgrounded {background-image: url(images/background_o_nás._white.jpg); background-size: cover; background-position: center center; }
.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-p {font-size: 0.8rem; text-align: center; margin: 15px auto 10px; width: 50%;}
.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;}
@@ -121,7 +123,7 @@ img.thumbnail:focus, img.thumbnail:hover {box-shadow: none; border-color: #fffff
.image-bullet {margin-right: 7px; position: relative; top: -3px;}
.contact-p {margin-bottom: 0; padding-right: 50px; line-height: 1rem; font-weight: 300;}
#content p.contact-p.green-text {color: #46c1be !important;}
#content p.contact-p.green-text>b {color: #46c1be !important;}
footer {padding-top: 50px;}
footer .menu {display: inline-block;}
@@ -131,3 +133,81 @@ footer a:hover {color: #46c1be;}
.social-icons a:hover .fa-stack-2x {color: #414042;}
.social-icons .fa.w-t {color: #ffffff;}
@media (max-width:1023px) {
#responsive-menu {display: none;}
.top-bar-right .menu.hide-for-large {font-size: 1.5rem; position: absolute; right: 0; top: 25px;}
#logo {width: 175px; height: auto;}
.orbit.header .orbit-next, .orbit.header .orbit-previous {font-size: 0.7rem; transform: translateY(-20%);}
.orbit.header .orbit-slide {height: 600px}
.orbit.header .orbit-slide:before { top: 30%; height: 50%;}
.orbit.header .orbit-slide .img {height: 600px;}
.orbit.header .orbit-slide h2 {top: 35%; font-size: 3.8rem;}
.orbit.header .orbit-slide h3 {top: calc(38% + 3rem); font-size: 2.7rem;}
#chevron-down {top: 73%;}
.assortment-h5 {text-align: left; padding-left: 175px; font-size: 1.0rem;}
.assortment-p {text-align: left; padding-left: 175px; font-size: 0.75rem; width: 100%;}
.assortment-more-btn {text-align: left; padding-left: 175px; display: block;}
img.thumbnail {float: left; width: 150px; height: auto;}
.contact-detail {text-align: center; margin-top: -50px;}
#content .contact-detail h2{text-align: center; font-size: 1rem; font-weight: 500; margin-bottom: 25px; margin-top: 25px;}
#content .contact-p {text-align: center; padding-right: 0; font-size: 0.8rem; line-height: 1.1;}
#responsive-menu {z-index: 500; width: 50%; height: 100%; min-height: 100%; position: absolute; top: -0; left: 50%; background-color: rgba(70, 193, 190, 0.8); }
#hidden-menu-divider {display: block; margin: 50px auto 20px; font-size: 1.8rem; color: #ffffff; text-align: center; font-weight: 500;}
.menu {height: auto;}
.top-bar-right .menu li {display: block; text-align: center; font-size: 1.8rem;}
.top-bar-right .menu li a { font-weight: 500;}
.top-bar-right .menu li a.active {color: #ffffff;}
}
@media (max-width:639px) {
#logo {width: 150px; height: auto;}
.orbit.header .orbit-next, .orbit.header .orbit-previous {font-size: 0.7rem; transform: translateY(-20%);}
.orbit.header .orbit-slide {height: 500px}
.orbit.header .orbit-slide:before { top: 35%; height: 45%;}
.orbit.header .orbit-slide .img {height: 500px;}
.orbit.header .orbit-slide h2 {top: 42%; padding: 20px 100px; line-height: 0.9;}
.orbit.header .orbit-slide h3 {display: none;}
.orbit.header .orbit-bullets {display: none;}
#chevron-down {display: none;}
.assortment-h5 {text-align: left; padding-left: 185px; font-size: 1.3rem;}
.assortment-p {text-align: left; padding-left: 185px; font-size: 0.75rem; width: 100%;}
.assortment-more-btn {text-align: left; padding-left: 185px; display: block;}
img.thumbnail {float: left; width: 150px; height: auto;}
#content h4 {font-size: 1rem; line-height: 1; width: 50%; float: left; padding-left: 30px; padding-right: 30px; text-align: left;}
#questions .button { margin-top: 7px !important;}
#design h6, #design p {text-align: center;}
.design-ul-block {width: 95%; margin: auto;}
#design .design-ul-block li h6, #design .design-ul-block li p {text-align: left;}
.contact-detail {text-align: center; margin-top: -50px;}
#content .contact-detail h2{text-align: center; font-size: 1rem; font-weight: 500; margin-bottom: 25px; margin-top: 25px;}
#content .contact-p {text-align: center; padding-right: 0; font-size: 0.8rem; line-height: 1.1;}
.orbit.footer .orbit-slide {height: auto;}
.orbit.footer .orbit-slide .small-6{margin-bottom: 10px; float: left;}
.orbit.footer .orbit-slide .small-6:nth-child(even):after{}
.orbit.footer .orbit-slide .img {height: 530px;}
.assorment-holder .small-12 {text-align: center !important; margin-bottom: 15px;}
.small-extra-large {font-size: 1.2rem !important; width: 80%;}
footer {padding-top: 20px;}
.p-lr-50-sm {padding-left: 50px; padding-right: 50px;}
#responsive-menu {z-index: 500; width: 100%; height: 100%; min-height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(70, 193, 190, 0.8); }
#hidden-menu-divider {display: block; margin: 50px auto 20px; font-size: 1.8rem; color: #ffffff; text-align: center; font-weight: 500;}
.menu {height: auto;}
.top-bar-right .menu li {display: block; text-align: center; font-size: 1.8rem;}
.top-bar-right .menu li a { font-weight: 500;}
.top-bar-right .menu li a.active {color: #ffffff;}
}