"nav shop"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<svg id="svg-defs" width="0" height="0">
<defs>
<clipPath id="clip-hexagon" clipPathUnits="objectBoundingBox">
<polygon points="0 .5, .25 0, .75 0, 1 .5, .75 1, .25 1" />
</clipPath>
<pattern id="image-01" x="0" y="0" width="374" height="324" patternUnits="userSpaceOnUse">
<image width="374" height="324" xlink:href="//mediav2.harveynichols.com/assets/webdev/2017/07/fenty/shape-1.jpg"></image>
</pattern>
<pattern id="image-02" x="0" y="0" width="374" height="324" patternUnits="userSpaceOnUse">
<image width="374" height="324" xlink:href="//mediav2.harveynichols.com/assets/webdev/2017/07/fenty/shape-2.jpg"></image>
</pattern>
<pattern id="image-03" x="0" y="0" width="374" height="324" patternUnits="userSpaceOnUse">
<image width="374" height="324" xlink:href="//mediav2.harveynichols.com/assets/webdev/2017/07/fenty/shape-3.jpg"></image>
</pattern>
<pattern id="image-04" x="0" y="0" width="374" height="324" patternUnits="userSpaceOnUse">
<image width="374" height="324" xlink:href="//mediav2.harveynichols.com/assets/webdev/2017/07/fenty/shape-4.jpg"></image>
</pattern>
<pattern id="image-05" x="0" y="0" width="374" height="324" patternUnits="userSpaceOnUse">
<image width="374" height="324" xlink:href="//mediav2.harveynichols.com/assets/webdev/2017/07/fenty/shape-5.jpg"></image>
</pattern>
<pattern id="image-06" x="0" y="0" width="374" height="324" patternUnits="userSpaceOnUse">
<image width="374" height="324" xlink:href="//mediav2.harveynichols.com/assets/webdev/2017/07/fenty/shape-6.jpg"></image>
</pattern>
</defs>
</svg>
<div id="shapes" class="items-wrapper" data-activerow="0" data-activecol="0">
<!--
<div class="item-position row-2 col-2" data-item="2" data-row="2" data-col="2">
<div class="item">
<svg class="shape" viewBox="0 0 374 324">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@charset "UTF-8";
/* ===== DEFINITIONS ============================================================================ */
@keyframes breathe {
10% {
transform: matrix(1, 0, 0, 1, 0, 0);
}
100% {
transform: matrix(1.05, 0, 0, 1.05, -8, -8);
}
}
/* ===== BODY =================================================================================== */
body {
background: #f5e3dc;
margin: 0;
padding: 0;
overflow: hidden;
}
/* ===== ITEM LISTINGS ========================================================================== */
.items-wrapper {
position: relative;
}
.item {
width: 374px;
height: 324px;
position: relative;
-webkit-clip-path: url(#clip-hexagon);
clip-path: url(#clip-hexagon);
will-change: transform;
/* required for safari clip path bug */
}
@media screen and (max-width: 979px) {
.items-wrapper {
height: 180vw;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Material Kit PRO
Product Page For Online Shop

Questions / Comments: