Hello friends, welcome back to my blog. Today this blog post I will tell you, Convert Responsive Ecommerce HTML Template into Angular 17 Project.
Angular17 came and Bootstrap5 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 for Converting HTML Template into Angular 12 Project and please use carefully this to avoid the mistakes:
1. Firstly friends we need fresh angular 17 setup and for this we need to run below commands but if you already have angular 17 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 angulardemo //Create new Angular Project cd angulardemo // Go inside the Angular Project Folder ng g c header ng g c footer ng g c home
2. Now guy’s we need to add below code inside our project/src/app/header/header.component.html file:
<!--====== Content Card Style 4 Part Start ======-->
<section class="content-card-style-4 pt-70 pb-100">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-4 col-md-7 col-sm-8">
<div class="single-content mt-15 text-center">
<div class="content-icon">
<i class="mdi mdi-truck-fast"></i>
</div>
<div class="content-content">
<h4 class="title"><a href="javascript:void(0)">Two-hour delivery</a></h4>
<p>Available in most metros on selected in-stock products</p>
<a href="javascript:void(0)" class="more">learn more</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-7 col-sm-8">
<div class="single-content mt-15 text-center">
<div class="content-icon">
<i class="mdi mdi-message-text"></i>
</div>
<div class="content-content">
<h4 class="title"><a href="javascript:void(0)">Get help buying</a></h4>
<p>Have a question? Call a Specialist or chat online for help</p>
<a href="#" class="more">Contact us</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-7 col-sm-8">
<div class="single-content mt-15 text-center">
<div class="content-icon">
<i class="mdi mdi-ticket-percent"></i>
</div>
<div class="content-content">
<h4 class="title"><a href="javascript:void(0)">Find the card for you</a></h4>
<p>Get 3% Daily Cash with special financing offers from us</p>
<a href="javascript:void(0)" class="more">learn more</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!--====== Content Card Style 4 Part Ends ======-->
<!--====== Product Style 1 Part Start ======-->
<section class="product-wrapper pt-100 pb-70">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="mb-50">
<h1 class="heading-1 font-weight-700">Featured Items</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-sm-6">
<div class="product-style-1 mt-30">
<div class="product-image">
<span class="icon-text text-style-1">NEW</span>
<div class="product-active">
<div class="product-item active">
<img src="assets/images/product-1/product-1.jpg" alt="product">
</div>
<div class="product-item">
<img src="assets/images/product-1/product-2.jpg" alt="product">
</div>
</div>
<a class="add-wishlist" href="javascript:void(0)">
<i class="mdi mdi-heart-outline"></i>
</a>
</div>
<div class="product-content text-center">
<h4 class="title"><a href="#">Metro 38 Date</a></h4>
<p>Reference 1102</p>
<a href="javascript:void(0)" class="main-btn secondary-1-btn">
<img src="assets/images/icon-svg/cart-7.svg" alt="">
$ 399
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="product-style-1 mt-30">
<div class="product-image">
<span class="icon-text text-style-1">20% off</span>
<div class="product-active">
<div class="product-item active">
<img src="assets/images/product-1/product-5.jpg" alt="product">
</div>
<div class="product-item">
<img src="assets/images/product-1/product-6.jpg" alt="product">
</div>
</div>
<a class="add-wishlist" href="javascript:void(0)">
<i class="mdi mdi-heart-outline"></i>
</a>
</div>
<div class="product-content text-center">
<h4 class="title"><a href="#">Lady Shoe</a></h4>
<p>Reference 1103</p>
<a href="javascript:void(0)" class="main-btn secondary-1-btn">
<img src="assets/images/icon-svg/cart-7.svg" alt="">
$ 399
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="product-style-1 mt-30">
<div class="product-image">
<div class="product-active">
<div class="product-item active">
<img src="assets/images/product-1/product-3.jpg" alt="product">
</div>
<div class="product-item">
<img src="assets/images/product-1/product-4.jpg" alt="product">
</div>
</div>
<a class="add-wishlist" href="javascript:void(0)">
<i class="mdi mdi-heart-outline"></i>
</a>
</div>
<div class="product-content text-center">
<h4 class="title"><a href="#">Casio 09 Date</a></h4>
<p>Reference 1112</p>
<a href="javascript:void(0)" class="main-btn secondary-1-btn">
<img src="assets/images/icon-svg/cart-7.svg" alt="">
$ 399
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="product-style-1 mt-30">
<div class="product-image">
<div class="product-active">
<div class="product-item active">
<img src="assets/images/product-1/product-7.jpg" alt="product">
</div>
<div class="product-item">
<img src="assets/images/product-1/product-8.jpg" alt="product">
</div>
</div>
<a class="add-wishlist" href="javascript:void(0)">
<i class="mdi mdi-heart-outline"></i>
</a>
</div>
<div class="product-content text-center">
<h4 class="title"><a href="#">Man's Shoe</a></h4>
<p>Reference 102</p>
<a href="javascript:void(0)" class="main-btn secondary-1-btn">
<img src="assets/images/icon-svg/cart-7.svg" alt="">
$ 399
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="product-style-1 mt-30">
<div class="product-image">
<div class="product-active">
<div class="product-item active">
<img src="assets/images/product-1/product-9.jpg" alt="product">
</div>
<div class="product-item">
<img src="assets/images/product-1/product-10.jpg" alt="product">
</div>
</div>
<a class="add-wishlist" href="javascript:void(0)">
<i class="mdi mdi-heart-outline"></i>
</a>
</div>
<div class="product-content text-center">
<h4 class="title"><a href="#">Polo T Shirt</a></h4>
<p>Reference 1202</p>
<a href="javascript:void(0)" class="main-btn secondary-1-btn">
<img src="assets/images/icon-svg/cart-7.svg" alt="">
$ 399
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="product-style-1 mt-30">
<div class="product-image">
<span class="icon-text text-style-1">40% off</span>
<div class="product-active">
<div class="product-item active">
<img src="assets/images/product-1/product-11.jpg" alt="product">
</div>
<div class="product-item">
<img src="assets/images/product-1/product-12.jpg" alt="product">
</div>
</div>
<a class="add-wishlist" href="javascript:void(0)">
<i class="mdi mdi-heart-outline"></i>
</a>
</div>
<div class="product-content text-center">
<h4 class="title"><a href="#">Lotto T Shirt</a></h4>
<p>Reference 112</p>
<a href="javascript:void(0)" class="main-btn secondary-1-btn">
<img src="assets/images/icon-svg/cart-7.svg" alt="">
$ 399
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!--====== Product Style 1 Part Ends ======-->
<!--====== Product Style 7 Part Start ======-->
<section class="product-wrapper pt-100 pb-100">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="mb-50">
<h1 class="heading-1 font-weight-700">Recent Items</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="product-style-7 mt-30">
<div class="product-image">
<div class="product-active">
<div class="product-item active">
<img src="assets/images/product-4/product-1.jpg" alt="product">
</div>
<div class="product-item">
<img src="assets/images/product-4/product-2.jpg" alt="product">
</div>
</div>
</div>
<div class="product-content">
<ul class="product-meta">
<li>
<a class="add-wishlist" href="javascript:void(0)">
<i class="mdi mdi-heart-outline"></i>
Add to Favorite
</a>
</li>
<li>
<span><i class="mdi mdi-star"></i> 4.5/5</span>
</li>
</ul>
<h4 class="title"><a href="#">Metro 38 Date</a></h4>
<p>Reference 1102</p>
<span class="price">$ 399</span>
<a href="javascript:void(0)" class="main-btn primary-btn">
<img src="assets/images/icon-svg/cart-4.svg" alt="">
Add to Cart
</a>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="product-style-7 mt-30">
<div class="product-image">
<div class="product-active">
<div class="product-item active">
<img src="assets/images/product-4/product-3.jpg" alt="product">
</div>
<div class="product-item">
<img src="assets/images/product-4/product-4.jpg" alt="product">
</div>
</div>
</div>
<div class="product-content">
<ul class="product-meta">
<li>
<a class="add-wishlist" href="javascript:void(0)">
<i class="mdi mdi-heart-outline"></i>
Add to Favorite
</a>
</li>
<li>
<span><i class="mdi mdi-star"></i> 4.5/5</span>
</li>
</ul>
<h4 class="title"><a href="#">Man's Shoe</a></h4>
<p>Reference 1102</p>
<span class="price">$ 399</span>
<a href="javascript:void(0)" class="main-btn primary-btn">
<img src="assets/images/icon-svg/cart-4.svg" alt="">
Add to Cart
</a>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="product-style-7 mt-30">
<div class="product-image">
<span class="icon-text text-style-1">20% off</span>
<div class="product-active">
<div class="product-item active">
<img src="assets/images/product-4/product-5.jpg" alt="product">
</div>
<div class="product-item">
<img src="assets/images/product-4/product-6.jpg" alt="product">
</div>
</div>
</div>
<div class="product-content">
<ul class="product-meta">
<li>
<a class="add-wishlist" href="javascript:void(0)">
<i class="mdi mdi-heart-outline"></i>
Add to Favorite
</a>
</li>
<li>
<span><i class="mdi mdi-star"></i> 4.5/5</span>
</li>
</ul>
<h4 class="title"><a href="#">Lotto T Shirt</a></h4>
<p>Reference 1102</p>
<span class="price">$ 399</span>
<a href="javascript:void(0)" class="main-btn primary-btn">
<img src="assets/images/icon-svg/cart-4.svg" alt="">
Add to Cart
</a>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="product-style-7 mt-30">
<div class="product-image">
<div class="product-active">
<div class="product-item active">
<img src="assets/images/product-4/product-7.jpg" alt="product">
</div>
<div class="product-item">
<img src="assets/images/product-4/product-8.jpg" alt="product">
</div>
</div>
</div>
<div class="product-content">
<ul class="product-meta">
<li>
<a class="add-wishlist" href="javascript:void(0)">
<i class="mdi mdi-heart-outline"></i>
Add to Favorite
</a>
</li>
<li>
<span><i class="mdi mdi-star"></i> 4.5/5</span>
</li>
</ul>
<h4 class="title"><a href="#">Smart Watch</a></h4>
<p>Reference 1102</p>
<span class="price">$ 399</span>
<a href="javascript:void(0)" class="main-btn primary-btn">
<img src="assets/images/icon-svg/cart-4.svg" alt="">
Add to Cart
</a>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="product-style-7 mt-30">
<div class="product-image">
<div class="product-active">
<div class="product-item active">
<img src="assets/images/product-4/product-9.jpg" alt="product">
</div>
<div class="product-item">
<img src="assets/images/product-4/product-10.jpg" alt="product">
</div>
</div>
</div>
<div class="product-content">
<ul class="product-meta">
<li>
<a class="add-wishlist" href="javascript:void(0)">
<i class="mdi mdi-heart-outline"></i>
Add to Favorite
</a>
</li>
<li>
<span><i class="mdi mdi-star"></i> 4.5/5</span>
</li>
</ul>
<h4 class="title"><a href="#">Smart Gadget</a></h4>
<p>Reference 1102</p>
<span class="price">$ 399</span>
<a href="javascript:void(0)" class="main-btn primary-btn">
<img src="assets/images/icon-svg/cart-4.svg" alt="">
Add to Cart
</a>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="product-style-7 mt-30">
<div class="product-image">
<span class="icon-text text-style-1">Out Of Stoke</span>
<div class="product-active">
<div class="product-item active">
<img src="assets/images/product-4/product-11.jpg" alt="product">
</div>
<div class="product-item">
<img src="assets/images/product-4/product-12.jpg" alt="product">
</div>
</div>
</div>
<div class="product-content">
<ul class="product-meta">
<li>
<a class="add-wishlist" href="javascript:void(0)">
<i class="mdi mdi-heart-outline"></i>
Add to Favorite
</a>
</li>
<li>
<span><i class="mdi mdi-star"></i> 4.5/5</span>
</li>
</ul>
<h4 class="title"><a href="#">Polo Cap</a></h4>
<p>Reference 1102</p>
<span class="price">$ 399</span>
<a href="javascript:void(0)" class="main-btn primary-btn">
<img src="assets/images/icon-svg/cart-4.svg" alt="">
Add to Cart
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!--====== Product Style 7 Part Ends ======-->
<!--====== Features Part Start ======-->
<section class="features-section pt-100 pb-50 gray-bg">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="features-title text-center mb-50">
<h1 class="heading-1 font-weight-700">Awesome Features</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="single-feature-wrapper">
<div class="feature-icon">
<i class="lni lni-cog"></i>
</div>
<div class="feature-content">
<h5 class="heading-5 font-weight-500 mb-10">Bootstrap 5</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta quos iste veniam.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single-feature-wrapper">
<div class="feature-icon">
<i class="lni lni-code"></i>
</div>
<div class="feature-content">
<h5 class="heading-5 font-weight-500 mb-10">Clean Design</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta quos iste veniam.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single-feature-wrapper">
<div class="feature-icon">
<i class="lni lni-layers"></i>
</div>
<div class="feature-content">
<h5 class="heading-5 font-weight-500 mb-10">Included Business Pages</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta quos iste veniam.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single-feature-wrapper">
<div class="feature-icon">
<i class="lni lni-laptop-phone"></i>
</div>
<div class="feature-content">
<h5 class="heading-5 font-weight-500 mb-10">Fully Responsive</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta quos iste veniam.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single-feature-wrapper">
<div class="feature-icon">
<i class="lni lni-brush"></i>
</div>
<div class="feature-content">
<h5 class="heading-5 font-weight-500 mb-10">Completely Customizable</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta quos iste veniam.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single-feature-wrapper">
<div class="feature-icon">
<i class="lni lni-rocket"></i>
</div>
<div class="feature-content">
<h5 class="heading-5 font-weight-500 mb-10">Fast and Well-optimized</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta quos iste veniam.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!--====== Features Part Ends ======-->
<!--====== Clients Logo Part Start ======-->
<section class="clients-logo-section pt-70 pb-70">
<div class="container">
<div class="row client-logo-active">
<div class="col-lg-3">
<div class="single-logo-wrapper">
<img src="assets/images/client-logo/uideck-logo.svg" alt="">
</div>
</div>
<div class="col-lg-3">
<div class="single-logo-wrapper">
<img src="assets/images/client-logo/graygrids-logo.svg" alt="">
</div>
</div>
<div class="col-lg-3">
<div class="single-logo-wrapper">
<img src="assets/images/client-logo/lineicons-logo.svg" alt="">
</div>
</div>
<div class="col-lg-3">
<div class="single-logo-wrapper">
<img src="assets/images/client-logo/pagebulb-logo.svg" alt="">
</div>
</div>
</div>
</div>
</section>
<!--====== Clients Logo Part Ends ======-->
<!--====== Subscribe Part Start ======-->
<section class="subscribe-section pt-70 pb-70 bg-primary-4">
<div class="container">
<div class="row">
<div class="col-lg-6 mx-auto">
<div class="heading text-center">
<h1 class="heading-1 font-weight-700 text-white mb-10">Subscribe Newsletter</h1>
<p class="gray-3">Be the first to know when new products drop and get behind-the-scenes content
straight.</p>
</div>
<div class="subscribe-form">
<form action="#">
<div class="single-form form-default">
<label class="text-white-50">Enter your email address</label>
<div class="form-input">
<input type="text" placeholder="user@email.com">
<i class="mdi mdi-account"></i>
<button class="main-btn primary-btn"><span class="mdi mdi-send"></span></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!--====== Subscribe Part Ends ======-->
3. Now guy’s we need to add below code inside our project/src/app/footer/footer.component.html file:
<!--====== Footer Style 3 Part Start ======-->
<section class="footer-style-3 pt-100 pb-100">
<div class="container">
<div class="footer-top">
<div class="row justify-content-center">
<div class="col-lg-5 col-md-7 col-sm-10">
<div class="footer-logo text-center">
<a href="index.html">
<img src="assets/images/logo.svg" alt="">
</a>
</div>
<h5 class="heading-5 text-center mt-30">Follow Us</h5>
<ul class="footer-follow text-center">
<li><a href="javascript:void(0)"><i class="lni lni-facebook-filled"></i></a></li>
<li><a href="javascript:void(0)"><i class="lni lni-twitter-filled"></i></a></li>
<li><a href="javascript:void(0)"><i class="lni lni-linkedin-original"></i></a></li>
<li><a href="javascript:void(0)"><i class="lni lni-instagram-original"></i></a></li>
<li><a href="javascript:void(0)"><i class="lni lni-whatsapp"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="footer-widget-wrapper text-center pt-20">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6">
<div class="footer-widget">
<h5 class="footer-title">PRODUCT</h5>
<ul class="footer-link">
<li><a href="javascript:void(0)">Quest</a></li>
<li><a href="javascript:void(0)">Rift S</a></li>
<li><a href="javascript:void(0)">Gear VR</a></li>
<li><a href="javascript:void(0)">Apps and Games</a></li>
<li><a href="javascript:void(0)">Apps and Games</a></li>
<li><a href="javascript:void(0)">Oculus for Business</a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6">
<div class="footer-widget">
<h5 class="footer-title">DEVELOPERS</h5>
<ul class="footer-link">
<li><a href="javascript:void(0)">Developer Centre</a></li>
<li><a href="javascript:void(0)">Docs</a></li>
<li><a href="javascript:void(0)">Downloads</a></li>
<li><a href="javascript:void(0)">Tools</a></li>
<li><a href="javascript:void(0)">Developer Blog</a></li>
<li><a href="javascript:void(0)">Developer Forums</a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6">
<div class="footer-widget">
<h5 class="footer-title">PRODUCT</h5>
<ul class="footer-link">
<li><a href="javascript:void(0)">Blog</a></li>
<li><a href="javascript:void(0)">Careers</a></li>
<li><a href="javascript:void(0)">Brand Centre</a></li>
<li><a href="javascript:void(0)">Connect</a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6">
<div class="footer-widget">
<h5 class="footer-title">PRODUCT</h5>
<ul class="footer-link">
<li><a href="javascript:void(0)">VR for Good</a></li>
<li><a href="javascript:void(0)">Launch Pad</a></li>
<li><a href="javascript:void(0)">Creators Lab</a></li>
<li><a href="javascript:void(0)">Forums</a></li>
<li><a href="javascript:void(0)">Support</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer-copyright text-center">
<p>with love <a href="#" rel="nofollow" target="_blank">Jassa</a>. Basesd on <a href="#" rel="nofollow" target="_blank">eCommerceHTML</a>
</p>
</div>
</div>
</section>
<!--====== Footer Style 3 Part Ends ======-->
4. Now guy’s we need to add below code inside our project/src/app/home/home.component.html file:
<!--====== Content Card Style 4 Part Start ======-->
<section class="content-card-style-4 pt-70 pb-100">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-4 col-md-7 col-sm-8">
<div class="single-content mt-15 text-center">
<div class="content-icon">
<i class="mdi mdi-truck-fast"></i>
</div>
<div class="content-content">
<h4 class="title"><a href="javascript:void(0)">Two-hour delivery</a></h4>
<p>Available in most metros on selected in-stock products</p>
<a href="javascript:void(0)" class="more">learn more</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-7 col-sm-8">
<div class="single-content mt-15 text-center">
<div class="content-icon">
<i class="mdi mdi-message-text"></i>
</div>
<div class="content-content">
<h4 class="title"><a href="javascript:void(0)">Get help buying</a></h4>
<p>Have a question? Call a Specialist or chat online for help</p>
<a href="#" class="more">Contact us</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-7 col-sm-8">
<div class="single-content mt-15 text-center">
<div class="content-icon">
<i class="mdi mdi-ticket-percent"></i>
</div>
<div class="content-content">
<h4 class="title"><a href="javascript:void(0)">Find the card for you</a></h4>
<p>Get 3% Daily Cash with special financing offers from us</p>
<a href="javascript:void(0)" class="more">learn more</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!--====== Content Card Style 4 Part Ends ======-->
<!--====== Product Style 1 Part Start ======-->
<section class="product-wrapper pt-100 pb-70">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="mb-50">
<h1 class="heading-1 font-weight-700">Featured Items</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-sm-6">
<div class="product-style-1 mt-30">
<div class="product-image">
<span class="icon-text text-style-1">NEW</span>
<div class="product-active">
<div class="product-item active">
<img src="assets/images/product-1/product-1.jpg" alt="product">
</div>
<div class="product-item">
<img src="assets/images/product-1/product-2.jpg" alt="product">
</div>
</div>
<a class="add-wishlist" href="javascript:void(0)">
<i class="mdi mdi-heart-outline"></i>
</a>
</div>
<div class="product-content text-center">
<h4 class="title"><a href="#">Metro 38 Date</a></h4>
<p>Reference 1102</p>
<a href="javascript:void(0)" class="main-btn secondary-1-btn">
<img src="assets/images/icon-svg/cart-7.svg" alt="">
$ 399
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="product-style-1 mt-30">
<div class="product-image">
<span class="icon-text text-style-1">20% off</span>
<div class="product-active">
<div class="product-item active">
<img src="assets/images/product-1/product-5.jpg" alt="product">
</div>
<div class="product-item">
<img src="assets/images/product-1/product-6.jpg" alt="product">
</div>
</div>
<a class="add-wishlist" href="javascript:void(0)">
<i class="mdi mdi-heart-outline"></i>
</a>
</div>
<div class="product-content text-center">
<h4 class="title"><a href="#">Lady Shoe</a></h4>
<p>Reference 1103</p>
<a href="javascript:void(0)" class="main-btn secondary-1-btn">
<img src="assets/images/icon-svg/cart-7.svg" alt="">
$ 399
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="product-style-1 mt-30">
<div class="product-image">
<div class="product-active">
<div class="product-item active">
<img src="assets/images/product-1/product-3.jpg" alt="product">
</div>
<div class="product-item">
<img src="assets/images/product-1/product-4.jpg" alt="product">
</div>
</div>
<a class="add-wishlist" href="javascript:void(0)">
<i class="mdi mdi-heart-outline"></i>
</a>
</div>
<div class="product-content text-center">
<h4 class="title"><a href="#">Casio 09 Date</a></h4>
<p>Reference 1112</p>
<a href="javascript:void(0)" class="main-btn secondary-1-btn">
<img src="assets/images/icon-svg/cart-7.svg" alt="">
$ 399
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="product-style-1 mt-30">
<div class="product-image">
<div class="product-active">
<div class="product-item active">
<img src="assets/images/product-1/product-7.jpg" alt="product">
</div>
<div class="product-item">
<img src="assets/images/product-1/product-8.jpg" alt="product">
</div>
</div>
<a class="add-wishlist" href="javascript:void(0)">
<i class="mdi mdi-heart-outline"></i>
</a>
</div>
<div class="product-content text-center">
<h4 class="title"><a href="#">Man's Shoe</a></h4>
<p>Reference 102</p>
<a href="javascript:void(0)" class="main-btn secondary-1-btn">
<img src="assets/images/icon-svg/cart-7.svg" alt="">
$ 399
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="product-style-1 mt-30">
<div class="product-image">
<div class="product-active">
<div class="product-item active">
<img src="assets/images/product-1/product-9.jpg" alt="product">
</div>
<div class="product-item">
<img src="assets/images/product-1/product-10.jpg" alt="product">
</div>
</div>
<a class="add-wishlist" href="javascript:void(0)">
<i class="mdi mdi-heart-outline"></i>
</a>
</div>
<div class="product-content text-center">
<h4 class="title"><a href="#">Polo T Shirt</a></h4>
<p>Reference 1202</p>
<a href="javascript:void(0)" class="main-btn secondary-1-btn">
<img src="assets/images/icon-svg/cart-7.svg" alt="">
$ 399
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="product-style-1 mt-30">
<div class="product-image">
<span class="icon-text text-style-1">40% off</span>
<div class="product-active">
<div class="product-item active">
<img src="assets/images/product-1/product-11.jpg" alt="product">
</div>
<div class="product-item">
<img src="assets/images/product-1/product-12.jpg" alt="product">
</div>
</div>
<a class="add-wishlist" href="javascript:void(0)">
<i class="mdi mdi-heart-outline"></i>
</a>
</div>
<div class="product-content text-center">
<h4 class="title"><a href="#">Lotto T Shirt</a></h4>
<p>Reference 112</p>
<a href="javascript:void(0)" class="main-btn secondary-1-btn">
<img src="assets/images/icon-svg/cart-7.svg" alt="">
$ 399
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!--====== Product Style 1 Part Ends ======-->
<!--====== Product Style 7 Part Start ======-->
<section class="product-wrapper pt-100 pb-100">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="mb-50">
<h1 class="heading-1 font-weight-700">Recent Items</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="product-style-7 mt-30">
<div class="product-image">
<div class="product-active">
<div class="product-item active">
<img src="assets/images/product-4/product-1.jpg" alt="product">
</div>
<div class="product-item">
<img src="assets/images/product-4/product-2.jpg" alt="product">
</div>
</div>
</div>
<div class="product-content">
<ul class="product-meta">
<li>
<a class="add-wishlist" href="javascript:void(0)">
<i class="mdi mdi-heart-outline"></i>
Add to Favorite
</a>
</li>
<li>
<span><i class="mdi mdi-star"></i> 4.5/5</span>
</li>
</ul>
<h4 class="title"><a href="#">Metro 38 Date</a></h4>
<p>Reference 1102</p>
<span class="price">$ 399</span>
<a href="javascript:void(0)" class="main-btn primary-btn">
<img src="assets/images/icon-svg/cart-4.svg" alt="">
Add to Cart
</a>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="product-style-7 mt-30">
<div class="product-image">
<div class="product-active">
<div class="product-item active">
<img src="assets/images/product-4/product-3.jpg" alt="product">
</div>
<div class="product-item">
<img src="assets/images/product-4/product-4.jpg" alt="product">
</div>
</div>
</div>
<div class="product-content">
<ul class="product-meta">
<li>
<a class="add-wishlist" href="javascript:void(0)">
<i class="mdi mdi-heart-outline"></i>
Add to Favorite
</a>
</li>
<li>
<span><i class="mdi mdi-star"></i> 4.5/5</span>
</li>
</ul>
<h4 class="title"><a href="#">Man's Shoe</a></h4>
<p>Reference 1102</p>
<span class="price">$ 399</span>
<a href="javascript:void(0)" class="main-btn primary-btn">
<img src="assets/images/icon-svg/cart-4.svg" alt="">
Add to Cart
</a>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="product-style-7 mt-30">
<div class="product-image">
<span class="icon-text text-style-1">20% off</span>
<div class="product-active">
<div class="product-item active">
<img src="assets/images/product-4/product-5.jpg" alt="product">
</div>
<div class="product-item">
<img src="assets/images/product-4/product-6.jpg" alt="product">
</div>
</div>
</div>
<div class="product-content">
<ul class="product-meta">
<li>
<a class="add-wishlist" href="javascript:void(0)">
<i class="mdi mdi-heart-outline"></i>
Add to Favorite
</a>
</li>
<li>
<span><i class="mdi mdi-star"></i> 4.5/5</span>
</li>
</ul>
<h4 class="title"><a href="#">Lotto T Shirt</a></h4>
<p>Reference 1102</p>
<span class="price">$ 399</span>
<a href="javascript:void(0)" class="main-btn primary-btn">
<img src="assets/images/icon-svg/cart-4.svg" alt="">
Add to Cart
</a>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="product-style-7 mt-30">
<div class="product-image">
<div class="product-active">
<div class="product-item active">
<img src="assets/images/product-4/product-7.jpg" alt="product">
</div>
<div class="product-item">
<img src="assets/images/product-4/product-8.jpg" alt="product">
</div>
</div>
</div>
<div class="product-content">
<ul class="product-meta">
<li>
<a class="add-wishlist" href="javascript:void(0)">
<i class="mdi mdi-heart-outline"></i>
Add to Favorite
</a>
</li>
<li>
<span><i class="mdi mdi-star"></i> 4.5/5</span>
</li>
</ul>
<h4 class="title"><a href="#">Smart Watch</a></h4>
<p>Reference 1102</p>
<span class="price">$ 399</span>
<a href="javascript:void(0)" class="main-btn primary-btn">
<img src="assets/images/icon-svg/cart-4.svg" alt="">
Add to Cart
</a>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="product-style-7 mt-30">
<div class="product-image">
<div class="product-active">
<div class="product-item active">
<img src="assets/images/product-4/product-9.jpg" alt="product">
</div>
<div class="product-item">
<img src="assets/images/product-4/product-10.jpg" alt="product">
</div>
</div>
</div>
<div class="product-content">
<ul class="product-meta">
<li>
<a class="add-wishlist" href="javascript:void(0)">
<i class="mdi mdi-heart-outline"></i>
Add to Favorite
</a>
</li>
<li>
<span><i class="mdi mdi-star"></i> 4.5/5</span>
</li>
</ul>
<h4 class="title"><a href="#">Smart Gadget</a></h4>
<p>Reference 1102</p>
<span class="price">$ 399</span>
<a href="javascript:void(0)" class="main-btn primary-btn">
<img src="assets/images/icon-svg/cart-4.svg" alt="">
Add to Cart
</a>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="product-style-7 mt-30">
<div class="product-image">
<span class="icon-text text-style-1">Out Of Stoke</span>
<div class="product-active">
<div class="product-item active">
<img src="assets/images/product-4/product-11.jpg" alt="product">
</div>
<div class="product-item">
<img src="assets/images/product-4/product-12.jpg" alt="product">
</div>
</div>
</div>
<div class="product-content">
<ul class="product-meta">
<li>
<a class="add-wishlist" href="javascript:void(0)">
<i class="mdi mdi-heart-outline"></i>
Add to Favorite
</a>
</li>
<li>
<span><i class="mdi mdi-star"></i> 4.5/5</span>
</li>
</ul>
<h4 class="title"><a href="#">Polo Cap</a></h4>
<p>Reference 1102</p>
<span class="price">$ 399</span>
<a href="javascript:void(0)" class="main-btn primary-btn">
<img src="assets/images/icon-svg/cart-4.svg" alt="">
Add to Cart
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!--====== Product Style 7 Part Ends ======-->
<!--====== Features Part Start ======-->
<section class="features-section pt-100 pb-50 gray-bg">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="features-title text-center mb-50">
<h1 class="heading-1 font-weight-700">Awesome Features</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="single-feature-wrapper">
<div class="feature-icon">
<i class="lni lni-cog"></i>
</div>
<div class="feature-content">
<h5 class="heading-5 font-weight-500 mb-10">Bootstrap 5</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta quos iste veniam.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single-feature-wrapper">
<div class="feature-icon">
<i class="lni lni-code"></i>
</div>
<div class="feature-content">
<h5 class="heading-5 font-weight-500 mb-10">Clean Design</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta quos iste veniam.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single-feature-wrapper">
<div class="feature-icon">
<i class="lni lni-layers"></i>
</div>
<div class="feature-content">
<h5 class="heading-5 font-weight-500 mb-10">Included Business Pages</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta quos iste veniam.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single-feature-wrapper">
<div class="feature-icon">
<i class="lni lni-laptop-phone"></i>
</div>
<div class="feature-content">
<h5 class="heading-5 font-weight-500 mb-10">Fully Responsive</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta quos iste veniam.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single-feature-wrapper">
<div class="feature-icon">
<i class="lni lni-brush"></i>
</div>
<div class="feature-content">
<h5 class="heading-5 font-weight-500 mb-10">Completely Customizable</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta quos iste veniam.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single-feature-wrapper">
<div class="feature-icon">
<i class="lni lni-rocket"></i>
</div>
<div class="feature-content">
<h5 class="heading-5 font-weight-500 mb-10">Fast and Well-optimized</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta quos iste veniam.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!--====== Features Part Ends ======-->
<!--====== Clients Logo Part Start ======-->
<section class="clients-logo-section pt-70 pb-70">
<div class="container">
<div class="row client-logo-active">
<div class="col-lg-3">
<div class="single-logo-wrapper">
<img src="assets/images/client-logo/uideck-logo.svg" alt="">
</div>
</div>
<div class="col-lg-3">
<div class="single-logo-wrapper">
<img src="assets/images/client-logo/graygrids-logo.svg" alt="">
</div>
</div>
<div class="col-lg-3">
<div class="single-logo-wrapper">
<img src="assets/images/client-logo/lineicons-logo.svg" alt="">
</div>
</div>
<div class="col-lg-3">
<div class="single-logo-wrapper">
<img src="assets/images/client-logo/pagebulb-logo.svg" alt="">
</div>
</div>
</div>
</div>
</section>
<!--====== Clients Logo Part Ends ======-->
<!--====== Subscribe Part Start ======-->
<section class="subscribe-section pt-70 pb-70 bg-primary-4">
<div class="container">
<div class="row">
<div class="col-lg-6 mx-auto">
<div class="heading text-center">
<h1 class="heading-1 font-weight-700 text-white mb-10">Subscribe Newsletter</h1>
<p class="gray-3">Be the first to know when new products drop and get behind-the-scenes content
straight.</p>
</div>
<div class="subscribe-form">
<form action="#">
<div class="single-form form-default">
<label class="text-white-50">Enter your email address</label>
<div class="form-input">
<input type="text" placeholder="user@email.com">
<i class="mdi mdi-account"></i>
<button class="main-btn primary-btn"><span class="mdi mdi-send"></span></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!--====== Subscribe Part Ends ======-->
5. Now guy’s we need to add below inside project/src/app/app.component.html file:
<app-header></app-header> <app-home></app-home> <app-footer></app-footer>
6. Now guy’s we need to add below code inside our project/src/index.html file:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Ecommerceangular</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--====== Favicon Icon ======--> <link rel="shortcut icon" href="assets/images/favicon.png" type="image/png"> <!--====== Slick CSS ======--> <link rel="stylesheet" href="assets/css/slick.css"> <!--====== Line Icons CSS ======--> <link rel="stylesheet" href="assets/css/LineIcons.css"> <!--====== Material Design Icons CSS ======--> <link rel="stylesheet" href="assets/css/materialdesignicons.min.css"> <!--====== Jquery Ui CSS ======--> <link rel="stylesheet" href="assets/css/jquery-ui.min.css"> <!--====== nice select CSS ======--> <link rel="stylesheet" href="assets/css/nice-select.css"> <!--====== Bootstrap CSS ======--> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> <!--====== Default CSS ======--> <link rel="stylesheet" href="assets/css/default.css"> <!--====== Style CSS ======--> <link rel="stylesheet" href="assets/css/style.css"> </head> <body> <app-root></app-root> <!--====== Bootstrap 5 js ======--> <script src="assets/js/popper.min.js"></script> <script src="assets/js/bootstrap.min.js"></script> <!--====== Jquery js ======--> <script src="assets/js/jquery-3.5.1.min.js"></script> <script src="assets/js/modernizr-3.7.1.min.js"></script> <!--====== Slick js ======--> <script src="assets/js/slick.min.js"></script> <!--====== Accordion Steps Form js ======--> <script src="assets/js/jquery-vj-accordion-steps.js"></script> <!--====== Jquery Ui js ======--> <script src="assets/js/jquery-ui.min.js"></script> <!--====== Form validator js ======--> <script src="assets/js/jquery.form-validator.min.js"></script> <!--====== nice select js ======--> <script src="assets/js/jquery.nice-select.min.js"></script> <!--====== formatter js ======--> <script src="assets/js/jquery.formatter.min.js"></script> <!--====== Main js ======--> <script src="assets/js/count-up.min.js"></script> <!--====== Main js ======--> <script src="assets/js/main.js"></script> </body> </html>
7. Now guy’s we need to add below inside project/src/app/app.component.ts file:
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { HeaderComponent } from "./header/header.component";
import { HomeComponent } from "./home/home.component";
import { FooterComponent } from "./footer/footer.component";
@Component({
selector: 'app-root',
standalone: true,
templateUrl: './app.component.html',
styleUrl: './app.component.css',
imports: [CommonModule, RouterOutlet, HeaderComponent, HomeComponent, FooterComponent]
})
export class AppComponent {
title = 'ecommerceangular';
}
8. Guys here is the github repo link and please download all the css, js, images, fonts folders and placed inside src/assets folder inside angular project:
Friends in the end must run ng serve command into your terminal to run the angular 17 project (localhost:4200).
Guys click here to check the Angular 17 Bootstrap 5 Free Templates.
Now we are done friends. If you have any kind of query, suggestion and new requirement then feel free to comment below.
Jassa
Thanks
Recent Comments