<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<!-- Font awesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<header>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-md-12">
<div class="content-header wow fadeInLeft" data-wow-delay="0.1s">
<a href="tel:9876543210"><i class="fas fa-phone-volume"></i> 9876543210 </a>
</div>
</div>
<div class="col-lg-4 col-md-12">
<div class="logo-box wow fadeInDown" data-wow-delay="0.1s">
<a href="#"> Chai Adda </a>
</div>
</div>
<div class="col-lg-4 col-md-12">
<div class="content-header-social">
<ul class="list-inline social-icons">
<li class="wow fadeInRight" data-wow-delay="0.1s"><a class="fab fa-facebook-f" href="#"></a></li>
<li class="wow fadeInRight" data-wow-delay="0.2s"><a class="fab fa-twitter" href="#"></a></li>
<li class="wow fadeInRight" data-wow-delay="0.3s"><a class="fab fa-linkedin-in" href="#"></a></li>
<li class="wow fadeInRight" data-wow-delay="0.4s"><a class="fab fa-instagram" href="#"></a></li>
</ul>
</div>
</div>
</div>
</div>
</header>
<section class="banner-slider-section">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="banner-contentt-text">
<h1 class="wow fadeInUp" data-wow-delay="0.1s"> Tea. The way it should really be. </h1>
<p class="wow fadeInUp" data-wow-delay="0.2s"> Importer and purveyor of fine tea since 1994 </p>
</div>
</div>
</div>
<div class="banner-more-content_nav">
<div class="row">
<div class="col-lg-7 col-md-12">
<div class="banner-image wow fadeInLeft" data-wow-delay="0.1s">
<img src="https://i.ibb.co/WsdShCH/6910497-preview.png" alt="Chai Adda">
</div>
</div>
<div class="col-lg-5 col-md-12">
<div class="banner-form wow fadeInRight" data-wow-delay="0.3s">
<form action="" method="">
<div class="form-group">
<input type="text" for="" name="" class="form-control" value="" placeholder="Your Name">
</div>
<div class="form-group">
<input type="email" for="" name="" class="form-control" value="" placeholder="Your Email">
</div>
<div class="form-group">
<input type="text" for="" name="" class="form-control" value="" placeholder="Your Number">
</div>
<div class="form-group">
<button type="submit" class="custom-btn-tea"> Get Started Now! </button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="first-section_nav">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="first-inner-box wow fadeInUp" data-wow-delay="0.2s">
<img src="https://i.ibb.co/0yQ2d7Z/global-network.png" alt="A global selection">
<h3> A global selection </h3>
<p> Our nearly 100 hand-selected teas from across the globe meet superior standards for freshness, flavor and quality.</p>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="first-inner-box wow fadeInUp" data-wow-delay="0.4s">
<img src="https://i.ibb.co/5kTk7cq/chai-tea.png" alt=" Superior tea">
<h3> Superior tea </h3>
<p> From traditional oolong, black, white, rooibos, herbal and green to specialty flavored, we offer only the finest teas. </p>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="first-inner-box wow fadeInUp" data-wow-delay="0.6s">
<img src="https://i.ibb.co/2MpqYbb/correct.png" alt="Sustainability">
<h3> Sustainability </h3>
<p> It's important to us. We work directly with tea farmers around the globe; most of our teas are Fair Trade and Organic. </p>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="first-inner-box wow fadeInUp" data-wow-delay="0.8s">
<img src="https://i.ibb.co/8b6VYrN/waiter.png" alt="Great service">
<h3> Great service </h3>
<p> Our goal is to provide extraordinary products backed by top-notch customer service, education and true passion for tea. </p>
</div>
</div>
</div>
</div>
</section>
<section class="second-section_nav">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="heading-titlee">
<p class="tagline-text"> Chai Adda </p>
<h2> About Us </h2>
<p> Tea. The way it should really be.</p>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="about-content-tea">
<h3> We want our teas to have more than just great flavor. Great tea should also have superb health properties and be high in quality. </h3>
<p> We also treasure our community and our environment. Therefore, we put forth our best efforts to practice sustainable and green activities for the sake of our community and natural environment. </p>
<p> We all just want to be…happy. We all want to be healthy. We all want a feeling of belonging and interaction. Tea culture makes it all possible. We want to make a difference through sharing our love for tea and tea culture.</p>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="about-image-tea">
<img src="https://i.ibb.co/bgZCfQf/tea-02.png" alt="">
</div>
</div>
</div>
</div>
</div>
</section>
<section class="third-section_nav">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="heading-titlee">
<p class="tagline-text"> Chai Adda </p>
<h2> Our Teas </h2>
<p> Tea. The way it should really be.</p>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-4 col-sm-6">
<div class="our-teas-box">
<ul class="list-inline">
<li><a href="#"><i class="fab fa-pagelines"></i> Earl Grey</a></li>
<li><a href="#"><i class="fab fa-pagelines"></i> Assam</a></li>
<li><a href="#"><i class="fab fa-pagelines"></i> Chai</a></li>
<li><a href="#"><i class="fab fa-pagelines"></i> Tamayokucha</a></li>
<li><a href="#"><i class="fab fa-pagelines"></i> Jasmine</a></li>
</ul>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="our-teas-box">
<ul class="list-inline">
<li><a href="#"><i class="fab fa-pagelines"></i> Tropical Green</a></li>
<li><a href="#"><i class="fab fa-pagelines"></i> Alphe Berry</a></li>
<li><a href="#"><i class="fab fa-pagelines"></i> Chamomile</a></li>
<li><a href="#"><i class="fab fa-pagelines"></i> Peppermint</a></li>
<li><a href="#"><i class="fab fa-pagelines"></i> African Sunset</a></li>
</ul>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="our-teas-box">
<ul class="list-inline">
<li><a href="#"><i class="fab fa-pagelines"></i> Better Morning</a></li>
<li><a href="#"><i class="fab fa-pagelines"></i> Better Belly</a></li>
<li><a href="#"><i class="fab fa-pagelines"></i> Better Rest</a></li>
<li><a href="#"><i class="fab fa-pagelines"></i> English Breakfast</a></li>
<li><a href="#"><i class="fab fa-pagelines"></i> Whiter than white</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="forth-section_nav">
<div class="container">
<div class="row">
<div class="col-md-10 offset-md-1">
<div class="forth-inner-boxx">
<h3> Tea. The way it should really be </h3>
<p> Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. </p>
<a href="tel:9876543210" class="custom-btn-tea"> Contact Us </a>
</div>
</div>
</div>
</div>
</section>
<div class="footer-bottom-tea">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 col-md-7 text-left"><span class="copyright-text">Copyright © 2021. All rights reserved.</span></div>
<div class="col-lg-6 col-md-5 text-right">
<div class="content-header-social">
<ul class="list-inline social-icons">
<li class="wow fadeInRight" data-wow-delay="0.1s"><a class="fab fa-facebook-f" href="#"></a></li>
<li class="wow fadeInRight" data-wow-delay="0.2s"><a class="fab fa-twitter" href="#"></a></li>
<li class="wow fadeInRight" data-wow-delay="0.3s"><a class="fab fa-linkedin-in" href="#"></a></li>
<li class="wow fadeInRight" data-wow-delay="0.4s"><a class="fab fa-instagram" href="#"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
section.banner-slider-section{
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
height: 100vh;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.banner-contentt-text {
text-align: center;
padding: 2.5rem;
}
.logo-box {
text-align: center;
padding: 15px;
}
.logo-box a {
text-decoration: none;
font-size: 52px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0;
text-align: center;
width: 100%;
color: #000000bf;
text-shadow: 1px 2px #56430936;
}
.banner-image img {
width: 100%;
}
.banner-form {
background: #ffffff;
padding: 60px;
box-shadow: rgb(0 0 0 / 58%) 0px 50px 100px -20px, rgb(0 0 0 / 52%) 0px 30px 60px -30px;
}
.custom-btn-tea {
width: 100%;
border: 0;
padding: 12px;
background: #000;
color: #fff;
text-transform: uppercase;
font-weight: 600;
text-decoration:none;
box-shadow: rgb(50 50 93 / 25%) 0px 50px 100px -20px, rgb(0 0 0 / 30%) 0px 30px 60px -30px;
}
.banner-form .form-control {
height: 50px;
}
.banner-contentt-text h1 {
color: #fff;
font-size: 56px;
line-height: 1.21429;
text-shadow: 1px 2px #0000001a;
}
.banner-more-content_nav {
height: 70vh;
display: flex;
justify-content: center;
flex-direction: column;
}
.banner-contentt-text p {
font-size: 25px;
font-weight: 300;
color:#fff;
}
section.first-section_nav {
background: #fff;
padding: 120px 0;
}
.first-inner-box img {
width: 55px;
margin-bottom: 1rem;
transition:0.5s ease;
}
.first-inner-box:hover img{
margin-top:-15px;
transition:0.5s ease;
}
.first-inner-box h3 {
color: #f15c11;
text-shadow: 1px 2px #0000001a;
text-transform: capitalize;
padding-bottom: 10px;
padding-top: 10px;
}
.about-image-tea img {
width: 100%;
}
section.second-section_nav {
padding: 120px 0;
background: #f4f4f4;
}
.heading-titlee h2 {
font-size: 40px;
font-weight: bold;
text-transform: uppercase;
}
.heading-titlee{
text-align:center;
padding-bottom:2.5rem;
}
p.tagline-text {
margin: 0;
text-transform: uppercase;
font-weight: bold;
color: #f15c11;
}
.content-header {
padding: 24px;
}
.content-header a{
font-size:40px;
font-weight:bold;
color:#363636;
text-decoration:none;
}
.content-header-social ul li a {
color: #000;
}
.content-header-social ul {
margin: 0;
text-align: right;
}
.content-header-social ul li {
display: inline-block;
padding: 34px 5px;
line-height: 55px;
}
.content-header-social ul li a {
background: transparent;
padding: 12px;
width: 40px;
height: 40px;
display: block;
color: #fff;
text-align: center;
border-radius: 50px;
box-shadow: rgb(50 50 93 / 25%) 0px 50px 100px -20px, rgb(0 0 0 / 30%) 0px 30px 60px -30px;
}
.about-content-tea {
padding: 60px 0;
}
section.third-section_nav {
padding: 120px 0;
}
.our-teas-box li a i {
padding-right: 5px;
color: #f15c11;
}
.our-teas-box li a {
text-decoration: none;
line-height: 50px;
text-align: center;
color: #363636;
font-size: 18px;
font-weight: 600;
}
section.forth-section_nav {
padding: 120px 0;
background: #f15c11;
text-align: center;
}
.forth-inner-boxx h3 {
font-weight: 700;
font-size: 60px;
line-height: 1.2;
color: #fff;
}
.forth-inner-boxx p {
font-size: 22px;
color: #fff;
padding-top: 1rem;
padding-bottom:1.5rem;
}
.custom-btn-tea:hover {
color: #fff;
text-decoration:none;
}
.forth-inner-boxx .custom-btn-tea {
padding: 15px 50px;
}
