Liquor Home Page

Developer
Bryan Rojas
Size
6,383 Kb
Views
2,024
  1. Liquor Home Page Previews
  2. Liquor Home Page HTML Codes
  3. Liquor Home Page CSS Codes
  4. Liquor Home Page JS Codes

How do I make an liquor home page?

What is a liquor home page? How do you make a liquor home page? This script and codes were developed by Bryan Rojas on 01 January 2023, Sunday.

Liquor Home Page Previews
IQ Test

Liquor Home Page - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Liquor Home Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section id="trending-carousel" class="container-fluid hidden-xs"> <div class="row no-gutter"> <div class="col-sm-4"> <a class="trending-item" href="#"> <div class="tile-background"> <img src="https://s3.amazonaws.com/liquor/wp-content/uploads/2016/11/01142557/boozy-caramel-apples-800x580-carousel.jpg" class="img-responsive"> </div> <div class="tile-content"> <h2>Springbank distillery</h2> </div> </a> </div> <div class="col-sm-4"> <a class="trending-item" href="#"> <div class="tile-background"> <img src="https://s3.amazonaws.com/liquor/wp-content/uploads/2016/11/04133314/12-Riffs-on-the-Mai-Tai-to-Drink-in-Bars-Now-800x580-carousel.jpg" class="img-responsive"> </div> <div class="tile-content"> <h2>12 Delicious Riffs on the Mai Tai to Drink in Bars Now</h2> </div> </a> </div> <div class="col-sm-4"> <a class="trending-item" href="#"> <div class="tile-background"> <img src="https://s3.amazonaws.com/liquor/wp-content/uploads/2016/11/08084958/dalton-hotel-bar-800-580-carousel.jpg" class="img-responsive"> </div> <div class="tile-content"> <h2>How to Conquer the Unique Challenges of Running a Hotel Bar</h2> </div> </a> </div> </div>
</section>
<!-- /header-carousel -->
<section class="container-fluid visible-xs"> <div class="row"> <div class="bg-header"> <a href="#"> <img src="https://static01.nyt.com/images/2014/11/04/dining/apple-cranberry-slab-pie/apple-cranberry-slab-pie-superJumbo.jpg" alt="" class="img-responsive" /> <div class="bg-text bg-black"> <h2>How to eat your way across bourbon country</h2> <a href="#" class="btn btn-lg-alt btn-black hidden-xs">Learn More</a> </div> </a> </div> </div>
</section>
<nav class="navbar navbar-inverse navbar-static-top center" role="navigation"> <div class="navbar-inner"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar top-bar"></span> <span class="icon-bar middle-bar"></span> <span class="icon-bar bottom-bar"></span> </button> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#search-navbar" aria-expanded="false" aria-controls="search-navbar" id="search-toogle"> <span class="sr-only">Toggle Search</span> <span class="fa fa-search"></span> </button> <a class="navbar-brand" href="#"> <img src="http://www.liquor.com/wp-content/themes/liquor-2015/images/header-logo-highres.png" alt="" /> </a> </div> <div id="navbar" class="collapse navbar-collapse navbar-center"> <div class="text-center visible-xs"> <a href="#" class="btn btn-white">Join</a> <a href="#" class="btn btn-white">Login</a> </div> <ul class="nav navbar-nav"> <li><a href="#about">Cocktail Recipes</a></li> <li><a href="#about">Videos</a></li> <li><a href="#about">City Guides</a></li> <li><a href="#about">Brands & Spirits</a></li> <li><a href="#about">For Bartenders</a></li> <li><a href="#contact">Community</a></li> <li><a href="#contact" class="btn btn-sm btn-white">Your Profile</a></li> </ul> </div> <!--/.nav-collapse --> <div class="visible-xs"> <div id="search-navbar" class="collapse navbar-collapse"> <div class="nav navbar-nav"> <form action="/" id="mobile-google-search"> <div class="input-group form-group-lg"> <input type="text" name="s" class="form-control" placeholder="FIND RECIPES, BARS, SPIRITS" required> <span class="input-group-btn"> <button type="submit" class="btn btn-danger" type="button">Go!</button </span> </div> </form> </div> </div> </div> </div> </div>
</nav>
<section id="search-box" class="container-fluid hidden-xs"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <form action="/" id="google-search"> <div class="input-group form-group-lg"> <input type="text" name="s" class="form-control" placeholder="FIND RECIPES, BARS, SPIRITS" required> <span class="input-group-btn"> <button type="submit" class="btn btn-danger btn-lg" type="button"><span class="hidden-xs">SEARCH</span><i class="fa fa-search visible-xs"></i></button </span> </div> </form> <ul class="list-inline pull-right"> <li><a href="#">search by ingredient</a></li> <li><a href="#">classic recipe search</a></li> </ul> </div> </div>
</section>
<!-- / Search box -->
<div class="container-fluid"> <div class="row"> <div class="dfp-add"> <img src="http://placehold.it/970x90" alt="" class="img-responsive" /> </div> </div>
</div>
<section class="container meta-left visible-xs bg-black"> <div class="row"> <div class="col-xs-12 col-sm-6"> <div class="post"> <a class="overlay" href="http://dev.liquor.com/articles/culinary-concierge-hugh-daschbach/"></a> <div class="post-thumb"> <img src="https://s3.amazonaws.com/liquor/wp-content/uploads/2016/11/14115334/Guide-to-the-10-Best-Restaurants-to-Drink-Beaujolais-in-the-U.S-720x720-article-300x300.jpg" class="img-responsive"> </div> <div class="post-meta"> <h3>Like Juicy Red Wine?</h3> </div> </div> </div> <div class="col-xs-12 col-sm-6"> <div class="post"> <a class="overlay" href="http://dev.liquor.com/articles/culinary-concierge-hugh-daschbach/"></a> <div class="post-thumb"> <img src="https://s3.amazonaws.com/liquor/wp-content/uploads/2016/11/14115334/Guide-to-the-10-Best-Restaurants-to-Drink-Beaujolais-in-the-U.S-720x720-article-300x300.jpg" class="img-responsive"> </div> <div class="post-meta"> <h3>Like Juicy Red Wine?</h3> </div> </div> </div> <div class="col-xs-12 col-sm-6"> <div class="post"> <a class="overlay" href="http://dev.liquor.com/articles/culinary-concierge-hugh-daschbach/"></a> <div class="post-thumb"> <img src="https://s3.amazonaws.com/liquor/wp-content/uploads/2016/11/14115334/Guide-to-the-10-Best-Restaurants-to-Drink-Beaujolais-in-the-U.S-720x720-article-300x300.jpg" class="img-responsive"> </div> <div class="post-meta"> <h3>Like Juicy Red Wine?</h3> </div> </div> </div> </div> <!-- /row -->
</section>
<section class="container-fluid hidden-xs"> <div class="row"> <div class="bg-header" style="background-image: url(https://static01.nyt.com/images/2014/11/04/dining/apple-cranberry-slab-pie/apple-cranberry-slab-pie-superJumbo.jpg)"> <a href="#"> <img src="" alt="" class="img-responsive hidden-xs" /> <div class="bg-text bg-black"> <h2>How to eat your way across bourbon country</h2> <a href="#" class="btn btn-lg-alt btn-black hidden-xs">Learn More</a> </div> </a> </div> </div>
</section>
<section class="container meta-left"> <div class="row inner-content-width"> <h1 class="visible-xs">Top Stories</h1> <div class="col-xs-12 col-sm-6"> <div class="post"> <a class="overlay" href="http://dev.liquor.com/articles/culinary-concierge-hugh-daschbach/"></a> <div class="post-thumb"> <img src="https://s3.amazonaws.com/liquor/wp-content/uploads/2016/11/14115334/Guide-to-the-10-Best-Restaurants-to-Drink-Beaujolais-in-the-U.S-720x720-article-300x300.jpg" class="img-responsive"> </div> <div class="post-meta"> <h3>Like Juicy Red Wine? <span class="post-type">RECIPE</span></h3> </div> </div> </div> <div class="col-xs-12 col-sm-6"> <div class="post"> <a class="overlay" href="http://dev.liquor.com/articles/culinary-concierge-hugh-daschbach/"></a> <div class="post-thumb"> <img src="https://s3.amazonaws.com/liquor/wp-content/uploads/2016/11/14115334/Guide-to-the-10-Best-Restaurants-to-Drink-Beaujolais-in-the-U.S-720x720-article-300x300.jpg" class="img-responsive"> </div> <div class="post-meta"> <h3>Like Juicy Red Wine? <span class="post-type">RECIPE</span></h3> </div> </div> </div> <div class="col-xs-12 col-sm-6"> <div class="post"> <a class="overlay" href="http://dev.liquor.com/articles/culinary-concierge-hugh-daschbach/"></a> <div class="post-thumb"> <img src="https://s3.amazonaws.com/liquor/wp-content/uploads/2016/11/14115334/Guide-to-the-10-Best-Restaurants-to-Drink-Beaujolais-in-the-U.S-720x720-article-300x300.jpg" class="img-responsive"> </div> <div class="post-meta"> <h3>Like Juicy Red Wine? <span class="post-type">RECIPE</span></h3> </div> </div> </div> <div class="col-xs-12 col-sm-6"> <div class="post"> <a class="overlay" href="http://dev.liquor.com/articles/culinary-concierge-hugh-daschbach/"></a> <div class="post-thumb"> <img src="https://s3.amazonaws.com/liquor/wp-content/uploads/2016/11/14115334/Guide-to-the-10-Best-Restaurants-to-Drink-Beaujolais-in-the-U.S-720x720-article-300x300.jpg" class="img-responsive"> </div> <div class="post-meta"> <h3>Like Juicy Red Wine? <span class="post-type">RECIPE</span></h3> </div> </div> </div> <div class="text-center"> <a href="https://s.codepen.io/bryanrojas/debug/QGGgbO" class="btn btn-red btn-lg-alt">All Articles</a> </div> </div> <!-- /row -->
</section>
<!-- Post list #1 -->
<div class="container-fluid"> <div class="row"> <div class="dfp-add"> <img src="http://placehold.it/970x250" alt="" class="img-responsive" /> </div> </div>
</div>
<section class="container-fluid hidden-xs"> <div class="row"> <h1>Cocktail Recipes</h1> <div class="bg-header" style="background-image: url(https://s3.amazonaws.com/liquor/wp-content/uploads/2016/11/01133815/prospector1.png)"> <a href="#"> <img src="" alt="" class="img-responsive hidden-xs" /> <div class="bg-text"> <h2>How to eat your way across bourbon country</h2> <a href="#" class="btn btn-lg-alt btn-black hidden-xs">Learn More</a> </div> </a> </div> </div>
</section>
<section class="container"> <div class="row inner-content-width clearfix"> <h1 class="visible-xs">Cocktail Recipes</h1> <div class="col-xs-6 col-sm-3"> <div class="post"> <a class="overlay" href="http://dev.liquor.com/articles/culinary-concierge-hugh-daschbach/"></a> <div class="post-thumb"> <img src="https://s3.amazonaws.com/liquor/wp-content/uploads/2016/11/14115334/Guide-to-the-10-Best-Restaurants-to-Drink-Beaujolais-in-the-U.S-720x720-article-300x300.jpg" class="img-responsive"> </div> <div class="post-meta"> <h3>Like Juicy Red Wine? <span class="post-type">RECIPE</span></h3> </div> </div> </div> <div class="col-xs-6 col-sm-3"> <div class="post"> <a class="overlay" href="http://dev.liquor.com/articles/culinary-concierge-hugh-daschbach/"></a> <div class="post-thumb"> <img src="https://s3.amazonaws.com/liquor/wp-content/uploads/2016/11/14115334/Guide-to-the-10-Best-Restaurants-to-Drink-Beaujolais-in-the-U.S-720x720-article-300x300.jpg" class="img-responsive"> </div> <div class="post-meta"> <h3>Like Juicy Red Wine? <span class="post-type">RECIPE</span></h3> </div> </div> </div> <div class="col-xs-6 col-sm-3"> <div class="post"> <a class="overlay" href="http://dev.liquor.com/articles/culinary-concierge-hugh-daschbach/"></a> <div class="post-thumb"> <img src="https://s3.amazonaws.com/liquor/wp-content/uploads/2016/11/14115334/Guide-to-the-10-Best-Restaurants-to-Drink-Beaujolais-in-the-U.S-720x720-article-300x300.jpg" class="img-responsive"> </div> <div class="post-meta"> <h3>Like Juicy Red Wine? <span class="post-type">RECIPE</span></h3> </div> </div> </div> <div class="col-xs-6 col-sm-3"> <div class="post"> <a class="overlay" href="http://dev.liquor.com/articles/culinary-concierge-hugh-daschbach/"></a> <div class="post-thumb"> <img src="https://s3.amazonaws.com/liquor/wp-content/uploads/2016/11/14115334/Guide-to-the-10-Best-Restaurants-to-Drink-Beaujolais-in-the-U.S-720x720-article-300x300.jpg" class="img-responsive"> </div> <div class="post-meta"> <h3>Like Juicy Red Wine? <span class="post-type">RECIPE</span></h3> </div> </div> </div> <div class="text-center"> <a href="#" class="btn btn-red btn-lg-alt">All Cocktails</a> </div> </div> <!-- /row -->
</section>
<div class="container-fluid"> <div class="row"> <div class="dfp-add"> <img src="http://placehold.it/1200x250?text=Pick-a-City-Map" alt="" class="img-responsive" /> </div> </div>
</div>
<section class="container"> <div class="row inner-content-width clearfix"> <h1>City Guides</h1> <div class="col-xs-6 col-sm-3"> <div class="post"> <a class="overlay" href="http://dev.liquor.com/articles/culinary-concierge-hugh-daschbach/"></a> <div class="post-thumb"> <img src="https://s3.amazonaws.com/liquor/wp-content/uploads/2016/11/14115334/Guide-to-the-10-Best-Restaurants-to-Drink-Beaujolais-in-the-U.S-720x720-article-300x300.jpg" class="img-responsive"> </div> <div class="post-meta"> <h3>Like Juicy Red Wine? <span class="post-type">City Guide</span></h3> </div> </div> </div> <div class="col-xs-6 col-sm-3"> <div class="post"> <a class="overlay" href="http://dev.liquor.com/articles/culinary-concierge-hugh-daschbach/"></a> <div class="post-thumb"> <img src="https://s3.amazonaws.com/liquor/wp-content/uploads/2016/11/14115334/Guide-to-the-10-Best-Restaurants-to-Drink-Beaujolais-in-the-U.S-720x720-article-300x300.jpg" class="img-responsive"> </div> <div class="post-meta"> <h3>Like Juicy Red Wine? <span class="post-type">City Guide</span></h3> </div> </div> </div> <div class="col-xs-6 col-sm-3"> <div class="post"> <a class="overlay" href="http://dev.liquor.com/articles/culinary-concierge-hugh-daschbach/"></a> <div class="post-thumb"> <img src="https://s3.amazonaws.com/liquor/wp-content/uploads/2016/11/14115334/Guide-to-the-10-Best-Restaurants-to-Drink-Beaujolais-in-the-U.S-720x720-article-300x300.jpg" class="img-responsive"> </div> <div class="post-meta"> <h3>Like Juicy Red Wine? <span class="post-type">City Guide</span></h3> </div> </div> </div> <div class="col-xs-6 col-sm-3"> <div class="post"> <a class="overlay" href="http://dev.liquor.com/articles/culinary-concierge-hugh-daschbach/"></a> <div class="post-thumb"> <img src="https://s3.amazonaws.com/liquor/wp-content/uploads/2016/11/14115334/Guide-to-the-10-Best-Restaurants-to-Drink-Beaujolais-in-the-U.S-720x720-article-300x300.jpg" class="img-responsive"> </div> <div class="post-meta"> <h3>Like Juicy Red Wine? <span class="post-type">City Guide</span></h3> </div> </div> </div> </div> <!-- /row -->
</section>
<div class="container-fluid"> <div class="row"> <div class="dfp-add"> <img src="http://placehold.it/970x90" alt="" class="img-responsive" /> </div> </div>
</div>
<section class="container meta-break"> <div class="row inner-content-width clearfix"> <h1>Brands & Spirits</h1> <div class="col-xs-6 col-sm-3"> <div class="post"> <a class="overlay" href="http://dev.liquor.com/articles/culinary-concierge-hugh-daschbach/"></a> <div class="post-thumb"> <img src="https://s3.amazonaws.com/liquor/wp-content/uploads/2016/11/14115334/Guide-to-the-10-Best-Restaurants-to-Drink-Beaujolais-in-the-U.S-720x720-article-300x300.jpg" class="img-responsive"> </div> <div class="post-meta"> <h3>Like Juicy Red Wine? <span class="post-type">Drinks & Spirits</span></h3> </div> </div> </div> <div class="col-xs-6 col-sm-3"> <div class="post"> <a class="overlay" href="http://dev.liquor.com/articles/culinary-concierge-hugh-daschbach/"></a> <div class="post-thumb"> <img src="https://s3.amazonaws.com/liquor/wp-content/uploads/2016/11/14115334/Guide-to-the-10-Best-Restaurants-to-Drink-Beaujolais-in-the-U.S-720x720-article-300x300.jpg" class="img-responsive"> </div> <div class="post-meta"> <h3>Like Juicy Red Wine? <span class="post-type">Drinks & Spirits</span></h3> </div> </div> </div> <div class="col-xs-6 col-sm-3"> <div class="post"> <a class="overlay" href="http://dev.liquor.com/articles/culinary-concierge-hugh-daschbach/"></a> <div class="post-thumb"> <img src="https://s3.amazonaws.com/liquor/wp-content/uploads/2016/11/14115334/Guide-to-the-10-Best-Restaurants-to-Drink-Beaujolais-in-the-U.S-720x720-article-300x300.jpg" class="img-responsive"> </div> <div class="post-meta"> <h3>Like Juicy Red Wine? <span class="post-type">Drinks & Spirits</span></h3> </div> </div> </div> <div class="col-xs-6 col-sm-3"> <div class="post"> <a class="overlay" href="http://dev.liquor.com/articles/culinary-concierge-hugh-daschbach/"></a> <div class="post-thumb"> <img src="https://s3.amazonaws.com/liquor/wp-content/uploads/2016/11/14115334/Guide-to-the-10-Best-Restaurants-to-Drink-Beaujolais-in-the-U.S-720x720-article-300x300.jpg" class="img-responsive"> </div> <div class="post-meta"> <h3>Like Juicy Red Wine? <span class="post-type">Drinks & Spirits</span></h3> </div> </div> </div> </div> <!-- /row -->
</section>
<div class="container-fluid"> <div class="row"> <div class="dfp-add"> <img src="http://placehold.it/970x90" alt="" class="img-responsive" /> </div> </div>
</div>
<footer class="container-fluid bg-black"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <h4>Follow Liquor.com</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea eius quasi accusantium dolorum doloribus, odit illo obcaecati, est delectus unde! Commodi, repudiandae perferendis asperiores voluptas tempore nobis quae quod fugiat.</p> <hr /> <h4 class="middle-line">Follow Liquor.com</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea eius quasi accusantium dolorum doloribus, odit illo obcaecati, est delectus unde! Commodi, repudiandae perferendis asperiores voluptas tempore nobis quae quod fugiat.</p> </div> </div>
</footer> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://labs.rampinteractive.co.uk/touchSwipe/jquery.touchSwipe.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Liquor Home Page - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Bitter%3A400%2C700%2C400italic%7COswald%3A400%2C300%7CAbril+Fatface&ver=1,0);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css?ver=4.6.2);
/* Helpers */
body { background-color: #eaeaea;
}
.no-gutter > [class*='col-'] { padding-right: 0; padding-left: 0;
}
.inner-content-width { max-width: 960px; margin: 0 auto; padding: 10px 0px;
}
.add-shadow { text-shadow: 0px 2px 1px rgba(0, 0, 0, 1);
}
.visual-padding { margin-right: 30%;
}
.dfp-add { margin-top: 20px; margin-bottom: 20px;
}
.dfp-add img { margin: 0 auto;
}
.btn-black { background-color: #1D1D1D; border: 2px solid #fff;
}
.btn-red { background-color: #cc0000;
}
.btn-white { color: #1D1D1D; background-color: #fff; font-family: 'Oswald', sans-serif; text-transform: uppercase; padding: 5px 30px;
}
.btn-black,
.btn-red { color: #fff; font-family: 'Oswald', sans-serif; letter-spacing: 2px; text-transform: uppercase; -webkit-transition: background-color .25s ease-in-out; -moz-transition: background-color .25s ease-in-out; -o-transition: background-color .25s ease-in-out; -ms-transition: background-color .25s ease-in-out; transition: background-color .25s ease-in-out;
}
.btn-black:hover,
.btn-black:active,
.btn-black:focus { color: #fff; background-color: rgba(0, 0, 0, .8);
}
.btn-red:hover,
.btn-red:active,
.btn-red:focus { color: #fff; background-color: rgba(204, 0, 0, .8);
}
.btn-lg-alt { padding: 5px 30px; font-size: 18px; line-height: 1.3333333; border-radius: 6px;
}
/** carousel **/
.trending-item h2 { font-family: 'Abril Fatface', cursive; font-weight: 400; font-size: 1.9em; margin-right: 30%;
}
.trending-item:hover:after { position: absolute; top: 0; left: 0; height: 100%; width: 100%; content: ''; box-shadow: inset 0px 0px 50px 20px rgba(0, 0, 0, .25); z-index: 5;
}
.tile-content { position: absolute; top: 0; left: 0; padding: 25px; color: white; z-index: 10;
}
.tile-background img { width: 100%; filter: brightness(50%); -webkit-filter: brightness(50%); -moz-filter: brightness(50%); -o-filter: brightness(50%); -ms-filter: brightness(50%);
}
#fake-height { min-height: 600px;
}
/** search box */
#search-box { background-color: #1D1D1D;
}
#search-box form { margin-top: 20px;
}
#search-box a { color: #fff; font-size: 14px; text-transform: lowercase; text-decoration: none; font-family: 'Oswald', sans-serif;
}
.input-group { border: 5px solid #ccc; border-radius: 5px; background-color: #ccc;
}
.input-group .form-control { color: #777; background-color: #ccc; font-size: 15px; font-family: 'Oswald', sans-serif; border-radius: 0px; border: none; box-shadow: none;
}
.input-group-btn:last-child>.btn { border-top-left-radius: 6px; border-bottom-left-radius: 6px; font-size: 15px; font-family: 'Oswald', sans-serif; background-color: #cc0000; padding-left: 25px; padding-right: 25px;
}
/** hero banner **/
.bg-header { height: 535px; overflow: hidden; position: relative; padding: 0; margin: 0;
}
.bg-header h2 { max-width: 400px;
}
.bg-header a { color: #fff;
}
.bg-header a:hover { text-decoration: none;
}
.bg-header { /*top: -185.5px;*/ position: relative; background-repeat: no-repeat; background-position: 50% 20%; background-size: cover;
}
.bg-header .bg-text { color: white; font-family: 'Oswald', sans-serif; text-transform: uppercase; text-align: center; padding: 30px 60px; /** Vertical center **/ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ -ms-transform: translate(-50%, -50%); /* IE 9 */ transform: translate(-50%, -50%);
}
.bg-black { background-color: #1D1D1D;
}
/** Post list**/
.post { background-color: #fff; margin-bottom: 40px; overflow: hidden;
}
.post .post-meta h3 { text-transform: uppercase; font-family: 'Oswald', 'Impact', sans-serif; font-weight: 400; font-size: 1.2em; line-height: 1.2em; margin-top: 10px; margin-bottom: 5px; text-align: center;
}
.post .post-meta h3 span { font-weight: 100;
}
.meta-break .post .post-meta h3 span { display: block;
}
.post a.overlay { position: absolute; width: 100%; height: 100%; top: 0; left: 0; text-decoration: none; z-index: 100; background-color: white; opacity: 0; filter: alpha(opacity=1); cursor: pointer;
}
.post a.overlay ~ .post-thumb { opacity: .9; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out;
}
.post a.overlay:hover ~ .post-thumb { opacity: 1;
}
.post .post-meta { padding: 10px 5px;
}
.meta-left .post .post-meta,
.meta-left .post .post-thumb { float: left;
}
.meta-left .post .post-thumb { margin-right: 6%; width: 44%;
}
.meta-left .post .post-meta { width: 50%; padding: 0;
}
.meta-left .post .post-meta h3 { text-align: initial;
}
.meta-left.bg-black .post .post-meta h3 { color: #fff; font-size: 1.8em;
}
.meta-left.bg-black .post { background-color: #1D1D1D;
}
@media screen and (max-width: 767px) { .trending-item h2 { margin-right: 0; } .bg-header { height: auto; } .bg-header img { top: 0; position: relative; } .bg-header h2 { font-size: 24px; max-width: none; } .bg-header .bg-text { /*padding: 15px 30px;*/ position: initial; top: 0; left: 0; -webkit-transform: none; -ms-transform: none; transform: none; } .post { height: auto; margin-bottom: 20px; } .post .post-meta h3 { font-size: 1.2em; }
}
section h1 { font-family: 'Abril Fatface', cursive; font-weight: 400; text-align: center; margin-bottom: 20px;
}
footer { color: #fff; font-family: 'Bitter', sanserif; text-align: center; padding-top: 20px;
}
footer h4 { color: #5a5a5a; font-size: 14px;
}
h4.middle-line { overflow: hidden; text-align: center;
}
h4.middle-line:before,
h4.middle-line:after { background-color: #5a5a5a; content: ""; display: inline-block; height: 1px; position: relative; vertical-align: middle; width: 2%;
}
h4.middle-line:before { right: 0.5em; margin-left: -50%;
}
h4.middle-line:after { left: 0.5em; margin-right: -50%;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { .tile-content { padding-top: 0; } .trending-item h2 { font-size: 1.5em; }
}
/** Navbar **/
.navbar-inverse { background-color: #1d1d1d; border: 0;
}
.navbar-inverse .navbar-nav>li>a { color: #fff; font-family: 'Oswald', 'Impact', sans-serif; text-transform: uppercase;
}
.navbar-brand { padding: 0px;
}
.navbar-brand>img { height: 100%; padding: 8px; width: auto;
}
.navbar-toggle .icon-bar { position: relative; transition: all 0.2s;
}
.navbar-toggle .top-bar { transform: rotate(45deg); /*transform-origin: 10% 10%;*/ top: 6px;
}
.navbar-toggle .middle-bar { opacity: 0;
}
.navbar-toggle .bottom-bar { transform: rotate(-45deg); /*transform-origin: 10% 90%;*/ top: -6px;
}
.navbar-toggle.collapsed .top-bar { transform: rotate(0); top: -1px;
}
.navbar-toggle.collapsed .middle-bar { opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar { transform: rotate(0); top: 1px;
}
.navbar-toggle#search-toogle { color: #fff; background-color: #cc0000; padding: 10px 14px; font-size: 16px;
}
.navbar-collapse { -webkit-box-shadow: none; box-shadow: none; border: none;
}
.navbar .navbar-center { text-align: center;
}
.navbar .navbar-center .nav { float: none; display: inline-block;
}
#search-navbar #mobile-google-search { margin-bottom: 15px;
}
.navbar-inverse .navbar-nav>li>a.btn { padding: 5px; margin-top: 10px; background-color: rgba(255, 255, 255, .1); -webkit-transition: background-color .25s ease-in-out; -moz-transition: background-color .25s ease-in-out; -o-transition: background-color .25s ease-in-out; -ms-transition: background-color .25s ease-in-out; transition: background-color .25s ease-in-out;
}
.navbar-inverse .navbar-nav>li>a.btn:hover { background-color: rgba(255, 255, 255, .2);
}
.navbar { margin-bottom: 0;
}
.navbar.affix { width: 100%; position: fixed; top: 0; z-index: 10;
}
.navbar .container { max-width: 970px;
}
@media only screen and (max-width: 767px) { body { padding-top: 50px; } .affix { position: static; } .navbar-brand { padding: 0px; transform: translateX(-50%); left: 50%; position: absolute; } .navbar-brand>img { height: 100%; width: auto; padding: 7px 14px; } .navbar-inverse .navbar-nav>li { border-top: 1px solid #333333; text-align: initial; padding-left: 30px; padding-right: 30px } .navbar-toggle { padding: 12px 9px; border-radius: 25px; margin-right: 15px; margin-left: 15px; } .navbar .navbar-center { text-align: initial; } .navbar .navbar-center .nav { display: block; }
}

Liquor Home Page - Script Codes JS Codes

$(function() { var navbar = $('.navbar'); var header_h = $('#trending-carousel').outerHeight(true); var navbar_h = navbar.outerHeight(true); navbar.affix({ offset: { top: header_h - navbar_h } });
});
Liquor Home Page - Script Codes
Liquor Home Page - Script Codes
Home Page Home
Developer Bryan Rojas
Username bryanrojas
Uploaded January 01, 2023
Rating 3
Size 6,383 Kb
Views 2,024
Do you need developer help for Liquor Home Page?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Bryan Rojas (bryanrojas) Script Codes
Name
Bootstrap Loading Layer
Slick Carousel Theme
Bootstrap Caption Hover
CIJUL Home
Materialize Sidebars
Loading Overlay
Highcharts - Stacked bar chart
Basic Single Page - Angular
Bootstrap Carousel with Static Background
WaitForImages Plugin Demo
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!