<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HomePage</title>
<link rel="stylesheet" href="stye/bootstrap.min.css">
<link rel="stylesheet" href="stye/my.css">
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
</head>
<body>
<div class="start">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-sm-12">
<div class="orders">
<h3 class="text__orders">Free shipping on orders over $50</h3>
</div>
</div>
</div>
</div>
</div>
<div class="header">
<div class="container-fluid">
<div class="row g-0">
<div class="col-lg-6">
<div class="nav">
<ul class="menu">
<li class="tittle__menu"><a href="/">SHOP</a></li>
<li class="tittle__menu"><a href="/">MEMBERSHIP</a></li>
<li class="tittle__menu"><a href="/">OUR STORY</a></li>
</ul>
</div>
</div>
<div class="col-lg-6">
<div class="modern1">
<ul class="menu2">
<li class="tittle__menu2"><a href="/">NEWSLETTER</a></li>
<li class="tittle__menu2"><a href="/">ACCOUNT</a></li>
<li class="tittle__menu2"><a href="/">CART</a></li>
</ul>
<div class="text">
<h1 class=".tittle__text">Alcohol for the modern drinker</h1>
<p class="tittle__p">Light and refreshing flavors made with real, clean ingredients you can feel good about. Just pour, sip, and enjoy.</p>
</div>
<button name="button" class="button">SHOP ALL</button>
</div>
</div>
</div>
</div>
</div>
<section id="section" class="section">
<div class="container">
<div class="row">
<div class="col-lg-4 col-sm-12">
<div class="main">
<h4 class="main__text">
"What makes Haus so special is its incredible flavors."
</h4>
<img class="Rectangle" src="img/Rectangle.svg" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-12">
<div class="main">
<h4 class="main__text">
“For the wine or cocktail lover who’s tried it all and wants something new and refreshing.”
</h4>
<img class="ny" src="img/NY.svg" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-12">
<div class="main">
<h4 class="main__text">
“Cleaner, responsibly sourced, and lower in alcohol.”
</h4>
<img class="appetit" src="img/appetit.svg" alt="">
</div>
</div>
<div class="col-lg-12 col-sm-12">
<div class="made">
<div class="made__textdiv">
<h2 class="made__text">Made with natural <br> ingredients, nothing fake</h2>
</div>
<div class="made_p">
<p class="made__p">Shop All Flavors</p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="our-bottle">
<img class="our__kit" src="img/kit.svg" alt="">
<h3 class="our__text">The Sampler Kit</h3>
<p class="our__p">Try a variety of Haus flavors with our customizable four-bottle kit. Each bottle serves 2-3 drinks.</p>
<div class="but">
<button class="our__button">SHOP NOW</button>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="our-bottle">
<img class="our__kit" src="img/grap.svg" alt="">
<h3 class="our__text">Grapefruit Jalapeño</h3>
<p class="our__p">Light and refreshing, this aperitif is a bright blend of citrus with a subtle kick of fresh jalapeño.</p>
<div class="but">
<button class="our__button">SHOP NOW</button>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="our-bottle">
<img class="our__kit" src="img/citrus.jpg" alt="">
<h3 class="our__text">Citrus Flower</h3>
<p class="our__p">A fresh Californian take on the apéritif. Made with crisp lemon and subtle elderflower.</p>
<div class="but">
<button class="our__button">SHOP NOW</button>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="stakan">
<img src="img/stakan.svg" alt="">
</div>
</div>
<div class="col-lg-6">
<div class="intro">
<h3 class="itro__text">An intro to apéritifs</h3>
</div>
</div>
<div class="col-lg-6">
<div class="flavors">
<p class="flavors__p">Apéritifs are a category of spirits with complex flavors derived from fruits, herbs, and botanicals. Their lighter alcohol content (less than whiskey, more than wine) makes them perfect to sip all evening.</p>
</div>
</div>
<div class="col-lg-4">
<div class="drink">
<h4 class="drink__text1">Easy to drink</h4>
<p class="drink__p">The perfect anytime drink, sip Haus on its own or with simple mixers you probably already have like soda or tonic.</p>
<h3 class="drink__h3">Natural ingredients. Nothing fake.</h3>
<p class="drink__p">Artificial ingredients and refined sugars are a big culprit in hangovers. Feel good about what’s in your glass that night — and the next day.</p>
<h4 class="drink__text">Delivered to your door</h4>
<p class="drink__p">We blend, bottle, and ship our products straight from Sonoma, CA to your doorstep.</p>
</div>
</div>
<div class="col-lg-8">
<div class="stol">
<img class="tittle__stol" src="img/stol.svg" alt="">
</div>
</div>
</div>
</div>
</section>
<article class="article" id="article">
<div class="container">
<div class="row">
<div class="col-lg-4 sol-sm-12">
<div class="susan">
<h4 class="susan__text">“Haus has found the solution I didn’t really know I was looking for!”</h4>
<h3 class="susan__h3">— SUSAN</h3>
<p class="susan__p">Verified Buyer</p>
</div>
</div>
<div class="col-lg-4 sol-sm-12">
<div class="susan">
<h4 class="susan__text">“I love the flavor of this apéritif — it’s light and lively, and it’s refreshing with seltzer or tonic.”</h4>
<h3 class="susan__h3">— FIONA</h3>
<p class="susan__p">Verified Buyer</p>
</div>
</div>
<div class="col-lg-4 sol-sm-12">
<div class="susan">
<h4 class="susan__text">“It’s delicious, and unique. I love everything from the packaging, to the flavors.”</h4>
<h3 class="susan__h3">— ESTEBAN</h3>
<p class="susan__p">Verified Buyer</p>
</div>
</div>
</div>
</div>
</article>
<section id="section__end">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="kust">
<img class="kust___img" src="img/kust.jpg" alt="/">
</div>
</div>
<div class="col-lg-6">
<div class="producers">
<h2 class="producers__text">We do things differently than most producers</h2>
<p class="producers__h3">Our flavors are derived from real fruits, herbs, and botanicals, not ingredients from a lab. We leave out the artificial ingredients and excess sugar, and tell you what’s inside. It’s a better way to drink.</p>
<h5 class="producers__h5"><a href="/">LEARN MORE</a></h5>
</div>
</div>
</div>
</div>
</section>
<section class="pre__end">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="mood">
<h3 class="mood__text">Set the mood</h3>
<h5 class="mood__h5">Curated playlists from Woody + Helena, plus some of our <br> friends and favorite brands.</h5>
<div class="knopka">
<button class="mood__butt">SPOTIFY</button>
</div>
</div>
<div class="follow">
<h5 class="follow__text">Follow us, share us, drink Ha(us)</h5>
<div class="ul">
<ul class="ins">
<li class="ins__spisok"><a href="/">INSTAGRAM</a></li>
<li class="ins__spisok"><a href="/">TWITTER</a></li>
<li class="ins__spisok"><a href="/">FACEBOOK</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<footer id="footer" class="footer">
<div class="container">
<div class="row">
<div class="col-lg-6 col-sm-12">
<div class="stay">
<h3 class="stay__text">Stay posted</h3>
<h4 class="stay__h4">Let's be friends. Subscribe to our newsletter to receive updates on new launches, recipes, playlists, and more.</h4>
</div>
<div class="input">
<input class="input__email" type="email" placeholder="YOUR EMAIL ADDRESS">
<button class="input__butt">SUBMIT</button>
</div>
</div>
<div class="col-lg-2 col-sm-4">
<div class="explore">
<h5 class="explore__text">EXPLORE</h5>
<ul class="explore__foot">
<li class="explore__footli"><a href="/">HOME</a>
</li>
<li class="explore__footli"><a href="/">SHOP</a></li>
<li class="explore__footli"><a href="/">MEMBERSHIP</a></li>
<li class="explore__footli"><a href="/">OUR STORY</a></li>
<li class="explore__footli"><a href="/">FAQ</a></li>
<li class="explore__footli"><a href="/">REFER A FRIEND</a></li>
<li class="explore__footli"><a href="/">CORPORATE GIFTING</a></li>
<li class="explore__footli"><a href="/">GIFT CARD</a></li>
</ul>
</div>
</div>
<div class="col-lg-2 col-sm-4">
<div class="explore">
<h5 class="explore__text">FOLLOW</h5>
<ul class="explore__foot">
<li class="explore__footli"><a href="/">INSTAGRAM</a>
</li>
<li class="explore__footli"><a href="/">SPOTIFY</a></li>
<li class="explore__footli"><a href="/">TWITTER</a></li>
<li class="explore__footli"><a href="/">FACEBOOK</a></li>
</ul>
</div>
</div>
<div class="col-lg-2 col-sm-4">
<div class="explore">
<h5 class="explore__text">DROP US A LINE</h5>
<ul class="explore__foot">
<li class="explore__footli"><a href="/">HELLO@DRINK.HAUS</a>
</li>
<li class="explore__footli"><a href="/">PRESS@DRINK.HAUS</a></li>
<li class="explore__footli"><a href="/">PARTNERSHIPS@DRINK.HAUS</a></li>
<li class="explore__footli"><a href="/">JOBS@DRINK.HAUS</a></li>
<li class="explore__footli"><a href="/">WHOLESALE@DRINK.HAUS</a></li>
</ul>
</div>
</div>
<div class="col-lg-12">
<div class="policy">
<ul class="policy__manu">
<li class="policy__li"><a href="/">© Haus 2021</a></li>
<li class="policy__li"><a href="/">Contact Us</a></li>
<li class="policy__li"><a href="/">Return Policy</a></li>
<li class="policy__li"><a href="/">Privacy Policy</a></li>
<li class="policy__li"><a href="/">Terms & Conditions</a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>img {
max-width: 100%;
height: auto;
}
body {
font-family: "Roboto", sans-serif;
overflow-x: hidden;
}
.start {
background: #191919;
max-height: 50px;
}
#section {
max-width: 1320px;
margin: 0 auto;
}
/******START****/
.orders {
max-height: 45px;
text-align: center;
color: #ffffff;
}
.text__orders {
font-size: 14px;
line-height: 40px;
}
/****HEADER***/
/**FIRST*/
.nav {
background-image: url(../img/Rectangleheader.png);
background-repeat: no-repeat;
object-fit: fill;
min-height: 800px;
background-size: cover;
}
.modern1 {
background-color: #996b60;
min-height: 800px;
}
.menu {
display: flex;
list-style-type: none;
}
.menu li {
margin-left: 64px;
padding-top: 40px;
}
.menu li a {
text-decoration: none;
font-size: 12px;
color: #ffffff;
}
.menu li a:hover {
color: #ffa806;
font-size: 14px;
transition: all 0.3s;
}
/*Second*/
.menu2 {
display: flex;
justify-content: flex-end;
list-style-type: none;
}
.menu2 li {
margin-right: 64px;
padding-top: 40px;
}
.menu2 li a {
text-decoration: none;
font-size: 12px;
color: #ffffff;
}
.menu2 li a:hover {
color: #ffa806;
font-size: 14px;
transition: all 0.3s;
}
.text {
padding-left: 69px;
margin-top: 200px;
}
.text h1 {
font-size: 73px;
line-height: 96px;
max-width: 600px;
color: #ffffff;
}
.text p {
margin-top: 34px;
color: #ffffff;
font-size: 18px;
line-height: 32px;
max-width: 572px;
}
.button {
background-color: #996b60;
border: 0.5px white solid;
min-height: 52px;
min-width: 180px;
margin-left: 69px;
margin-top: 40px;
font-size: 12px;
text-align: center;
color: #000000;
}
.button:hover {
background: #ffffff;
transition: all 0.3s;
}
/*****SECTION***/
.main__text {
font-size: 18px;
line-height: 32px;
max-width: 300px;
margin-top: 59px;
}
.main img {
margin-top: 34px;
}
.main {
border-bottom: 1px solid #bdbdbd;
min-height: 210px;
}
/**SECTION TWO***/
.made__textdiv {
margin-top: 90px;
}
.made_p {
padding-top: 20px;
font-size: 12px;
line-height: 18px;
letter-spacing: 1px;
color: #000000;
text-align: center;
}
.made__text {
font-size: 64px;
line-height: 80px;
color: #000000;
text-align: center;
font-family: "DM Serif Display", serif;
}
/***Section Bottle**/
.our__bottle {
border-bottom: 1px solid black;
}
.our__kit {
margin-top: 82px;
}
.our__text {
text-align: center;
font-size: 30px;
color: #000000;
line-height: 44px;
margin-top: 18px;
font-family: "DM Serif Display", serif;
}
.our__p {
font-size: 16px;
color: #000000;
line-height: 28px;
text-align: center;
}
.but {
text-align: center;
}
.our__button {
background: black;
color: #ffffff;
min-width: 180px;
min-height: 52px;
border: none;
font-size: 12px;
letter-spacing: 1px;
margin-top: 20px;
margin-bottom: 140px;
}
.our__button:hover {
border: 1px solid black;
background: #ffffff;
color: #000000;
transition: all 0.3s;
}
/****SKATAN***/
.stakan img {
border-top: 1px #bdbdbd solid;
padding-top: 40px;
}
.itro__text {
font-family: "DM Serif Display", serif;
font-size: 53px;
margin-top: 54px;
line-height: 80px;
}
.flavors__p {
font-size: 18px;
line-height: 32px;
margin-top: 59px;
margin-bottom: 70px;
}
/******STOL****/
.tittle__stol {
padding-top: 60px;
border-top: 1px solid #bdbdbd;
}
.drink {
padding-top: 60px;
border-top: 1px solid #bdbdbd;
}
.drink__text {
font-size: 30px;
line-height: 44px;
font-family: "DM Serif Display", serif;
}
.drink__h3 {
font-size: 36px;
line-height: 44px;
font-family: "DM Serif Display", serif;
}
.drink__p {
font-size: 18px;
line-height: 32px;
}
.drink__text1 {
font-family: "DM Serif Display", serif;
font-size: 30px;
line-height: 44px;
margin-top: 120px;
}
/***ARTICLE***/
#article {
margin-top: 50px;
max-height: 313px;
background: #000000;
}
.susan__text {
color: #ffffff;
font-size: 18px;
line-height: 32px;
text-align: center;
max-width: 300px;
padding-top: 95px;
}
.susan__h3 {
font-size: 14px;
color: #ffffff;
line-height: 21px;
text-align: center;
max-width: 300px;
padding-top: 17px;
}
.susan__p {
color: #8a8a8a;
font-size: 16px;
line-height: 24px;
text-align: center;
max-width: 300px;
padding-top: 10px;
}
/****KUST****/
.kust___img {
margin-top: 60px;
}
.producers__text {
margin-top: 60px;
font-family: "DM Serif Display", serif;
color: #000000;
font-size: 56px;
line-height: 80px;
max-width: 600px;
}
.producers__h3 {
font-size: 18px;
line-height: 32px;
margin-top: 150px;
}
.producers__h5 {
font-size: 12px;
line-height: 18px;
letter-spacing: 1px;
padding-top: 30px;
}
.producers__h5 a {
text-decoration: none;
color: #000000;
}
.producers__h5 a:hover {
font-size: 13px;
transition: 0.3s;
color: #000000;
}
/****PRE-END****/
.pre__end {
margin-top: 55px;
background-image: url(../img/fon.svg);
min-height: 568px;
background-repeat: no-repeat;
background-size: cover;
}
.mood {
max-width: 550px;
min-height: 300px;
background: black;
margin-top: 60px;
}
.mood__text {
font-family: "DM Serif Display", serif;
font-size: 55px;
line-height: 80px;
text-align: center;
color: #ffffff;
padding-top: 40px;
}
.mood__h5 {
text-align: center;
font-size: 16px;
line-height: 28px;
color: #ffffff;
}
.mood__butt {
min-height: 52px;
min-width: 180px;
background: #ffffff;
font-size: 12px;
text-align: center;
letter-spacing: 1px;
line-height: 14px;
}
.mood__butt:hover {
background: #000000;
border: 1px solid white;
color: #ffffff;
transition: 0.3s;
}
.knopka {
text-align: center;
margin-top: 25px;
}
.follow {
margin-top: 20px;
min-height: 125px;
max-width: 550px;
background: black;
}
.follow__text {
font-size: 16px;
line-height: 28px;
text-align: center;
color: #ffffff;
padding-top: 30px;
}
.ins {
display: flex;
justify-content: center;
}
.ins li {
list-style-type: none;
}
.ins li a {
margin-right: 20px;
text-decoration: none;
text-align: center;
font-size: 12px;
color: #ffffff;
letter-spacing: 1px;
line-height: 18px;
}
.ins li a:hover {
text-decoration: underline white 1px;
}
/********FOOTER***********/
.footer {
min-height: 617px;
background: black;
}
.stay__text {
font-family: "DM Serif Display", serif;
font-size: 42px;
line-height: 72px;
margin-top: 45px;
color: #ffffff;
}
.stay__h4 {
font-size: 18px;
line-height: 27px;
color: #ffffff;
max-width: 420px;
margin-top: 12px;
margin-bottom: 30px;
}
.input__email {
letter-spacing: 0.12px;
outline: none;
background: none;
border: none;
min-width: 420px;
font-size: 9px;
color: #818181;
border-bottom: 1px solid white;
padding-bottom: 10px;
}
.input__email:hover {
font-size: 10px;
transition: 0.3s;
}
.input__butt {
background: none;
color: #ffffff;
border: none;
}
.explore__text {
font-size: 14px;
line-height: 21px;
color: #ffffff;
margin-top: 55px;
padding-left: 30px;
}
.explore__foot li {
list-style-type: none;
padding-top: 21px;
}
.explore__foot li a {
text-decoration: none;
font-size: 12px;
line-height: 18px;
letter-spacing: 1px;
color: #ffffff99;
}
.explore__foot li a:hover {
color: #ffffff;
transition: all 0.3s;
}
.policy ul {
list-style-type: none;
display: flex;
justify-content: flex-start;
}
.policy ul li {
margin-right: 60px;
margin-top: 140px;
}
.policy ul li a {
text-decoration: none;
color: #ffffff99;
font-size: 16px;
line-height: 24px;
}
.policy ul li a:hover {
transition: all 0.3s;
color: #ffffff;
}
/********************ADAPTIVE***************************/
@media (max-width: 575px) {
.text__orders {
font-size: 15px;
}
body {
}
.menu li a {
font-size: 18px;
justify-content: center;
}
.menu2 li a {
justify-content: center;
font-size: 18px;
}
.text h1 {
min-width: auto;
}
.main__text {
margin: 0 auto;
padding-top: 25px;
}
.main img {
margin-left: 110px;
margin-top: 25px;
}
.made_p {
font-size: 16px;
}
.our__kit {
width: 70%;
margin-left: 80px;
margin-top: 40px;
}
.our__p {
margin-left: 64px;
max-width: 415px;
}
#article {
min-height: 880px;
}
.susan__text {
margin: 0 auto;
}
.susan__h3 {
margin: 0 auto;
}
.susan__p {
margin: 0 auto;
}
.policy ul li {
margin-right: 24px;
}
.drink__text1 {
margin-top: 0px;
}
.producers__h3 {
margin-top: 50px;
}
.explore {
min-width: 200px;
}
.start {
width: auto;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.