Hello guys how are you? Welcome back on my blog Therichpost. Today in this post I am going to share Angular Ecommerce Template: Ultimate Guide to Building a Storefront.
Angular 19 came. If you are new then you must check below two links:
Now guys here is the complete code snippet and please follow carefully:
Here’s a structured plan to build a static food ordering application in Angular 19 with Bootstrap 5. This includes the features you want: a good header and footer, a cart, checkout functionality, and a single item page.
Project Setup
- Create a New Angular Project
ng new angularecommerce cd angularecommerce
- Guys here is git repo link from where you can download all assets including images, css, js etc and place inside src/assets folder. Git repo
Update the index.html file to include assets or you can call inside angular.json file as well:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Angularecommerce19</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="apple-touch-icon" href="assets/img/apple-icon.png"> <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico"> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/css/templatemo.css"> <link rel="stylesheet" href="assets/css/custom.css"> <!-- Load fonts style after rendering the layout styles --> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;700;900&display=swap"> <link rel="stylesheet" href="assets/css/fontawesome.min.css"> </head> <body> <app-root></app-root> <!-- Start Script --> <script src="assets/js/bootstrap.bundle.min.js"></script> <!-- End Script --> </body> </html>
Application Structure
- Header Component: Contains navigation links.
- Footer Component: Displays footer content.
- Home Component: Displays a list of main items.
- Single Item Page: Detailed view of a food item.
- shop Component: Displays items.
- Contact Component: Form to input customer details and finalize the order.
- About Component: Website Details
Components and Routing
Generate the necessary components:
ng generate component components/header ng generate component components/footer ng generate component pages/home ng generate component pages/about ng generate component pages/contact ng generate component pages/shop ng generate component pages/shop-single
Configure routes in app-routs.ts:
import { Routes } from '@angular/router';
import { HomeComponent } from './pages/home/home.component';
import { AboutComponent } from './pages/about/about.component';
import { ShopComponent } from './pages/shop/shop.component';
import { ContactComponent } from './pages/contact/contact.component';
import { ShopSingleComponent } from './pages/shop-single/shop-single.component';
export const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'shop', component: ShopComponent },
{ path: 'contact', component: ContactComponent },
{ path: 'shop-single', component: ShopSingleComponent },
];
Component Details
Header Component html
Include navigation links and a cart icon:
<!-- Start Top Nav -->
<nav class="navbar navbar-expand-lg bg-dark navbar-light d-none d-lg-block" id="templatemo_nav_top">
<div class="container text-light">
<div class="w-100 d-flex justify-content-between">
<div>
<i class="fa fa-envelope mx-2"></i>
<a class="navbar-sm-brand text-light text-decoration-none" href="mailto:info@company.com">company.com</a>
<i class="fa fa-phone mx-2"></i>
<a class="navbar-sm-brand text-light text-decoration-none" href="tel:010-020-0340">010-020-0340</a>
</div>
<div>
<a class="text-light" href="https://fb.com/" target="_blank" rel="sponsored"><i class="fab fa-facebook-f fa-sm fa-fw me-2"></i></a>
<a class="text-light" href="https://www.instagram.com/" target="_blank"><i class="fab fa-instagram fa-sm fa-fw me-2"></i></a>
<a class="text-light" href="https://twitter.com/" target="_blank"><i class="fab fa-twitter fa-sm fa-fw me-2"></i></a>
<a class="text-light" href="https://www.linkedin.com/" target="_blank"><i class="fab fa-linkedin fa-sm fa-fw"></i></a>
</div>
</div>
</div>
</nav>
<!-- Close Top Nav -->
<!-- Header -->
<nav class="navbar navbar-expand-lg navbar-light shadow">
<div class="container d-flex justify-content-between align-items-center">
<a class="navbar-brand text-success logo h1 align-self-center"[routerLink]="'/'">
Zay
</a>
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#templatemo_main_nav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="align-self-center collapse navbar-collapse flex-fill d-lg-flex justify-content-lg-between" id="templatemo_main_nav">
<div class="flex-fill">
<ul class="nav navbar-nav d-flex justify-content-between mx-lg-auto">
<li class="nav-item">
<a class="nav-link" [routerLink]="'/'">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="'/about'">About</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="'/shop'">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="'/contact'">Contact</a>
</li>
</ul>
</div>
<div class="navbar align-self-center d-flex">
<div class="d-lg-none flex-sm-fill mt-3 mb-4 col-7 col-sm-auto pr-3">
<div class="input-group">
<input type="text" class="form-control" id="inputMobileSearch" placeholder="Search ...">
<div class="input-group-text">
<i class="fa fa-fw fa-search"></i>
</div>
</div>
</div>
<a class="nav-icon d-none d-lg-inline" href="#" data-bs-toggle="modal" data-bs-target="#templatemo_search">
<i class="fa fa-fw fa-search text-dark mr-2"></i>
</a>
<a class="nav-icon position-relative text-decoration-none" href="#">
<i class="fa fa-fw fa-cart-arrow-down text-dark mr-1"></i>
<span class="position-absolute top-0 left-100 translate-middle badge rounded-pill bg-light text-dark">7</span>
</a>
<a class="nav-icon position-relative text-decoration-none" href="#">
<i class="fa fa-fw fa-user text-dark mr-3"></i>
<span class="position-absolute top-0 left-100 translate-middle badge rounded-pill bg-light text-dark">+99</span>
</a>
</div>
</div>
</div>
</nav>
<!-- Close Header -->
<!-- Modal -->
<div class="modal fade bg-white" id="templatemo_search" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="w-100 pt-1 mb-5 text-right">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form action="" method="get" class="modal-content modal-body border-0 p-0">
<div class="input-group mb-2">
<input type="text" class="form-control" id="inputModalSearch" name="q" placeholder="Search ...">
<button type="submit" class="input-group-text bg-success text-light">
<i class="fa fa-fw fa-search text-white"></i>
</button>
</div>
</form>
</div>
</div>
Footer Component html
Create a sticky footer with copyright info:
<!-- Start Footer -->
<footer class="bg-dark" id="tempaltemo_footer">
<div class="container">
<div class="row">
<div class="col-md-4 pt-5">
<h2 class="h2 text-success border-bottom pb-3 border-light logo">Zay Shop</h2>
<ul class="list-unstyled text-light footer-link-list">
<li>
<i class="fas fa-map-marker-alt fa-fw"></i>
123 Consectetur at ligula 10660
</li>
<li>
<i class="fa fa-phone fa-fw"></i>
<a class="text-decoration-none" href="tel:010-020-0340">010-020-0340</a>
</li>
<li>
<i class="fa fa-envelope fa-fw"></i>
<a class="text-decoration-none" href="mailto:info@company.com">company.com</a>
</li>
</ul>
</div>
<div class="col-md-4 pt-5">
<h2 class="h2 text-light border-bottom pb-3 border-light">Products</h2>
<ul class="list-unstyled text-light footer-link-list">
<li><a class="text-decoration-none" href="#">Luxury</a></li>
<li><a class="text-decoration-none" href="#">Sport Wear</a></li>
<li><a class="text-decoration-none" href="#">Men's Shoes</a></li>
<li><a class="text-decoration-none" href="#">Women's Shoes</a></li>
<li><a class="text-decoration-none" href="#">Popular Dress</a></li>
<li><a class="text-decoration-none" href="#">Gym Accessories</a></li>
<li><a class="text-decoration-none" href="#">Sport Shoes</a></li>
</ul>
</div>
<div class="col-md-4 pt-5">
<h2 class="h2 text-light border-bottom pb-3 border-light">Further Info</h2>
<ul class="list-unstyled text-light footer-link-list">
<li><a class="text-decoration-none" href="#">Home</a></li>
<li><a class="text-decoration-none" href="#">About Us</a></li>
<li><a class="text-decoration-none" href="#">Shop Locations</a></li>
<li><a class="text-decoration-none" href="#">FAQs</a></li>
<li><a class="text-decoration-none" href="#">Contact</a></li>
</ul>
</div>
</div>
<div class="row text-light mb-4">
<div class="col-12 mb-3">
<div class="w-100 my-3 border-top border-light"></div>
</div>
<div class="col-auto me-auto">
<ul class="list-inline text-left footer-icons">
<li class="list-inline-item border border-light rounded-circle text-center">
<a class="text-light text-decoration-none" target="_blank" href="http://facebook.com/"><i class="fab fa-facebook-f fa-lg fa-fw"></i></a>
</li>
<li class="list-inline-item border border-light rounded-circle text-center">
<a class="text-light text-decoration-none" target="_blank" href="https://www.instagram.com/"><i class="fab fa-instagram fa-lg fa-fw"></i></a>
</li>
<li class="list-inline-item border border-light rounded-circle text-center">
<a class="text-light text-decoration-none" target="_blank" href="https://twitter.com/"><i class="fab fa-twitter fa-lg fa-fw"></i></a>
</li>
<li class="list-inline-item border border-light rounded-circle text-center">
<a class="text-light text-decoration-none" target="_blank" href="https://www.linkedin.com/"><i class="fab fa-linkedin fa-lg fa-fw"></i></a>
</li>
</ul>
</div>
<div class="col-auto">
<label class="sr-only" for="subscribeEmail">Email address</label>
<div class="input-group mb-2">
<input type="text" class="form-control bg-dark border-light" id="subscribeEmail" placeholder="Email address">
<div class="input-group-text btn-success text-light">Subscribe</div>
</div>
</div>
</div>
</div>
<div class="w-100 bg-black py-3">
<div class="container">
<div class="row pt-2">
<div class="col-12">
<p class="text-left text-light">
with love <a rel="sponsored" href="https://therichpost.com" target="_blank">Jassa</a>
</p>
</div>
</div>
</div>
</div>
</footer>
<!-- End Footer -->
Home Component html
Display a grid of food items:
<!-- Start Banner Hero -->
<div id="template-mo-zay-hero-carousel" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#template-mo-zay-hero-carousel" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#template-mo-zay-hero-carousel" data-bs-slide-to="1"></li>
<li data-bs-target="#template-mo-zay-hero-carousel" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="container">
<div class="row p-5">
<div class="mx-auto col-md-8 col-lg-6 order-lg-last">
<img class="img-fluid" src="./assets/img/banner_img_01.jpg" alt="">
</div>
<div class="col-lg-6 mb-0 d-flex align-items-center">
<div class="text-align-left align-self-center">
<h1 class="h1 text-success"><b>Zay</b> eCommerce</h1>
<h3 class="h2">Tiny and Perfect eCommerce Template</h3>
<p>
You are permitted to use this Zay CSS template for your commercial websites.
You are <strong>not permitted</strong> to re-distribute the template ZIP file in any kind of template collection websites.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<div class="row p-5">
<div class="mx-auto col-md-8 col-lg-6 order-lg-last">
<img class="img-fluid" src="./assets/img/banner_img_02.jpg" alt="">
</div>
<div class="col-lg-6 mb-0 d-flex align-items-center">
<div class="text-align-left">
<h1 class="h1">Proident occaecat</h1>
<h3 class="h2">Aliquip ex ea commodo consequat</h3>
<p>
You are permitted to use this Zay CSS template for your commercial websites.
You are <strong>not permitted</strong> to re-distribute the template ZIP file in any kind of template collection websites.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<div class="row p-5">
<div class="mx-auto col-md-8 col-lg-6 order-lg-last">
<img class="img-fluid" src="./assets/img/banner_img_03.jpg" alt="">
</div>
<div class="col-lg-6 mb-0 d-flex align-items-center">
<div class="text-align-left">
<h1 class="h1">Repr in voluptate</h1>
<h3 class="h2">Ullamco laboris nisi ut </h3>
<p>
We bring you 100% free CSS templates for your websites.
If you wish to support TemplateMo, please make a small contribution via PayPal or tell your friends about our website. Thank you.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev text-decoration-none w-auto ps-3" href="#template-mo-zay-hero-carousel" role="button" data-bs-slide="prev">
<i class="fas fa-chevron-left"></i>
</a>
<a class="carousel-control-next text-decoration-none w-auto pe-3" href="#template-mo-zay-hero-carousel" role="button" data-bs-slide="next">
<i class="fas fa-chevron-right"></i>
</a>
</div>
<!-- End Banner Hero -->
<!-- Start Categories of The Month -->
<section class="container py-5">
<div class="row text-center pt-3">
<div class="col-lg-6 m-auto">
<h1 class="h1">Categories of The Month</h1>
<p>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div class="row">
<div class="col-12 col-md-4 p-5 mt-3">
<a href="#"><img src="./assets/img/category_img_01.jpg" class="rounded-circle img-fluid border"></a>
<h5 class="text-center mt-3 mb-3">Watches</h5>
<p class="text-center"><a class="btn btn-success">Go Shop</a></p>
</div>
<div class="col-12 col-md-4 p-5 mt-3">
<a href="#"><img src="./assets/img/category_img_02.jpg" class="rounded-circle img-fluid border"></a>
<h2 class="h5 text-center mt-3 mb-3">Shoes</h2>
<p class="text-center"><a class="btn btn-success">Go Shop</a></p>
</div>
<div class="col-12 col-md-4 p-5 mt-3">
<a href="#"><img src="./assets/img/category_img_03.jpg" class="rounded-circle img-fluid border"></a>
<h2 class="h5 text-center mt-3 mb-3">Accessories</h2>
<p class="text-center"><a class="btn btn-success">Go Shop</a></p>
</div>
</div>
</section>
<!-- End Categories of The Month -->
<!-- Start Featured Product -->
<section class="bg-light">
<div class="container py-5">
<div class="row text-center py-3">
<div class="col-lg-6 m-auto">
<h1 class="h1">Featured Product</h1>
<p>
Reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident.
</p>
</div>
</div>
<div class="row">
<div class="col-12 col-md-4 mb-4">
<div class="card h-100">
<a [routerLink]="'/shop-single'">
<img src="./assets/img/feature_prod_01.jpg" class="card-img-top" alt="...">
</a>
<div class="card-body">
<ul class="list-unstyled d-flex justify-content-between">
<li>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-muted fa fa-star"></i>
<i class="text-muted fa fa-star"></i>
</li>
<li class="text-muted text-right">$240.00</li>
</ul>
<a [routerLink]="'/shop-single'" class="h2 text-decoration-none text-dark">Gym Weight</a>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt in culpa qui officia deserunt.
</p>
<p class="text-muted">Reviews (24)</p>
</div>
</div>
</div>
<div class="col-12 col-md-4 mb-4">
<div class="card h-100">
<a [routerLink]="'/shop-single'">
<img src="./assets/img/feature_prod_02.jpg" class="card-img-top" alt="...">
</a>
<div class="card-body">
<ul class="list-unstyled d-flex justify-content-between">
<li>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-muted fa fa-star"></i>
<i class="text-muted fa fa-star"></i>
</li>
<li class="text-muted text-right">$480.00</li>
</ul>
<a [routerLink]="'/shop-single'" class="h2 text-decoration-none text-dark">Cloud Nike Shoes</a>
<p class="card-text">
Aenean gravida dignissim finibus. Nullam ipsum diam, posuere vitae pharetra sed, commodo ullamcorper.
</p>
<p class="text-muted">Reviews (48)</p>
</div>
</div>
</div>
<div class="col-12 col-md-4 mb-4">
<div class="card h-100">
<a [routerLink]="'/shop-single'">
<img src="./assets/img/feature_prod_03.jpg" class="card-img-top" alt="...">
</a>
<div class="card-body">
<ul class="list-unstyled d-flex justify-content-between">
<li>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
</li>
<li class="text-muted text-right">$360.00</li>
</ul>
<a [routerLink]="'/shop-single'" class="h2 text-decoration-none text-dark">Summer Addides Shoes</a>
<p class="card-text">
Curabitur ac mi sit amet diam luctus porta. Phasellus pulvinar sagittis diam, et scelerisque ipsum lobortis nec.
</p>
<p class="text-muted">Reviews (74)</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Featured Product -->
Single shop Component html
Show detailed info and add to cart:
<!-- Open Content -->
<section class="bg-light">
<div class="container pb-5">
<div class="row">
<div class="col-lg-5 mt-5">
<div class="card mb-3">
<img class="card-img img-fluid" src="assets/img/product_single_10.jpg" alt="Card image cap" id="product-detail">
</div>
<div class="row">
<!--Start Controls-->
<div class="col-1 align-self-center">
<a href="#multi-item-example" role="button" data-bs-slide="prev">
<i class="text-dark fas fa-chevron-left"></i>
<span class="sr-only">Previous</span>
</a>
</div>
<!--End Controls-->
<!--Start Carousel Wrapper-->
<div id="multi-item-example" class="col-10 carousel slide carousel-multi-item" data-bs-ride="carousel">
<!--Start Slides-->
<div class="carousel-inner product-links-wap" role="listbox">
<!--First slide-->
<div class="carousel-item active">
<div class="row">
<div class="col-4">
<a href="#">
<img class="card-img img-fluid" src="assets/img/product_single_01.jpg" alt="Product Image 1">
</a>
</div>
<div class="col-4">
<a href="#">
<img class="card-img img-fluid" src="assets/img/product_single_02.jpg" alt="Product Image 2">
</a>
</div>
<div class="col-4">
<a href="#">
<img class="card-img img-fluid" src="assets/img/product_single_03.jpg" alt="Product Image 3">
</a>
</div>
</div>
</div>
<!--/.First slide-->
<!--Second slide-->
<div class="carousel-item">
<div class="row">
<div class="col-4">
<a href="#">
<img class="card-img img-fluid" src="assets/img/product_single_04.jpg" alt="Product Image 4">
</a>
</div>
<div class="col-4">
<a href="#">
<img class="card-img img-fluid" src="assets/img/product_single_05.jpg" alt="Product Image 5">
</a>
</div>
<div class="col-4">
<a href="#">
<img class="card-img img-fluid" src="assets/img/product_single_06.jpg" alt="Product Image 6">
</a>
</div>
</div>
</div>
<!--/.Second slide-->
<!--Third slide-->
<div class="carousel-item">
<div class="row">
<div class="col-4">
<a href="#">
<img class="card-img img-fluid" src="assets/img/product_single_07.jpg" alt="Product Image 7">
</a>
</div>
<div class="col-4">
<a href="#">
<img class="card-img img-fluid" src="assets/img/product_single_08.jpg" alt="Product Image 8">
</a>
</div>
<div class="col-4">
<a href="#">
<img class="card-img img-fluid" src="assets/img/product_single_09.jpg" alt="Product Image 9">
</a>
</div>
</div>
</div>
<!--/.Third slide-->
</div>
<!--End Slides-->
</div>
<!--End Carousel Wrapper-->
<!--Start Controls-->
<div class="col-1 align-self-center">
<a href="#multi-item-example" role="button" data-bs-slide="next">
<i class="text-dark fas fa-chevron-right"></i>
<span class="sr-only">Next</span>
</a>
</div>
<!--End Controls-->
</div>
</div>
<!-- col end -->
<div class="col-lg-7 mt-5">
<div class="card">
<div class="card-body">
<h1 class="h2">Active Wear</h1>
<p class="h3 py-2">$25.00</p>
<p class="py-2">
<i class="fa fa-star text-warning"></i>
<i class="fa fa-star text-warning"></i>
<i class="fa fa-star text-warning"></i>
<i class="fa fa-star text-warning"></i>
<i class="fa fa-star text-secondary"></i>
<span class="list-inline-item text-dark">Rating 4.8 | 36 Comments</span>
</p>
<ul class="list-inline">
<li class="list-inline-item">
<h6>Brand:</h6>
</li>
<li class="list-inline-item">
<p class="text-muted"><strong>Easy Wear</strong></p>
</li>
</ul>
<h6>Description:</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse. Donec condimentum elementum convallis. Nunc sed orci a diam ultrices aliquet interdum quis nulla.</p>
<ul class="list-inline">
<li class="list-inline-item">
<h6>Avaliable Color :</h6>
</li>
<li class="list-inline-item">
<p class="text-muted"><strong>White / Black</strong></p>
</li>
</ul>
<h6>Specification:</h6>
<ul class="list-unstyled pb-3">
<li>Lorem ipsum dolor sit</li>
<li>Amet, consectetur</li>
<li>Adipiscing elit,set</li>
<li>Duis aute irure</li>
<li>Ut enim ad minim</li>
<li>Dolore magna aliqua</li>
<li>Excepteur sint</li>
</ul>
<form action="" method="GET">
<input type="hidden" name="product-title" value="Activewear">
<div class="row">
<div class="col-auto">
<ul class="list-inline pb-3">
<li class="list-inline-item">Size :
<input type="hidden" name="product-size" id="product-size" value="S">
</li>
<li class="list-inline-item"><span class="btn btn-success btn-size">S</span></li>
<li class="list-inline-item"><span class="btn btn-success btn-size">M</span></li>
<li class="list-inline-item"><span class="btn btn-success btn-size">L</span></li>
<li class="list-inline-item"><span class="btn btn-success btn-size">XL</span></li>
</ul>
</div>
<div class="col-auto">
<ul class="list-inline pb-3">
<li class="list-inline-item text-right">
Quantity
<input type="hidden" name="product-quanity" id="product-quanity" value="1">
</li>
<li class="list-inline-item"><span class="btn btn-success" id="btn-minus">-</span></li>
<li class="list-inline-item"><span class="badge bg-secondary" id="var-value">1</span></li>
<li class="list-inline-item"><span class="btn btn-success" id="btn-plus">+</span></li>
</ul>
</div>
</div>
<div class="row pb-3">
<div class="col d-grid">
<button type="submit" class="btn btn-success btn-lg" name="submit" value="buy">Buy</button>
</div>
<div class="col d-grid">
<button type="submit" class="btn btn-success btn-lg" name="submit" value="addtocard">Add To Cart</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Close Content -->
Shop Component html
Display selected items:
<!-- Start Content -->
<div class="container py-5">
<div class="row">
<div class="col-lg-3">
<h1 class="h2 pb-4">Categories</h1>
<ul class="list-unstyled templatemo-accordion">
<li class="pb-3">
<a class="collapsed d-flex justify-content-between h3 text-decoration-none" href="#">
Gender
<i class="fa fa-fw fa-chevron-circle-down mt-1"></i>
</a>
<ul class="collapse show list-unstyled pl-3">
<li><a class="text-decoration-none" href="#">Men</a></li>
<li><a class="text-decoration-none" href="#">Women</a></li>
</ul>
</li>
<li class="pb-3">
<a class="collapsed d-flex justify-content-between h3 text-decoration-none" href="#">
Sale
<i class="pull-right fa fa-fw fa-chevron-circle-down mt-1"></i>
</a>
<ul id="collapseTwo" class="collapse list-unstyled pl-3">
<li><a class="text-decoration-none" href="#">Sport</a></li>
<li><a class="text-decoration-none" href="#">Luxury</a></li>
</ul>
</li>
<li class="pb-3">
<a class="collapsed d-flex justify-content-between h3 text-decoration-none" href="#">
Product
<i class="pull-right fa fa-fw fa-chevron-circle-down mt-1"></i>
</a>
<ul id="collapseThree" class="collapse list-unstyled pl-3">
<li><a class="text-decoration-none" href="#">Bag</a></li>
<li><a class="text-decoration-none" href="#">Sweather</a></li>
<li><a class="text-decoration-none" href="#">Sunglass</a></li>
</ul>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="row">
<div class="col-md-6">
<ul class="list-inline shop-top-menu pb-3 pt-1">
<li class="list-inline-item">
<a class="h3 text-dark text-decoration-none mr-3" href="#">All</a>
</li>
<li class="list-inline-item">
<a class="h3 text-dark text-decoration-none mr-3" href="#">Men's</a>
</li>
<li class="list-inline-item">
<a class="h3 text-dark text-decoration-none" href="#">Women's</a>
</li>
</ul>
</div>
<div class="col-md-6 pb-4">
<div class="d-flex">
<select class="form-control">
<option>Featured</option>
<option>A to Z</option>
<option>Item</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="card mb-4 product-wap rounded-0">
<div class="card rounded-0">
<img class="card-img rounded-0 img-fluid" src="assets/img/shop_01.jpg">
<div class="card-img-overlay rounded-0 product-overlay d-flex align-items-center justify-content-center">
<ul class="list-unstyled">
<li><a class="btn btn-success text-white" [routerLink]="'/shop-single'"><i class="far fa-heart"></i></a></li>
<li><a class="btn btn-success text-white mt-2" [routerLink]="'/shop-single'"><i class="far fa-eye"></i></a></li>
<li><a class="btn btn-success text-white mt-2" [routerLink]="'/shop-single'"><i class="fas fa-cart-plus"></i></a></li>
</ul>
</div>
</div>
<div class="card-body">
<a [routerLink]="'/shop-single'" class="h3 text-decoration-none">Oupidatat non</a>
<ul class="w-100 list-unstyled d-flex justify-content-between mb-0">
<li>M/L/X/XL</li>
<li class="pt-2">
<span class="product-color-dot color-dot-red float-left rounded-circle ml-1"></span>
<span class="product-color-dot color-dot-blue float-left rounded-circle ml-1"></span>
<span class="product-color-dot color-dot-black float-left rounded-circle ml-1"></span>
<span class="product-color-dot color-dot-light float-left rounded-circle ml-1"></span>
<span class="product-color-dot color-dot-green float-left rounded-circle ml-1"></span>
</li>
</ul>
<ul class="list-unstyled d-flex justify-content-center mb-1">
<li>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-muted fa fa-star"></i>
<i class="text-muted fa fa-star"></i>
</li>
</ul>
<p class="text-center mb-0">$250.00</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 product-wap rounded-0">
<div class="card rounded-0">
<img class="card-img rounded-0 img-fluid" src="assets/img/shop_02.jpg">
<div class="card-img-overlay rounded-0 product-overlay d-flex align-items-center justify-content-center">
<ul class="list-unstyled">
<li><a class="btn btn-success text-white" [routerLink]="'/shop-single'"><i class="far fa-heart"></i></a></li>
<li><a class="btn btn-success text-white mt-2" [routerLink]="'/shop-single'"><i class="far fa-eye"></i></a></li>
<li><a class="btn btn-success text-white mt-2" [routerLink]="'/shop-single'"><i class="fas fa-cart-plus"></i></a></li>
</ul>
</div>
</div>
<div class="card-body">
<a [routerLink]="'/shop-single'" class="h3 text-decoration-none">Oupidatat non</a>
<ul class="w-100 list-unstyled d-flex justify-content-between mb-0">
<li>M/L/X/XL</li>
<li class="pt-2">
<span class="product-color-dot color-dot-red float-left rounded-circle ml-1"></span>
<span class="product-color-dot color-dot-blue float-left rounded-circle ml-1"></span>
<span class="product-color-dot color-dot-black float-left rounded-circle ml-1"></span>
<span class="product-color-dot color-dot-light float-left rounded-circle ml-1"></span>
<span class="product-color-dot color-dot-green float-left rounded-circle ml-1"></span>
</li>
</ul>
<ul class="list-unstyled d-flex justify-content-center mb-1">
<li>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-muted fa fa-star"></i>
<i class="text-muted fa fa-star"></i>
</li>
</ul>
<p class="text-center mb-0">$250.00</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 product-wap rounded-0">
<div class="card rounded-0">
<img class="card-img rounded-0 img-fluid" src="assets/img/shop_03.jpg">
<div class="card-img-overlay rounded-0 product-overlay d-flex align-items-center justify-content-center">
<ul class="list-unstyled">
<li><a class="btn btn-success text-white" [routerLink]="'/shop-single'"><i class="far fa-heart"></i></a></li>
<li><a class="btn btn-success text-white mt-2" [routerLink]="'/shop-single'"><i class="far fa-eye"></i></a></li>
<li><a class="btn btn-success text-white mt-2" [routerLink]="'/shop-single'"><i class="fas fa-cart-plus"></i></a></li>
</ul>
</div>
</div>
<div class="card-body">
<a [routerLink]="'/shop-single'" class="h3 text-decoration-none">Oupidatat non</a>
<ul class="w-100 list-unstyled d-flex justify-content-between mb-0">
<li>M/L/X/XL</li>
<li class="pt-2">
<span class="product-color-dot color-dot-red float-left rounded-circle ml-1"></span>
<span class="product-color-dot color-dot-blue float-left rounded-circle ml-1"></span>
<span class="product-color-dot color-dot-black float-left rounded-circle ml-1"></span>
<span class="product-color-dot color-dot-light float-left rounded-circle ml-1"></span>
<span class="product-color-dot color-dot-green float-left rounded-circle ml-1"></span>
</li>
</ul>
<ul class="list-unstyled d-flex justify-content-center mb-1">
<li>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-muted fa fa-star"></i>
<i class="text-muted fa fa-star"></i>
</li>
</ul>
<p class="text-center mb-0">$250.00</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 product-wap rounded-0">
<div class="card rounded-0">
<img class="card-img rounded-0 img-fluid" src="assets/img/shop_04.jpg">
<div class="card-img-overlay rounded-0 product-overlay d-flex align-items-center justify-content-center">
<ul class="list-unstyled">
<li><a class="btn btn-success text-white" [routerLink]="'/shop-single'"><i class="far fa-heart"></i></a></li>
<li><a class="btn btn-success text-white mt-2" [routerLink]="'/shop-single'"><i class="far fa-eye"></i></a></li>
<li><a class="btn btn-success text-white mt-2" [routerLink]="'/shop-single'"><i class="fas fa-cart-plus"></i></a></li>
</ul>
</div>
</div>
<div class="card-body">
<a [routerLink]="'/shop-single'" class="h3 text-decoration-none">Oupidatat non</a>
<ul class="w-100 list-unstyled d-flex justify-content-between mb-0">
<li>M/L/X/XL</li>
<li class="pt-2">
<span class="product-color-dot color-dot-red float-left rounded-circle ml-1"></span>
<span class="product-color-dot color-dot-blue float-left rounded-circle ml-1"></span>
<span class="product-color-dot color-dot-black float-left rounded-circle ml-1"></span>
<span class="product-color-dot color-dot-light float-left rounded-circle ml-1"></span>
<span class="product-color-dot color-dot-green float-left rounded-circle ml-1"></span>
</li>
</ul>
<ul class="list-unstyled d-flex justify-content-center mb-1">
<li>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-muted fa fa-star"></i>
<i class="text-muted fa fa-star"></i>
</li>
</ul>
<p class="text-center mb-0">$250.00</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 product-wap rounded-0">
<div class="card rounded-0">
<img class="card-img rounded-0 img-fluid" src="assets/img/shop_05.jpg">
<div class="card-img-overlay rounded-0 product-overlay d-flex align-items-center justify-content-center">
<ul class="list-unstyled">
<li><a class="btn btn-success text-white" [routerLink]="'/shop-single'"><i class="far fa-heart"></i></a></li>
<li><a class="btn btn-success text-white mt-2" [routerLink]="'/shop-single'"><i class="far fa-eye"></i></a></li>
<li><a class="btn btn-success text-white mt-2" [routerLink]="'/shop-single'"><i class="fas fa-cart-plus"></i></a></li>
</ul>
</div>
</div>
<div class="card-body">
<a [routerLink]="'/shop-single'" class="h3 text-decoration-none">Oupidatat non</a>
<ul class="w-100 list-unstyled d-flex justify-content-between mb-0">
<li>M/L/X/XL</li>
<li class="pt-2">
<span class="product-color-dot color-dot-red float-left rounded-circle ml-1"></span>
<span class="product-color-dot color-dot-blue float-left rounded-circle ml-1"></span>
<span class="product-color-dot color-dot-black float-left rounded-circle ml-1"></span>
<span class="product-color-dot color-dot-light float-left rounded-circle ml-1"></span>
<span class="product-color-dot color-dot-green float-left rounded-circle ml-1"></span>
</li>
</ul>
<ul class="list-unstyled d-flex justify-content-center mb-1">
<li>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-muted fa fa-star"></i>
<i class="text-muted fa fa-star"></i>
</li>
</ul>
<p class="text-center mb-0">$250.00</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 product-wap rounded-0">
<div class="card rounded-0">
<img class="card-img rounded-0 img-fluid" src="assets/img/shop_06.jpg">
<div class="card-img-overlay rounded-0 product-overlay d-flex align-items-center justify-content-center">
<ul class="list-unstyled">
<li><a class="btn btn-success text-white" [routerLink]="'/shop-single'"><i class="far fa-heart"></i></a></li>
<li><a class="btn btn-success text-white mt-2" [routerLink]="'/shop-single'"><i class="far fa-eye"></i></a></li>
<li><a class="btn btn-success text-white mt-2" [routerLink]="'/shop-single'"><i class="fas fa-cart-plus"></i></a></li>
</ul>
</div>
</div>
<div class="card-body">
<a [routerLink]="'/shop-single'" class="h3 text-decoration-none">Oupidatat non</a>
<ul class="w-100 list-unstyled d-flex justify-content-between mb-0">
<li>M/L/X/XL</li>
<li class="pt-2">
<span class="product-color-dot color-dot-red float-left rounded-circle ml-1"></span>
<span class="product-color-dot color-dot-blue float-left rounded-circle ml-1"></span>
<span class="product-color-dot color-dot-black float-left rounded-circle ml-1"></span>
<span class="product-color-dot color-dot-light float-left rounded-circle ml-1"></span>
<span class="product-color-dot color-dot-green float-left rounded-circle ml-1"></span>
</li>
</ul>
<ul class="list-unstyled d-flex justify-content-center mb-1">
<li>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-muted fa fa-star"></i>
<i class="text-muted fa fa-star"></i>
</li>
</ul>
<p class="text-center mb-0">$250.00</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 product-wap rounded-0">
<div class="card rounded-0">
<img class="card-img rounded-0 img-fluid" src="assets/img/shop_07.jpg">
<div class="card-img-overlay rounded-0 product-overlay d-flex align-items-center justify-content-center">
<ul class="list-unstyled">
<li><a class="btn btn-success text-white" [routerLink]="'/shop-single'"><i class="far fa-heart"></i></a></li>
<li><a class="btn btn-success text-white mt-2" [routerLink]="'/shop-single'"><i class="far fa-eye"></i></a></li>
<li><a class="btn btn-success text-white mt-2" [routerLink]="'/shop-single'"><i class="fas fa-cart-plus"></i></a></li>
</ul>
</div>
</div>
<div class="card-body">
<a [routerLink]="'/shop-single'" class="h3 text-decoration-none">Oupidatat non</a>
<ul class="w-100 list-unstyled d-flex justify-content-between mb-0">
<li>M/L/X/XL</li>
<li class="pt-2">
<span class="product-color-dot color-dot-red float-left rounded-circle ml-1"></span>
<span class="product-color-dot color-dot-blue float-left rounded-circle ml-1"></span>
<span class="product-color-dot color-dot-black float-left rounded-circle ml-1"></span>
<span class="product-color-dot color-dot-light float-left rounded-circle ml-1"></span>
<span class="product-color-dot color-dot-green float-left rounded-circle ml-1"></span>
</li>
</ul>
<ul class="list-unstyled d-flex justify-content-center mb-1">
<li>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-muted fa fa-star"></i>
<i class="text-muted fa fa-star"></i>
</li>
</ul>
<p class="text-center mb-0">$250.00</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 product-wap rounded-0">
<div class="card rounded-0">
<img class="card-img rounded-0 img-fluid" src="assets/img/shop_08.jpg">
<div class="card-img-overlay rounded-0 product-overlay d-flex align-items-center justify-content-center">
<ul class="list-unstyled">
<li><a class="btn btn-success text-white" [routerLink]="'/shop-single'"><i class="far fa-heart"></i></a></li>
<li><a class="btn btn-success text-white mt-2" [routerLink]="'/shop-single'"><i class="far fa-eye"></i></a></li>
<li><a class="btn btn-success text-white mt-2" [routerLink]="'/shop-single'"><i class="fas fa-cart-plus"></i></a></li>
</ul>
</div>
</div>
<div class="card-body">
<a [routerLink]="'/shop-single'" class="h3 text-decoration-none">Oupidatat non</a>
<ul class="w-100 list-unstyled d-flex justify-content-between mb-0">
<li>M/L/X/XL</li>
<li class="pt-2">
<span class="product-color-dot color-dot-red float-left rounded-circle ml-1"></span>
<span class="product-color-dot color-dot-blue float-left rounded-circle ml-1"></span>
<span class="product-color-dot color-dot-black float-left rounded-circle ml-1"></span>
<span class="product-color-dot color-dot-light float-left rounded-circle ml-1"></span>
<span class="product-color-dot color-dot-green float-left rounded-circle ml-1"></span>
</li>
</ul>
<ul class="list-unstyled d-flex justify-content-center mb-1">
<li>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-muted fa fa-star"></i>
<i class="text-muted fa fa-star"></i>
</li>
</ul>
<p class="text-center mb-0">$250.00</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 product-wap rounded-0">
<div class="card rounded-0">
<img class="card-img rounded-0 img-fluid" src="assets/img/shop_09.jpg">
<div class="card-img-overlay rounded-0 product-overlay d-flex align-items-center justify-content-center">
<ul class="list-unstyled">
<li><a class="btn btn-success text-white" [routerLink]="'/shop-single'"><i class="far fa-heart"></i></a></li>
<li><a class="btn btn-success text-white mt-2" [routerLink]="'/shop-single'"><i class="far fa-eye"></i></a></li>
<li><a class="btn btn-success text-white mt-2" [routerLink]="'/shop-single'"><i class="fas fa-cart-plus"></i></a></li>
</ul>
</div>
</div>
<div class="card-body">
<a [routerLink]="'/shop-single'" class="h3 text-decoration-none">Oupidatat non</a>
<ul class="w-100 list-unstyled d-flex justify-content-between mb-0">
<li>M/L/X/XL</li>
<li class="pt-2">
<span class="product-color-dot color-dot-red float-left rounded-circle ml-1"></span>
<span class="product-color-dot color-dot-blue float-left rounded-circle ml-1"></span>
<span class="product-color-dot color-dot-black float-left rounded-circle ml-1"></span>
<span class="product-color-dot color-dot-light float-left rounded-circle ml-1"></span>
<span class="product-color-dot color-dot-green float-left rounded-circle ml-1"></span>
</li>
</ul>
<ul class="list-unstyled d-flex justify-content-center mb-1">
<li>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-warning fa fa-star"></i>
<i class="text-muted fa fa-star"></i>
<i class="text-muted fa fa-star"></i>
</li>
</ul>
<p class="text-center mb-0">$250.00</p>
</div>
</div>
</div>
</div>
<div div="row">
<ul class="pagination pagination-lg justify-content-end">
<li class="page-item disabled">
<a class="page-link active rounded-0 mr-3 shadow-sm border-top-0 border-left-0" href="#" tabindex="-1">1</a>
</li>
<li class="page-item">
<a class="page-link rounded-0 mr-3 shadow-sm border-top-0 border-left-0 text-dark" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link rounded-0 shadow-sm border-top-0 border-left-0 text-dark" href="#">3</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- End Content -->
<!-- Start Brands -->
<section class="bg-light py-5">
<div class="container my-4">
<div class="row text-center py-3">
<div class="col-lg-6 m-auto">
<h1 class="h1">Our Brands</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
Lorem ipsum dolor sit amet.
</p>
</div>
<div class="col-lg-9 m-auto tempaltemo-carousel">
<div class="row d-flex flex-row">
<!--Controls-->
<div class="col-1 align-self-center">
<a class="h1" href="#multi-item-example" role="button" data-bs-slide="prev">
<i class="text-light fas fa-chevron-left"></i>
</a>
</div>
<!--End Controls-->
<!--Carousel Wrapper-->
<div class="col">
<div class="carousel slide carousel-multi-item pt-2 pt-md-0" id="multi-item-example" data-bs-ride="carousel">
<!--Slides-->
<div class="carousel-inner product-links-wap" role="listbox">
<!--First slide-->
<div class="carousel-item active">
<div class="row">
<div class="col-3 p-md-5">
<a href="#"><img class="img-fluid brand-img" src="assets/img/brand_01.png" alt="Brand Logo"></a>
</div>
<div class="col-3 p-md-5">
<a href="#"><img class="img-fluid brand-img" src="assets/img/brand_02.png" alt="Brand Logo"></a>
</div>
<div class="col-3 p-md-5">
<a href="#"><img class="img-fluid brand-img" src="assets/img/brand_03.png" alt="Brand Logo"></a>
</div>
<div class="col-3 p-md-5">
<a href="#"><img class="img-fluid brand-img" src="assets/img/brand_04.png" alt="Brand Logo"></a>
</div>
</div>
</div>
<!--End First slide-->
<!--Second slide-->
<div class="carousel-item">
<div class="row">
<div class="col-3 p-md-5">
<a href="#"><img class="img-fluid brand-img" src="assets/img/brand_01.png" alt="Brand Logo"></a>
</div>
<div class="col-3 p-md-5">
<a href="#"><img class="img-fluid brand-img" src="assets/img/brand_02.png" alt="Brand Logo"></a>
</div>
<div class="col-3 p-md-5">
<a href="#"><img class="img-fluid brand-img" src="assets/img/brand_03.png" alt="Brand Logo"></a>
</div>
<div class="col-3 p-md-5">
<a href="#"><img class="img-fluid brand-img" src="assets/img/brand_04.png" alt="Brand Logo"></a>
</div>
</div>
</div>
<!--End Second slide-->
<!--Third slide-->
<div class="carousel-item">
<div class="row">
<div class="col-3 p-md-5">
<a href="#"><img class="img-fluid brand-img" src="assets/img/brand_01.png" alt="Brand Logo"></a>
</div>
<div class="col-3 p-md-5">
<a href="#"><img class="img-fluid brand-img" src="assets/img/brand_02.png" alt="Brand Logo"></a>
</div>
<div class="col-3 p-md-5">
<a href="#"><img class="img-fluid brand-img" src="assets/img/brand_03.png" alt="Brand Logo"></a>
</div>
<div class="col-3 p-md-5">
<a href="#"><img class="img-fluid brand-img" src="assets/img/brand_04.png" alt="Brand Logo"></a>
</div>
</div>
</div>
<!--End Third slide-->
</div>
<!--End Slides-->
</div>
</div>
<!--End Carousel Wrapper-->
<!--Controls-->
<div class="col-1 align-self-center">
<a class="h1" href="#multi-item-example" role="button" data-bs-slide="next">
<i class="text-light fas fa-chevron-right"></i>
</a>
</div>
<!--End Controls-->
</div>
</div>
</div>
</div>
</section>
<!--End Brands-->
Contact Component html
Form for user details:
<!-- Start Content Page -->
<div class="container-fluid bg-light py-5">
<div class="col-md-6 m-auto text-center">
<h1 class="h1">Contact Us</h1>
<p>
Proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet.
</p>
</div>
</div>
<!-- Start Map -->
<div id="mapid" style="width: 100%; height: 300px;"></div>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<script>
var mymap = L.map('mapid').setView([-23.013104, -43.394365, 13], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Zay Telmplte | Template Design by <a href="https://templatemo.com/">Templatemo</a> | Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(mymap);
L.marker([-23.013104, -43.394365, 13]).addTo(mymap)
.bindPopup("<b>Zay</b> eCommerce Template<br />Location.").openPopup();
mymap.scrollWheelZoom.disable();
mymap.touchZoom.disable();
</script>
<!-- Ena Map -->
<!-- Start Contact -->
<div class="container py-5">
<div class="row py-5">
<form class="col-md-9 m-auto" method="post" role="form">
<div class="row">
<div class="form-group col-md-6 mb-3">
<label for="inputname">Name</label>
<input type="text" class="form-control mt-1" id="name" name="name" placeholder="Name">
</div>
<div class="form-group col-md-6 mb-3">
<label for="inputemail">Email</label>
<input type="email" class="form-control mt-1" id="email" name="email" placeholder="Email">
</div>
</div>
<div class="mb-3">
<label for="inputsubject">Subject</label>
<input type="text" class="form-control mt-1" id="subject" name="subject" placeholder="Subject">
</div>
<div class="mb-3">
<label for="inputmessage">Message</label>
<textarea class="form-control mt-1" id="message" name="message" placeholder="Message" rows="8"></textarea>
</div>
<div class="row">
<div class="col text-end mt-2">
<button type="button" class="btn btn-success btn-lg px-3">Let’s Talk</button>
</div>
</div>
</form>
</div>
</div>
<!-- End Contact -->
About Component html
<section class="bg-success py-5">
<div class="container">
<div class="row align-items-center py-5">
<div class="col-md-8 text-white">
<h1>About Us</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="col-md-4">
<img src="assets/img/about-hero.svg" alt="About Hero">
</div>
</div>
</div>
</section>
<!-- Close Banner -->
<!-- Start Section -->
<section class="container py-5">
<div class="row text-center pt-5 pb-3">
<div class="col-lg-6 m-auto">
<h1 class="h1">Our Services</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
Lorem ipsum dolor sit amet.
</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-3 pb-5">
<div class="h-100 py-5 services-icon-wap shadow">
<div class="h1 text-success text-center"><i class="fa fa-truck fa-lg"></i></div>
<h2 class="h5 mt-4 text-center">Delivery Services</h2>
</div>
</div>
<div class="col-md-6 col-lg-3 pb-5">
<div class="h-100 py-5 services-icon-wap shadow">
<div class="h1 text-success text-center"><i class="fas fa-exchange-alt"></i></div>
<h2 class="h5 mt-4 text-center">Shipping & Return</h2>
</div>
</div>
<div class="col-md-6 col-lg-3 pb-5">
<div class="h-100 py-5 services-icon-wap shadow">
<div class="h1 text-success text-center"><i class="fa fa-percent"></i></div>
<h2 class="h5 mt-4 text-center">Promotion</h2>
</div>
</div>
<div class="col-md-6 col-lg-3 pb-5">
<div class="h-100 py-5 services-icon-wap shadow">
<div class="h1 text-success text-center"><i class="fa fa-user"></i></div>
<h2 class="h5 mt-4 text-center">24 Hours Service</h2>
</div>
</div>
</div>
</section>
<!-- End Section -->
<!-- Start Brands -->
<section class="bg-light py-5">
<div class="container my-4">
<div class="row text-center py-3">
<div class="col-lg-6 m-auto">
<h1 class="h1">Our Brands</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
Lorem ipsum dolor sit amet.
</p>
</div>
<div class="col-lg-9 m-auto tempaltemo-carousel">
<div class="row d-flex flex-row">
<!--Controls-->
<div class="col-1 align-self-center">
<a class="h1" href="#templatemo-slide-brand" role="button" data-bs-slide="prev">
<i class="text-light fas fa-chevron-left"></i>
</a>
</div>
<!--End Controls-->
<!--Carousel Wrapper-->
<div class="col">
<div class="carousel slide carousel-multi-item pt-2 pt-md-0" id="templatemo-slide-brand" data-bs-ride="carousel">
<!--Slides-->
<div class="carousel-inner product-links-wap" role="listbox">
<!--First slide-->
<div class="carousel-item active">
<div class="row">
<div class="col-3 p-md-5">
<a href="#"><img class="img-fluid brand-img" src="assets/img/brand_01.png" alt="Brand Logo"></a>
</div>
<div class="col-3 p-md-5">
<a href="#"><img class="img-fluid brand-img" src="assets/img/brand_02.png" alt="Brand Logo"></a>
</div>
<div class="col-3 p-md-5">
<a href="#"><img class="img-fluid brand-img" src="assets/img/brand_03.png" alt="Brand Logo"></a>
</div>
<div class="col-3 p-md-5">
<a href="#"><img class="img-fluid brand-img" src="assets/img/brand_04.png" alt="Brand Logo"></a>
</div>
</div>
</div>
<!--End First slide-->
<!--Second slide-->
<div class="carousel-item">
<div class="row">
<div class="col-3 p-md-5">
<a href="#"><img class="img-fluid brand-img" src="assets/img/brand_01.png" alt="Brand Logo"></a>
</div>
<div class="col-3 p-md-5">
<a href="#"><img class="img-fluid brand-img" src="assets/img/brand_02.png" alt="Brand Logo"></a>
</div>
<div class="col-3 p-md-5">
<a href="#"><img class="img-fluid brand-img" src="assets/img/brand_03.png" alt="Brand Logo"></a>
</div>
<div class="col-3 p-md-5">
<a href="#"><img class="img-fluid brand-img" src="assets/img/brand_04.png" alt="Brand Logo"></a>
</div>
</div>
</div>
<!--End Second slide-->
<!--Third slide-->
<div class="carousel-item">
<div class="row">
<div class="col-3 p-md-5">
<a href="#"><img class="img-fluid brand-img" src="assets/img/brand_01.png" alt="Brand Logo"></a>
</div>
<div class="col-3 p-md-5">
<a href="#"><img class="img-fluid brand-img" src="assets/img/brand_02.png" alt="Brand Logo"></a>
</div>
<div class="col-3 p-md-5">
<a href="#"><img class="img-fluid brand-img" src="assets/img/brand_03.png" alt="Brand Logo"></a>
</div>
<div class="col-3 p-md-5">
<a href="#"><img class="img-fluid brand-img" src="assets/img/brand_04.png" alt="Brand Logo"></a>
</div>
</div>
</div>
<!--End Third slide-->
</div>
<!--End Slides-->
</div>
</div>
<!--End Carousel Wrapper-->
<!--Controls-->
<div class="col-1 align-self-center">
<a class="h1" href="#templatemo-slide-brand" role="button" data-bs-slide="next">
<i class="text-light fas fa-chevron-right"></i>
</a>
</div>
<!--End Controls-->
</div>
</div>
</div>
</div>
</section>
<!--End Brands-->
Routing links
header.component.ts
import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
@Component({
selector: 'app-header',
standalone: true,
imports: [RouterLink],
templateUrl: './header.component.html',
styleUrl: './header.component.css'
})
export class HeaderComponent {
}
home.component.ts
import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
@Component({
selector: 'app-home',
standalone: true,
imports: [RouterLink],
templateUrl: './home.component.html',
styleUrl: './home.component.css'
})
export class HomeComponent {
}
shop.component.ts
import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
@Component({
selector: 'app-shop',
standalone: true,
imports: [RouterLink],
templateUrl: './shop.component.html',
styleUrl: './shop.component.css'
})
export class ShopComponent {
}
Show Data(app.component.html)
<app-header></app-header> <router-outlet></router-outlet> <app-footer></app-footer>
This should now be a complete static angular ecommerce app with Angular 19 and Bootstrap 5. If you’d like further refinements or additions, let me know and feel free to comment below!
Ajay
Thanks