Hello friends, welcome back to my blog. Today this blog post will tell you, Angular 14 Bootstrap 5 Grocery Ecommerce Store Free Template.
Angular 14 came and Bootstrap 5 also and if you are new then you must check below two links:
Friends now I proceed onwards and here is the working code snippet and please use carefully this to avoid the mistakes:
1. Firstly friends we need fresh angular 14 setup and for this we need to run below commands but if you already have angular 14 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:
npm install -g @angular/cli ng new angularboot5 //Create new Angular Project cd angularboot5 // Go inside the Angular Project Folder
2. Now friends we need to run below commands into our project terminal to install bootstrap 5 modules into our angular application:
npm install bootstrap npm i bootstrap-icons npm i @popperjs/core
3. Now friends we just need to add below code into angularboot5/src/app/app.component.html file to get final out on the web browser:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="https://therichpost.com/"><h5 class="nav-name">therichpost</h5></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav m-auto">
<ul class="navbar-nav m-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Home
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Home 1</a></li>
<li><a class="dropdown-item" href="#">Home 2</a></li>
<li><a class="dropdown-item" href="#">Home 3</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Shop
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Shop Grid - Filter</a>
</li>
<li><a class="dropdown-item" href="#">Shop Grid - 3
column</a>
</li>
<li><a class="dropdown-item" href="#">Shop List - Filter</a>
</li>
<li><a class="dropdown-item" href="#">Shop - Filter</a></li>
<li><a class="dropdown-item" href="#">Shop Wide</a></li>
<li><a class="dropdown-item" href="#">Shop Single</a></li>
<li><a class="dropdown-item" href="#">Shop Wishlist</a>
</li>
<li><a class="dropdown-item" href="#">Shop Cart</a></li>
<li><a class="dropdown-item" href="#">Shop Checkout</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Stores
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Store List</a></li>
<li><a class="dropdown-item" href="#">Store Grid</a></li>
<li><a class="dropdown-item" href="#">Store Single</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Pages
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Blog</a></li>
<li><a class="dropdown-item" href="#">Blog Single</a></li>
<li><a class="dropdown-item" href="#">Blog Category</a>
</li>
<li><a class="dropdown-item" href="#">About us</a></li>
<li><a class="dropdown-item" href="#">404 Error</a></li>
<li><a class="dropdown-item" href="#">Contact</a></li>
</ul>
</li>
<li class="nav-item ">
<a class="nav-link" href=".#">
Docs
</a>
</li>
</ul>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn-search-icon rounded-circle"><i class="bi bi-search-heart"></i></button>
</form>
</div>
</div>
</nav>
<section class="mt-5">
<div class="container">
<div class="img-main-banner">
<div
style="background: url(assets/img/slide-1.jpg)no-repeat; background-size: cover; border-radius: .5rem; background-position: center; height: 500px;">
<div class="ps-lg-12 py-lg-16 col-xxl-5 col-md-7 py-14 px-8 text-xs-center bg-image">
<span class=" badges">Opening Sale Discount 50%</span>
<h2 class="text-dark display-5 fw-bold mt-4">SuperMarket Daily <br> Fresh Grocery </h2>
<p class="lead">Introduced a new model for online grocery shopping and convenient home delivery.
</p>
<a href="#!" class="btn btn-dark mt-3">Shop Now <i class="bi bi-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</section>
<!-- sales section start -->
<section>
<div class="container mt-5 salessection">
<div class="row">
<div class="col-12 col-lg-6 mb-3 mb-lg-0">
<div>
<div class="py-10 px-8 rounded-3"
style="background:url(assets/img/grocery-banner.png)no-repeat; background-size: cover; background-position: center; padding: 20px;">
<div>
<h3 class="fw-bold mb-1">Fruits & Vegetables
</h3>
<p class="mb-4">Get Upto <span class="fw-bold">30%</span> Off</p>
<a href="#!" class="btn btn-dark">Shop Now</a>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-6 ">
<div>
<div class="py-10 px-8 rounded-3"
style="background:url(assets/img/grocery-banner-2.jpg)no-repeat; background-size: cover; background-position: center; padding: 20px;">
<div>
<h3 class="fw-bold mb-1">Freshly Baked Buns
</h3>
<p class="mb-4">Get Upto <span class="fw-bold">25%</span> Off</p>
<a href="#!" class="btn btn-dark">Shop Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- sales section end -->
<!-- products section start -->
<section class="my-lg-14 my-8">
<div class="container">
<div class="row">
<div class="col-12 mb-6">
<h3 class="mb-4 nav-name">Popular Products</h3>
</div>
</div>
<div class="row g-4 row-cols-lg-5 row-cols-2 row-cols-md-3">
<div class="col">
<div class="card card-product">
<div class="card-body">
<div class="text-center position-relative ">
<div class=" position-absolute top-0 start-0">
<span class="badge bg-danger">Sale</span>
</div>
<a href="#!"> <img src="assets/img/product-img-1.jpg" alt="Grocery Ecommerce Template"
class="mb-3 img-fluid"></a>
<div class="card-product-action">
<a href="#!" class="btn-action" data-bs-toggle="modal"
data-bs-target="#quickViewModal"><i class="bi bi-eye" data-bs-toggle="tooltip"
data-bs-html="true" title="Quick View"></i></a>
<a href="#!" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true"
title="Wishlist"><i class="bi bi-heart"></i></a>
<a href="#!" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true"
title="Compare"><i class="bi bi-arrow-left-right"></i></a>
</div>
</div>
<div class="text-small mb-1"><a href="#!"
class="text-decoration-none text-muted"><small>Snack &
Munchies</small></a></div>
<h2 class="fs-6"><a href="#!" class="text-inherit text-dark text-decoration-none">Haldiram's Sev
Bhujia</a></h2>
<div>
<small class="text-warning"> <i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i></small> <span
class="text-muted small">4.5(149)</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-3">
<div><span class="text-dark">$18</span> <span
class="text-decoration-line-through text-muted">$24</span>
</div>
<div><a href="#!" class="btn btn-success btn-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg> Add</a></div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card card-product">
<div class="card-body">
<div class="text-center position-relative">
<div class=" position-absolute top-0 start-0">
<span class="badge bg-success">14%</span>
</div>
<a href="#!"><img src="assets/img/product-img-2.jpg" alt="Grocery Ecommerce Template"
class="mb-3 img-fluid"></a>
<div class="card-product-action">
<a href="#!" class="btn-action" data-bs-toggle="modal"
data-bs-target="#quickViewModal"><i class="bi bi-eye" data-bs-toggle="tooltip"
data-bs-html="true" title="Quick View"></i></a>
<a href="#" class="btn-action" data-bs-toggle="tooltip"
data-bs-html="true" title="Wishlist"><i class="bi bi-heart"></i></a>
<a href="#!" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true"
title="Compare"><i class="bi bi-arrow-left-right"></i></a>
</div>
</div>
<div class="text-small mb-1"><a href="#!"
class="text-decoration-none text-muted"><small>Bakery &
Biscuits</small></a></div>
<h2 class="fs-6"><a href="#!" class="text-inherit text-dark text-decoration-none">NutriChoice
Digestive </a></h2>
<div class="text-warning">
<small> <i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i></small> <span class="text-muted small">4.5
(25)</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-3">
<div><span class="text-dark">$24</span>
</div>
<div><a href="#!" class="btn btn-success btn-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg> Add</a></div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card card-product">
<div class="card-body">
<div class="text-center position-relative"> <a href="#!"><img
src="assets/img/product-img-3.jpg" alt="Grocery Ecommerce Template"
class="mb-3 img-fluid"></a>
<div class="card-product-action">
<a href="#!" class="btn-action" data-bs-toggle="modal"
data-bs-target="#quickViewModal"><i class="bi bi-eye" data-bs-toggle="tooltip"
data-bs-html="true" title="Quick View"></i></a>
<a href="#" class="btn-action" data-bs-toggle="tooltip"
data-bs-html="true" title="Wishlist"><i class="bi bi-heart"></i></a>
<a href="#!" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true"
title="Compare"><i class="bi bi-arrow-left-right"></i></a>
</div>
</div>
<div class="text-small mb-1"><a href="#!"
class="text-decoration-none text-muted"><small>Bakery &
Biscuits</small></a></div>
<h2 class="fs-6"><a href="#!" class="text-inherit text-dark text-decoration-none">Cadbury Chocolate</a></h2>
<div class="text-warning">
<small> <i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i></small> <span class="text-muted small">5
(469)</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-3">
<div><span class="text-dark">$32</span> <span
class="text-decoration-line-through text-muted">$35</span>
</div>
<div><a href="#!" class="btn btn-success btn-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg> Add</a></div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card card-product">
<div class="card-body">
<div class="text-center position-relative"> <a href="#!"><img
src="assets/img/product-img-4.jpg" alt="Grocery Ecommerce Template"
class="mb-3 img-fluid"></a>
<div class="card-product-action">
<a href="#!" class="btn-action" data-bs-toggle="modal"
data-bs-target="#quickViewModal"><i class="bi bi-eye" data-bs-toggle="tooltip"
data-bs-html="true" title="Quick View"></i></a>
<a href="#" class="btn-action" data-bs-toggle="tooltip"
data-bs-html="true" title="Wishlist"><i class="bi bi-heart"></i></a>
<a href="#!" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true"
title="Compare"><i class="bi bi-arrow-left-right"></i></a>
</div>
<div class=" position-absolute top-0 start-0">
<span class="badge bg-danger">Hot</span>
</div>
</div>
<div class="text-small mb-1"><a href="#!"
class="text-decoration-none text-muted"><small>Snack &
Munchies</small></a></div>
<h2 class="fs-6"><a href="#!" class="text-inherit text-dark text-decoration-none">Onion Flavour
Potato</a></h2>
<div class="text-warning">
<small> <i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
<i class="bi bi-star"></i></small> <span class="text-muted small">3.5 (456)</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-3">
<div><span class="text-dark">$3</span> <span
class="text-decoration-line-through text-muted">$5</span>
</div>
<div><a href="#!" class="btn btn-success btn-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg> Add</a></div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card card-product">
<div class="card-body">
<div class="text-center position-relative"> <a href="#!"><img
src="assets/img/product-img-5.jpg" alt="Grocery Ecommerce Template"
class="mb-3 img-fluid"></a>
<div class="card-product-action">
<a href="#!" class="btn-action" data-bs-toggle="modal"
data-bs-target="#quickViewModal"><i class="bi bi-eye" data-bs-toggle="tooltip"
data-bs-html="true" title="Quick View"></i></a>
<a href="#" class="btn-action" data-bs-toggle="tooltip"
data-bs-html="true" title="Wishlist"><i class="bi bi-heart"></i></a>
<a href="#!" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true"
title="Compare"><i class="bi bi-arrow-left-right"></i></a>
</div>
</div>
<div class="text-small mb-1"><a href="#!"
class="text-decoration-none text-muted"><small>Instant
Food</small></a></div>
<h2 class="fs-6"><a href="#!" class="text-inherit text-dark text-decoration-none">Salted Instant
Popcorn </a></h2>
<div class="text-warning">
<small> <i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i></small> <span class="text-muted small">4.5
(39)</span>
</div>
<div class="d-flex justify-content-between mt-4">
<div><span class="text-dark">$13</span> <span
class="text-decoration-line-through text-muted">$18</span>
</div>
<div><a href="#!" class="btn btn-success btn-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg> Add</a></div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card card-product">
<div class="card-body">
<div class="text-center position-relative ">
<div class=" position-absolute top-0 start-0">
<span class="badge bg-danger">Sale</span>
</div>
<a href="#!"> <img src="assets/img/product-img-6.jpg" alt="Grocery Ecommerce Template"
class="mb-3 img-fluid"></a>
<div class="card-product-action">
<a href="#!" class="btn-action" data-bs-toggle="modal"
data-bs-target="#quickViewModal"><i class="bi bi-eye" data-bs-toggle="tooltip"
data-bs-html="true" title="Quick View"></i></a>
<a href="#!" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true"
title="Wishlist"><i class="bi bi-heart"></i></a>
<a href="#!" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true"
title="Compare"><i class="bi bi-arrow-left-right"></i></a>
</div>
</div>
<div class="text-small mb-1"><a href="#!"
class="text-decoration-none text-muted"><small>Dairy, Bread &
Eggs</small></a></div>
<h2 class="fs-6"><a href="#!" class="text-inherit text-dark text-decoration-none">Blueberry Yogurt</a></h2>
<div>
<small class="text-warning"> <i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i></small> <span class="text-muted small">4.5
(189)</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-3">
<div><span class="text-dark">$18</span> <span
class="text-decoration-line-through text-muted">$24</span>
</div>
<div><a href="#!" class="btn btn-success btn-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg> Add</a></div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card card-product">
<div class="card-body">
<div class="text-center position-relative"> <a href="#!"><img
src="assets/img/product-img-7.jpg" alt="Grocery Ecommerce Template"
class="mb-3 img-fluid"></a>
<div class="card-product-action">
<a href="#!" class="btn-action" data-bs-toggle="modal"
data-bs-target="#quickViewModal"><i class="bi bi-eye" data-bs-toggle="tooltip"
data-bs-html="true" title="Quick View"></i></a>
<a href="#" class="btn-action" data-bs-toggle="tooltip"
data-bs-html="true" title="Wishlist"><i class="bi bi-heart"></i></a>
<a href="#!" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true"
title="Compare"><i class="bi bi-arrow-left-right"></i></a>
</div>
</div>
<div class="text-small mb-1"><a href="#!"
class="text-decoration-none text-muted"><small>Dairy, Bread &
Eggs</small></a></div>
<h2 class="fs-6"><a href="#!" class="text-inherit text-dark text-decoration-none">Britannia Cheese
Slices</a></h2>
<div class="text-warning">
<small> <i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i></small> <span class="text-muted small">5
(345)</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-3">
<div><span class="text-dark">$24</span>
</div>
<div><a href="#!" class="btn btn-success btn-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg> Add</a></div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card card-product">
<div class="card-body">
<div class="text-center position-relative"> <a href="#!"><img
src="assets/img/product-img-8.jpg" alt="Grocery Ecommerce Template"
class="mb-3 img-fluid"></a>
<div class="card-product-action">
<a href="#!" class="btn-action" data-bs-toggle="modal"
data-bs-target="#quickViewModal"><i class="bi bi-eye" data-bs-toggle="tooltip"
data-bs-html="true" title="Quick View"></i></a>
<a href="#" class="btn-action" data-bs-toggle="tooltip"
data-bs-html="true" title="Wishlist"><i class="bi bi-heart"></i></a>
<a href="#!" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true"
title="Compare"><i class="bi bi-arrow-left-right"></i></a>
</div>
</div>
<div class="text-small mb-1"><a href="#!"
class="text-decoration-none text-muted"><small>Instant
Food</small></a></div>
<h2 class="fs-6"><a href="#!" class="text-inherit text-dark text-decoration-none">Kellogg's Cereals</a>
</h2>
<div class="text-warning">
<small> <i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i></small> <span class="text-muted small">4 (90)</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-3">
<div><span class="text-dark">$32</span> <span
class="text-decoration-line-through text-muted">$35</span>
</div>
<div><a href="#!" class="btn btn-success btn-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg> Add</a></div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card card-product">
<div class="card-body">
<div class="text-center position-relative"> <a href="#!"><img
src="assets/img/product-img-9.jpg" alt="Grocery Ecommerce Template"
class="mb-3 img-fluid"></a>
<div class="card-product-action">
<a href="#!" class="btn-action" data-bs-toggle="modal"
data-bs-target="#quickViewModal"><i class="bi bi-eye" data-bs-toggle="tooltip"
data-bs-html="true" title="Quick View"></i></a>
<a href="#" class="btn-action" data-bs-toggle="tooltip"
data-bs-html="true" title="Wishlist"><i class="bi bi-heart"></i></a>
<a href="#!" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true"
title="Compare"><i class="bi bi-arrow-left-right"></i></a>
</div>
</div>
<div class="text-small mb-1"><a href="#!"
class="text-decoration-none text-muted"><small>Snack &
Munchies</small></a></div>
<h2 class="fs-6"><a href="#!" class="text-inherit text-dark text-decoration-none">Slurrp Millet
Chocolate </a></h2>
<div class="text-warning">
<small> <i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i></small> <span class="text-muted small">4.5
(67)</span>
</div>
<div class="d-flex justify-content-between align-items-center mt-3">
<div><span class="text-dark">$3</span> <span
class="text-decoration-line-through text-muted">$5</span>
</div>
<div><a href="#!" class="btn btn-success btn-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg> Add</a></div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card card-product">
<div class="card-body">
<div class="text-center position-relative"> <a href="#!"><img
src="assets/img/product-img-10.jpg" alt="Grocery Ecommerce Template"
class="mb-3 img-fluid"></a>
<div class="card-product-action">
<a href="#!" class="btn-action" data-bs-toggle="modal"
data-bs-target="#quickViewModal"><i class="bi bi-eye" data-bs-toggle="tooltip"
data-bs-html="true" title="Quick View"></i></a>
<a href="#" class="btn-action" data-bs-toggle="tooltip"
data-bs-html="true" title="Wishlist"><i class="bi bi-heart"></i></a>
<a href="#!" class="btn-action" data-bs-toggle="tooltip" data-bs-html="true"
title="Compare"><i class="bi bi-arrow-left-right"></i></a>
</div>
</div>
<div class="text-small mb-1"><a href="#!"
class="text-decoration-none text-muted"><small>Dairy, Bread &
Eggs</small></a></div>
<h2 class="fs-6"><a href="#!" class="text-inherit text-dark text-decoration-none">Amul Butter - 500
g</a></h2>
<div class="text-warning">
<small> <i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
<i class="bi bi-star"></i></small> <span class="text-muted small">3.5 (89)</span>
</div>
<div class="d-flex justify-content-between mt-4">
<div><span class="text-dark">$13</span> <span
class="text-decoration-line-through text-muted">$18</span>
</div>
<div><a href="#!" class="btn btn-success btn-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg> Add</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- products section end -->
<!-- services section start -->
<section class="my-lg-14 my-8">
<div class="container mt-5">
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="mb-8 mb-xl-0">
<div class="mb-6"><img src="assets/img/svg icons/clock.svg" alt=""></div>
<h3 class="h5 mb-3 mt-3">
10 minute grocery now
</h3>
<p>Get your order delivered to your doorstep at the earliest from FreshCart pickup stores near
you.</p>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="mb-8 mb-xl-0">
<div class="mb-6"><img src="assets/img/svg icons/gift.svg" alt=""></div>
<h3 class="h5 mb-3 mt-3">Best Prices & Offers</h3>
<p>Cheaper prices than your local supermarket, great cashback offers to top it off. Get best
pricess & offers.
</p>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="mb-8 mb-xl-0">
<div class="mb-6"><img src="assets/img/svg icons/package.svg" alt=""></div>
<h3 class="h5 mb-3 mt-3">Wide Assortment</h3>
<p>Choose from 5000+ products across food, personal care, household, bakery, veg and non-veg &
other categories.
</p>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="mb-8 mb-xl-0">
<div class="mb-6"><img src="assets/img/svg icons/refresh-cw.svg" alt=""></div>
<h3 class="h5 mb-3 mt-3">Easy Returns</h3>
<p>Not satisfied with a product? Return it at the doorstep & get a refund within hours. No
questions asked
<a href="#" class="text-inherit text-dark text-decoration-none fw-bold" style="color:green !important ;">policy</a>.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- services section end -->
<!-- footer section start here -->
<div class="border-top py-4 container">
<div class="row align-items-center me-5">
<div class="col-md-6"><span class="small text-muted ">Copyright 2022 © therichpost eCommerce
Template. All rights reserved. Powered by <a href="https://therichpost.com/">therichpost</a>.</span></div>
<div class="col-md-6 pe-3">
<ul class="list-inline text-md-end mb-0 small mt-3 mt-md-0">
<li class="list-inline-item text-muted">Follow us on</li>
<li class="list-inline-item me-1">
<a href="#!" class="icon-shape icon-sm social-links "> <svg
xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-facebook" viewBox="0 0 16 16">
<path
d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
</svg></a>
</li>
<li class="list-inline-item me-1">
<a href="#!" class="icon-shape icon-sm social-links"> <svg
xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-twitter" viewBox="0 0 16 16">
<path
d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
</svg></a>
</li>
<li class="list-inline-item">
<a href="#!" class="icon-shape icon-sm social-links"><svg
xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-instagram" viewBox="0 0 16 16">
<path
d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z" />
</svg></a>
</li>
</ul>
</div>
</div>
</div>
<!-- footer section end here -->
4. Now friends we just need to add below code into angularboot5/angular.json file:
"styles": [
...
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/bootstrap-icons/font/bootstrap-icons.css"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
5. Now friends we just need to add below code into angularboot5/src/app/app.component.css file to add custom styles:
/* You can add global styles to this file, and also import other style files */
.card-product {
transition: .2s;
-moz-transition: .2s;
-webkit-transition: .2s;
-o-transition: .2s
}
.card-product .card-hidden {
background-color: #fff;
border-bottom: 1px solid #e9edec;
border-left: 1px solid #e9edec;
border-radius: .4375rem;
border-right: 1px solid #e9edec;
border-top-left-radius: 0;
border-top-right-radius: 0;
left: 0;
margin-top: -1.25rem;
opacity: 0;
position: absolute;
top: 100%;
transition: all .15s ease-in-out;
visibility: hidden;
width: 100%;
z-index: 1
}
.card-product .product-action-btn {
display: flex;
flex-direction: column;
opacity: 0;
position: absolute;
right: 0;
top: 0;
transform: translateX(10px);
transition: opacity .25s cubic-bezier(.17, .62, .44, .99), transform .25s cubic-bezier(.17, .62, .44, .99)
}
.card-product .card-product-action {
bottom: 15%;
left: 50%;
opacity: 0;
position: absolute;
transform: translateX(-50%) translateY(-50%);
transition: all .3s ease 0s;
visibility: hidden;
width: 100%;
z-index: 9
}
.card-product:hover {
border: 1px solid #0aad0a;
box-shadow: 0 5px 12px rgba(0, 0, 0, .12);
transition: .2s;
-moz-transition: .2s;
-webkit-transition: .2s;
-o-transition: .2s
}
.card-product:hover .card-hidden,
.card-product:hover .card-product-action {
opacity: 1;
visibility: visible
}
.card-product:hover .product-action-btn {
opacity: 1;
transform: translateX(0)
}
.card-product .btn-action {
align-items: center;
background-color: #fff;
border-radius: .5rem;
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
color: #21313c;
display: inline-flex;
font-size: 14px;
height: 34px;
justify-content: center;
line-height: 34px;
text-align: center;
transition: all .3s ease 0s;
vertical-align: middle;
width: 34px
}
.card-product .btn-action:hover {
background-color: #0aad0a;
color: #fff
}
.card-product-v2 {
cursor: pointer;
transition: z-index .2s cubic-bezier(.28, .12, .22, 1);
z-index: 1
}
.card-product-v2 .product-content-fade {
background-color: #fff;
bottom: 0;
box-shadow: 5px 15px 30px rgba(62, 68, 90, .1);
left: -1px;
opacity: 0;
pointer-events: none;
position: absolute;
right: -1px;
top: -1px;
transition: opacity .2s cubic-bezier(.28, .12, .22, 1);
will-change: opacity;
z-index: -1
}
.card-product-v2 .product-fade-block {
background-color: #fff;
border-radius: .5rem;
left: 0;
opacity: 0;
padding: 0 .9375rem;
position: absolute;
right: 0;
transform: translateY(5px);
transition: all .2s cubic-bezier(.28, .12, .22, 1);
visibility: hidden;
will-change: opacity, transform
}
.card-product-v2 .product-action-btn {
display: flex;
flex-direction: column;
opacity: 0;
position: absolute;
right: 0;
top: 0;
transform: translateX(10px);
transition: opacity .25s cubic-bezier(.17, .62, .44, .99), transform .25s cubic-bezier(.17, .62, .44, .99)
}
.card-product-v2 .btn-action {
align-items: center;
background-color: #fff;
border-radius: .5rem;
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
color: #21313c;
display: inline-flex;
font-size: 14px;
height: 34px;
justify-content: center;
line-height: 34px;
text-align: center;
transition: all .3s ease 0s;
vertical-align: middle;
width: 34px
}
.card-product-v2 .btn-action:hover {
background-color: #0aad0a;
color: #fff
}
.card-product-v2:hover .product-fade-block {
opacity: 1;
transform: translateY(0);
visibility: visible
}
.card-product-v2:hover .product-content-fade {
opacity: 1
}
.card-product-v2:hover .product-action-btn {
opacity: 1;
transform: translateX(0)
}
.card-product-v2 .product-content-fade.border-info {
border: 1px solid #0aad0a !important;
border-radius: .5rem
}
.card-product-v2:hover.card {
border: none;
z-index: 2
}
.card-image {
transition: box-shadow .25s ease, transform .25s ease
}
.card-image:hover {
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
transform: translate3d(0, -3px, 0)
}
.salessection{
padding: 4rem;
}
.dropdown-item {
border: 0;
clear: both;
color: #5c6c75;
display: block;
font-weight: 400;
padding: .125rem .75rem;
text-align: inherit;
text-decoration: none;
white-space: nowrap;
width: 100%
}
nav{
background-color: white;
}
.nav-name{
color: #0aad0a;
}
.form-control{
border: none;
}
.btn-search-icon{
/* border-radius:30px ; */
background-color: #0aad0a;
border: none;
padding: .25rem;
width: 40px;
}
.bg-image{
padding: 40px;
}
.badges{
background-color: yellow;
color: dark;
font-weight: bold;
padding: 3px;
border-radius: 20px;
}
Friends in the end must run ng serve command into your terminal to run the angular 14 project.
Now we are done friends. If you have any kind of query, suggestion and new requirement then feel free to comment below.
Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.
I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.
Jassa
Thanks
Recent Comments