<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 ---------->
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Euphoria+Script" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script|Poppins:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script|Satisfy" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="hero">
<div class="hero-logo fade-up">
<img src="https://vanislebeardco.com/wp-content/uploads/2017/04/hill-logo-one-1.png" width="329" height="354" alt="Logo" class="logo"></div>
<div class="btn-container fade-up"><div class="btn1"><span><a href="#"></a></span>NEW ARRIVALS</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="welcome-section">
<div class="accent-home fade-up">Welcome</div>
<h3 class="about-text-dark fade-up">to Hillside Liquor store</h3>
<div class="welcome-text fade-up">
<p>We are a group of beer-loving adventurers, dedicated to exploring every corner of the craft beer frontier. Join us as we travel along the beer flavour ark! Our path is guided by unbridled creativity and unwavering attention to quality.</p>
<div class="col-md-6"><div class="cheers-vector"></div></div>
</div>
<div class="box-container fade-up">
<div class="row">
<div class="col-sm-4">
<div class="icon-box"> <img width="117" height="116" src="https://vanislebeardco.com/wp-content/uploads/2017/04/icon-address-1.png" class="vc_single_image-img attachment-full" alt=""><h3 class="icon-box-title">Find Us</h3> <p>1330 Shellbourne St<br>Victoria, BC</p>
</div></div></div>
<div class="col-sm-4">
<div class="icon-box"><img width="117" height="116" src="https://vanislebeardco.com/wp-content/uploads/2017/04/icon-phone-1.png" class="vc_single_image-img attachment-full" alt=""><h3 class="icon-box-title">Contact Us</h3> <p>Liquor Store | 250-732-2392<br>Sales Office | 250-748-2244</p></div></div>
<div class="col-sm-4">
<div class="icon-box"> <img width="117" height="116" src="https://vanislebeardco.com/wp-content/uploads/2017/04/icon-hours-1.png" class="vc_single_image-img attachment-full" alt=""><h3 class="icon-box-title">our hours</h3> <p>Monday - Friday | 9am till 10pm<br>Weekends | 9am till 11pm</p></div></div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="hero-two">
<div class="beer-lover-title fade-up">Feeling Hoppy?</div>
<p class="beer-lover-text fade-up">From craft beer to latest king of beers. We have you covered. See you soon.</p>
<div class="btn-container-three fade-up">
<div class="btn1"><span><a href="#"></a></span>grab a cold one</div></div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6"><div class="split-image-left"></div></div>
<div class="col-md-6">
<div class="info-box">
<h1 class="about-title fade-up">new arrivals</h1>
<div class="about-text">We are a group of beer-loving are are adventurers, dedicated to exploring every corner of the craft beer</div>
<div class="btn-container-two fade-up">
<div class="btn2"><span><a href="#"></a></span>see what's new</div></div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="split-image-right "></div></div>
<div class="col-md-6">
<div class="info-box">
<h2 class="about-title fade-up">your Local store</h2>
<div class="about-text">We are a group of beer-loving are are adventurers, dedicated to exploring every corner of the craft beer</div>
<div class="btn-container-two fade-up">
<div class="btn2"><span><a href="#"></a></span>get in here</div></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6"><div class="split-image-three"></div></div>
<div class="col-md-6">
<div class="info-box">
<h1 class="about-title fade-up">best local wines</h1>
<div class="about-text">We are a group of beer-loving are are adventurers, dedicated to exploring every corner of the craft beer</div>
<div class="btn-container-two fade-up">
<div class="btn2"><span><a href="#"></a></span>explore our wines</div></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6"><div class="blog overlay1 width hover"><h2 class="blog-title"><i class="fa fa-bolt" aria-hidden="true"></i>camping beers<h2><p class="blog-text fade-up">hillside blog | may 02 2017</p>
<div class="btn3"><span><a href="#"></a></span>read up</div></div>
</div>
<div class="col-md-6"><div class="blog-two overlay1 width blog-img"><h2 class="blog-title"><i class="fa fa-bolt" aria-hidden="true"></i>we all love a drink<h2><p class="blog-text fade-up">hillside blog | apr 02 2017</p>
<div class="btn3"><span><a href="#"></a></span>read up</div></div>
</div>
</div>
<div class="container footer">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
</body>
</html>
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
top: 0px;
left: 0px;
margin: 0 auto;
height: 100%;
font: 14px;
}
strong {
font-weight: bold;
}
h1,
h2,
h3 {
font-weight: 700;
line-height: 1;
letter-spacing: -0.4px;
-webkit-font-kerning: normal;
-moz-font-kerning: normal;
font-kerning: normal;
margin-top: 0;
margin-left: -2px;
font-family: 'Poppins', sans-serif;
color: #201c1c;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.125rem;
line-height: 2em;
margin: 1.25rem 0rem 0rem 0rem;
-ms-word-break: normal;
-ms-word-wrap: normal;
word-break: normal;
text-align: center;
text-transform: uppercase;
color: #000;
}
.row {
margin-left: -15px;
margin-right: =15px;
}
.container {
padding-right: -15px;
padding-left: -15px;
margin-right: auto;
margin-left: auto;
}
/*......Hero Section.....*/
.hero {
position: relative;
overflow: hidden;
width: 100%;
background-blend-mode: multiply;
background-color: rgba(32, 28, 28, 0.47);
margin-top: -4%;
height: 110vh;
-webkit-font-smoothing: antialiased;
background-image: url("http://uppergangesliquorstore.com/images/backgrounds/top_gradient4.jpg");
background-position: center;
background-size: cover;
background-image: no-repeat;
background-image: linear-gradient(to bottom right, #63afab);
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.hero-logo {
position: absolute;
height: auto;
margin: 0 auto !important;
padding-top: 10%;
display: -webkit-inline-box;
text-align: -webkit-center;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 100%;
}
/*......Welcome Section.....*/
.welcome-section {
Height: auto !important;
/* max-height: 100vh; */
overflow: hidden;
background-image: url(https://vanislebeardco.com/wp-content/uploads/2017/04/beer-drinkers-png.png);
background-blend-mode: multiply;
opacity: 1.1;
background-color: #fff;
padding-top: 5%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
position: relative;
top: 0;
bottom: 0;
right: 0;
left: 0;
padding-bottom: 3%;
}
.cheers-vector {
margin-top: 5% !important;
text-align: center;
width: 100%;
height: 220px !important;
margin: 0 auto;
background-image: url(https://vinepair.com/wp-content/uploads/2016/08/wine-beer-inside.png);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.accent-home {
font-size: 78px;
font-size: 8rem;
display: block;
line-height: .5em;
text-transform: none;
font-family: 'Euphoria Script', cursive;
color: #63afab;
text-align: center;
margin-top: %;
margin-bottom: 6%;
font-weight: 700;
width: 50%;
margin: 0 auto;
}
.welcome-text {
width: 60%;
margin: 0 auto;
-webkit-font-smoothing: antialiased;
width: 50%;
margin: 0 auto;
color: #201c1c;
}
.box-container {
width: 1140px;
margin: 0 auto;
margin-bottom: 40px;
margin-top: px;
}
.icon-box {
display: block;
width: 330px;
float: left;
position: ;
overflow: hidden;
padding: 40px 0px 40px 60px;
margin: 1.5em;
text-align: center;
text-decoration: none;
color: #000;
}
.icon-box p {
color: #color: #201c1c;
margin: 0;
position: relative;
font-size: 0.8rem;
font-family: 'Poppins', sans-serif;
color: #000;
}
.icon-box h3 {
padding: 0.8em 0 0.15em 0;
margin: 0 0 0.85em 0;
position: relative;
font-family: 'Poppins', sans-serif;
text-transform: uppercase;
color: #63afab;
}
.icon-box-title:after {
content: '';
display: block;
width: 60px;
height: 4px;
background: #63afab;
margin: 0px;
margin-bottom: 20px;
margin-top: 2.5%;
text-align: center !important;
margin: 0 auto;
margin-top: 2.5%;
margin-top: 2.5%;
}
/*......Beer Lovers Section.....*/
.hero-two {
background-blend-mode: multiply;
opacity: 0.8;
background-color: #ccf;
width: 100%;
text-align: center;
margin-top: -3%;
padding-bottom: 60px;
height: 650px;
-webkit-font-smoothing: antialiased;
background-image: url("http://brewery.themerex.net/wp-content/uploads/2015/10/Brewery.jpg");
background-position: center;
background-size: cover;
}
.beer-lover-title {
padding-top: 12%;
text-transform: uppercase;
font-weight: 700;
color: #fff;
font-family: 'Poppins', sans-serif;
font-size: 5em;
line-height: 1em;
letter-spacing: 7px;
margin-bottom: 0;
}
.beer-lover-text {
margin-top: -4.5%;
font-size: 1.6rem;
text-transform: uppercase;
font-weight: 700;
color: #fff;
font-family: 'Poppins', sans-serif;
margin: 0 auto;
text-align: center;
width: 50%;
}
.accent-hopp {
padding-top: 10%;
font-size: px;
font-size: 10rem;
display: block;
line-height: .5em;
text-transform: none;
font-family: 'Euphoria Script', cursive;
color: #63afab;
text-align: center;
margin-top: 8%;
padding-bottom: 2%;
font-weight: 700;
width: 100%;
margin: 0 auto;
}
/*......Split Section One.....*/
.split-image-left {
margin-bottom: 0px !important;
background-color: #fff;
background-image: url("https://static.pexels.com/photos/27431/pexels-photo-27431.jpg");
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
width: 50%;
float: left;
z-index: 1;
Height: 450px;
}
.steam-desript {
background-color: #fff;
width: 50%;
text-align: center;
float: right;
height: 400px;
margin-bottom: 0;
}
.about-title {
color: #000;
text-align: left;
margin-top: 10%;
font-weight: ;
font-size: 2.6em;
text-transform: uppercase;
letter-spacing: 3px;
}
.about-title:after {
content: '';
display: block;
width: 60px;
height: 4px;
background: #63afab;
margin: 0px;
margin-bottom: 20px;
margin-top: 4%;
}
.about-text {
font-family: 'Poppins', sans-serif;
font-size: 1.125rem;
line-height: 2em;
margin: 1.25rem 0rem 0rem 0rem;
-ms-word-break: normal;
-ms-word-wrap: normal;
word-break: normal;
text-align: left;
text-transform: uppercase;
color: #000;
padding-bottom: 5%;
width: 80%;
}
.about-text-dark {
color: #000;
text-align: center;
margin-top: 20px;
font-size: 1.825rem;
text-transform: uppercase;
font-weight: 700;
}
.about-text-dark:after {
content: '';
display: block;
width: 60px;
height: 4px;
background: #63afab;
margin: 0px;
margin-bottom: 20px;
margin-top: 2.5%;
text-align: center !important;
margin: 0 auto;
margin-top: 2.5%;
margin-top: 2.5%;
}
.accent {
font-size: 78px;
font-size: 3rem;
display: block;
line-height: .5em;
text-transform: none;
font-family: 'Kaushan Script', cursive;
color: #63afab;
text-align: center;
margin-top: 10%;
margin-bottom: -6%;
}
/*......Split Section two.....*/
.split-image-right {
margin-bottom: 0px !important;
background-color: #000000;
background-image: url("https://vanislebeardco.com/wp-content/uploads/2017/04/cheers.jpg");
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
width: 50%;
float: right;
z-index: 1;
Height: 450px;
}
/*......Split Section three.....*/
.split-image-three {
margin-bottom: 0px !important;
background-color: #000000;
background-image: url("https://static.pexels.com/photos/160322/pexels-photo-160322.jpeg");
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
width: 50%;
float: left;
z-index: 1;
Height: 450px;
}
/*......button.....*/
.btn-container {
position: absolute;
margin: 0 auto !important;
padding-top: 36%;
display: -webkit-inline-box;
text-align: -webkit-center;
top: 0;
right: 0;
bottom: 0;
left: 0;
max-width: 50%;
display: block;
}
.btn-container-two {
margin: 0 auto !important;
margin-left: 0;
margin-right: 0;
text-align: left;
-webkit-box-align: left;
padding-top: 3%;
}
.btn-container-three {
position: relative;
height: auto;
margin: 0 auto !important;
padding-top: 3%;
display: -webkit-inline-box;
text-align: -webkit-center !important;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 50%;
}
.btn1 {
font-family: 'Poppins', sans-serif;
font-size: inherit;
color: inherit;
background: none;
cursor: pointer;
padding: 20px 40px 18px;
display: inline-block;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
outline: none;
border: 3px solid #fff;
color: #fff;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
width: auto;
text-decoration: none;
letter-spacing: 3px;
}
.btn1:hover {
background: #63afab;
color: #fff;
opacity: 1.1;
border: 3px solid #63afab;
}
.btn2 {
font-family: 'Poppins', sans-serif;
font-size: inherit;
color: inherit;
background: none;
cursor: pointer;
padding: 20px 40px 18px;
display: inline-block;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
outline: none;
border: 3px solid #000;
color: #000;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
width: auto;
text-decoration: none;
letter-spacing: 3px;
}
.btn2:hover {
background: #63afab;
color: #fff;
opacity: 1.1;
border: 3px solid #63afab;
}
.a {
text-decoration: none;
color: #fff;
}
/* FadeInUp on Scroll transition */
@keyframes fade-up {
0% {
opacity: 0;
transform: translateY(3em);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fade-up {
animation: fade-up 4s cubic-bezier(.05, .98, .17, .97) forwards;
}
.info-box {
height: 450px;
padding-right: 60px;
padding-left: 100px;
margin-left: 0;
width: 50%;
display: block;
float: left;
min-height: 20px;
text-align: left !important;
padding-top: 0%;
background-color: #f9f9f9;
}
.arrow-box {
position: absolute;
height: auto;
margin: 0 auto !important;
padding-top: 46%;
display: -webkit-inline-box;
text-align: -webkit-center;
top: 0;
right: 0;
bottom: 0;
left: 0;
max-width: 50%;
}
/*...font awesome...*/
.fa {
margin: 0px 6px;
}
.fa-map-marker:before {
content: "\f041";
color: #ffffff;
}
.btn2-icon [ right: 20px;
font-size: 16px;
height: 14px;
line-height: 14px;
color: #ffffff;
position: absolute;
] .second-heading {
color: #b7b726;
font-size: 120px;
font-weight: 700;
font-family: Montserrat;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1;
margin-left: -10px;
z-index: -1;
margin-bottom: -80px;
}
.home-info-numbers {
position: absolute;
font-size: 120px;
font-weight: 700;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1;
margin-right: -20px;
z-index: -1;
margin-top: -3%;
font-family: 'Poppins', sans-serif;
opacity: 0.6;
color: #f9f9f9;
}
/*...Blog Section...*/
.blog {
background-image: url("https://scontent-sea1-1.cdninstagram.com/t51.2885-15/e35/18096443_765641893609234_8932683513480609792_n.jpg") !important;
background-repeat: no-repeat;
background-position: center center !important;
background-size: cover !important;
background-repeat: no-repeat;
background-blend-mode: multiply;
opacity: 0.6;
background-color: #63afab;
height: 400px;
width: 50%;
float: left;
font-family: 'Poppins', sans-serif;
margin: 0 auto;
margin-bottom: 0px !important;
padding-top: 30vh !important;
padding-bottom: 110px !important;
}
.width {
400px;
padding-right: 60px;
padding-left: 100px;
margin-left: 0;
text-align: left !important;
}
.overlay1 {
background: #63afab;
opacity: .5;
}
.overlay1:hover {
opacity: 1;
}
.blog-two {
background-image: url("http://www.foodandwine.com/fwx/sites/default/files/fwx-woman-chugging-cognac_0.jpg") !important;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-blend-mode: multiply;
opacity: 0.6;
background-color: #63afab;
height: 400px;
width: 50%;
float: right;
font-family: 'Poppins', sans-serif;
margin: 0 auto;
margin-bottom: 0px !important;
padding-top: 30vh !important;
padding-bottom: 110px !important;
background-position: 0px 0px;
}
.blog-img {
width: 50%;
min-width: 638px;
padding-right: 2% !important;
}
.blog-title {
margin-top: -4.5%;
font-size: 1.6rem;
text-transform: uppercase;
font-weight: 700;
color: #fff;
width: 50%;
margin-bottom: 5%;
line-height: 1.2;
}
.blog-title:after {
content: '';
display: block;
width: 60px;
height: 4px;
background: #63afab;
margin: 0px;
margin-bottom: 20px;
margin-top: 4%;
}
.blog-text {
margin-top: -4.5%;
font-size: 1rem;
text-transform: uppercase;
font-weight: 700;
color: #fff;
padding-bottom: 3%;
text-align: left;
width: 50%;
}
.btn3 {
font-family: 'Poppins', sans-serif;
font-size: 14px;
color: inherit;
background: none;
cursor: pointer;
padding: 10px 20px 9px;
display: inline-block;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
outline: none;
border: 3px solid #fff;
color: #fff;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
width: auto;
text-decoration: none;
letter-spacing: 3px;
}
.btn3:hover {
background: #63afab;
color: #fff;
opacity: 1.1;
border: 3px solid #63afab;
}
.footer {
width: 100%;
background-color: #fff;
}
.row-height {
height: 150px;
}
// click "Run" to replay
var $hero = $('.hero');
$hero.find('h1').lettering();
var onLoad = [
{
elements: $hero,
properties: {
width: '100%'
},
options: {
duration: 500,
complete: function () {
$hero.find('h1').children().each(function(i){
$(this).velocity({
top: 0,
opacity: 1
},{
duration: 400,
delay: (i - 1) * 30
});
});
$hero.find('.sub-text').velocity({
top: 0,
opacity: 1,
height: '5rem'
},{
duration: 350
});
}
}
}
];
$.Velocity.RunSequence(onLoad);
