From c2f024f8b83ac86ee9b2c4b02d29b202cb7752e0 Mon Sep 17 00:00:00 2001
From: peter <peter@binarity.cz>
Date: Fri, 1 Apr 2016 17:10:45 +0200
Subject: [PATCH] FEATURE #1525: homepage for 1000px version ready

---
 .../views/visitor/cwbs_template/homepage.html | 68 +++++++++----------
 .../views/visitor/cwbs_template/style.css     | 17 ++++-
 2 files changed, 50 insertions(+), 35 deletions(-)

diff --git a/resources/views/visitor/cwbs_template/homepage.html b/resources/views/visitor/cwbs_template/homepage.html
index af67ca1d..aa19e433 100644
--- a/resources/views/visitor/cwbs_template/homepage.html
+++ b/resources/views/visitor/cwbs_template/homepage.html
@@ -91,58 +91,58 @@
 
         </p>
     </div>
-    <div class="row small-up-2 large-up-4">
-        <div class="column">
+    <div class="row m-b-25 m-t-25" 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,7 +274,7 @@
                 $(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>
diff --git a/resources/views/visitor/cwbs_template/style.css b/resources/views/visitor/cwbs_template/style.css
index ca522af0..ebb50ced 100644
--- a/resources/views/visitor/cwbs_template/style.css
+++ b/resources/views/visitor/cwbs_template/style.css
@@ -82,7 +82,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;}
@@ -131,3 +131,18 @@ 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) {
+    .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;}
+}
+