"Untitled"
Bootstrap 4.1.1 Snippet by Rajatsethi

<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; } }

Related: See More


Questions / Comments: