FEATURE: added about us template

This commit is contained in:
peter
2016-03-25 21:16:54 +01:00
parent b228fe4615
commit 7317a51a24
4 changed files with 144 additions and 0 deletions
@@ -0,0 +1,141 @@
<!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="#">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="#">Kontakt</a></li>
</ul>
</div>
</div>
<div id="content">
<div class="white-wrapper backgrounded text-center">
<div class="row column text-center m-b-25">
<h2 id="galerie">O nás</h2>
</div>
<h6 class="lowercase">
<img src="images/bullet.png" alt="Image-bullet" class="image-bullet">Čemu se věnujeme?
</h6>
<p class="small">
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>
</p>
<h6 class="lowercase">
<img src="images/bullet.png" alt="Image-bullet" class="image-bullet">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<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>
</p>
<h6 class="lowercase">
<img src="images/bullet.png" alt="Image-bullet" class="image-bullet">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<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>
</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>
</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="#">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="#">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>
Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 895 B

After

Width:  |  Height:  |  Size: 937 B

+3
View File
@@ -57,6 +57,7 @@ hr {border-bottom: 0;width: 5%; margin: 0 auto; position: relative; top: -15px;
.grey-wrapper {background-color: #f1f1f1; padding: 50px 0; display: block;} .grey-wrapper {background-color: #f1f1f1; padding: 50px 0; display: block;}
.green-wrapper {background-color: #46c1be; 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;} .white-wrapper {background-color: #ffffff; padding: 50px 0; display: block;}
.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-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;}
@@ -96,6 +97,8 @@ img.thumbnail:focus, img.thumbnail:hover {box-shadow: none; border-color: #fffff
.orbit.footer .orbit-slide {position: relative; height: 260px;} .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;}
.image-bullet {margin-right: 7px; position: relative; top: -3px;}
footer {padding-top: 50px;} footer {padding-top: 50px;}
footer .menu {display: inline-block;} footer .menu {display: inline-block;}
footer a {color: #414042; font-weight: 500;} footer a {color: #414042; font-weight: 500;}