FEATURE #1525: Added responsive version of contacts page for 1000px

This commit is contained in:
peter
2016-04-01 19:34:50 +02:00
parent c2f024f8b8
commit 5e51edcd48
2 changed files with 37 additions and 31 deletions
@@ -37,42 +37,44 @@
<div id="content"> <div id="content">
<div class="grey-wrapper p-b-0"> <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> <h2>Kontakt</h2>
</div> </div>
<div class="medium-6 column p-lr-0"> <div class="medium-12 large-6 column columns p-lr-0 contact-detail">
<div class="text-right"> <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 green-text"><b>CUSTOM WRISTBANDS s.r.o.</b></p>
<p class="contact-p">Pražská 222/22</p> <p class="contact-p">Pražská 222/22<br>
<p class="contact-p">120 00 Praha 2</p> 120 00 Praha 2<br>
<p class="contact-p">IČ: 012 345 67</p> IČ: 012 345 67<br>
<br> <br>
<p class="contact-p">-</p> -<br>
<p class="contact-p">tel.: +420 606 666 111</p> tel.: +420 606 666 111<br>
<p class="contact-p">e-mail: <a href="mailto:">info@cw.cz</a></p> e-mail: <a href="mailto:">info@cw.cz</a></p>
<br> <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> </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>
<div class="medium-6 column green-wrapper p-25" id="contact-form"> <div class="large-6 column green-wrapper p-25" id="contact-form">
<h6 class="text-center uppercase m-b-25 bold">Rychlý formulář</h6> <div class="column large-12 medium-8 medium-centered p-lr-0">
<div class="column medium-6"> <h6 class="text-center uppercase m-b-25 bold">Rychlý formulář</h6>
<input type="text" class="rounded large" placeholder="jméno a příjmení"> <div class="column medium-6">
<input type="text" class="rounded large" placeholder="e-mail"> <input type="text" class="rounded large" placeholder="jméno a příjmení">
</div> <input type="text" class="rounded large" placeholder="e-mail">
<div class="column medium-6"> </div>
<input type="text" class="rounded large" placeholder="telefon"> <div class="column medium-6">
<input type="text" class="rounded large" placeholder="počet kusů"> <input type="text" class="rounded large" placeholder="telefon">
</div> <input type="text" class="rounded large" placeholder="počet kusů">
<div class="column medium-12"> </div>
<textarea class="rounded large" placeholder="zpráva"></textarea> <div class="column medium-12">
</div> <textarea class="rounded large" placeholder="zpráva"></textarea>
<div class="column medium-4"> </div>
<input type="text" class="rounded large" placeholder="2+5=?"> <div class="column medium-4">
</div> <input type="text" class="rounded large" placeholder="2+5=?">
<div class="column medium-6 right"> </div>
<a href="#" class="button expanded long secondary rounded">ODESLAT</a> <div class="column medium-6 right">
<a href="#" class="button expanded long secondary rounded">ODESLAT</a>
</div>
</div> </div>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
+6 -2
View File
@@ -19,7 +19,7 @@ a:hover {text-decoration: underline;}
.button.success {background-color: #46c1be;} .button.success {background-color: #46c1be;}
.button.success:hover, .button.success:focus, .button.success:active, .button.success.active {background-color: #4D4D4F;} .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, .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;} .button.expanded.long {height: 3rem; padding: 1em 4em;}
.w-t {color: #ffffff} .w-t {color: #ffffff}
.green-text {color: #46c1be !important;} .green-text {color: #46c1be !important;}
@@ -121,7 +121,7 @@ img.thumbnail:focus, img.thumbnail:hover {box-shadow: none; border-color: #fffff
.image-bullet {margin-right: 7px; position: relative; top: -3px;} .image-bullet {margin-right: 7px; position: relative; top: -3px;}
.contact-p {margin-bottom: 0; padding-right: 50px; line-height: 1rem; font-weight: 300;} .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 {padding-top: 50px;}
footer .menu {display: inline-block;} footer .menu {display: inline-block;}
@@ -144,5 +144,9 @@ footer a:hover {color: #46c1be;}
.assortment-p {text-align: left; padding-left: 175px; font-size: 0.75rem; width: 100%;} .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;} .assortment-more-btn {text-align: left; padding-left: 175px; display: block;}
img.thumbnail {float: left; width: 150px; height: auto;} 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;}
} }