Looking to create an online store? Download this free basic e-commerce template that is perfect for small businesses, startups, or anyone looking to sell products online. The template is fully responsive, easy to customize, and designed to help you get your store up and running quickly. Whether you’re selling physical products, digital goods, or services, this template has you covered. Download now and start building your online business today!
In this video, you’ll learn:
- How to download the e-commerce template.
- Step-by-step guide to setting up your online store using the template.
- Tips for customizing the template to match your brand.
HTML:
Create an HTML file (index.html) and add the following code:
<!DOCTYPE html>
<html>
<head>
<title>E-commerce Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/css/swiper.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/product-grid.css" />
<link rel="stylesheet" type="text/css" href="css/slider.css" />
<link rel="stylesheet" type="text/css" href="css/footer.css" />
</head>
<body>
<header>
<div class="banner">Get free delivery on orders over <span class="material-symbols-outlined">currency_rupee</span> 200</div>
<nav>
<div id="logo">
<img src="https://codewithubes.in/wp-content/uploads/2024/07/cropped-cropped-logo-black.png" alt="Code With Ubes" srcset="https://codewithubes.in/wp-content/uploads/2024/07/cropped-cropped-logo-black.png" width="20%">
</div>
<ul class="navigation-menu">
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#locate">Locations & Hours</a></li>
<li><a href="#">About Us</a></li>
</ul>
<div id="utility">
<span class="material-symbols-outlined">search</span>
<span class="material-symbols-outlined">shopping_cart</span>
</div>
</nav>
</header>
<section class="hero">
<div class="wrapper">
<div class="content">
<div class="bg-shape">
<img src="https://res.cloudinary.com/smitdudhat/image/upload/v1672059540/Star%20Wars%20Theme%20Images/logo_h7lsnc.webp" alt="">
</div>
<div class="product-img">
<div class="product-img__item" id="img1">
<img src="https://res.cloudinary.com/smitdudhat/image/upload/v1672059540/Star%20Wars%20Theme%20Images/item-1_gmgity.webp" alt="star wars" class="product-img__img">
</div>
<div class="product-img__item" id="img2">
<img src="https://res.cloudinary.com/smitdudhat/image/upload/v1672059539/Star%20Wars%20Theme%20Images/item-2_y91lhr.webp" alt="star wars" class="product-img__img">
</div>
<div class="product-img__item" id="img3">
<img src="https://res.cloudinary.com/smitdudhat/image/upload/v1672059697/Star%20Wars%20Theme%20Images/item-3_ibqbc0.webp" alt="star wars" class="product-img__img">
</div>
<div class="product-img__item" id="img4">
<img src="https://res.cloudinary.com/smitdudhat/image/upload/v1672059539/Star%20Wars%20Theme%20Images/item-4_dskwc1.webp" alt="star wars" class="product-img__img">
</div>
</div>
<div class="product-slider">
<button class="prev disabled">
<span class="icon">
<svg class="icon icon-arrow-right">
<use xlink:href="#icon-arrow-left"></use>
</svg>
</span>
</button>
<button class="next">
<span class="icon">
<svg class="icon icon-arrow-right">
<use xlink:href="#icon-arrow-right"></use>
</svg>
</span>
</button>
<div class="product-slider__wrp swiper-wrapper">
<div class="product-slider__item swiper-slide" data-target="img4">
<div class="product-slider__card">
<img src="https://res.cloudinary.com/smitdudhat/image/upload/v1672059539/Star%20Wars%20Theme%20Images/item-4-bg_cpnpww.webp" alt="star wars" class="product-slider__cover">
<div class="product-slider__content">
<h1 class="product-slider__title">STORMTROPER HELMET</h1>
<span class="product-slider__price"><span class="rupee-icon">₹</span> 1.299,<sup>99</sup></span>
<div class="product-ctr">
<div class="product-labels">
<div class="product-labels__title">HELMET SIZE</div>
<div class="product-labels__group">
<label class="product-labels__item">
<input type="radio" class="product-labels__checkbox" name="type5">
<span class="product-labels__txt">S</span>
</label>
<label class="product-labels__item">
<input type="radio" class="product-labels__checkbox" name="type5" checked>
<span class="product-labels__txt">M</span>
</label>
<label class="product-labels__item">
<input type="radio" class="product-labels__checkbox" name="type5">
<span class="product-labels__txt">L</span>
</label>
<label class="product-labels__item">
<input type="radio" class="product-labels__checkbox" name="type5">
<span class="product-labels__txt">XL</span>
</label>
</div>
</div>
<span class="hr-vertical"></span>
<div class="product-inf">
<div class="product-inf__percent">
<div class="product-inf__percent-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#0c1e2c" stop-opacity="0" />
<stop offset="100%" stop-color="#cb2240" stop-opacity="1" />
</linearGradient>
</defs>
<circle cx="50" cy="50" r="47" stroke-dasharray="240, 300" stroke="#cb2240" stroke-width="4" fill="none" />
</svg>
</div>
<div class="product-inf__percent-txt">80%</div>
</div>
<span class="product-inf__title">DURABILITY RATE</span>
</div>
</div>
<div class="product-slider__bottom">
<button class="product-slider__cart">ADD TO CART</button>
<button class="product-slider__fav js-fav">ADD TO WISHLIST</button>
</div>
</div>
</div>
</div>
<div class="product-slider__item swiper-slide" data-target="img1">
<div class="product-slider__card">
<img src="https://res.cloudinary.com/smitdudhat/image/upload/v1672059539/Star%20Wars%20Theme%20Images/item-1-bg_ggbu4m.webp" alt="star wars" class="product-slider__cover">
<div class="product-slider__content">
<h1 class="product-slider__title">IMPERIAL ARMY’S TIE FIGHTER</h1>
<span class="product-slider__price"><span class="rupee-icon">₹</span> 9.999,<sup>99</sup></span>
<div class="product-ctr">
<div class="product-labels">
<div class="product-labels__title">ENGINE UNIT</div>
<div class="product-labels__group">
<label class="product-labels__item">
<input type="radio" class="product-labels__checkbox" name="type1" checked>
<span class="product-labels__txt">P-S4 TWIN</span>
</label>
<label class="product-labels__item">
<input type="radio" class="product-labels__checkbox" name="type1">
<span class="product-labels__txt">P-W401</span>
</label>
</div>
</div>
<span class="hr-vertical"></span>
<div class="product-inf">
<div class="product-inf__percent">
<div class="product-inf__percent-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#0c1e2c" stop-opacity="0" />
<stop offset="100%" stop-color="#cb2240" stop-opacity="1" />
</linearGradient>
</defs>
<circle cx="50" cy="50" r="47" stroke-dasharray="225, 300" stroke="#cb2240" stroke-width="4" fill="none" />
</svg>
</div>
<div class="product-inf__percent-txt">75%</div>
</div>
<span class="product-inf__title">DURABILITY</span>
</div>
</div>
<div class="product-slider__bottom">
<button class="product-slider__cart">ADD TO CART</button>
<button class="product-slider__fav js-fav">ADD TO WISHLIST</button>
</div>
</div>
</div>
</div>
<div class="product-slider__item swiper-slide" data-target="img2">
<div class="product-slider__card">
<img src="https://res.cloudinary.com/smitdudhat/image/upload/v1672059539/Star%20Wars%20Theme%20Images/item-2-bg_gectuy.webp" alt="star wars" class="product-slider__cover">
<div class="product-slider__content">
<h1 class="product-slider__title">KYLO REN'S LIGHTSABER</h1>
<span class="product-slider__price"><span class="rupee-icon">₹</span> 1.699,<sup>99</sup></span>
<div class="product-ctr">
<div class="product-labels">
<div class="product-labels__title">VOLTAGE RANGE</div>
<div class="product-labels__group">
<label class="product-labels__item">
<input type="radio" class="product-labels__checkbox" name="type3" checked>
<span class="product-labels__txt">2000 <sup>WATT</sup></span>
</label>
<label class="product-labels__item">
<input type="radio" class="product-labels__checkbox" name="type3">
<span class="product-labels__txt">2800 <sup>WATT</sup></span>
</label>
</div>
<div class="product-labels__title">LASER SIZE</div>
<div class="product-labels__group">
<label class="product-labels__item">
<input type="radio" class="product-labels__checkbox" name="type2">
<span class="product-labels__txt">S</span>
</label>
<label class="product-labels__item">
<input type="radio" class="product-labels__checkbox" name="type2" checked>
<span class="product-labels__txt">M</span>
</label>
<label class="product-labels__item">
<input type="radio" class="product-labels__checkbox" name="type2">
<span class="product-labels__txt">L</span>
</label>
<label class="product-labels__item">
<input type="radio" class="product-labels__checkbox" name="type2">
<span class="product-labels__txt">XL</span>
</label>
</div>
</div>
<span class="hr-vertical"></span>
<div class="product-inf">
<div class="product-inf__percent">
<div class="product-inf__percent-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#0c1e2c" stop-opacity="0" />
<stop offset="100%" stop-color="#cb2240" stop-opacity="1" />
</linearGradient>
</defs>
<circle cx="50" cy="50" r="47" stroke-dasharray="240, 300" stroke="#cb2240" stroke-width="4" fill="none" />
</svg>
</div>
<div class="product-inf__percent-txt">80%</div>
</div>
<span class="product-inf__title">DURABILITY</span>
</div>
</div>
<div class="product-slider__bottom">
<button class="product-slider__cart">ADD TO CART</button>
<button class="product-slider__fav js-fav">ADD TO WISHLIST</button>
</div>
</div>
</div>
</div>
<div class="product-slider__item swiper-slide" data-target="img3">
<div class="product-slider__card">
<img src="https://res.cloudinary.com/smitdudhat/image/upload/v1672059539/Star%20Wars%20Theme%20Images/item-3-bg_sxupkm.webp" alt="star wars" class="product-slider__cover">
<div class="product-slider__content">
<h1 class="product-slider__title">IMPERIAL ARMY'S DEATH STAR</h1>
<span class="product-slider__price"><span class="rupee-icon">₹</span> 9.999,<sup>99</sup></span>
<div class="product-ctr">
<div class="product-labels">
<div class="product-labels__title">HYPERDRIVE RATING</div>
<div class="product-labels__group">
<label class="product-labels__item">
<input type="radio" class="product-labels__checkbox" name="type6" checked>
<span class="product-labels__txt">CLASS 4</span>
</label>
<label class="product-labels__item">
<input type="radio" class="product-labels__checkbox" name="type6">
<span class="product-labels__txt">CLASS 20</span>
</label>
</div>
<div class="product-labels__title">ARMANENT</div>
<div class="product-labels__group">
<label class="product-labels__item">
<input type="radio" class="product-labels__checkbox" name="type7" checked>
<span class="product-labels__txt">SUPERLASER</span>
</label>
<label class="product-labels__item">
<input type="radio" class="product-labels__checkbox" name="type7">
<span class="product-labels__txt">TURBOLASER</span>
</label>
</div>
</div>
<span class="hr-vertical"></span>
<div class="product-inf">
<div class="product-inf__percent">
<div class="product-inf__percent-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#0c1e2c" stop-opacity="0" />
<stop offset="100%" stop-color="#cb2240" stop-opacity="1" />
</linearGradient>
</defs>
<circle cx="50" cy="50" r="47" stroke-dasharray="240, 300" stroke="#cb2240" stroke-width="4" fill="none" />
</svg>
</div>
<div class="product-inf__percent-txt">80%</div>
</div>
<span class="product-inf__title">DURABILITY RATE</span>
</div>
</div>
<div class="product-slider__bottom">
<button class="product-slider__cart">ADD TO CART</button>
<button class="product-slider__fav js-fav">ADD TO WISHLIST</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<svg class="hidden" hidden>
<symbol id="icon-arrow-left" viewBox="0 0 32 32">
<path d="M0.704 17.696l9.856 9.856c0.896 0.896 2.432 0.896 3.328 0s0.896-2.432 0-3.328l-5.792-5.856h21.568c1.312 0 2.368-1.056 2.368-2.368s-1.056-2.368-2.368-2.368h-21.568l5.824-5.824c0.896-0.896 0.896-2.432 0-3.328-0.48-0.48-1.088-0.704-1.696-0.704s-1.216 0.224-1.696 0.704l-9.824 9.824c-0.448 0.448-0.704 1.056-0.704 1.696s0.224 1.248 0.704 1.696z">
</path>
</symbol>
<symbol id="icon-arrow-right" viewBox="0 0 32 32">
<path d="M31.296 14.336l-9.888-9.888c-0.896-0.896-2.432-0.896-3.328 0s-0.896 2.432 0 3.328l5.824 5.856h-21.536c-1.312 0-2.368 1.056-2.368 2.368s1.056 2.368 2.368 2.368h21.568l-5.856 5.824c-0.896 0.896-0.896 2.432 0 3.328 0.48 0.48 1.088 0.704 1.696 0.704s1.216-0.224 1.696-0.704l9.824-9.824c0.448-0.448 0.704-1.056 0.704-1.696s-0.224-1.248-0.704-1.664z">
</path>
</symbol>
</svg>
</section>
<section style="padding-bottom: 0 !important;">
<h2>Our Products</h2>
<div class="product-list">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="white-box">
<div class="wishlist-icon">
<a href="javascript:void(0);"><img src="https://static.thenounproject.com/png/635650-200.png" /></a>
</div>
<div class="product-image">
<img src="https://www.91-img.com/pictures/laptops/asus/asus-x552cl-sx019d-core-i3-3rd-gen-4-gb-500-gb-dos-1-gb-61721-large-1.jpg">
</div>
<div class="product-bottom">
<div class="product-name">Asus X552CL-SX019D Laptop</div>
<div class="price">
<span class="rupee-icon">₹</span> 32,000
</div>
<a href="#" class="blue-btn">Add to cart</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="white-box">
<div class="wishlist-icon">
<a href="javascript:void(0);"><img src="https://static.thenounproject.com/png/635650-200.png" /></a>
</div>
<div class="product-image">
<img src="https://images-na.ssl-images-amazon.com/images/I/81nreGN5qQL._SL1500_.jpg">
</div>
<div class="product-bottom">
<div class="product-name">ASUS X507 Core i5 - 8th Gen 15.6"</div>
<div class="price">
<span class="rupee-icon">₹</span> 30,000
</div>
<a href="#" class="blue-btn">Add to cart</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="white-box">
<div class="wishlist-icon">
<a href="javascript:void(0);"><img src="https://static.thenounproject.com/png/635650-200.png" /></a>
</div>
<div class="product-image">
<img src="https://images-na.ssl-images-amazon.com/images/I/81RrcHvDGbL._SY355_.jpg">
</div>
<div class="product-bottom">
<div class="product-name">ASUS VivoBook S400CA</div>
<div class="price">
<span class="rupee-icon">₹</span> 45,000
<span class="line-through"><span class="rupee-icon">₹</span> 50,000</span>
</div>
<a href="#" class="blue-btn">Add to cart</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="white-box">
<div class="wishlist-icon">
<a href="javascript:void(0);"><img src="https://static.thenounproject.com/png/635650-200.png" /></a>
</div>
<div class="product-image">
<img src="https://cdn.mos.cms.futurecdn.net/kwP2nL8FAVboognXmW6nvP-320-80.jpg">
</div>
<div class="product-bottom">
<div class="product-name">Asus laptops</div>
<div class="price">
<span class="rupee-icon">₹</span> 50,000
<span class="line-through"><span class="rupee-icon">₹</span> 60,000</span>
</div>
<a href="#" class="blue-btn">Add to cart</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section style="padding-bottom: 0 !important;">
<h2>Our Services</h2>
<ul class="services">
<li class="card-large card-dark card-wide" id="serv-groom">
<div class="card-image">
<img src="https://ouch-cdn2.icons8.com/T11rfGmMKgcStJyAFKNgtOfE79cadabx0DVMnvzA9Pk/rs:fit:368:313/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9wbmcvNDQx/LzFlYWU4MWY3LWQ1/ZjYtNDM2Ny1hZjM5/LWVmNTFmMGM5Njk4/MS5wbmc.png">
</div>
<ul>
Service - 1<span class="subtitle">Tail-wagging transformations are our specialty.</span>
<li><a href="#">Item - 1</a><span><span class="rupee-icon">₹</span> 80</span></li>
<li><a href="#">Item - 2</a><span><span class="rupee-icon">₹</span> 16</span></li>
<li><a href="#">Item - 3</a><span><span class="rupee-icon">₹</span> 160</span></li>
<button class="btn-filled-dark"><span class="material-symbols-outlined">calendar_month</span> Book Now</button>
</ul>
</li>
<li class="card-large card-dark card-wide" id="serv-board">
<div class="card-image">
<img src="https://ouch-cdn2.icons8.com/F5Ea1suZtMYimKDkJr0CJLO_1bju6-bTyT1EuDKEg8s/rs:fit:368:254/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9wbmcvMjcx/LzVjMzE4NWM0LWZh/NTMtNGQ1OS05ZTM2/LTZjYzBhNGU3ODg0/NC5wbmc.png">
</div>
<ul>
Service - 2<span class="subtitle">Where fun and care never take a day off.</span>
<li><a href="#">Item - 1</a><span><span class="rupee-icon">₹</span> 80</span></li>
<li><a href="#">Item - 2</a><span><span class="rupee-icon">₹</span> 16</span></li>
<button class="btn-filled-dark"><span class="material-symbols-outlined">calendar_month</span> Book Now</button>
</ul>
</li>
</ul>
</section>
<section id="locate" style="padding-bottom: 0 !important;">
<div>
<h2>Location & Hours</h2>
<p>Our knowledgeable and friendly staff is always ready to assist you in making the best choices for your furry, feathered, or finned friends.</p>
<div class="btn-group">
<button class="btn-filled-dark">
<span class="material-symbols-outlined">pin_drop</span>Find a Store
</button>
<button class="btn-outline-dark btn-hover-color">
<span class="material-symbols-outlined">contact_support</span> Contact Us
</button>
</div>
</div>
</section>
<div class="footer">
<div class="container footer-container">
<div class="col-3">
<img src="https://www.pngkit.com/png/detail/141-1416995_generic-logo-transparent-background.png" alt="">
<br>
<div class="social">
<a href="#"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-twitter"></i></i></a>
<a href="#"><i class="fa-brands fa-linkedin-in"></i></i></a>
</div>
<br>
<span class="address">Address: somewhere over the rainbow</span>
</div>
<div class="col-3">
<h6>About</h6>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati magni sint pariatur consequatur perspiciatis voluptas.
<br>
<br>
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
</p>
</div>
<div class="col-3">
<h6>Get Help</h6>
<a href="#"><i class="fa-brands fa-whatsapp"></i>Whatsapp Help Line</a>
</div>
<div class="col-3">
<h6>Contact</h6>
<a href="#">mailme@gmail.com</a>
</div>
</div>
<div class="copyright">
Copyright © 2024 | Footerpen All rights reserved
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/js/swiper.min.js"></script>
<script src="js/slider.js"></script>
</body>
</html>CSS:
Create a styles.css file and add the following code:
:root {
--text-01: #45413E;
--light-01: #F9F9F9;
--light-02: #FFFFFF;
--brand-01: #DB7F67;
--brand-02: #F4CFC6;
--card-hover: 0px 4px 24px rgba(0, 0, 0, 0.15);
--card-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
--hover-timing: all 0.2s ease;
--nav-card-size: 240px;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
scroll-behavior: smooth;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-weight: 500;
transition: var(--hover-timing);
background: var(--light-01);
width: 100vw;
overflow-x: hidden;
}
header {
height: auto;
position: sticky;
top: 0;
z-index: 100;
}
.banner {
background: var(--brand-01);
color: var(--light-01);
font-size: 14px;
font-weight: 500;
line-height: 1.2;
padding: 8px 24px;
display: flex;
align-items: center;
justify-content: center;
}
nav {
color: var(--text-01);
font-weight: 600;
height: 64px;
background: var(--light-01);
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 0 var(--pg-margin);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
z-index: 100;
}
nav ul.navigation-menu {
display: flex;
flex-direction: row;
flex: 1;
justify-content: center;
position: relative;
top: 6px;
}
nav .navigation-menu a {
font-size: 16px;
text-decoration: none;
color: var(--text-01);
}
nav .navigation-menu > li {
display: flex;
flex-direction: column;
align-items: center;
}
nav .navigation-menu > li > a {
position: relative;
padding: 0 20px;
height: 64px;
display: flex;
align-items: center;
justify-items: center;
}
nav .navigation-menu > li:hover ul.subnav {
visibility: visible;
opacity: 1;
top: 64px;
}
nav .navigation-menu > li > ul.subnav {
visibility: hidden;
position: absolute;
display: flex;
flex-direction: row;
top: 66px;
background: var(--light-01);
box-shadow: var(--card-hover);
border-radius: 12px;
opacity: 0;
transition: var(--hover-timing);
}
nav > #logo {
display: flex;
flex-direction: row;
align-items: center;
grid-gap: 8px;
line-height: 100%;
}
nav > #logo > span {
font-size: 32px;
}
nav > #utility {
display: flex;
flex-direction: row;
align-items: center;
grid-gap: 16px;
}
.card-large,
.card-med {
flex: 1;
position: relative;
display: flex;
flex-direction: column;
transition: var(--hover-timing);
cursor: pointer;
}
.card-large {
box-shadow: var(--card-shadow);
border-radius: 12px;
overflow: hidden;
}
.card-large:hover {
box-shadow: var(--card-hover);
transform: scale(1.01);
}
.card-med:hover .card-image {
transform: scale(1.01);
}
.card-image {
width: 100%;
aspect-ratio: 1/1;
position: relative;
border-radius: 12px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
transition: var(--hover-timing);
}
.card-large > .card-image {
aspect-ratio: 3/2;
}
.card-image > img {
width: 100%;
height: 100%;
position: absolute;
object-fit: contain;
}
.card-large a {
text-decoration: none;
font-weight: 600;
}
.card-large > .card-image > a {
position: absolute;
bottom: 0;
z-index: 1;
width: 100%;
font-size: 24px;
line-height: 1.2;
}
.card-large > ul {
display: flex;
flex-direction: column;
grid-gap: 8px;
flex: 1;
color: var(--text-01);
padding: 0 40px 40px;
font-size: 28px;
font-weight: 600;
line-height: 1.5;
}
.card-large > ul > li a {
line-height: 32px;
font-size: 14px;
}
.card-large#sup-dog,
.card-med#sup-dog > .card-image {
background: linear-gradient(45deg, #463631 0%, #976C5B 100%);
}
button.btn-outline {
color: var(--light-01);
border-color: var(--light-01);
}
.card-large#sup-cat,
.card-med#sup-cat > .card-image {
background: linear-gradient(45deg, #F6AE6C 0%, #ECBD73 100%);
}
.card-large#sup-bird,
.card-med#sup-bird > .card-image {
background: linear-gradient(45deg, #EFEFEF 0%, #F2F2F2 100%);
}
.card-large#sup-fish,
.card-med#sup-fish > .card-image {
background: linear-gradient(45deg, #1E4782 0%, #709DDF 100%);
}
.card-large.card-dark a,
.card-large.card-dark > ul {
color: var(--text-01);
}
.card-large.card-light a,
.card-large.card-light > ul {
color: var(--light-01);
}
button {
font-size: 14px;
font-weight: 600;
line-height: 24px;
padding: 12px 24px;
border-radius: 48px;
display: flex;
flex-direction: row;
grid-gap: 8px;
justify-content: center;
align-items: center;
cursor: pointer;
}
button.btn-outline-light {
color: var(--light-01);
background: none;
color: var(--light-01);
border: 2px solid var(--light-01);
}
button.btn-outline-dark {
color: var(--text-01);
background: none;
color: var(--text-01);
border: 2px solid var(--text-01);
}
button.btn-filled-dark {
color: var(--light-01);
background: var(--text-01);
color: var(--light-01);
border: 2px solid var(--text-01);
}
.btn-outline-dark:hover {
background: var(--text-01);
border: 2px solid var(--text-01);
}
.btn-outline-light:hover {
background: var(--light-01);
border: 2px solid var(--light-01);
color: var(--text-01);
}
button:hover,
.btn-outline-dark.btn-hover-color:hover {
color: var(--light-01);
border: 2px solid var(--brand-01);
background: var(--brand-01);
transition: var(--hover-timing);
box-shadow: var(--card-hover);
}
section,
footer {
position: relative;
width: 100%;
padding: 0 var(--pg-margin);
}
section.hero {
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
grid-gap: 10px;
display: inline-flex;
}
.btn-group {
display: flex;
flex-direction: row;
grid-gap: 16px;
}
section.hero h1 {
font-size: var(--hero-text);
font-weight: 600;
line-height: 1.2;
width: 100%;
color: var(--text-01);
}
.card-med {
width: var(--nav-card-size);
height: auto;
position: relative;
display: flex;
flex-direction: column;
padding: 0;
}
.card-med > a {
display: flex;
flex-direction: column;
grid-gap: 4px;
padding: 12px 16px 0px;
}
.card-med > a > span {
width: 100%;
}
.card-med > a > span:nth-of-type(1) {
width: 100%;
font-size: 24px;
font-weight: 600;
line-height: 1.2;
}
.card-med > a > span:nth-of-type(2) {
font-size: 16px;
font-weight: 500;
line-height: 24px;
display: flex;
flex-direction: row;
align-items: center;
grid-gap: 6px;
}
.card-med > a > span:nth-of-type(2) > span {
font-size: 18px;
}
#serv-groom > .card-image {
background: linear-gradient(45deg, #45828C 0%, #A7D4D8 100%);
}
#serv-board > .card-image {
background: linear-gradient(45deg, #EDDAA9 0%, #B87D93 100%);
}
.card-med:hover .card-image {
box-shadow: var(--card-hover);
}
.card-med > .card-image {
box-shadow: var(--card-shadow);
}
.card-med > .card-image > img {
width: 80%;
height: 80%;
}
section:not(.hero) {
padding: calc(var(--pg-margin)/2) var(--pg-margin);
}
section h2 {
font-size: 32px;
font-weight: 600;
line-height: 1.2;
text-align: center;
color: var(--text-01);
margin-bottom: 32px;
}
.card-wide {
flex-direction: row;
padding: 0;
}
.card-wide .card-image {
width: 50%;
border-radius: 0;
}
.card-image img {
width: 80%;
height: 80%;
}
.card-wide > ul {
padding: 40px;
}
.card-wide > ul > li {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
grid-gap: 24px;
margin-bottom: 16px;
}
.card-wide .subtitle {
font-size: 14px;
line-height: 1.4;
font-weight: 500;
margin-bottom: 24px;
}
.card-wide > ul > li span {
font-size: 16px;
}
.card-large > ul > li:last-of-type {
margin-bottom: 40px;
}
.card-large button {
margin-top: auto;
}
#locate > div {
background: var(--brand-02);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 80px 0;
border-radius: 12px;
box-shadow: var(--card-shadow);
transition: var(--hover-timing);
cursor: pointer;
}
#locate > div:hover {
box-shadow: var(--card-hover);
}
#locate h2 {
margin-top: 0;
}
#locate p {
line-height: 1.5;
margin-bottom: 40px;
width: 50%;
text-align: center;
}
.btn-group {
display: flex;
flex-direction: row;
grid-gap: 16px;
}
footer {
background: var(--text-01);
padding: 80px 80px 0px;
margin-top: 80px;
display: flex;
}
footer ul {
display: flex;
flex-direction: column;
grid-gap: 24px;
box-shadow: none;
flex: 1;
color: var(--light-01);
font-size: 18px;
font-weight: 600;
margin-bottom: 80px;
}
footer ul li a {
color: var(--light-01);
text-decoration: none;
font-size: 14px;
}
footer ul li {
color: var(--light-01);
padding: 0;
}
@media only screen and (max-width: 600px) {
:root {
--pg-margin: 16px;
}
nav {
position: relative;
}
nav ul.navigation-menu {
position: absolute;
position: absolute;
top: 64px;
background: var(--light-01);
left: 0;
z-index: -1;
width: 100vw;
}
nav ul.navigation-menu li a {
font-size: 16px;
white-space: nowrap;
}
nav ul.navigation-menu .subnav {
display: none;
}
nav ul.navigation-menu > li:hover .subnav {
display: none;
}
.btn-group {
flex-direction: column;
}
.shop-pets,
.services {
display: flex;
flex-direction: column;
grid-gap: 24px;
width: 100%;
}
.services > li {
display: flex;
flex-direction: column;
}
.services > li > .card-image {
width: 100%;
}
section:not(.hero) {
padding: var(--pg-margin);
}
#locate p {
width: 80%;
}
footer {
flex-direction: column;
text-align: center;
}
}
@media only screen and (min-width: 600px) {
:root {
--pg-margin: 24px;
}
nav {
position: relative;
}
nav ul.navigation-menu {
position: absolute;
top: 64px;
background: var(--light-01);
left: 0;
z-index: -1;
width: 100vw;
}
nav ul.navigation-menu li a {
font-size: 16px;
white-space: nowrap;
}
nav ul.navigation-menu .subnav {
display: none;
}
nav ul.navigation-menu > li:hover .subnav {
display: none;
}
.btn-group {
display: flex;
flex-direction: column;
}
.shop-pets {
display: grid;
grid-template-columns: 1fr 1fr;
grid-row: auto auto;
grid-column-gap: 24px;
grid-row-gap: 24px;
}
.services {
display: flex;
flex-direction: column;
grid-gap: 24px;
}
section:not(.hero) {
padding: var(--pg-margin);
}
#locate p {
width: 60%;
}
footer {
flex-direction: column;
text-align: center;
}
}
@media only screen and (min-width: 1200px) {
:root {
--pg-margin: 48px;
}
section.hero h1 {
--hero-text: 48px;
}
section.hero {
aspect-ratio: 2/1;
}
.btn-group {
flex-direction: row;
}
.shop-pets,
.services {
display: flex;
flex-direction: row;
grid-gap: 24px;
}
ul.subnav {
display: grid;
grid-template-columns: 1fr 1fr;
grid-row: auto auto;
grid-column-gap: 24px;
grid-row-gap: 24px;
padding: 48px;
}
nav ul.navigation-menu {
top: 6px;
z-index: 1;
background: none;
width: auto;
position: relative;
}
nav ul.navigation-menu .subnav {
display: flex;
}
nav ul.navigation-menu > li:hover .subnav {
display: flex;
}
#locate p {
width: 40%;
}
footer {
flex-direction: row;
text-align: left;
}
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
:root {
--pg-margin: 80px;
}
section.hero h1 {
--hero-text: 36px;
}
nav .navigation-menu > li > ul.subnav {
padding: 48px;
grid-gap: 24px;
}
section.hero {
aspect-ratio: 3/1;
background-size: 30%;
background-position: 90% 60%;
}
.shop-pets,
.services {
display: flex;
flex-direction: row;
grid-gap: 24px;
}
nav ul.navigation-menu {
top: 6px;
z-index: 1;
background: none;
width: auto;
position: relative;
}
ul.subnav {
display: grid;
grid-template-columns: 1fr 1fr;
grid-row: auto auto;
grid-column-gap: 24px;
grid-row-gap: 24px;
padding: 48px;
}
nav ul.navigation-menu > li:hover .subnav {
display: grid;
}
#locate p {
width: 40%;
}
footer {
flex-direction: row;
text-align: left;
}
}Create a slider.css file and add the following code:
img {
max-width: 100%;
}
a {
text-decoration: none;
}
.icon {
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
.wrapper {
width: 100%;
height: 100vh;
min-height: 750px;
background: url(https://res.cloudinary.com/muhammederdem/image/upload/v1536405234/starwars/death_star.jpg) center no-repeat;
background-size: cover;
position: relative;
overflow: hidden;
display: flex;
}
@media screen and (max-width: 992px) {
.wrapper {
height: auto;
min-height: 100vh;
}
}
.content {
height: 600px;
margin: auto;
width: 100%;
max-width: 1050px;
display: flex;
align-items: center;
position: relative;
}
@media screen and (max-width: 1200px) {
.content {
max-width: 920px;
}
}
@media screen and (max-width: 992px) {
.content {
max-width: 920px;
margin-top: 100px;
height: auto;
min-height: 100vh;
}
}
@media screen and (max-width: 767px) {
.content {
margin-top: 20px;
}
}
@media screen and (max-width: 576px) {
.content {
margin-top: 20px;
margin-bottom: 20px;
}
}
.bg-shape {
height: 100%;
background-image: linear-gradient(-45deg, #cc3843 0%, #cb193f 100%);
box-shadow: 0px 30px 139px 0px rgba(10, 22, 31, 0.26);
border-radius: 30px;
padding: 45px 40px;
width: 50%;
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
}
@media screen and (max-width: 1200px) {
.bg-shape {
width: 45%;
}
}
@media screen and (max-width: 992px) {
.bg-shape {
width: 90%;
height: 290px;
align-items: flex-start;
padding: 50px;
left: 50%;
transform: translateX(-50%);
}
}
@media screen and (max-width: 767px) {
.bg-shape {
padding: 30px;
width: 95%;
border-radius: 20px;
}
}
@media screen and (max-width: 576px) {
.bg-shape {
height: 200px;
padding: 30px;
}
}
.bg-shape img {
object-fit: contain;
width: 510px;
display: block;
object-position: left center;
opacity: 0.2;
transform: rotate(-90deg) translateY(-50%);
max-width: inherit;
left: 10px;
position: absolute;
}
@media screen and (max-width: 1200px) {
.bg-shape img {
width: 430px;
left: 10px;
}
}
@media screen and (max-width: 992px) {
.bg-shape img {
transform: none;
width: 100%;
position: relative;
left: auto;
margin-left: auto;
margin-right: auto;
object-fit: contain;
height: 100%;
object-position: top center;
}
}
.next,
.prev {
z-index: 22;
display: inline-flex;
border: none;
width: 61px;
height: 61px;
border-radius: 50%;
justify-content: center;
align-items: center;
font-size: 25px;
position: absolute;
top: 50%;
outline: none;
cursor: pointer;
}
.next.disabled,
.prev.disabled {
cursor: not-allowed;
}
.next:focus,
.prev:focus {
outline: none;
}
@media screen and (max-width: 992px) {
.next,
.prev {
top: 170px;
}
}
.prev {
left: -30%;
transform: translate(-100%, -50%);
}
@media screen and (max-width: 1200px) {
.prev {
left: -21%;
}
}
@media screen and (max-width: 992px) {
.prev {
left: 0;
transform: translate(-50%, -50%);
}
}
@media screen and (max-width: 576px) {
.prev {
transform: translate(20%, -50%);
}
}
.next {
right: 0;
transform: translate(50%, -50%);
}
@media screen and (max-width: 576px) {
.next {
transform: translate(-20%, -50%);
}
}
.product-slider {
width: 75%;
height: 85%;
border-radius: 30px;
box-shadow: 0 28px 79px 0 rgba(10, 22, 31, 0.35);
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
@media screen and (max-width: 1200px) {
.product-slider {
width: 80%;
}
}
@media screen and (max-width: 992px) {
.product-slider {
width: 80%;
left: 50%;
transform: translateX(-50%);
height: auto;
position: relative;
top: 0;
margin-top: 170px;
margin-bottom: 100px;
}
.product-slider br {
display: none;
}
}
@media screen and (max-width: 767px) {
.product-slider {
border-radius: 20px;
}
}
@media screen and (max-width: 576px) {
.product-slider {
width: 85%;
margin-top: 130px;
}
}
.product-slider__wrp {
height: 100%;
}
.product-slider__item {
position: relative;
height: 100%;
width: 100%;
}
@media screen and (max-width: 992px) {
.product-slider__item {
height: auto;
}
}
.product-slider__item.swiper-slide-active .product-slider__content > * {
opacity: 1;
transform: none;
}
.product-slider__item.swiper-slide-active
.product-slider__content
> *:nth-child(1) {
transition-delay: 0s;
}
.product-slider__item.swiper-slide-active
.product-slider__content
> *:nth-child(2) {
transition-delay: 0.2s;
}
.product-slider__item.swiper-slide-active
.product-slider__content
> *:nth-child(3) {
transition-delay: 0.4s;
}
.product-slider__item.swiper-slide-active
.product-slider__content
> *:nth-child(4) {
transition-delay: 0.6s;
display: flex;
}
.product-slider__item.swiper-slide-active
.product-slider__content
> *:nth-child(5) {
transition-delay: 0.8s;
}
.product-slider__item.swiper-slide-active
.product-slider__content
> *:nth-child(6) {
transition-delay: 1s;
}
.product-slider__item.swiper-slide-active
.product-slider__content
> *:nth-child(7) {
transition-delay: 1.2s;
}
.product-slider__item.swiper-slide-active
.product-slider__content
> *:nth-child(8) {
transition-delay: 1.4s;
}
.product-slider__item.swiper-slide-active
.product-slider__content
> *:nth-child(9) {
transition-delay: 1.6s;
}
.product-slider__item.swiper-slide-active
.product-slider__content
> *:nth-child(10) {
transition-delay: 1.8s;
}
.product-slider__item.swiper-slide-active
.product-slider__content
> *:nth-child(11) {
transition-delay: 2s;
}
.product-slider__item.swiper-slide-active
.product-slider__content
> *:nth-child(12) {
transition-delay: 2.2s;
}
.product-slider__item.swiper-slide-active
.product-slider__content
> *:nth-child(13) {
transition-delay: 2.4s;
}
.product-slider__item.swiper-slide-active
.product-slider__content
> *:nth-child(14) {
transition-delay: 2.6s;
}
.product-slider__item.swiper-slide-active
.product-slider__content
> *:nth-child(15) {
transition-delay: 2.8s;
}
.product-slider__item.swiper-slide-active circle {
animation: progress 1s ease-out forwards;
animation-delay: 0.5s;
opacity: 0.75;
}
.product-slider__card {
height: 100%;
display: flex;
align-items: center;
width: 100%;
transition: all 0.5s;
overflow: hidden;
position: relative;
border-radius: 30px;
}
@media screen and (max-width: 992px) {
.product-slider__card {
align-items: flex-start;
}
}
@media screen and (max-width: 767px) {
.product-slider__card {
border-radius: 20px;
}
}
.product-slider__cover {
border-radius: 30px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
@media screen and (max-width: 767px) {
.product-slider__cover {
border-radius: 20px;
}
}
.product-slider__content {
color: #fff;
padding-top: 1px;
position: relative;
z-index: 2;
width: 100%;
padding-left: 250px;
padding-right: 80px;
}
@media screen and (max-width: 1200px) {
.product-slider__content {
padding-left: 220px;
}
}
@media screen and (max-width: 992px) {
.product-slider__content {
padding: 20px 60px 100px;
padding-top: 280px;
text-align: center;
}
}
@media screen and (max-width: 767px) {
.product-slider__content {
padding: 20px 30px 50px;
padding-top: 300px;
}
}
@media screen and (max-width: 576px) {
.product-slider__content {
padding-top: 220px;
padding-left: 15px;
padding-right: 15px;
}
}
.product-slider__title {
margin: 0;
margin-bottom: 10px;
font-weight: 900;
font-size: 41px;
line-height: 1.2em;
letter-spacing: 2px;
opacity: 0;
transform: translateY(55px);
transition: all 0.5s;
}
@media screen and (max-width: 1200px) {
.product-slider__title {
font-size: 34px;
}
}
@media screen and (max-width: 576px) {
.product-slider__title {
font-size: 24px;
}
}
.product-slider__price {
display: block;
font-size: 42px;
opacity: 0;
transform: translateY(55px);
transition: all 0.5s;
}
@media screen and (max-width: 1200px) {
.product-slider__price {
font-size: 36px;
}
}
@media screen and (max-width: 576px) {
.product-slider__price {
font-size: 30px;
}
}
.product-slider__price sup {
top: -20px;
font-size: 65%;
}
.product-slider__cart {
box-shadow: 0 7px 99px 0 rgba(204, 51, 66, 0.6);
background-image: linear-gradient(-45deg, #cc3843 0%, #cb193f 100%);
border: none;
color: #fff;
padding: 10px 30px;
border-radius: 50px;
min-height: 50px;
font-weight: 700;
font-size: 14px;
letter-spacing: 2px;
margin-right: 40px;
cursor: pointer;
}
@media screen and (max-width: 768px) {
.product-slider__cart {
margin-right: 30px;
}
}
@media screen and (max-width: 576px) {
.product-slider__cart {
width: 100%;
max-width: 300px;
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
}
}
.product-slider__fav {
color: #888e94;
background: none;
border: none;
position: relative;
padding-left: 25px;
outline: none;
cursor: pointer;
}
.product-slider__fav:focus {
outline: none;
}
.product-slider__fav .heart {
display: block;
position: absolute;
left: 0;
transform: translate(-50%, -50%) scale(0.7);
top: 50%;
pointer-events: none;
width: 100px;
height: 100px;
background: url("https://res.cloudinary.com/muhammederdem/image/upload/v1536405215/starwars/heart.png")
no-repeat;
background-position: 0 0;
cursor: pointer;
transition: background-position 1s steps(28);
transition-duration: 0s;
}
.product-slider__fav .heart.is-active {
transition-duration: 1s;
background-position: -2800px 0;
}
.product-slider__bottom {
margin-top: 20px;
opacity: 0;
transform: translateY(55px);
transition: all 0.5s;
}
.product-ctr {
display: flex;
align-items: center;
min-height: 150px;
margin-top: 40px;
opacity: 0;
transform: translateY(55px);
transition: all 0.5s;
}
@media screen and (max-width: 992px) {
.product-ctr {
justify-content: center;
}
}
.product-ctr .hr-vertical {
width: 1px;
background: #9fa3a7;
align-self: stretch;
margin: 0 35px;
flex-shrink: 0;
opacity: 0.5;
}
@media screen and (max-width: 767px) {
.product-ctr {
justify-content: center;
flex-wrap: wrap;
margin-bottom: 40px;
}
.product-ctr .hr-vertical {
width: 100%;
margin: 35px 0;
height: 1px;
}
}
@media screen and (max-width: 767px) {
.product-labels {
width: 100%;
}
}
.product-labels__checkbox {
display: none;
}
.product-labels__checkbox:checked + .product-labels__txt {
border-color: #cc3743;
padding: 10px 13px;
}
.product-labels__title {
font-family: "Dosis", sans-serif;
font-weight: 700;
letter-spacing: 3px;
font-size: 16px;
margin-bottom: 10px;
}
.product-labels__group {
display: flex;
margin-bottom: 15px;
}
@media screen and (max-width: 992px) {
.product-labels__group {
justify-content: center;
}
}
.product-labels__group:last-child {
margin-bottom: 0;
}
.product-labels__item {
margin: 5px;
cursor: pointer;
}
.product-labels__item:first-child {
margin-left: 0;
}
.product-labels__txt {
display: block;
border: 2px solid transparent;
font-size: 14px;
padding: 10px 20px;
padding-left: 0;
border-radius: 50px;
transition: all 0.3s;
letter-spacing: 2px;
}
@keyframes progress {
0% {
stroke-dasharray: 0 100;
}
}
.product-inf {
text-align: center;
}
@media screen and (max-width: 767px) {
.product-inf {
width: 100%;
}
}
.product-inf__percent {
font-weight: 700;
font-size: 22px;
letter-spacing: 1px;
margin-bottom: 12px;
font-family: "Dosis", sans-serif;
position: relative;
}
.product-inf__percent circle {
transform: rotate(180deg) scaleY(-1);
transform-origin: 50%;
}
.product-inf__percent-txt {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.product-inf__title {
font-family: "Dosis", sans-serif;
font-weight: 700;
letter-spacing: 2px;
font-size: 18px;
}
.product-img {
position: absolute;
z-index: 2;
width: 500px;
left: 25%;
transform: translateX(-45%);
max-height: 500px;
height: 100%;
pointer-events: none;
}
@media screen and (max-width: 1200px) {
.product-img {
width: 430px;
left: 20%;
}
}
@media screen and (max-width: 992px) {
.product-img {
width: 430px;
left: 50%;
transform: translateX(-50%);
top: 0;
height: 350px;
}
}
@media screen and (max-width: 767px) {
.product-img {
width: 100%;
max-width: 400px;
top: 30px;
height: 390px;
}
}
@media screen and (max-width: 576px) {
.product-img {
max-width: 300px;
height: 300px;
}
}
.product-img__item {
display: flex;
align-items: center;
position: absolute;
pointer-events: none;
user-select: none;
top: 50%;
right: 0;
transform: translateY(-50%) translateX(-130px);
opacity: 0;
transition: all 0.3s;
}
.product-img__item.active {
opacity: 1;
transform: translateY(-50%) translateX(0);
transition-delay: 0.3s;
}
.product-img__item img {
object-fit: contain;
object-position: center right;
}Create a product-grid.css file and add the following code:
.product-list {
padding: 20px 10px 20px;
font-family: 'Nunito Sans', sans-serif;
}
.product-list>ul {
margin: 0 -10px;
padding: 0;
list-style: none;
display: flex;
}
.product-list>ul>li {
width: 25%;
padding: 10px;
}
.white-box {
border-radius: 5px;
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.4);
background-color: #ffffff;
padding: 35px 20px;
transition: all 0.5s ease-in-out;
position: relative;
}
.wishlist-icon {
position: absolute;
right: 12px;
top: 10px;
}
.wishlist-icon img {
width: 20px;
height: 20px;
}
.product-image {
min-height: 135px;
}
.product-image img {
max-width: 100%;
max-height: 130px;
display: block;
margin: 0 auto;
}
.product-bottom {
text-align: center;
}
.product-name {
font-size: 16px;
color: #666;
text-align: center;
margin: 10px 0 10px;
font-weight: 600;
max-height: 48px;
min-height: 48px;
overflow: hidden;
}
.price {
margin-top: 0;
font-size: 18px;
font-weight: 600;
color: #000000;
font-family: 'Open Sans', sans-serif;
}
.blue-btn {
background: #13cfdf;
border-radius: 5px;
color: #ffffff;
font-weight: 700;
border: none;
padding: 0 15px;
cursor: pointer;
height: 30px;
line-height: 30px;
max-width: 132px;
margin: 10px auto 0;
display: block;
text-align: center;
text-decoration: none;
}
.price .line-through {
font-size: 14px;
color: #999999;
font-weight: 400;
vertical-align: 1px;
display: inline-block;
text-decoration: line-through;
margin-left: 4px;
}Create a footer.css file and add the following code:
.footer{
margin-top: 5%;
background: #333333;
color: white;
position: relative;
width: 100%;
}
.footer img{
width: 250px;
margin-top: 43px;
}
.footer span{
margin-top: 25px;
}
.footer h6{
color: #ffffff;
font-size: 20px;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: left;
margin-bottom: 15px;
margin-top: 50px;
}
.footer .col-3{
padding-left: 35px;
}
.footer a{
text-decoration: none;
transition: 0.5s;
color: white;
}
.footer a:hover{
color: #f5871f;
}
.footer .fa-whatsapp{
margin-right: 5px;
}
.copyright{
color: #ffffff;
font-size: 16px;
font-weight: 500;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: center;
height: 45px;
background-color: #242424;
padding-top: 15px;
}
.footer-container{
display: flex;
}
.social {
display: flex;
align-items: center;
margin-top: 13px;
padding-left: 5px;
}
.social i {
color: #fff;
font-size: 17px;
margin-right: 15px;
}
@media only screen and (max-width: 600px) {
.footer .col-3{
padding-left:0;
}
.footer-container{
flex-direction: column;
}
.footer-container .col-3{
width: 100% !important;
}
.copyright {
font-size: 11px;
}
}JavaScript:
Create a slider.js file and add the following code:
var swiper = new Swiper(".product-slider", {
spaceBetween: 30,
effect: "fade",
// initialSlide: 2,
loop: false,
navigation: {
nextEl: ".next",
prevEl: ".prev"
},
// mousewheel: {
// // invert: false
// },
on: {
init: function () {
var index = this.activeIndex;
var target = $(".product-slider__item").eq(index).data("target");
console.log(target);
$(".product-img__item").removeClass("active");
$(".product-img__item#" + target).addClass("active");
}
}
});
swiper.on("slideChange", function () {
var index = this.activeIndex;
var target = $(".product-slider__item").eq(index).data("target");
console.log(target);
$(".product-img__item").removeClass("active");
$(".product-img__item#" + target).addClass("active");
if (swiper.isEnd) {
$(".prev").removeClass("disabled");
$(".next").addClass("disabled");
} else {
$(".next").removeClass("disabled");
}
if (swiper.isBeginning) {
$(".prev").addClass("disabled");
} else {
$(".prev").removeClass("disabled");
}
});
$(".js-fav").on("click", function () {
$(this).find(".heart").toggleClass("is-active");
});Happy coding!
