<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>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>index</title>
</head>
<body>
<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>
<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>
<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 ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link px-3"href="#">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link px-3"href="#">The proog</a>
</li>
</ul>
<div class="cart-icon">
<a href="Javascript:;" class="cart-icon-img px-3"><img src="images/cart-icon.png" class="img-fluid" alt="cart-img"><span class="cart-no">0</span></a>
</div>
</div>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link px-3"href="#">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link px-3"href="#">The proog</a>
</li>
</ul>
<div class="cart-icon">
<a href="Javascript:;" class="cart-icon-img px-3"><img src="images/cart-icon.png" class="img-fluid" alt="cart-img"><span class="cart-no">0</span></a>
</div>
</div>
</nav>
</header>
<marquee width="100%" direction="ltr" height="50px">
<div class="mar-text">
<p>Free Delivery Across lebanon</p>
<p>Free Delivery Across lebanon</p>
<p>Free Delivery Across lebanon</p>
</div>
</marquee>
<section class="main-slider">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="slider-for">
<div class="full-image">
<img src="images/pro-2.jpg" class="img-fluid" alt="full-image">
</div>
<div class="full-image">
<img src="images/pro-3.jpg" class="img-fluid" alt="full-image">
</div>
<div class="full-image">
<img src="images/pro-4.jpg" class="img-fluid" alt="full-image">
</div>
<div class="full-image">
<img src="images/pro-2.jpg" class="img-fluid" alt="full-image">
</div>
</div>
<div class="slider-nav">
<div class="thambnail-img">
<img src="images/pro-2.jpg" class="img-fluid" alt="full-image">
</div>
<div class="thambnail-img">
<img src="images/pro-3.jpg" class="img-fluid" alt="full-image">
</div>
<div class="thambnail-img">
<img src="images/pro-4.jpg" class="img-fluid" alt="full-image">
</div>
<div class="thambnail-img">
<img src="images/pro-2.jpg" class="img-fluid" alt="full-image">
</div>
</div>
</div>
<div class="col-lg-6">
<div class="slider-content">
<div class="rating">
<div class="star-icon">
<span class="star"><i class="fa-solid fa-star"></i></span>
<span class="star"><i class="fa-solid fa-star"></i></span>
<span class="star"><i class="fa-solid fa-star"></i></span>
<span class="star"><i class="fa-solid fa-star"></i></span>
<span class="star"><i class="fa-solid fa-star"></i></span>
<span class="star"><i class="fa-solid fa-star"></i></span>
</div>
<div class="rat-text">
<p>(98 reviews)</p>
</div>
</div>
<div class="cho-heading">
<h2>Chocolate Flavored</h2>
<p>unlock your full potential with our powerful mushroom & adaptogenic blend created to make you feel super.</p>
</div>
<ul class="pro-list">
<li><span><img src="images/check.png" class="img-fluid" alt="check"></span>Super Focus & Energy</li>
<li><span><img src="images/check.png" class="img-fluid" alt="check"></span>No afternoon Crash</li>
<li><span><img src="images/check.png" class="img-fluid" alt="check"></span>imunne Booster</li>
<li><span><img src="images/doll.png" class="img-fluid" alt="check"></span>only $1/Cup</li>
</ul>
<div class="radio-box">
<h6>Bundle & Save</h6>
<div class="inner-r-box active">
<div class="most-pop">
<p>Most Popular</p>
</div>
<div class="input-radio">
<label class="radio-btn">
<input type="radio" checked="checked" name="radio">
<span class="checkmark"></span>
</label>
</div>
<div class="supply">
<div class="s-detail">
<h4>1 Month Supply</h4>
<p>You save $10</p>
</div>
<div class="price">
<p class="current-price">$30</p>
<p><del>$40</del></p>
</div>
</div>
</div>
<div class="inner-r-box">
<div class="most-pop">
<p>Most Popular</p>
</div>
<div class="input-radio">
<label class="radio-btn">
<input type="radio" checked="checked" name="radio">
<span class="checkmark"></span>
</label>
</div>
<div class="supply">
<div class="s-detail">
<h4>1 Month Supply</h4>
<p>You save $10</p>
</div>
<div class="price">
<p class="current-price">$30</p>
<p><del>$40</del></p>
</div>
</div>
</div>
</div>
<div class="cart-b">
<p>Free Delivery Across Lebanon</p>
<a href="Javascript:;" class="common-btn">Add to Cart <span><i class="fa-solid fa-angle-right"></i></span></a>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.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>
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: false,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: false,
centerMode: false,
focusOnSelect: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
infinite: true,
dots: false
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
arrows: false,
infinite: true
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
arrows: false,
infinite: true
}
}
]
});
</script>
<script>
var selector = '.inner-r-box';
$(selector).on('click', function(){
$(selector).removeClass('active');
$(this).addClass('active');
});
</script>
</body>
</html>
html{
scroll-behavior: smooth;
}
*{
margin: 0;
padding: 0;
}
body{
margin: 0;
padding: 0;
}
img{
max-width: 100%;
}
p{
margin: 0;
}
ul, li{
list-style: none;
}
a, a:hover{
transform: all ease-in-ou 0.3s;
-webkit-transform: all ease-in-ou 0.3s;
-ms-transform: all ease-in-ou 0.3s;
-moz-transform: all ease-in-ou 0.3s;
}
/*-------------- navbar---------------------*/
header {
background: #716555;
}
header a.navbar-brand img {
max-width: 180px;
}
header .navbar-nav .nav-item .nav-link {
color: #000;
font-size: 18px;
font-weight: 500;
color: #fff;
text-transform: uppercase;
}
header .offcanvas-header .offcanvas-title img {
max-width: 150px;
}
.offcanvas {
background-color: #716555 !important;
}
.cart-icon {
position: relative;
}
.cart-icon .cart-icon-img img {
width: 22px;
}
.cart-icon .cart-icon-img {
position: relative;
}
.cart-icon .cart-icon-img span.cart-no {
position: absolute;
top: -15px;
right: 5px;
color: #fff;
font-size: 17px;
font-weight: 600;
}
.nav-btn a {
color: #fff;
background: #000;
font-size: 18px;
font-weight: 500;
width: 100%;
}
.nav-btn a:hover {
color: #fff;
}
.offcanvas-header .close-btn {
border: 0;
background: transparent;
top: 15px;
position: absolute;
right: 15px;
color: #ffffff;
background: #562114;
padding: 5px 10px;
}
marquee .mar-text {
display: flex;
align-items: center;
}
marquee {
background: #978577;
display: flex;
align-items: center;
}
marquee .mar-text p {
color: #fff;
text-transform: uppercase;
font-size: 18px;
font-weight: 500;
padding: 0 20px;
}
section.main-slider {
padding: 50px 0;
}
.slider-for .full-image img {
width: 100%;
height: 500px;
object-fit: cover;
border-radius: 20px;
}
.slider-for {
margin-bottom: 20px;
}
.slider-nav .thambnail-img img {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 20px;
margin: 0 auto;
}
/*.slick-next:before, .slick-prev:before {
color: #372114 !important;
}*/
.thambnail-img.slick-slide.slick-current.slick-active img {
border: 3px solid #000;
padding: 2px;
}
.slider-content {
padding-left: 30px;
}
.rating {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.rating .star-icon {
margin-right: 10px;
}
.rating .star-icon .star {
color: #FCB040;
}
.rating .rat-text p {
font-size: 20px;
font-weight: bold;
color: #372114;
}
.cho-heading h2 {
font-size: 40px;
font-weight: bold;
color: #372114;
line-height: 50px;
text-transform: uppercase;
}
.cho-heading p {
font-size: 20px;
line-height: 25px;
font-weight: 400;
color: #372114;
text-transform: capitalize;
}
.cho-heading {
margin-bottom: 20px;
}
ul.pro-list {
padding: 0;
}
ul.pro-list li {
font-size: 22px;
font-weight: bold;
color: #372114;
text-transform: capitalize;
}
ul.pro-list li span {
display: inline-block;
width: 25px;
margin-right: 5px;
}
.radio-box h6 {
position: relative;
text-align: center;
font-size: 20px;
font-weight: 400;
color: #372114;
margin-bottom: 10px;
}
.radio-box h6:after {
content: '';
display: inline-block;
width: 30%;
position: absolute;
top: 60%;
left: 0;
transform: translateY(-50%);
height: 2px;
background: #372114;
}
.radio-box h6:before {
content: '';
display: inline-block;
width: 30%;
position: absolute;
top: 60%;
right: 0;
transform: translateY(-50%);
height: 2px;
background: #372114;
}
.radio-box .inner-r-box {
display: flex;
align-items: flex-start;
border: 2px solid #372114;
border-radius: 15px;
padding: 15px 80px 15px 15px;
margin-bottom: 10px;
position: relative;
}
.radio-box .inner-r-box .supply {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
cursor: pointer;
}
.radio-box .inner-r-box .supply .s-detail h4 {
font-size: 20px;
font-weight: bold;
color: #372114;
}
.radio-box .inner-r-box .supply .s-detail p {
font-size: 18px;
font-weight: 400;
color: #372114;
}
.radio-box .inner-r-box .supply .price p.current-price {
font-size: 20px;
font-weight: bold;
color: #372114;
}
.radio-box .inner-r-box .supply .price del {
font-size: 20px;
font-weight: 400;
color: #372114;
}
.radio-box .inner-r-box .supply .most-pop {
display: none;
}
.radio-box .inner-r-box .supply.active .most-pop {
display: block;
}
.radio-box .inner-r-box.active .most-pop p {
position: absolute;
top: -5px;
text-align: center;
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
color: #fff;
background: #562114;
padding: 5px;
border-radius: 100px;
width: 80px;
height: 80px;
display: inline-flex;
justify-content: end;
align-items: center;
line-height: 12px;
transform: rotate(30deg);
right: -20px;
}
.radio-box .inner-r-box.active .most-pop {
display: block;
}
.radio-box .inner-r-box .most-pop {
display: none;
}
.radio-btn {
display: block;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.radio-btn input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
span.toggle-btn {
color: #fff;
}
.checkmark {
position: absolute;
top: 20px;
left: 15px;
height: 25px;
width: 25px;
border-radius: 50%;
border: 1px solid #562114;
background: transparent;
}
/*.radio-btn:hover input ~ .checkmark {
background-color:#562114;
}
*/
.radio-box .inner-r-box.active .checkmark {
background: #562114;
}
.radio-box .inner-r-box.active .radio-btn input:checked ~ .checkmark {
background-color: #562114;
}
.radio-box .inner-r-box.active {
background: #E1C6A9;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.radio-btn input:checked ~ .checkmark:after {
display: block;
}
/*.radio-btn .checkmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}*/
.cart-b p {
text-align: center;
font-size: 20px;
color: #562114;
}
.cart-b .common-btn {
display: inline-block;
text-decoration: none;
width: 100%;
background: #562114;
color: #fff;
text-align: center;
padding: 10px;
border-radius: 10px;
font-weight: bold;
text-transform: uppercase;
font-size: 20px;
margin-top: 15px;
position: relative;
}
.cart-b .common-btn span {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
/*-------------- media screen ---------*/
@media (max-width:1199px){
.slider-content {
padding-left: 0px;
}
}
@media (max-width:991px){
.slider-content {
margin-top: 35px;
}
}
@media (max-width:575px){
.cho-heading h2 {
font-size: 30px;
}
.slider-for .full-image img {
width: 100%;
height: 400px;
}
.radio-box .inner-r-box.active .most-pop p {
width: 65px;
height: 65px;
right: -6px;
}
}
