<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 ---------->
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
<link rel="icon" type="image/x-icon" href="images/fav.png">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/media.css">
<title>index</title>
</head>
<body>
<div class="topbar">
<div class="container">
<div class="inner-top text-center">
<p>Spend More Get More + Free Shipping!</p>
</div>
</div>
</div>
<header>
<nav class="navbar navbar-expand-lg ">
<div class="container ">
<a class="navbar-brand" href="#"><img src="images/logo.png" class="img-fluid" alt="logo"></a>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExample"><img src="images/logo.png" class="img-fluid" alt="logo"></h5>
<button type="button" class="close-btn" data-bs-dismiss="offcanvas" aria-label="Close"><span class=""><i class="fa-solid fa-x"></i></span></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav m-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link px-3"href="#">Cart</a>
</li>
<li class="nav-item">
<a class="nav-link px-3"href="#">Top Sellers</a>
</li>
<li class="nav-item">
<a class="nav-link px-3"href="#">Products</a>
</li>
<li class="nav-item">
<a class="nav-link px-3"href="#">CBD</a>
</li>
<li class="nav-item">
<a class="nav-link px-3"href="#">Recipes</a>
</li>
<li class="nav-item">
<a class="nav-link px-3"href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link px-3"href="#">Affiliate Area</a>
</li>
</ul>
<div class="d-flex align-items-center nav-btn">
<a href="#" class="btn px-3"><span class="search"><i class="fa-solid fa-magnifying-glass"></i></span></a>
<a href="#" class="btn px-3"><span class="user"><i class="fa-regular fa-user"></i></span></a>
<a href="#" class="btn px-3"><span class="cart"><i class="fa-solid fa-magnifying-glass"></i></span><span class="cart-no">2</span></a>
</div>
</div>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav m-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link px-3"href="#">Cart</a>
</li>
<li class="nav-item">
<a class="nav-link px-3"href="#">Top Sellers</a>
</li>
<li class="nav-item">
<a class="nav-link px-3"href="#">Products</a>
</li>
<li class="nav-item">
<a class="nav-link px-3"href="#">CBD</a>
</li>
<li class="nav-item">
<a class="nav-link px-3"href="#">Recipes</a>
</li>
<li class="nav-item">
<a class="nav-link px-3"href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link px-3"href="#">Affiliate Area</a>
</li>
</ul>
</div>
<div class="d-flex align-items-center nav-btn">
<a href="#" class="btn px-3"><span class="search"><i class="fa-solid fa-magnifying-glass"></i></span></a>
<a href="#" class="btn px-3"><span class="user"><i class="fa-regular fa-user"></i></span></a>
<a href="#" class="btn px-3"><span class="cart"><i class="fa-solid fa-cart-shopping"></i></span><span class="cart-no">2</span></a>
</div>
<button class="navbar-toggler" href="#offcanvasExample" role="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample" >
<span class="toggle-btn"> <i class="fa-solid fa-bars"></i></span>
</button>
</nav>
</header>
<section class="main-banner" style="background-image: url('images/banner.png');">
<div class="container">
<div class="inner-banner">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="banner-content">
<h6>Driven Nutrition</h6>
<h1>Optimize Your Health & Fitness</h1>
<p>From preworkout to recovery, we offer a full range of health products and supplements to help keep you look-ing and feeling your best!</p>
<div class="banner-btn">
<a href="javascript:;" class="common-btn">shop now</a>
</div>
</div>
</div>
<div class="col-lg-6">
</div>
</div>
</div>
</div>
</div>
</section>
<section class="main-collection py-70">
<div class="container">
<div class="row">
<div class="col-12">
<div class="coll-heading">
<h6>Shop By Category</h6>
<h2>Our Collections</h2>
</div>
</div>
</div>
<div class="inn-col-slider">
<div class="main-img-slide">
<figure>
<img src="images/slide-1.png" class="img-fluid" alt="slide-1">
</figure>
<div class="img-text">
<a href="javascript:;">
<p>Prewod™ & Postwod™</p>
<span class="right-icon"><i class="fa-solid fa-arrow-right-long"></i></span>
</a>
</div>
</div>
<div class="main-img-slide">
<figure>
<img src="images/slide-2.png" class="img-fluid" alt="slide-2">
</figure>
<div class="img-text">
<a href="javascript:;">
<p>Prewod™ & Postwod™</p>
<span class="right-icon"><i class="fa-solid fa-arrow-right-long"></i></span>
</a>
</div>
</div>
<div class="main-img-slide">
<figure>
<img src="images/slide-3.png" class="img-fluid" alt="slide-3">
</figure>
<div class="img-text">
<a href="javascript:;">
<p>Prewod™ & Postwod™</p>
<span class="right-icon"><i class="fa-solid fa-arrow-right-long"></i></span>
</a>
</div>
</div>
<div class="main-img-slide">
<figure>
<img src="images/slide-4.png" class="img-fluid" alt="slide-4">
</figure>
<div class="img-text">
<a href="javascript:;">
<p>Prewod™ & Postwod™</p>
<span class="right-icon"><i class="fa-solid fa-arrow-right-long"></i></span>
</a>
</div>
</div>
<div class="main-img-slide">
<figure>
<img src="images/slide-1.png" class="img-fluid" alt="slide-1">
</figure>
<div class="img-text">
<a href="javascript:;">
<p>Prewod™ & Postwod™</p>
<span class="right-icon"><i class="fa-solid fa-arrow-right-long"></i></span>
</a>
</div>
</div>
<div class="main-img-slide">
<figure>
<img src="images/slide-2.png" class="img-fluid" alt="slide-2">
</figure>
<div class="img-text">
<a href="javascript:;">
<p>Prewod™ & Postwod™</p>
<span class="right-icon"><i class="fa-solid fa-arrow-right-long"></i></span>
</a>
</div>
</div>
</div>
<div class="row justify-content-center collection-btn" >
<div class="col-12">
<div class="coll-btn">
<a href="javascript:;" class="common-btn">show all</a>
</div>
</div>
</div>
</div>
</section>
<footer >
<div class="container">
<div class="row">
<div class="col-12">
<div class="inner-footer">
<ul>
<li>
<p class="footer-link">Copyright © 2021 Driven Nutrition</p>
</li>
<li>
<a href="javascript:;" class="footer-link">Terms of Service</a>
</li>
<li>
<a href="javascript:;" class="footer-link">Privacy Policy</a>
</li>
<li>
<a href="javascript:;" class="footer-link">Refund Policy</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script>
$('.inn-col-slider').slick({
dots: false,
arrow:true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1199,
settings: {
slidesToShow: 3,
slidesToScroll:1,
infinite: true,
}
},
{
breakpoint: 991,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 767,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
</script>
</body>
</html>
/*font-family: 'Great Vibes', cursive;
*/
@font-face {
font-family: 'Charlie Display';
src: url('../font/CharlieDisplay-Regular.woff2') format('woff2'),
url('../font/CharlieDisplay-Regular.woff') format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Charlie Display';
src: url('../font/CharlieDisplay-Black.woff2') format('woff2'),
url('../font/CharlieDisplay-Black.woff') format('woff');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Charlie Display';
src: url('../font/CharlieDisplay-Light.woff2') format('woff2'),
url('../font/CharlieDisplay-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Great Sejagad';
src: url('../font/GreatSejagad.woff2') format('woff2'),
url('../font/GreatSejagad.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
html{
scroll-behavior: smooth;
}
*{
margin: 0;
padding: 0;
}
body{
margin: 0;
padding: 0;
overflow-x: hidden;
}
a, a:hover{
text-decoration: none;
transition: all ease-in-out 0.3s;
-webkit-transition: all ease-in-out 0.3s;
-ms-transition: all ease-in-out 0.3s;
-moz-transition: all ease-in-out 0.3s;
}
img{
max-width: 100%;
}
ul, li, p, figure{
margin: 0;
padding: 0;
list-style: none;
}
.py-70{
padding-top: 70px;
padding-bottom: 70px;
}
/*--------------------- Top Bar Css Start -------------------------*/
.topbar .inner-top p {
font-size: 16px;
letter-spacing: 0px;
line-height: 34px;
color: #ffffff;
font-weight: 300;
font-family: "Charlie Display";
text-align: center;
}
.topbar {
background-color: #d13139;
padding: 8px 0;
}
/*--------------------- Top Bar Css End -------------------------*/
/*-------------- navbar Css Start ---------------------*/
header {
position: absolute;
/* top: 50px; */
z-index: 1;
width: 100%;
}
/*header a.navbar-brand {
margin: 0;
}*/
header a.navbar-brand img {
max-width: 200px;
}
header .navbar-nav .nav-item .nav-link {
font-size: 16px;
letter-spacing: 0px;
line-height: 34px;
color: #ffffff;
font-weight: 300;
font-family: "Charlie Display";
}
header .navbar-nav .nav-item .nav-link:hover {
color: #d13139;
}
header .offcanvas-header .offcanvas-title img {
max-width: 140px;
}
header .nav-btn a {
color: #fff;
position: relative;
font-size: 16px;
}
header .nav-btn a:hover {
color: #d13139;
}
header .nav-btn a span.cart-no {
position: absolute;
top: 0;
display: inline-block;
width: 22px;
height: 22px;
border-radius: 11px;
background-color: #d13139;
font-size: 14px;
color: #ffffff;
font-family: "Charlie Display";
right: -3px;
}
header button.navbar-toggler {
color: #fff;
}
.navbar-toggler:focus {
text-decoration: none;
outline: 0;
box-shadow: none !important;
}
.offcanvas-header .close-btn {
border: 0;
background: transparent;
top: 15px;
position: absolute;
right: 15px;
color: #ffffff;
background: #d13139;
padding: 5px 10px;
}
.offcanvas {
background-color: #000 !important;
}
/*-------------- navbar Css End ---------------------*/
/*-------------- Banner Css Start ---------------------*/
.main-banner {
position: relative;
height: 800px;
display: flex;
align-items: center;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.main-banner .inner-banner .banner-content h6 {
font-size: 72px;
letter-spacing: 1px;
line-height: 34px;
color: #d13139;
font-family: "Great Sejagad";
}
.main-banner .inner-banner .banner-content h1 {
font-size: 72px;
letter-spacing: 1px;
line-height: 79px;
color: #ffffff;
font-family: "Charlie Display";
font-weight: bold;
}
.main-banner .inner-banner .banner-content p {
font-size: 20px;
letter-spacing: 0px;
line-height: 30px;
color: #ffffff;
font-weight: 300;
font-family: "Charlie Display";
padding-right: 56px;
}
.common-btn {
border-radius: 36px;
background-color: #d13139;
font-size: 18px;
letter-spacing: 0px;
line-height: 34px;
color: #ffffff;
font-weight: 500;
font-family: "Charlie Display";
display: inline-block;
padding: 19px 69px;
text-transform: uppercase;
}
.main-banner .inner-banner .banner-content .banner-btn {
margin-top: 50px;
}
.common-btn:hover {
background: #fff;
color: #d13139;
}
/*-------------- Banner Css End ---------------------*/
/*-------------- Collection Css Start ---------------------*/
.main-collection .coll-heading {
margin-bottom: 60px;
}
.main-collection .coll-heading h6 {
font-size: 42px;
letter-spacing: 1px;
line-height: 34px;
color: #d13139;
font-family: "Great Sejagad";
margin: 0;
z-index: 1;
position: relative;
}
.main-collection .coll-heading h2 {
font-size: 72px;
letter-spacing: 1px;
line-height: 79px;
color: #2b2727;
font-family: "Charlie Display";
font-weight: bold;
display: inline-block;
position: relative;
/* top: -14px; */
/* z-index: -1; */
margin-top: -15px;
margin-bottom: 0;
}
.main-collection .inn-col-slider .main-img-slide {
position: relative;
}
.main-collection .inn-col-slider .main-img-slide .img-text a {
display: flex;
justify-content: space-between;
padding: 0 30px 0 10px;
position: absolute;
bottom: 10px;
width: 100%;
font-size: 20px;
letter-spacing: 0px;
line-height: 30px;
color: #ffffff;
font-weight: 500;
font-family: "Charlie Display";
}
.main-collection .inn-col-slider .main-img-slide {
position: relative;
padding: 0 .5rem;
}
.main-collection .collection-btn {
text-align: center;
margin-top: 60px;
}
.main-collection .collection-btn .coll-btn .common-btn {
border: 1px solid #d13139;
border-radius: 36px;
color: #d13139;
background: transparent;
}
.main-collection .collection-btn .coll-btn .common-btn:hover {
border: 1px solid #d13139;
border-radius: 36px;
color: #fff;
background: #d13139;
}
.main-collection .slick-next:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f054" !important;
}
.main-collection .slick-prev:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f053" !important;
}
.main-collection .slick-next:before, .main-collection .slick-prev:before {
font-family: slick;
font-size: 20px;
line-height: 1;
opacity: .75;
color: #000;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
.main-collection .slick-next, .main-collection .slick-prev {
top: -90px;
background: transparent;
width: 70px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
}
.main-collection .slick-next {
right: 12px;
}
.main-collection .slick-prev {
left: 86% !important;
}
.main-collection .slick-next:hover::before, .main-collection .slick-prev:hover::before{
color: #fff;
background: #d13139;
display: inline-flex;
width: 76px;
height: 76px;
background-color: #d13139;
justify-content: center;
align-items: center;
}
.main-collection .slick-next.slick-disabled:before, .main-collection .slick-prev.slick-disabled:before {
opacity: 1;
}
.main-collection .slick-next:before, .main-collection .slick-prev:before {
opacity: 1;
}
/*-------------- Collection Css End ---------------------*/
/*-------------- Footer Css End ---------------------*/
footer {
border-top: 1px solid #e0e0e0;
padding: 20px 0;
}
footer .inner-footer {
text-align: center;
}
footer .inner-footer ul {
display: inline-flex;
}
footer .inner-footer ul li{
position: relative;
padding: 0 30px;
}
footer .inner-footer ul li:after {
content: '';
position: absolute;
width: 1px;
height: 16px;
background: #595959;
top: 50%;
right: 0;
transform: translateY(-50%);
}
footer .inner-footer ul li:last-child:after {
display: none;
}
footer .inner-footer ul li p.footer-link, footer .inner-footer ul li a.footer-link {
font-size: 16px;
color: #595959;
font-weight: 500;
font-family: "Charlie Display";
}
footer .inner-footer ul li a.footer-link:hover {
color: #d13139;
}
/*-------------- Footer Css End ---------------------*/
@media (min-width:1399px){
.container{
max-width: 1355px !important;
}
}
@media (max-width:1199px){
header a.navbar-brand img {
max-width: 150px;
}
.main-banner .inner-banner .banner-content h1 {
font-size: 55px;
line-height: 60px;
}
.main-banner .inner-banner .banner-content p {
padding-right: 0;
}
}
@media (max-width:991px){
.main-banner {
height: 600px;
}
.main-banner .inner-banner .banner-content h1 {
padding-right: 170px;
}
.main-banner .inner-banner .banner-content p {
padding-right: 210px;
}
header a.navbar-brand img {
max-width: 170px;
}
footer .inner-footer ul li {
position: relative;
padding: 0 20px;
}
.main-collection .slick-prev {
left: 80% !important;
}
.py-70 {
padding-top: 40px;
padding-bottom: 40px;
}
.main-collection .coll-heading {
margin-bottom: 40px;
}
.main-collection .slick-next:hover::before, .main-collection .slick-prev:hover::before {
width: 50px;
height: 50px;
}
}
@media (max-width:767px){
.main-banner .inner-banner .banner-content h1 {
padding-right: 0;
}
.main-banner .inner-banner .banner-content p {
padding-right: 0;
}
.slick-slide img {
display: block;
width: 100%;
}
.main-collection .slick-prev {
left: 0 !important;
}
.main-collection .slick-next, .main-collection .slick-prev {
top:-40px;
width: 40px;
height: 40px;
}
.main-collection .coll-heading {
margin-bottom: 80px;
}
footer .inner-footer ul {
display: block;
}
footer .inner-footer ul li:after {
display: none;
}
footer .inner-footer ul li{
padding:5px 0;
}
.main-collection .coll-heading h2 {
font-size: 55px;
letter-spacing: 1px;
line-height: 65px;
margin-top: -10px;
}
.main-collection .slick-next:hover::before, .main-collection .slick-prev:hover::before {
width: 40px;
height: 40px;
}
}
@media (max-width:480px){
.main-banner .inner-banner .banner-content h1 {
font-size: 35px;
line-height: 42px;
}
.main-banner .inner-banner .banner-content h6 {
font-size: 40px;
letter-spacing: 1px;
line-height: 24px;
margin: 0;
}
.main-banner .inner-banner .banner-content p {
font-size: 16px;
line-height: 25px;
}
.main-banner .inner-banner .banner-content .banner-btn {
margin-top: 20px;
}
.common-btn {
padding: 10px 50px;
}
header .nav-btn a {
padding-left: 10px !important;
padding-right: 10px !important;
}
header a.navbar-brand img {
max-width: 140px;
}
.main-banner {
height: 450px;
}
.main-collection .coll-heading h2 {
font-size: 40px;
letter-spacing: 1px;
line-height: 45px;
}
.main-collection .coll-heading h6 {
font-size: 30px;
}
.main-collection .coll-heading {
margin-bottom: 65px;
}
}
