<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 ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/badurski/pen/ayPdBB?depth=everything&order=popularity&page=65&q=shop&show_forks=false" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style class="cp-pen-styles">@import url("https://fonts.googleapis.com/css?family=Roboto:700,900|Montserrat:400,500,700,900|Playfair+Display:400i|Raleway:400:900");
* {
box-sizing: border-box;
}
a {
color: #111;
text-decoration: none;
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
font-size: 12px;
}
img {
width: 150px;
}
p {
color: #787878;
font-family: "Raleway", sans-serif;
font-size: 13px;
line-height: 1.7;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
input, button {
padding: 5px;
width: 100%;
border: 0;
background: 0;
}
body {
margin: 0;
}
body:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 500px;
background: #FFF url(https://goo.gl/2J2VFW) no-repeat top;
background-size: cover;
z-index: -1;
}
body:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 645px;
background: linear-gradient(to bottom, transparent 40%, rgba(255, 255, 255, 0.86) 67%, white 77%, white 100%);
z-index: -1;
}
.cross {
width: 10px;
margin: 0 auto;
}
.btn-blue {
font-family: "Montserrat", sans-serif;
font-size: 12px;
text-transform: uppercase;
color: white;
background: #00b0ff;
padding: 10px 20px;
position: relative;
text-align: center;
}
.btn-blue span {
display: inline-block;
min-width: 0.3em;
text-transform: uppercase;
transition: 0.25s cubic-bezier(0.5, -1, 0.5, 2);
opacity: 0;
transform: translate(0, -20px);
}
.btn-blue:before {
content: attr(data-text);
position: absolute;
width: 100%;
left: 0;
transition: 0.25s cubic-bezier(0.5, -1, 0.5, 2);
text-transform: uppercase;
letter-spacing: 3.5px;
opacity: 1;
transform: translate(0, 0px);
padding: 2px 0;
}
.btn-blue:hover:before, .btn-blue:focus:before {
opacity: 0;
transform: translate(0, 20px);
}
.btn-blue:hover span, .btn-blue:focus span {
opacity: 1;
transform: translate(0, 0);
}
.btn-blue:hover span:nth-child(1), .btn-blue:focus span:nth-child(1) {
transition-delay: 0.025s;
}
.btn-blue:hover span:nth-child(2), .btn-blue:focus span:nth-child(2) {
transition-delay: 0.05s;
}
.btn-blue:hover span:nth-child(3), .btn-blue:focus span:nth-child(3) {
transition-delay: 0.075s;
}
.btn-blue:hover span:nth-child(4), .btn-blue:focus span:nth-child(4) {
transition-delay: 0.1s;
}
.btn-blue:hover span:nth-child(5), .btn-blue:focus span:nth-child(5) {
transition-delay: 0.125s;
}
.btn-blue:hover span:nth-child(6), .btn-blue:focus span:nth-child(6) {
transition-delay: 0.15s;
}
.btn-blue:hover span:nth-child(7), .btn-blue:focus span:nth-child(7) {
transition-delay: 0.175s;
}
.btn-blue:hover span:nth-child(8), .btn-blue:focus span:nth-child(8) {
transition-delay: 0.2s;
}
.btn-blue:hover span:nth-child(9), .btn-blue:focus span:nth-child(9) {
transition-delay: 0.225s;
}
.btn-blue:hover span:nth-child(10), .btn-blue:focus span:nth-child(10) {
transition-delay: 0.25s;
}
.small-title {
font-family: "Montserrat", sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 14px;
text-align: center;
margin: 0px 0 8px;
}
.show-more {
color: #00b0ff;
font-weight: 500;
letter-spacing: 0.6px;
position: relative;
padding: 0 0 3px;
border-bottom: 1.5px solid #00b0ff;
transition: 0.2s ease;
}
.show-more:hover {
color: #008dcc;
}
.full-wh {
width: 100%;
height: 100%;
}
.container {
width: 1000px;
margin: 0 auto;
position: relative;
}
.bottom {
position: absolute;
bottom: 0;
}
.wrapper {
display: flex;
}
section {
position: relative;
}
.svg-icon svg {
width: 100%;
height: 100%;
max-width: 50px;
max-height: 50px;
}
header {
padding: 20px;
}
header .container {
justify-content: center;
align-items: center;
}
header .m-navigation, header .m-nav-popup {
display: none;
}
header .m-navigation {
display: none;
position: relative;
height: 20px;
width: 20px;
}
header .m-navigation .burger {
position: absolute;
overflow: hidden;
width: 20px;
height: 20px;
}
header .m-navigation .burger:active .top, header .m-navigation .burger:focus .top, header .m-navigation .burger:hover .top {
width: 60% !important;
}
header .m-navigation .burger:active .middle, header .m-navigation .burger:focus .middle, header .m-navigation .burger:hover .middle {
width: 70% !important;
}
header .m-navigation .burger:active .bottom, header .m-navigation .burger:focus .bottom, header .m-navigation .burger:hover .bottom {
width: 80% !important;
}
header .m-navigation .burger .mobile_nav__label {
margin: -10px 10px;
width: 135px;
position: absolute;
}
header .m-navigation .burger .stripe {
height: 4px;
background: black;
position: absolute;
transition: 0.2s ease;
}
header .m-navigation .burger .top, header .m-navigation .burger .middle, header .m-navigation .burger .bottom {
width: 100%;
}
header .m-navigation .burger .top {
right: 0;
top: 0;
}
header .m-navigation .burger .middle {
left: 0;
top: 0;
margin: 6.9px 0;
}
header .m-navigation .burger .bottom {
right: 0;
top: 0;
margin: 14px 0;
}
header .m-nav-popup {
margin: 0 50px;
width: 100%;
}
header .m-nav-popup ul {
text-align: center;
}
header .m-nav-popup ul .visited a:after {
content: "";
position: absolute;
width: 100%;
height: 4px;
background: black;
margin: 15.5px 0;
right: 0;
}
header .m-nav-popup ul li {
display: inline-block;
margin: 0 15px;
}
header .m-nav-popup ul li a {
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.8px;
position: relative;
}
header .m-nav-popup ul li a:after {
content: "";
position: absolute;
width: 0%;
height: 4px;
background: black;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
margin: 15.5px 0;
right: 0;
}
header .m-nav-popup ul li a:hover:after {
width: 100%;
left: 0;
}
header .logo {
min-width: 150px;
}
header .logo span {
color: black;
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 27px;
}
header .nav-head {
width: 100%;
text-align: center;
}
header .nav-head ul li {
display: inline-block;
}
header .nav-head ul li a {
padding: 5px 8px;
text-transform: uppercase;
transition: 0.1s ease;
font-weight: 500;
}
header .nav-head ul li a:hover {
background: #00b0ff;
color: white;
}
header .nav-social {
min-width: 150px;
}
header .nav-social li {
display: inline-block;
margin: 0 3px;
}
header .nav-social .black-squere {
height: 28px;
width: 28px;
border-radius: 50%;
background: #000;
position: relative;
display: block;
}
header .nav-social .svg-icon {
margin: 8px 0 0 8px;
position: absolute;
}
header .nav-social .svg-icon svg {
fill: white;
height: 12px;
width: 12px;
}
main #intro {
text-align: center;
padding: 80px 0px;
}
main #intro .title {
font-family: "Playfair Display", sans-serif;
color: black;
font-size: 40px;
}
main #intro .subtitle {
font-family: "Playfair Display", sans-serif;
color: white;
font-size: 18px;
text-shadow: 0px 0px 2px black;
}
main #intro .shop-exposition {
background: white;
margin: 120px 80px;
box-shadow: 0px 0px 55px -15px black;
position: relative;
padding: 35px 15px;
z-index: 1;
}
main #intro .shop-exposition:before {
content: "Boards";
font-family: "Montserrat", sans-serif;
font-size: 127px;
font-weight: 900;
position: absolute;
z-index: -1;
right: 0;
transform: rotate(-90deg);
transform-origin: 53% -63%;
bottom: 0;
color: rgba(0, 0, 0, 0.03);
}
main #intro .shop-exposition .triangle {
position: absolute;
top: 0;
left: 0;
padding-bottom: 10%;
padding-left: 10%;
overflow: hidden;
height: 100%;
}
main #intro .shop-exposition .triangle:before {
content: "";
display: block;
width: 0;
height: 0;
margin-left: -105px;
border-bottom: 510px solid transparent;
border-left: 415px solid #00d2ff;
}
main #intro .shop-exposition .slider-nav {
position: absolute;
top: 0;
right: 0;
margin: 40px 0 0;
z-index: 100;
}
main #intro .shop-exposition .slider-nav .slider-buttons.wrapper {
margin: 0px 0px 35px 15px;
position: absolute;
}
main #intro .shop-exposition .slider-nav .slider-buttons.wrapper .slider-toLeft:active {
box-shadow: inset -15px 0px 30px -20px black;
}
main #intro .shop-exposition .slider-nav .slider-buttons.wrapper .slider-toRight:active {
box-shadow: inset 15px 0px 30px -20px black;
}
main #intro .shop-exposition .slider-nav .slider-buttons.wrapper .arrow-btn {
background: #f2d802;
padding: 8px 0px;
cursor: pointer;
transition: 0.2s ease;
height: 30px;
width: 30px;
}
main #intro .shop-exposition .slider-nav .slider-buttons.wrapper .arrow-btn:hover, main #intro .shop-exposition .slider-nav .slider-buttons.wrapper .arrow-btn:focus {
background: #dfc800;
}
main #intro .shop-exposition .slider-nav .slider-buttons.wrapper .arrow-btn svg {
fill: white;
height: 15px;
width: 15px;
}
main #intro .shop-exposition .slider-nav .slider-counter {
background: black;
width: 45px;
text-align: center;
margin: 30px 0 0;
line-height: 1.7;
height: 30px;
}
main #intro .shop-exposition .slider-nav .slider-counter span {
color: white;
font-size: 10px;
font-family: "Montserrat", sans-serif;
font-weight: 400;
}
main #intro .shop-exposition .item-preview-box.wrapper {
position: relative;
min-width: 425px;
}
main #intro .shop-exposition .item-preview-box.wrapper .item-preview {
width: 325px;
}
main #intro .shop-exposition .item-preview-box.wrapper .item-preview img {
width: 100%;
}
main #intro .shop-exposition .item-preview-box.wrapper .item-list {
position: absolute;
top: 50%;
height: 250px;
margin: -125px 20px;
right: 0;
}
main #intro .shop-exposition .item-preview-box.wrapper .item-list .active {
border: 2px solid #00b0ff !important;
}
main #intro .shop-exposition .item-preview-box.wrapper .item-list .picture-container {
width: 55px;
height: 55px;
overflow: hidden;
display: block;
background: white;
border: 1px solid #dfdfdf;
margin: 3px 0;
cursor: pointer;
transition: 0.2s ease;
}
main #intro .shop-exposition .item-preview-box.wrapper .item-list .picture-container:hover {
border: 1px solid #787878;
}
main #intro .shop-exposition .item-preview-box.wrapper .item-list .picture-container img {
width: 100%;
height: 100%;
}
main #intro .shop-exposition .item-description {
width: 100%;
text-align: left;
padding: 10px 25px;
position: relative;
}
main #intro .shop-exposition .item-description .item-title {
font-family: "Montserrat", sans-serif;
font-weight: 700;
margin: 0 0 5px;
}
main #intro .shop-exposition .item-description .item-rating {
display: inline-block;
}
main #intro .shop-exposition .item-description .item-rating .noactive {
fill: #111 !important;
}
main #intro .shop-exposition .item-description .item-rating .item-rating-star {
display: inline-block;
height: 9px;
width: 9px;
fill: #f2d802;
}
main #intro .shop-exposition .item-description .item-rating-response {
display: inline-block;
color: #787878;
font-size: 11px;
}
main #intro .shop-exposition .item-description .wrapper {
align-items: center;
margin: 30px 0 0;
}
main #intro .shop-exposition .item-description .item-price {
font-family: "Montserrat", sans-serif;
font-weight: 900;
font-size: 20px;
margin: 0 20px 0 0;
}
main #intro .shop-exposition .item-description .tabs-initialize {
margin: 20px 0;
}
main #intro .shop-exposition .item-description .tabs-initialize .tabs-nav {
border-bottom: 1px solid #d2d2d2;
padding: 5px 0;
}
main #intro .shop-exposition .item-description .tabs-initialize .tabs-nav .active {
border-bottom: 2px solid #00b0ff;
}
main #intro .shop-exposition .item-description .tabs-initialize .tabs-nav .tab-switcher {
text-transform: uppercase;
font-family: "Raleway", sans-serif;
font-weight: 900;
padding: 5px 0;
margin: 0 15px 0 0;
cursor: pointer;
}
main #intro .shop-exposition .item-description .tabs-initialize .tabs-content-box {
margin: 20px 0;
}
main #about-us {
margin: 100px auto;
position: relative;
}
main #about-us:before {
content: "";
position: absolute;
top: 0;
left: 0;
background: url(https://goo.gl/USPNZg);
background-size: cover;
width: 100%;
height: 500px;
z-index: -1;
}
main #about-us:after {
content: "";
position: absolute;
width: 50%;
height: 300px;
top: 200px;
left: 0;
background: white;
z-index: -1;
}
main #about-us .container {
align-items: flex-start;
}
main #about-us .container:before {
content: "About us";
font-family: "Montserrat", sans-serif;
font-size: 155px;
font-weight: 600;
position: absolute;
z-index: -1;
top: -141px;
left: 50%;
right: 50%;
width: 1000px;
margin: 0 -500px;
color: rgba(0, 0, 0, 0.03);
letter-spacing: 20px;
text-transform: uppercase;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 0% 75%);
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 0% 75%);
}
main #about-us .container .post-content {
margin: 250px 92px 0 100px;
padding: 20px;
max-width: 360px;
}
main #about-us .container .post-content .title {
font-family: "Montserrat", sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 14px;
text-align: center;
margin: 0px 0 8px;
}
main #about-us .container .post-content .post-preview {
font-family: "Playfair Display", sans-serif;
font-size: 18px;
padding: 0px 20px;
color: black;
line-height: 1.8;
font-weight: 400;
font-style: italic;
}
main #about-us .container .post-picture {
width: 400px;
height: 225px;
margin: 440px 10px 0;
position: relative;
cursor: pointer;
}
main #about-us .container .post-picture:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
box-shadow: 20px 15px 100px -20px rgba(0, 0, 0, 0.65);
}
main #about-us .container .post-picture .picture-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.1);
transition: 0.4s ease;
}
main #about-us .container .post-picture .picture-overlay:hover {
background: transparent;
}
main #about-us .container .post-picture .picture-overlay:hover > .picture-play-icon::before {
height: 70px;
margin: -3px;
width: 70px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.7);
}
main #about-us .container .post-picture .picture-overlay .picture-play-icon {
height: 70px;
width: 70px;
border-radius: 50%;
border: 2px solid #fff;
position: absolute;
top: 50%;
left: 50%;
margin: -35px -35px;
}
main #about-us .container .post-picture .picture-overlay .picture-play-icon:before {
content: "";
position: absolute;
height: 110px;
margin: -23px;
width: 110px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.7);
transition: 0.3s ease;
}
main #about-us .container .post-picture .picture-overlay .picture-play-icon .svg-icon {
width: 25px;
height: 25px;
margin: 21px 23px;
}
main #our-team:before {
content: "Our Team";
font-family: "Montserrat", sans-serif;
font-size: 155px;
font-weight: 600;
position: absolute;
z-index: -1;
top: -100px;
left: 50%;
right: 50%;
width: 1013px;
margin: 0 -500px;
color: rgba(0, 0, 0, 0.03);
letter-spacing: 20px;
text-transform: uppercase;
}
main #our-team .container {
margin: 250px auto;
}
main #our-team .container .slider {
justify-content: center;
align-items: flex-start;
display: flex;
position: relative;
height: 250px;
}
main #our-team .container .slider .slider-navigation .arrow {
background: #fff;
padding: 8px 0;
cursor: pointer;
transition: 0.2s ease;
height: 35px;
width: 35px;
border-radius: 50%;
box-shadow: 0 0 25px -5px rgba(0, 0, 0, 0.53);
z-index: 10;
position: absolute;
top: 50%;
margin-top: -17.5px;
}
main #our-team .container .slider .slider-navigation .arrow .svg-icon {
height: 15px;
width: 15px;
margin: 1px auto;
fill: #0224ff;
}
main #our-team .container .slider .slider-navigation .arrow.arrow-left {
left: 0;
}
main #our-team .container .slider .slider-navigation .arrow.arrow-right {
right: 0;
}
main #our-team .container .slider .reduced {
margin: 50px -6px !important;
z-index: 1;
}
main #our-team .container .slider .slider-item {
text-align: center;
padding: 40px 20px;
border-radius: 3px;
background: #fff;
width: 220px;
margin: 0px -6px;
box-shadow: 0 0 60px -15px rgba(0, 0, 0, 0.53);
transition: 0.1s ease;
}
main #our-team .container .slider .slider-item:hover {
background: #00b0ff;
}
main #our-team .container .slider .slider-item:hover .user-nick span {
color: #fff !important;
}
main #our-team .container .slider .slider-item:hover .nick {
color: #b3e7ff !important;
}
main #our-team .container .slider .slider-item:hover .space-line::before, main #our-team .container .slider .slider-item:hover .space-line::after {
background: #0224ff !important;
}
main #our-team .container .slider .slider-item:hover .svg-icon svg {
fill: #b3e7ff !important;
}
main #our-team .container .slider .slider-item:hover .location {
color: #b3e7ff !important;
}
main #our-team .container .slider .slider-item .user-avatar img {
width: 80px;
height: 80px;
border: 2px solid white;
border-radius: 50%;
margin: 0 auto;
}
main #our-team .container .slider .slider-item .user-nick span {
font-family: "Montserrat", sans-serif;
font-size: 16px;
font-weight: 500;
margin: 5px 0 0;
display: block;
color: #00b0ff;
transition: 0.1s ease;
}
main #our-team .container .slider .slider-item .user-nick .nick {
color: #787878;
font-family: "Raleway", sans-serif;
font-size: 12px;
transition: 0.1s ease;
}
main #our-team .container .slider .slider-item .space-line {
width: 30px;
height: 7px;
overflow: hidden;
display: block;
position: relative;
margin: 12px auto;
}
main #our-team .container .slider .slider-item .space-line:before, main #our-team .container .slider .slider-item .space-line:after {
content: "";
position: absolute;
width: 23px;
height: 5px;
display: block;
background: #787878;
-webkit-clip-path: polygon(15% 75%, 25% 0, 37% 50%, 50% 0, 63% 50%, 75% 0, 85% 75%, 75% 50%, 63% 100%, 50% 50%, 37% 100%, 25% 50%);
clip-path: polygon(15% 75%, 25% 0, 37% 50%, 50% 0, 63% 50%, 75% 0, 85% 75%, 75% 50%, 63% 100%, 50% 50%, 37% 100%, 25% 50%);
transition: 0.2s ease;
}
main #our-team .container .slider .slider-item .space-line:before {
margin: 0 0 0 -2px;
}
main #our-team .container .slider .slider-item .space-line:after {
margin: 0 0 0 10px;
}
main #our-team .container .slider .slider-item .user-location.wrapper {
justify-content: center;
align-items: center;
}
main #our-team .container .slider .slider-item .user-location.wrapper .svg-icon {
width: 10px;
height: 15px;
margin: -23px 5px;
fill: #787878;
}
main #our-team .container .slider .slider-item .user-location.wrapper .location {
font-family: "Raleway", sans-serif;
font-size: 12px;
color: #787878;
}
#blog-posts .container {
text-align: center;
}
#blog-posts .container .posts {
justify-content: center;
align-items: flex-start;
display: flex;
margin: 40px 0;
}
#blog-posts .container .posts .post {
display: inline-block;
margin: 0 10px;
width: 225px;
transition: 0.3s ease;
}
#blog-posts .container .posts .post:hover {
box-shadow: 0px 0px 30px -5px rgba(0, 0, 0, 0.5);
}
#blog-posts .container .posts .post:hover .post-description a {
color: #0224ff !important;
}
#blog-posts .container .posts .post .post-thumb .post-photo {
width: 100%;
}
#blog-posts .container .posts .post .post-description {
padding: 20px;
text-align: left;
transition: 0.3s ease;
}
#blog-posts .container .posts .post .post-description a {
color: grey;
}
footer {
position: relative;
}
footer:before {
content: "";
background: #000;
bottom: 0;
position: absolute;
width: 100%;
height: 340px;
z-index: -1;
}
footer .container {
margin: 200px auto 0;
display: flex;
align-items: flex-end;
padding: 40px 30px;
}
footer .container .side-left {
min-width: 300px;
width: 100%;
margin: 0px 30px 0 0;
}
footer .container .side-left .instagram-box {
position: relative;
}
footer .container .side-left .instagram-box .instagram-photos .photo {
display: inline-block;
max-width: 50%;
margin: -4px -4px -3px 0px;
}
footer .container .side-left .instagram-box .instagram-photos img {
width: 100%;
height: 100%;
display: block;
}
footer .container .side-left .instagram-box .instagram-label {
padding: 15px;
line-height: 1.6;
background: #fff;
}
footer .container .side-left .instagram-box .instagram-label .svg-icon {
height: 25px;
width: 25px;
margin: 0 20px 0 0;
}
footer .container .side-left .instagram-box .instagram-label .svg-icon svg {
fill: #00b0ff;
}
footer .container .side-left .instagram-box .instagram-label .instagram-text {
font-family: "Raleway", sans-serif;
color: #00b0ff;
font-weight: 900;
text-transform: uppercase;
}
footer .container .side-left .instagram-box .instagram-label .instagram-nick {
font-family: "Raleway", sans-serif;
color: #000;
font-size: 13px;
margin: 2px 12px;
font-weight: 900;
}
footer .container .side-left .site-copyrights {
margin: 10px 0;
}
footer .container .side-left .site-copyrights span, footer .container .side-left .site-copyrights a {
font-family: "Raleway", sans-serif;
font-size: 10px;
color: #787878;
}
footer .container .side-right {
min-width: 370px;
padding: 20px;
}
footer .container .side-right .newsletter {
font-family: "Montserrat", sans-serif;
width: 250px;
position: relative;
}
footer .container .side-right .newsletter .block {
color: #fff;
font-size: 13px;
margin: 10px 0;
}
footer .container .side-right .newsletter input {
width: 100%;
background: #000;
padding: 8px;
border-bottom: 1px solid #787878;
}
footer .container .side-right .newsletter button {
background: #00b0ff;
width: 20px;
height: 20px;
border-radius: 50%;
border: 0;
position: absolute;
right: 0;
margin: -27px 0;
}
footer .container .side-right .newsletter button svg {
height: 12px;
width: 12px;
fill: white;
}
footer .container .side-right .facebook-box {
width: 100%;
background: linear-gradient(to bottom, #385490 50%, #e5e5e5 50%);
margin: 0 0 100px 0;
position: relative;
padding: 20px;
}
footer .container .side-right .facebook-box .facebook-logo {
font-family: "Roboto", sans-serif;
font-weight: 700;
color: white;
text-align: center;
width: 100%;
font-size: 30px;
}
footer .container .side-right .facebook-box .facebook-fanpage {
width: 250px;
height: 160px;
background: url(https://goo.gl/ropKBH);
background-size: cover;
margin: 20px auto;
}
footer .container .wrapper {
margin: 0px 0 50px;
}
footer .container .wrapper .column {
width: 50%;
}
footer .container .wrapper .column ul li {
margin: 10px 0;
}
footer .container .wrapper .column ul li a {
color: white;
}
footer .container .wrapper .column ul li a:hover .line:before, footer .container .wrapper .column ul li a:hover .line:after {
transform: translate(9px, 0px);
}
footer .container .wrapper .column .line {
width: 15px;
height: 7px;
float: left;
margin: 7px 10px 0px;
overflow: hidden;
display: block;
position: relative;
}
footer .container .wrapper .column .line:before, footer .container .wrapper .column .line:after {
content: "";
position: absolute;
width: 25px;
height: 7px;
display: block;
background: #f9e100;
-webkit-clip-path: polygon(15% 75%, 25% 0, 37% 50%, 50% 0, 63% 50%, 75% 0, 85% 75%, 75% 50%, 63% 100%, 50% 50%, 37% 100%, 25% 50%);
clip-path: polygon(15% 75%, 25% 0, 37% 50%, 50% 0, 63% 50%, 75% 0, 85% 75%, 75% 50%, 63% 100%, 50% 50%, 37% 100%, 25% 50%);
transition: 0.2s ease;
}
footer .container .wrapper .column .line:before {
margin: 0 0 0 -2px;
}
footer .container .wrapper .column .line:after {
margin: 0 0 0 -15px;
}
/* Medium Devices, Desktops */
@media only screen and (max-width: 1100px) {
.container {
width: 700px;
}
header .nav-head {
display: none;
}
header .logo {
width: 100%;
min-width: inherit;
text-align: left;
}
header .m-navigation {
display: block;
}
header .nav-social {
display: none;
}
}
@media only screen and (max-width: 768px) {
.container {
width: 480px;
}
}
@media only screen and (max-width: 600px) {
.container {
width: 100%;
}
main #about-us:before {
max-height: 200px;
}
main #intro .shop-exposition:before {
display: none;
}
}
</style></head><body>
<header>
<div class='container wrapper'>
<div class='logo'>
<span>Surfers Co.</span>
</div>
<nav class='nav-head'>
<ul>
<li>
<a href='/boards'>Boards</a>
</li>
<li>
<a href='/accesorries'>Accesorries</a>
</li>
<li>
<a href='/blog'>Blog</a>
</li>
<li>
<a href='/technology'>Technology</a>
</li>
<li>
<a href='/team'>Team</a>
</li>
<li>
<a href='/dealers'>Dealers</a>
</li>
</ul>
</nav>
<div class='m-navigation'>
<button class='burger' title='Open and close menu'>
<span class='mobile_nav__label'>Open and close menu</span>
<div class='top stripe'></div>
<div class='middle stripe'></div>
<div class='bottom stripe'></div>
</button>
</div>
<div class='m-nav-popup'>
<nav>
<ul>
<li class='visited'>
<a href='/home'>Home</a>
</li>
<li>
<a href='/toplist'>Toplista</a>
</li>
<li>
<a href='/forum'>Forum</a>
</li>
<li>
<a href='/blog'>Blog</a>
</li>
<li>
<a href='/contact'>Kontakt</a>
</li>
</ul>
</nav>
</div>
<nav class='nav-social'>
<ul>
<li>
<a class='black-squere' href='#'>
<div class='svg-icon'>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 430.113 430.114"> <path id="Facebook" d="M158.081,83.3c0,10.839,0,59.218,0,59.218h-43.385v72.412h43.385v215.183h89.122V214.936h59.805 c0,0,5.601-34.721,8.316-72.685c-7.784,0-67.784,0-67.784,0s0-42.127,0-49.511c0-7.4,9.717-17.354,19.321-17.354 c9.586,0,29.818,0,48.557,0c0-9.859,0-43.924,0-75.385c-25.016,0-53.476,0-66.021,0C155.878-0.004,158.081,72.48,158.081,83.3z"></path></svg>
</div>
</a>
</li>
<li>
<a class='black-squere' href='#'>
<div class='svg-icon'>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.395 97.395"><path d="M12.501,0h72.393c6.875,0,12.5,5.09,12.5,12.5v72.395c0,7.41-5.625,12.5-12.5,12.5H12.501C5.624,97.395,0,92.305,0,84.895 V12.5C0,5.09,5.624,0,12.501,0L12.501,0z M70.948,10.821c-2.412,0-4.383,1.972-4.383,4.385v10.495c0,2.412,1.971,4.385,4.383,4.385 h11.008c2.412,0,4.385-1.973,4.385-4.385V15.206c0-2.413-1.973-4.385-4.385-4.385H70.948L70.948,10.821z M86.387,41.188h-8.572 c0.811,2.648,1.25,5.453,1.25,8.355c0,16.2-13.556,29.332-30.275,29.332c-16.718,0-30.272-13.132-30.272-29.332 c0-2.904,0.438-5.708,1.25-8.355h-8.945v41.141c0,2.129,1.742,3.872,3.872,3.872h67.822c2.13,0,3.872-1.742,3.872-3.872V41.188 H86.387z M48.789,29.533c-10.802,0-19.56,8.485-19.56,18.953c0,10.468,8.758,18.953,19.56,18.953 c10.803,0,19.562-8.485,19.562-18.953C68.351,38.018,59.593,29.533,48.789,29.533z"></path></svg>
</div>
</a>
</li>
<li>
<a class='black-squere' href='#'>
<div class='svg-icon'>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.875 96.875"> <path d="M95.201,25.538c-1.186-5.152-5.4-8.953-10.473-9.52c-12.013-1.341-24.172-1.348-36.275-1.341 c-12.105-0.007-24.266,0-36.279,1.341c-5.07,0.567-9.281,4.368-10.467,9.52C0.019,32.875,0,40.884,0,48.438 C0,55.992,0,64,1.688,71.336c1.184,5.151,5.396,8.952,10.469,9.52c12.012,1.342,24.172,1.349,36.277,1.342 c12.107,0.007,24.264,0,36.275-1.342c5.07-0.567,9.285-4.368,10.471-9.52c1.689-7.337,1.695-15.345,1.695-22.898 C96.875,40.884,96.889,32.875,95.201,25.538z M35.936,63.474c0-10.716,0-21.32,0-32.037c10.267,5.357,20.466,10.678,30.798,16.068 C56.434,52.847,46.23,58.136,35.936,63.474z"></path></svg>
</div>
</a>
</li>
</ul>
</nav>
</div>
</header>
<main>
<section id='intro'>
<div class='container'>
<div class='title'>Ride every wave as if it's your last</div>
<div class='subtitle'>We love the motion of the ocean</div>
<div class='shop-exposition item-box wrapper slider'>
<div class='triangle'></div>
<div class='slider-nav'>
<div class='slider-buttons wrapper'>
<a class='slider-toLeft arrow-btn'>
<div class='svg-icon'>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492 492"> <path d="M464.344,207.418l0.768,0.168H135.888l103.496-103.724c5.068-5.064,7.848-11.924,7.848-19.124 c0-7.2-2.78-14.012-7.848-19.088L223.28,49.538c-5.064-5.064-11.812-7.864-19.008-7.864c-7.2,0-13.952,2.78-19.016,7.844 L7.844,226.914C2.76,231.998-0.02,238.77,0,245.974c-0.02,7.244,2.76,14.02,7.844,19.096l177.412,177.412 c5.064,5.06,11.812,7.844,19.016,7.844c7.196,0,13.944-2.788,19.008-7.844l16.104-16.112c5.068-5.056,7.848-11.808,7.848-19.008 c0-7.196-2.78-13.592-7.848-18.652L134.72,284.406h329.992c14.828,0,27.288-12.78,27.288-27.6v-22.788 C492,219.198,479.172,207.418,464.344,207.418z"/></svg>
</div>
</a>
<a class='slider-toRight arrow-btn'>
<div class='svg-icon'>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492.004 492.004"><path d="M484.14,226.886L306.46,49.202c-5.072-5.072-11.832-7.856-19.04-7.856c-7.216,0-13.972,2.788-19.044,7.856l-16.132,16.136 c-5.068,5.064-7.86,11.828-7.86,19.04c0,7.208,2.792,14.2,7.86,19.264L355.9,207.526H26.58C11.732,207.526,0,219.15,0,234.002 v22.812c0,14.852,11.732,27.648,26.58,27.648h330.496L252.248,388.926c-5.068,5.072-7.86,11.652-7.86,18.864 c0,7.204,2.792,13.88,7.86,18.948l16.132,16.084c5.072,5.072,11.828,7.836,19.044,7.836c7.208,0,13.968-2.8,19.04-7.872 l177.68-177.68c5.084-5.088,7.88-11.88,7.86-19.1C492.02,238.762,489.228,231.966,484.14,226.886z"/></svg>
</div>
</a>
</div>
<div class='slider-counter'>
<span>05/25</span>
</div>
</div>
<div class='item-preview-box wrapper'>
<div class='item-preview'>
<img src='https://goo.gl/bf43fB'>
</div>
<div class='item-list'>
<ul>
<li>
<a class='picture-container active'>
<img src='https://goo.gl/vJZndy'>
</a>
</li>
<li>
<a class='picture-container'>
<img src='https://goo.gl/vN1AVP'>
</a>
</li>
<li>
<a class='picture-container'>
<img src='https://goo.gl/k98Ved'>
</a>
</li>
<li>
<a class='picture-container'>
<img src='https://goo.gl/bf43fB' style='height:85px;width:70px'>
</a>
</li>
</ul>
</div>
</div>
<div class='item-description'>
<div class='block'>
<div class='item-title'>JR Surfboards The Donny Stoker Yellow/Green Rail Fade</div>
<div class='item-rating' data-rating='4'>
<div class='item-rating-star active' data-star='5'>
<svg xmlns="http://www.w3.org/2000/svg"viewBox="0 0 55.867 55.867"><path d="M55.818,21.578c-0.118-0.362-0.431-0.626-0.808-0.681L36.92,18.268L28.83,1.876c-0.168-0.342-0.516-0.558-0.896-0.558 s-0.729,0.216-0.896,0.558l-8.091,16.393l-18.09,2.629c-0.377,0.055-0.689,0.318-0.808,0.681c-0.117,0.361-0.02,0.759,0.253,1.024 l13.091,12.76l-3.091,18.018c-0.064,0.375,0.09,0.754,0.397,0.978c0.309,0.226,0.718,0.255,1.053,0.076l16.182-8.506l16.18,8.506 c0.146,0.077,0.307,0.115,0.466,0.115c0.207,0,0.413-0.064,0.588-0.191c0.308-0.224,0.462-0.603,0.397-0.978l-3.09-18.017 l13.091-12.761C55.838,22.336,55.936,21.939,55.818,21.578z"></path</svg>
</div>
<div class='item-rating-star active' data-star='4'>
<svg xmlns="http://www.w3.org/2000/svg"viewBox="0 0 55.867 55.867"><path d="M55.818,21.578c-0.118-0.362-0.431-0.626-0.808-0.681L36.92,18.268L28.83,1.876c-0.168-0.342-0.516-0.558-0.896-0.558 s-0.729,0.216-0.896,0.558l-8.091,16.393l-18.09,2.629c-0.377,0.055-0.689,0.318-0.808,0.681c-0.117,0.361-0.02,0.759,0.253,1.024 l13.091,12.76l-3.091,18.018c-0.064,0.375,0.09,0.754,0.397,0.978c0.309,0.226,0.718,0.255,1.053,0.076l16.182-8.506l16.18,8.506 c0.146,0.077,0.307,0.115,0.466,0.115c0.207,0,0.413-0.064,0.588-0.191c0.308-0.224,0.462-0.603,0.397-0.978l-3.09-18.017 l13.091-12.761C55.838,22.336,55.936,21.939,55.818,21.578z"></path</svg>
</div>
<div class='item-rating-star active' data-star='3'>
<svg xmlns="http://www.w3.org/2000/svg"viewBox="0 0 55.867 55.867"><path d="M55.818,21.578c-0.118-0.362-0.431-0.626-0.808-0.681L36.92,18.268L28.83,1.876c-0.168-0.342-0.516-0.558-0.896-0.558 s-0.729,0.216-0.896,0.558l-8.091,16.393l-18.09,2.629c-0.377,0.055-0.689,0.318-0.808,0.681c-0.117,0.361-0.02,0.759,0.253,1.024 l13.091,12.76l-3.091,18.018c-0.064,0.375,0.09,0.754,0.397,0.978c0.309,0.226,0.718,0.255,1.053,0.076l16.182-8.506l16.18,8.506 c0.146,0.077,0.307,0.115,0.466,0.115c0.207,0,0.413-0.064,0.588-0.191c0.308-0.224,0.462-0.603,0.397-0.978l-3.09-18.017 l13.091-12.761C55.838,22.336,55.936,21.939,55.818,21.578z"></path</svg>
</div>
<div class='item-rating-star active' data-star='2'>
<svg xmlns="http://www.w3.org/2000/svg"viewBox="0 0 55.867 55.867"><path d="M55.818,21.578c-0.118-0.362-0.431-0.626-0.808-0.681L36.92,18.268L28.83,1.876c-0.168-0.342-0.516-0.558-0.896-0.558 s-0.729,0.216-0.896,0.558l-8.091,16.393l-18.09,2.629c-0.377,0.055-0.689,0.318-0.808,0.681c-0.117,0.361-0.02,0.759,0.253,1.024 l13.091,12.76l-3.091,18.018c-0.064,0.375,0.09,0.754,0.397,0.978c0.309,0.226,0.718,0.255,1.053,0.076l16.182-8.506l16.18,8.506 c0.146,0.077,0.307,0.115,0.466,0.115c0.207,0,0.413-0.064,0.588-0.191c0.308-0.224,0.462-0.603,0.397-0.978l-3.09-18.017 l13.091-12.761C55.838,22.336,55.936,21.939,55.818,21.578z"></path</svg>
</div>
<div class='item-rating-star noactive' data-star='1'>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55.867 55.867"><path d="M11.287,54.548c-0.207,0-0.414-0.064-0.588-0.191c-0.308-0.224-0.462-0.603-0.397-0.978l3.091-18.018L0.302,22.602 c-0.272-0.266-0.37-0.663-0.253-1.024c0.118-0.362,0.431-0.626,0.808-0.681l18.09-2.629l8.091-16.393 c0.168-0.342,0.516-0.558,0.896-0.558l0,0c0.381,0,0.729,0.216,0.896,0.558l8.09,16.393l18.091,2.629 c0.377,0.055,0.689,0.318,0.808,0.681c0.117,0.361,0.02,0.759-0.253,1.024L42.475,35.363l3.09,18.017 c0.064,0.375-0.09,0.754-0.397,0.978c-0.308,0.226-0.717,0.255-1.054,0.076l-16.18-8.506l-16.182,8.506 C11.606,54.51,11.446,54.548,11.287,54.548z M3.149,22.584l12.016,11.713c0.235,0.229,0.343,0.561,0.287,0.885L12.615,51.72 l14.854-7.808c0.291-0.154,0.638-0.154,0.931,0l14.852,7.808l-2.836-16.538c-0.056-0.324,0.052-0.655,0.287-0.885l12.016-11.713 l-16.605-2.413c-0.326-0.047-0.607-0.252-0.753-0.547L27.934,4.578l-7.427,15.047c-0.146,0.295-0.427,0.5-0.753,0.547L3.149,22.584z"></path></svg>
</div>
</div>
<a class='item-rating-response'>(52)</a>
</div>
<div class='block tabs-initialize'>
<div class='tabs-nav'>
<a class='tab-switcher active' data-tab='1'>Description</a>
<a class='tab-switcher' data-tab='2'>Features</a>
<a class='tab-switcher' data-tab='3'>Diemension</a>
</div>
<div class='tabs-content-box'>
<p>Easy to ride, care free surfing craft that's fun for everyon, paddles well, super fast down the line and great for any level of surfing depending on who rides it. The Donny Stoker, a rework on design from stokesys first ever pro model. A super easy to surf and fun board. The Donny Soker is a board for total freesurfing expression.</p>
</div>
</div>
<div class='block wrapper'>
<div class='item-price'>
<span>$499.99</span>
</div>
<a aria-label='word' class='btn-blue' data-text='Buy now' href='#'>
<span>B</span>
<span>u</span>
<span>y</span>
<span></span>
<span>n</span>
<span>o</span>
<span>w</span>
</a>
</div>
<div class='block bottom'>
<a class='show-more' href='#'>View all boards</a>
</div>
</div>
</div>
</div>
</section>
<section id='about-us'>
<div class='container wrapper'>
<div class='post-content'>
<div class='small-title'>We are Surfers Co.</div>
<div class='svg-icon cross'>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94.926 94.926"><path d="M55.931,47.463L94.306,9.09c0.826-0.827,0.826-2.167,0-2.994L88.833,0.62C88.436,0.224,87.896,0,87.335,0 c-0.562,0-1.101,0.224-1.498,0.62L47.463,38.994L9.089,0.62c-0.795-0.795-2.202-0.794-2.995,0L0.622,6.096 c-0.827,0.827-0.827,2.167,0,2.994l38.374,38.373L0.622,85.836c-0.827,0.827-0.827,2.167,0,2.994l5.473,5.476 c0.397,0.396,0.936,0.62,1.498,0.62s1.1-0.224,1.497-0.62l38.374-38.374l38.374,38.374c0.397,0.396,0.937,0.62,1.498,0.62 s1.101-0.224,1.498-0.62l5.473-5.476c0.826-0.827,0.826-2.167,0-2.994L55.931,47.463z"/></svg>
</div>
<p class='post-preview'>
Lorem ipsum dolor sit amet, aeneam consectetur adipiscing elit. Fusce iaculis feugiat arcunum fermentum hendrerit. Suspendisse auctor labor nisi, et interdum diam facilisis, aliquam pulvinar semi egetis belle sollicitudin ut. Nullam tincidun finibustus scelerisque.
</p>
<div class='block'>
<a class='show-more' href='#'>Read more</a>
</div>
</div>
<div class='post-picture'>
<div class='picture-overlay'>
<div class='picture-play-icon'>
<div class='svg-icon'>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 232.153 232.153"><g id="Play"> <path style="fill-rule: evenodd; clip-rule: evenodd; fill: rgb(255, 255, 255);" d="M203.791,99.628L49.307,2.294c-4.567-2.719-10.238-2.266-14.521-2.266 c-17.132,0-17.056,13.227-17.056,16.578v198.94c0,2.833-0.075,16.579,17.056,16.579c4.283,0,9.955,0.451,14.521-2.267 l154.483-97.333c12.68-7.545,10.489-16.449,10.489-16.449S216.471,107.172,203.791,99.628z"></path></svg>
</div>
</div>
</div>
<img class='full-wh' src='https://goo.gl/Z9cYic'>
</div>
</div>
</section>
<section id='our-team'>
<div class='container'>
<div class='slider'>
<div class='slider-navigation'>
<div class='arrow arrow-left'>
<div class='svg-icon'>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492 492"> <path d="M464.344,207.418l0.768,0.168H135.888l103.496-103.724c5.068-5.064,7.848-11.924,7.848-19.124 c0-7.2-2.78-14.012-7.848-19.088L223.28,49.538c-5.064-5.064-11.812-7.864-19.008-7.864c-7.2,0-13.952,2.78-19.016,7.844 L7.844,226.914C2.76,231.998-0.02,238.77,0,245.974c-0.02,7.244,2.76,14.02,7.844,19.096l177.412,177.412 c5.064,5.06,11.812,7.844,19.016,7.844c7.196,0,13.944-2.788,19.008-7.844l16.104-16.112c5.068-5.056,7.848-11.808,7.848-19.008 c0-7.196-2.78-13.592-7.848-18.652L134.72,284.406h329.992c14.828,0,27.288-12.78,27.288-27.6v-22.788 C492,219.198,479.172,207.418,464.344,207.418z"/></svg>
</div>
</div>
<div class='arrow arrow-right'>
<div class='svg-icon'>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492.004 492.004"><path d="M484.14,226.886L306.46,49.202c-5.072-5.072-11.832-7.856-19.04-7.856c-7.216,0-13.972,2.788-19.044,7.856l-16.132,16.136 c-5.068,5.064-7.86,11.828-7.86,19.04c0,7.208,2.792,14.2,7.86,19.264L355.9,207.526H26.58C11.732,207.526,0,219.15,0,234.002 v22.812c0,14.852,11.732,27.648,26.58,27.648h330.496L252.248,388.926c-5.068,5.072-7.86,11.652-7.86,18.864 c0,7.204,2.792,13.88,7.86,18.948l16.132,16.084c5.072,5.072,11.828,7.836,19.044,7.836c7.208,0,13.968-2.8,19.04-7.872 l177.68-177.68c5.084-5.088,7.88-11.88,7.86-19.1C492.02,238.762,489.228,231.966,484.14,226.886z"/></svg>
</div>
</div>
</div>
<div class='slider-item hidden' data-sequence='0' data-visible='false'>
<div class='user-avatar'>
<img src='https://goo.gl/wWcnfv'>
</div>
<div class='user-nick'>
<span>Taj Burrow</span>
<div class='nick'>@tajamos</div>
</div>
<div class='space-line'></div>
<div class='user-location wrapper'>
<div class='svg-icon'>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.713 97.713"> <path d="M48.855,0C29.021,0,12.883,16.138,12.883,35.974c0,5.174,1.059,10.114,3.146,14.684 c8.994,19.681,26.238,40.46,31.31,46.359c0.38,0.441,0.934,0.695,1.517,0.695s1.137-0.254,1.517-0.695 c5.07-5.898,22.314-26.676,31.311-46.359c2.088-4.57,3.146-9.51,3.146-14.684C84.828,16.138,68.69,0,48.855,0z M48.855,54.659 c-10.303,0-18.686-8.383-18.686-18.686c0-10.304,8.383-18.687,18.686-18.687s18.686,8.383,18.686,18.687 C67.542,46.276,59.159,54.659,48.855,54.659z"/></svg>
</div>
<div class='location'>Yalingup, Australia</div>
</div>
</div>
<div class='slider-item reduced hidden' data-sequence='1' data-visible='true'>
<div class='user-avatar'>
<img src='https://goo.gl/cW1riE'>
</div>
<div class='user-nick'>
<span>Malia Manuel</span>
<div class='nick'>@maliamanuel</div>
</div>
<div class='space-line'></div>
<div class='user-location wrapper'>
<div class='svg-icon'>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.713 97.713"> <path d="M48.855,0C29.021,0,12.883,16.138,12.883,35.974c0,5.174,1.059,10.114,3.146,14.684 c8.994,19.681,26.238,40.46,31.31,46.359c0.38,0.441,0.934,0.695,1.517,0.695s1.137-0.254,1.517-0.695 c5.07-5.898,22.314-26.676,31.311-46.359c2.088-4.57,3.146-9.51,3.146-14.684C84.828,16.138,68.69,0,48.855,0z M48.855,54.659 c-10.303,0-18.686-8.383-18.686-18.686c0-10.304,8.383-18.687,18.686-18.687s18.686,8.383,18.686,18.687 C67.542,46.276,59.159,54.659,48.855,54.659z"/></svg>
</div>
<div class='location'>Vailua, Hi</div>
</div>
</div>
<div class='slider-item' data-sequence='2' data-visible='true'>
<div class='user-avatar'>
<img src='https://goo.gl/zw6etf'>
</div>
<div class='user-nick'>
<span>Ian Walsh</span>
<div class='nick'>@ian.walsh</div>
</div>
<div class='space-line'></div>
<div class='user-location wrapper'>
<div class='svg-icon'>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.713 97.713"> <path d="M48.855,0C29.021,0,12.883,16.138,12.883,35.974c0,5.174,1.059,10.114,3.146,14.684 c8.994,19.681,26.238,40.46,31.31,46.359c0.38,0.441,0.934,0.695,1.517,0.695s1.137-0.254,1.517-0.695 c5.07-5.898,22.314-26.676,31.311-46.359c2.088-4.57,3.146-9.51,3.146-14.684C84.828,16.138,68.69,0,48.855,0z M48.855,54.659 c-10.303,0-18.686-8.383-18.686-18.686c0-10.304,8.383-18.687,18.686-18.687s18.686,8.383,18.686,18.687 C67.542,46.276,59.159,54.659,48.855,54.659z"/></svg>
</div>
<div class='location'>Maui, Hi</div>
</div>
</div>
<div class='slider-item reduced hidden' data-sequence='3' data-visible='true'>
<div class='user-avatar'>
<img src='https://goo.gl/LG835R'>
</div>
<div class='user-nick'>
<span>Macy Callaghan</span>
<div class='nick'>@macyjanecallaghan</div>
</div>
<div class='space-line'></div>
<div class='user-location wrapper'>
<div class='svg-icon'>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.713 97.713"> <path d="M48.855,0C29.021,0,12.883,16.138,12.883,35.974c0,5.174,1.059,10.114,3.146,14.684 c8.994,19.681,26.238,40.46,31.31,46.359c0.38,0.441,0.934,0.695,1.517,0.695s1.137-0.254,1.517-0.695 c5.07-5.898,22.314-26.676,31.311-46.359c2.088-4.57,3.146-9.51,3.146-14.684C84.828,16.138,68.69,0,48.855,0z M48.855,54.659 c-10.303,0-18.686-8.383-18.686-18.686c0-10.304,8.383-18.687,18.686-18.687s18.686,8.383,18.686,18.687 C67.542,46.276,59.159,54.659,48.855,54.659z"/></svg>
</div>
<div class='location'>San Clamente, CA</div>
</div>
</div>
</div>
</div>
</section>
<section id='blog-posts'>
<div class='container'>
<div class='small-title'>Lastest updates</div>
<div class='svg-icon cross'>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94.926 94.926"><path d="M55.931,47.463L94.306,9.09c0.826-0.827,0.826-2.167,0-2.994L88.833,0.62C88.436,0.224,87.896,0,87.335,0 c-0.562,0-1.101,0.224-1.498,0.62L47.463,38.994L9.089,0.62c-0.795-0.795-2.202-0.794-2.995,0L0.622,6.096 c-0.827,0.827-0.827,2.167,0,2.994l38.374,38.373L0.622,85.836c-0.827,0.827-0.827,2.167,0,2.994l5.473,5.476 c0.397,0.396,0.936,0.62,1.498,0.62s1.1-0.224,1.497-0.62l38.374-38.374l38.374,38.374c0.397,0.396,0.937,0.62,1.498,0.62 s1.101-0.224,1.498-0.62l5.473-5.476c0.826-0.827,0.826-2.167,0-2.994L55.931,47.463z"/></svg>
</div>
<div class='posts'>
<div class='post'>
<div class='post-thumb'>
<div class='overlay'></div>
<img class='post-photo' src='https://goo.gl/n8biRr'>
</div>
<div class='post-description'>
<a href='#'>Donec nunc nibh, sagittis in odio vitae, tempor semper leo. Pellentesque molestie orci ut tortor lacinia, suscipit volutpat justo sagittis.</a>
</div>
</div>
<div class='post'>
<div class='post-thumb'>
<div class='overlay'></div>
<img class='post-photo' src='https://goo.gl/hhVxsE'>
</div>
<div class='post-description'>
<a href='#'>Smet, consectetur adipiscing elit. Proin laoreet ac neque nec pulvinar. Pellentesque molestie orci ut tortor lacinia, suscipit volutpat.</a>
</div>
</div>
<div class='post'>
<div class='post-thumb'>
<div class='overlay'></div>
<img class='post-photo' src='https://goo.gl/aj66T8'>
</div>
<div class='post-description'>
<a href='#'>Pellentesque molestie orci ut tortor lacinia, suscipit volutpat justo sagittis. Donec nunc nibh, sagittis in odio vitae, tempor semper leo.</a>
</div>
</div>
</div>
<a aria-label='word' class='btn-blue' data-text='View all' href='#'>
<span>V</span>
<span>i</span>
<span>e</span>
<span>w</span>
<span></span>
<span>a</span>
<span>l</span>
<span>l</span>
</a>
</div>
</section>
<footer>
<div class='container wrapper'>
<div class='side-left'>
<div class='instagram-box'>
<div class='instagram-photos'>
<div class='photo'>
<img src='https://goo.gl/p7R7DH'>
</div>
<div class='photo'>
<img src='https://goo.gl/rMGq8h'>
</div>
<div class='photo'>
<img src='https://goo.gl/d5nGNH'>
</div>
<div class='photo'>
<img src='https://goo.gl/WMntB4'>
</div>
</div>
<div class='instagram-label wrapper'>
<div class='svg-icon'>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.395 97.395"><path d="M12.501,0h72.393c6.875,0,12.5,5.09,12.5,12.5v72.395c0,7.41-5.625,12.5-12.5,12.5H12.501C5.624,97.395,0,92.305,0,84.895 V12.5C0,5.09,5.624,0,12.501,0L12.501,0z M70.948,10.821c-2.412,0-4.383,1.972-4.383,4.385v10.495c0,2.412,1.971,4.385,4.383,4.385 h11.008c2.412,0,4.385-1.973,4.385-4.385V15.206c0-2.413-1.973-4.385-4.385-4.385H70.948L70.948,10.821z M86.387,41.188h-8.572 c0.811,2.648,1.25,5.453,1.25,8.355c0,16.2-13.556,29.332-30.275,29.332c-16.718,0-30.272-13.132-30.272-29.332 c0-2.904,0.438-5.708,1.25-8.355h-8.945v41.141c0,2.129,1.742,3.872,3.872,3.872h67.822c2.13,0,3.872-1.742,3.872-3.872V41.188 H86.387z M48.789,29.533c-10.802,0-19.56,8.485-19.56,18.953c0,10.468,8.758,18.953,19.56,18.953 c10.803,0,19.562-8.485,19.562-18.953C68.351,38.018,59.593,29.533,48.789,29.533z"></path></svg>
</div>
<div class='instagram-text'>Follow us</div>
<div class='instagram-nick'>@surfersco</div>
</div>
</div>
<div class='site-copyrights'>
<span>Ⓒ 2017 Surfers Co • Design by</span>
<a href='#'>lucaalco</a>
</div>
</div>
<div class='side-right'>
<div class='facebook-box'>
<div class='facebook-logo'>facebook</div>
<div class='facebook-fanpage'></div>
</div>
<div class='wrapper'>
<nav class='nav-footer column'>
<ul>
<li>
<a href='#'>
<span>About</span>
<span class='line'></span>
</a>
</li>
<li>
<a href='#'>
<span>Boards</span>
<span class='line'></span>
</a>
</li>
<li>
<a href='#'>
<span>Accesories</span>
<span class='line'></span>
</a>
</li>
<li>
<a href='#'>
<span>Blog</span>
<span class='line'></span>
</a>
</li>
</ul>
</nav>
<nav class='nav-footer column'>
<ul>
<li>
<a href='#'>
<span>Technology</span>
<span class='line'></span>
</a>
</li>
<li>
<a href='#'>
<span>Team</span>
<span class='line'></span>
</a>
</li>
<li>
<a href='#'>
<span>Dealers</span>
<span class='line'></span>
</a>
</li>
<li>
<a href='#'>
<span>Contact us</span>
<span class='line'></span>
</a>
</li>
</ul>
</nav>
</div>
<form class='newsletter'>
<div class='block'>Subscribe to our newsletter</div>
<input placeholder="You'r email" type='text'>
<button class='arrow' type='submit'>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492.004 492.004"><path d="M484.14,226.886L306.46,49.202c-5.072-5.072-11.832-7.856-19.04-7.856c-7.216,0-13.972,2.788-19.044,7.856l-16.132,16.136 c-5.068,5.064-7.86,11.828-7.86,19.04c0,7.208,2.792,14.2,7.86,19.264L355.9,207.526H26.58C11.732,207.526,0,219.15,0,234.002 v22.812c0,14.852,11.732,27.648,26.58,27.648h330.496L252.248,388.926c-5.068,5.072-7.86,11.652-7.86,18.864 c0,7.204,2.792,13.88,7.86,18.948l16.132,16.084c5.072,5.072,11.828,7.836,19.044,7.836c7.208,0,13.968-2.8,19.04-7.872 l177.68-177.68c5.084-5.088,7.88-11.88,7.86-19.1C492.02,238.762,489.228,231.966,484.14,226.886z"/></svg>
</button>
</form>
</div>
</div>
</footer>
</main>
</body></html>
