minicms/core
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

FEATURE: added gallery template

Browse Source
This commit is contained in:
peter
2016-03-25 20:53:58 +01:00
parent c0f3c2cf07
commit b228fe4615
2 changed files with 262 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/visitor/cwbs_template/galerie.html
+254
View File
@@ -0,0 +1,254 @@
<!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="#" class="active">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 m-t-25 clearfix">
<div class="row column" id="gallery-images">
<h2 class="m-b-25">Galerie</h2>
<div class="column medium-3 gallery-image-holder">
<img src=" http://placehold.it/250x250">
<div class="gallery-item-data text-center">
<h5>Název produktu</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<p>počet ks</p>
<p class="price">cena: 39,-Kč/ks</p>
</div>
</div>
<div class="column medium-3 gallery-image-holder">
<img src=" http://placehold.it/250x250">
<div class="gallery-item-data text-center">
<h5>Název produktu</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<p>počet ks</p>
<p class="price">cena: 39,-Kč/ks</p>
</div>
</div>
<div class="column medium-3 gallery-image-holder">
<img src=" http://placehold.it/250x250">
<div class="gallery-item-data text-center">
<h5>Název produktu</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<p>počet ks</p>
<p class="price">cena: 39,-Kč/ks</p>
</div>
</div>
<div class="column medium-3 gallery-image-holder">
<img src=" http://placehold.it/250x250">
<div class="gallery-item-data text-center">
<h5>Název produktu</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<p>počet ks</p>
<p class="price">cena: 39,-Kč/ks</p>
</div>
</div>
<div class="column medium-3 gallery-image-holder">
<img src=" http://placehold.it/250x250">
<div class="gallery-item-data text-center">
<h5>Název produktu</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<p>počet ks</p>
<p class="price">cena: 39,-Kč/ks</p>
</div>
</div>
<div class="column medium-3 gallery-image-holder">
<img src=" http://placehold.it/250x250">
<div class="gallery-item-data text-center">
<h5>Název produktu</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<p>počet ks</p>
<p class="price">cena: 39,-Kč/ks</p>
</div>
</div>
<div class="column medium-3 gallery-image-holder">
<img src=" http://placehold.it/250x250">
<div class="gallery-item-data text-center">
<h5>Název produktu</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<p>počet ks</p>
<p class="price">cena: 39,-Kč/ks</p>
</div>
</div>
<div class="column medium-3 gallery-image-holder">
<img src=" http://placehold.it/250x250">
<div class="gallery-item-data text-center">
<h5>Název produktu</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<p>počet ks</p>
<p class="price">cena: 39,-Kč/ks</p>
</div>
</div>
<div class="column medium-3 gallery-image-holder">
<img src=" http://placehold.it/250x250">
<div class="gallery-item-data text-center">
<h5>Název produktu</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<p>počet ks</p>
<p class="price">cena: 39,-Kč/ks</p>
</div>
</div>
<div class="column medium-3 gallery-image-holder">
<img src=" http://placehold.it/250x250">
<div class="gallery-item-data text-center">
<h5>Název produktu</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<p>počet ks</p>
<p class="price">cena: 39,-Kč/ks</p>
</div>
</div>
<div class="column medium-3 gallery-image-holder">
<img src=" http://placehold.it/250x250">
<div class="gallery-item-data text-center">
<h5>Název produktu</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<p>počet ks</p>
<p class="price">cena: 39,-Kč/ks</p>
</div>
</div>
<div class="column medium-3 gallery-image-holder">
<img src=" http://placehold.it/250x250">
<div class="gallery-item-data text-center">
<h5>Název produktu</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<p>počet ks</p>
<p class="price">cena: 39,-Kč/ks</p>
</div>
</div>
<div class="clearfix"></div>
</div>
<script type="text/javascript">
$('.gallery-image-holder').mouseenter(function() {
$(this).find('.gallery-item-data').animate({opacity: 1}, 100, 'swing');
}).mouseleave(function() {
$(this).find('.gallery-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>
<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="#" class="active">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>
resources/views/visitor/cwbs_template/style.css
Vendored
+8
View File
@@ -72,6 +72,14 @@ img.thumbnail:focus, img.thumbnail:hover {box-shadow: none; border-color: #fffff
.sale-item-data p {margin: -5px auto 0; padding: 0 auto; text-align: center; font-size: 0.8rem;}
.sale-item-data p.price {margin-top: 10px; font-weight: 700; font-size: 0.9rem;}
.gallery-image-holder>img {width: 100%; height: auto; border: 1px solid #414042;}
.gallery-image-holder {margin-bottom: 15px; position: relative; cursor: pointer;}
.gallery-item-data {display: block; opacity: 0; width: calc(100% - 0.9375rem * 2);height: 100%; position: absolute; top: 0; left: 0.9375rem; background-color: rgba(65, 64, 66, 0.71); color: #ffffff;}
.gallery-item-data * {color: #ffffff;}
.gallery-item-data h5 {text-transform: uppercase; font-size: 1.1rem; text-align: center; padding: 15px 10px 0 10px; font-weight: 700; margin-bottom: 0;}
.gallery-item-data p {margin: 5px; padding: 0 auto; text-align: center; font-size: 0.8rem;}
.gallery-item-data p.price {margin-top: 10px; font-weight: 700; font-size: 1.1rem;}
.white-wrapper h6 {color: #46c1be; text-transform: uppercase; font-size: 1.3rem;}
.white-wrapper h6.lowercase {text-transform: none; font-size: 1.2rem;}