Hello friends, welcome back to my blog. Today this blog post I will show you Build a Stunning Angular 20 Landing Page with Contentful.
Key Features:
- Angular Latest Version
- Angular routing
- Angular active routes functionality
- Full responsive
- Toggle sidebar
Angular 20 came 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 Angular 20 landing page, Contentful CMS, headless CMS Angular, build landing page angular, angular 2025 frontend, responsive landing page angular, angular Contentful integration, angular content management, headless architecture angular, angular 20 SEO tutorial, landing page with CMS and please use carefully this to avoid the mistakes:
1. Firstly friends we need fresh angular 20 setup and for this we need to run below commands but if you already have angular 20 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:
guys with these commands we will get components as well
npm install -g @angular/cli
ng new angulardemo //Create new Angular Project
cd angulardemo // Go inside the Angular Project Folder
ng g c home //will create home component
2. Now friends, please download js and styles from this git repo link and please put all the js, css files folders in “src/assets/” folder:
GitHub link
3. Now friends we just need to add below code into angulardemo/src/app/app.component.html file to get final out on the web browser:
<router-outlet></router-outlet>4. Now guys please add the below code inside src/index.html file or angular.json file as well to styles and scripts:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular20</title>
<base href="/">
<!-- favicon -->
<link rel="shortcut icon" href="assets/images/favicon.ico">
<!-- Bootstrap -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/tiny-slider.css" rel="stylesheet" type="text/css" />
<!-- Icon -->
<link href="assets/css/materialdesignicons.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/pe-icon-7-stroke.css" rel="stylesheet" type="text/css" />
<!-- tobii css -->
<link href="assets/css/tobii.min.css" rel="stylesheet" type="text/css" />
<!-- Custom Css -->
<link href="assets/css/style.min.css" rel="stylesheet" type="text/css" />
</head>
<body data-bs-spy="scroll" data-bs-target="#navbar-navlist" data-bs-offset="20">
<app-root></app-root>
<!-- javascript -->
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/gumshoe.polyfills.min.js"></script>
<script src="assets/js/tiny-slider.js"></script>
<!-- Tobii js -->
<script src="assets/js/tobii.min.js"></script>
<!-- Main Js -->
<script src="assets/js/app.js"></script>
</body>
</html>
5. Now friends we just need to add below code into angulardemo/src/app/home/home.html file:
<!-- Loader Start -->
<div id="preloader">
<div id="status">
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>
</div>
<!-- Loader End -->
<!-- Navbar STart -->
<header id="topnav" class="defaultscroll sticky">
<div class="container">
<!-- Logo container-->
<div>
<a class="logo" href="#" target="_blank">
<!-- Pacto -->
<img src="assets/images/logo-dark.png" class="l-dark" height="20" alt="">
<img src="assets/images/logo-dark.png" class="l-light" height="20" alt="">
</a>
</div>
<!-- End Logo container-->
<div class="menu-extras">
<div class="menu-item">
<!-- Mobile menu toggle-->
<a class="navbar-toggle" id="isToggle" onclick="toggleMenu()">
<div class="lines">
<span></span>
<span></span>
<span></span>
</div>
</a>
<!-- End mobile menu toggle-->
</div>
</div>
<div id="navigation">
<!-- Navigation Menu-->
<ul class="navigation-menu nav-light" id="navmenu-nav">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li><!--end nav item-->
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li><!--end nav item-->
<li class="nav-item">
<a class="nav-link" href="#team">Team</a>
</li><!--end nav item-->
<li class="nav-item">
<a class="nav-link" href="#price">Price</a>
</li><!--end nav item-->
<li class="nav-item">
<a class="nav-link" href="#testimonial">Testimonial</a>
</li><!--end nav item-->
<li class="nav-item">
<a class="nav-link" href="#blog">Blog</a>
</li><!--end nav item-->
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li><!--end nav item-->
</ul><!--end navigation menu-->
</div><!--end navigation-->
</div><!--end container-->
</header><!--end header-->
<!-- Navbar End -->
<!-- HOME START-->
<section class="bg-home d-table w-100" style="background-image:url('assets/images/home/01.jpg')" id="home">
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="title-heading mt-5 pt-4">
<h1 class="heading text-white mb-3">Professional Development for Leaders and Coaches</h1>
<p class="para-desc text-white-50">Splash your dream color Bring your home to lively Colors. We make it a priotity to offer flexible services to accomodate your needs</p>
<div class="mt-4 pt-2">
<a href="javascript:void(0)" class="btn btn-primary rounded-pill mb-2 me-2">Buy Now</a>
<a href="javascript:void(0)" class="btn btn-outline-custom rounded-pill mb-2">Read More <i class="mdi mdi-arrow-right ms-2"></i></a>
</div>
</div>
</div><!--end col-->
</div><!--end row-->
</div><!--end container-->
</section><!--end section-->
<!-- HOME END-->
<!-- About Us Start -->
<section class="section">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 col-md-7">
<div class="about-img">
<img src="assets/images/about01.png" class="img-fluid" alt="">
</div><!--end img-->
</div><!--end col-->
<div class="col-lg-6 col-md-5 mt-4 mt-sm-0 pt-2 pt-sm-0">
<!-- Start Accordion -->
<div class="faqs mt-4 pt-2">
<div class="accordion" id="accordionExample2" role="tablist" aria-multiselectable="true">
<div class="card border-0 rounded-0">
<div class="card-header p-0" role="tab" id="History">
<h6 class="card-title position-relative mb-0">
<a class="text-dark d-block" role="button" data-bs-toggle="collapse" href="#companyhistory" aria-expanded="true" aria-controls="companyhistory">Our History</a>
</h6>
</div>
<div id="companyhistory" class="collapse show" role="tabpanel" aria-labelledby="History" data-bs-parent="#accordionExample2">
<p class="mb-2 mt-3 m-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer hendrerit viverra egestas. Morbi quam lectus
commodo ac lacus eget, finibus aliquet metus. Pellentesque blandit nunc non sagittis consectetur. In accumsan
eget enim egeted porta. Etiam gravida non leo vel placerat.
</p>
</div>
</div><!--end card-->
<div class="card border-0 rounded-0 my-3">
<div class="card-header p-0" role="tab" id="GoalandVision">
<h6 class="card-title position-relative mb-0">
<a class="collapsed text-dark d-block" role="button" data-bs-toggle="collapse" href="#Goal" aria-expanded="false" aria-controls="Goal"> Our Goal & Vission</a>
</h6>
</div>
<div id="Goal" class="collapse" role="tabpanel" aria-labelledby="GoalandVision" data-bs-parent="#accordionExample2">
<p class="mb-2 mt-3 m-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer hendrerit viverra egestas. Morbi quam lectus
commodo ac lacus eget, finibus aliquet metus. Pellentesque blandit nunc non sagittis consectetur. In accumsan
eget enim egeted porta. Etiam gravida non leo vel placerat.
</p>
</div>
</div><!--end card-->
<div class="card border-0 rounded-0">
<div class="card-header p-0" role="tab" id="Profitability">
<h6 class="card-title position-relative mb-0">
<a class="collapsed text-dark d-block" role="button" data-bs-toggle="collapse" href="#Profit" aria-expanded="false" aria-controls="Profit"> Profitability</a>
</h6>
</div>
<div id="Profit" class="collapse" role="tabpanel" aria-labelledby="Profitability" data-bs-parent="#accordionExample2">
<p class="mb-0 mt-3 m-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer hendrerit viverra egestas. Morbi quam lectus
commodo ac lacus eget, finibus aliquet metus. Pellentesque blandit nunc non sagittis consectetur. In accumsan
eget enim egeted porta. Etiam gravida non leo vel placerat.
</p>
</div>
</div><!--end card-->
</div><!--end accordion-->
</div><!--end faqs-->
<!-- End Accordion -->
</div><!--end col-->
</div><!--end row-->
</div><!--end container-->
</section><!--end section-->
<section class="section-two bg-light">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 col-12">
<div class="d-flex about-section py-3">
<i class="pe-7s-world text-white shadow bg-primary rounded-pill me-2"></i>
<div class="content">
<h5 class="title p-3 mb-0">Consutancy</h5>
</div>
</div><!--end about section-->
</div><!--end col-->
<div class="col-lg-3 col-md-6 col-12">
<div class="d-flex about-section py-3">
<i class="pe-7s-paint text-white shadow bg-primary rounded-pill me-2"></i>
<div class="content">
<h5 class="title p-3 mb-0">UI/UX Design</h5>
</div>
</div><!--end about section-->
</div><!--end col-->
<div class="col-lg-3 col-md-6 col-12">
<div class="d-flex about-section py-3">
<i class="pe-7s-display2 text-white shadow bg-primary rounded-pill me-2"></i>
<div class="content">
<h5 class="title p-3 mb-0">Smart Coding</h5>
</div>
</div><!--end about section-->
</div><!--end col-->
<div class="col-lg-3 col-md-6 col-12">
<div class="d-flex about-section py-3">
<i class="pe-7s-config text-white shadow bg-primary rounded-pill me-2"></i>
<div class="content">
<h5 class="title p-3 mb-0">Support</h5>
</div>
</div>
</div><!--end col-->
</div><!--end row-->
</div><!--end container-->
</section><!--end section-->
<!-- About Us End -->
<!-- CTA Start -->
<section class="section bg-video bg-cta" style="background: url('assets/images/cta.jpg') center center;" id="video">
<div class="container">
<div class="row justify-content-center text-center">
<div class="col-12">
<a href="javascript:void(0)" data-type="youtube" data-id="yba7hPeTSjk" class="lightbox play-btn video-play-icon mt-0">
<i class="mdi mdi-play text-white"></i>
</a>
<h6 class="text-white text-uppercase mt-3">Play Video</h6>
</div><!--end col-->
</div><!--end row-->
</div><!--end container-->
</section><!--end section-->
<!-- CTA End -->
<!-- Services Start -->
<section class="section" id="services">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 text-center">
<div class="section-title">
<h4 class="title text-uppercase fw-normal mb-4">Our <span class="text-primary fw-bold">Features</span> </h4>
<p class="text-muted mx-auto para-desc mb-0">Splash your dream color Bring your home to lively Colors. We make it a priotity to offer flexible services to accomodate your needs</p>
</div>
</div><!--end col-->
</div><!--end row-->
<div class="row services align-items-center">
<div class="col-lg-4 col-md-6">
<div class="core-service">
<div class="service-content mt-4 p-2 text-center">
<div class="icon position-relative d-inline-block text-center mb-4">
<img src="assets/images/icons/clock.png" class="img-fluid mx-auto d-block" alt="">
</div>
<div class="content">
<h4 class="title mb-2">Powerful Performance</h4>
<p class="text-muted mb-0">Nisi aenean vulputate eleifend tellus vitae eleifend enim a Aliquam aenean elementum semper.</p>
</div>
</div><!--end service content-->
<div class="service-content mt-4 p-2 text-center">
<div class="icon position-relative d-inline-block text-center mb-4">
<img src="assets/images/icons/responsive-design-symbol.png" class="img-fluid mx-auto d-block" alt="">
</div>
<div class="content">
<h4 class="title mb-2">Responsive Layout</h4>
<p class="text-muted mb-0">Aenean tellus metus bibendum sed posuere ac pede amet augue turpis Pellentesque posuere.</p>
</div>
</div><!--end service content-->
<div class="service-content mt-4 p-2 text-center">
<div class="icon position-relative d-inline-block text-center mb-4">
<img src="assets/images/icons/eye.png" class="img-fluid mx-auto d-block" alt="">
</div>
<div class="content">
<h4 class="title mb-2">Retina Ready Graphics</h4>
<p class="text-muted mb-0">Donec elit libero sodales nec volutpat a suscipit nec pellentesque velit pedepede primis.</p>
</div>
</div><!--end service content-->
</div><!-- end core services-->
</div><!--end col-->
<div class="col-lg-4 core-service-img">
<div class="ms-lg-2 me-lg-2">
<img src="assets/images/feature01.png" class="img-fluid mx-auto" alt="">
</div>
</div><!--end col-->
<div class="col-lg-4 col-md-6">
<div class="core-service">
<div class="service-content mt-4 p-2 text-center">
<div class="icon position-relative d-inline-block text-center mb-4">
<img src="assets/images/icons/like.png" class="img-fluid mx-auto d-block" alt="">
</div>
<div class="content">
<h4 class="title mb-2">Work With Love</h4>
<p class="text-muted mb-0">Pellentesque habitant morbi tristique senectus et turpis egestas dui magna posuere eget justo.</p>
</div>
</div><!--end service content-->
<div class="service-content mt-4 p-2 text-center">
<div class="icon position-relative d-inline-block text-center mb-4">
<img src="assets/images/icons/lightbulb.png" class="img-fluid mx-auto d-block" alt="">
</div>
<div class="content">
<h4 class="title mb-2">Unique Design</h4>
<p class="text-muted mb-0">In ac felis quis tortor malesuada pretium pellentesque sapien ipsum porta euismod ut mi.</p>
</div>
</div><!--end service content-->
<div class="service-content mt-4 p-2 text-center">
<div class="icon position-relative d-inline-block text-center mb-4">
<img src="assets/images/icons/brainstorm.png" class="img-fluid mx-auto d-block" alt="">
</div>
<div class="content">
<h4 class="title mb-2">Creative Design</h4>
<p class="text-muted mb-0">Maecenas ullamcorper dui et placerat feugiat eros pede felis nunc loremlorem Sed fermentum.</p>
</div>
</div><!--end service content-->
</div><!--end core services-->
</div><!--end col-->
</div><!--end row-->
</div><!--end container-->
</section><!--end section-->
<!-- Services End -->
<!-- Cta image Start -->
<section class="cta-image bg-light">
<div class="container-fluid">
<div class="row position-relative">
<div class="col-lg-7 padding-less img" style="background-image:url('assets/images/cta2.jpg')"></div><!-- end col -->
<div class="col-lg-5 offset-lg-7">
<div class="cta-image-img-box">
<div class="row">
<div class="col-lg-12">
<div class="cta-image-content">
<h4 class="cta-image-head text-uppercase mb-4">Get A better Results</h4>
<div class="description">
<p class="text-muted">If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</p>
</div><!-- Features Description -->
<div class="mt-4">
<div class="progress-box mt-3">
<h6 class="fw-normal">Finance</h6>
<div class="progress">
<div class="progress-bar bg-dark text-dark" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
<span>90%</span>
</div>
</div>
</div><!--end process box-->
<div class="progress-box mt-3">
<h6 class="fw-normal">Marketing</h6>
<div class="progress">
<div class="progress-bar bg-dark text-dark" role="progressbar" style="width: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
<span>80%</span>
</div>
</div>
</div><!--end process box-->
<div class="progress-box mt-3">
<h6 class="fw-normal">Liabilities</h6>
<div class="progress">
<div class="progress-bar bg-dark text-dark" role="progressbar" style="width: 99%;" aria-valuenow="99" aria-valuemin="0" aria-valuemax="100">
<span>99%</span>
</div>
</div>
</div><!--end process box-->
<div class="progress-box mt-3">
<h6 class="fw-normal">Profitability</h6>
<div class="progress">
<div class="progress-bar bg-dark text-dark" role="progressbar" style="width: 95%;" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">
<span>95%</span>
</div>
</div>
</div><!--end process box-->
</div><!--end process-->
<a href="#" class="btn btn-outline-custom mt-4 rounded-pill">Read More</a>
</div><!--end about content-->
</div> <!-- end col -->
</div> <!-- end row -->
</div> <!-- end about detail -->
</div> <!-- end col -->
</div><!--end row-->
</div><!--end container fluid-->
</section><!--end section-->
<!-- Cta image end -->
<!-- Team Start -->
<section class="section" id="team">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 text-center">
<div class="section-title">
<h4 class="title text-uppercase fw-normal mb-4">Our <span class="text-primary fw-bold">Team</span> </h4>
<p class="text-muted mx-auto para-desc mb-0">Splash your dream color Bring your home to lively Colors. We make it a priotity to offer flexible services to accomodate your needs</p>
</div>
</div><!--end col-->
</div><!--end row-->
<div class="row">
<div class="col-lg-3 col-md-6 col-12 mt-4 pt-2">
<div class="team-content position-relative text-center bg-light rounded">
<img src="assets/images/team/01.jpg" class="img-fluid rounded-top" alt="">
<div class="detail pt-3 pb-3 p-1">
<h4 class="mb-0"><a href="javascript:void(0)" class="name text-dark">Jessie Price</a></h4>
<small class="posting text-muted">C.E.O</small>
</div>
<div class="team-social">
<ul class="list-unstyled social-icon mb-0">
<li><a href="#"><i class="mdi mdi-facebook" title="facebook"></i></a></li>
<li><a href="#"><i class="mdi mdi-linkedin" title="linkedin"></i></a></li>
<li><a href="#"><i class="mdi mdi-youtube" title="youtube"></i></a></li>
<li><a href="#"><i class="mdi mdi-instagram" title="instagram"></i></a></li>
</ul>
</div><!--team social-->
</div><!--end team content-->
</div><!--end col-->
<div class="col-lg-3 col-md-6 col-12 mt-4 pt-2">
<div class="team-content position-relative text-center bg-light rounded">
<img src="assets/images/team/02.jpg" class="img-fluid rounded-top" alt="">
<div class="detail pt-3 pb-3 p-1">
<h4 class="mb-0"><a href="javascript:void(0)" class="name text-dark">Patricia Elliott</a></h4>
<small class="posting text-muted">Director</small>
</div>
<div class="team-social">
<ul class="list-unstyled social-icon mb-0">
<li><a href="#"><i class="mdi mdi-facebook" title="facebook"></i></a></li>
<li><a href="#"><i class="mdi mdi-linkedin" title="linkedin"></i></a></li>
<li><a href="#"><i class="mdi mdi-youtube" title="youtube"></i></a></li>
<li><a href="#"><i class="mdi mdi-instagram" title="instagram"></i></a></li>
</ul>
</div><!--team social-->
</div><!--end team content-->
</div><!--end col-->
<div class="col-lg-3 col-md-6 col-12 mt-4 pt-2">
<div class="team-content position-relative text-center bg-light rounded">
<img src="assets/images/team/03.jpg" class="img-fluid rounded-top" alt="">
<div class="detail pt-3 pb-3 p-1">
<h4 class="mb-0"><a href="javascript:void(0)" class="name text-dark">Shophia Gregory</a></h4>
<small class="posting text-muted">Manager</small>
</div>
<div class="team-social">
<ul class="list-unstyled social-icon mb-0">
<li><a href="#"><i class="mdi mdi-facebook" title="facebook"></i></a></li>
<li><a href="#"><i class="mdi mdi-linkedin" title="linkedin"></i></a></li>
<li><a href="#"><i class="mdi mdi-youtube" title="youtube"></i></a></li>
<li><a href="#"><i class="mdi mdi-instagram" title="instagram"></i></a></li>
</ul>
</div><!--team social-->
</div><!--end team content-->
</div><!--end col-->
<div class="col-lg-3 col-md-6 col-12 mt-4 pt-2">
<div class="team-content position-relative text-center bg-light rounded">
<img src="assets/images/team/04.jpg" class="img-fluid rounded-top" alt="">
<div class="detail pt-3 pb-3 p-1">
<h4 class="mb-0"><a href="javascript:void(0)" class="name text-dark">Osval Madden</a></h4>
<small class="posting text-muted">Accountant</small>
</div>
<div class="team-social">
<ul class="list-unstyled social-icon mb-0">
<li><a href="#"><i class="mdi mdi-facebook" title="facebook"></i></a></li>
<li><a href="#"><i class="mdi mdi-linkedin" title="linkedin"></i></a></li>
<li><a href="#"><i class="mdi mdi-youtube" title="youtube"></i></a></li>
<li><a href="#"><i class="mdi mdi-instagram" title="instagram"></i></a></li>
</ul>
</div><!--team social-->
</div><!--end team content-->
</div><!--end col-->
</div><!--end row-->
</div><!--end container-->
</section><!--end section-->
<!-- Team End -->
<!-- Price Start -->
<section class="section bg-light" id="price">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 text-center">
<div class="section-title">
<h4 class="title text-uppercase fw-normal mb-4">Our <span class="text-primary fw-bold">Pricing</span> </h4>
<p class="text-muted mx-auto para-desc mb-0">Splash your dream color Bring your home to lively Colors. We make it a priotity to offer flexible services to accomodate your needs</p>
</div>
</div><!--end col-->
</div><!--end row-->
<div class="row">
<div class="col-lg-3 col-md-6 mt-4 pt-2">
<div class="pricing-table shadow rounded bg-white text-center">
<h5 class="pricing-plan rounded-top text-uppercase bg-light p-4 mb-0">Basic</h5>
<div class="price-value p-4 text-center position-relative">
<div class="price-lable rounded-pill">
<h4 class="mt-4 d-block">$0</h4>Month
</div>
</div><!--end price value-->
<div class="pricing-features">
<ul class="list-unstyled mb-0">
<li>Full Access</li>
<li>Source Files</li>
<li>100 User Accounts</li>
<li>1 Year License</li>
</ul>
<div class="price-button p-4">
<a href="#" class="btn btn-primary rounded-pill">Buy Now</a>
</div><!--end button-->
</div><!--end price features-->
</div><!--end table-->
</div><!--end col-->
<div class="col-lg-3 col-md-6 mt-4 pt-2">
<div class="pricing-table shadow rounded business-plan position-relative bg-white text-center">
<h5 class="pricing-plan rounded-top text-uppercase bg-primary text-light p-4 mb-0">Standerd</h5>
<div class="price-value p-4 text-center position-relative">
<div class="price-lable rounded-pill">
<h4 class="mt-4 d-block">$199</h4>Month
</div>
</div><!--end price value-->
<div class="pricing-features">
<ul class="list-unstyled mb-0">
<li>Full Access</li>
<li>Source Files</li>
<li>100 User Accounts</li>
<li>1 Year License</li>
</ul>
<div class="price-button p-4">
<a href="#" class="btn btn-primary rounded-pill">Buy Now</a>
</div><!--end button-->
</div><!--end price features-->
</div><!--end table-->
</div><!--end col-->
<div class="col-lg-3 col-md-6 mt-4 pt-2">
<div class="pricing-table shadow rounded bg-white text-center">
<h5 class="pricing-plan rounded-top text-uppercase bg-light p-4 mb-0">Premium</h5>
<div class="price-value p-4 text-center position-relative">
<div class="price-lable rounded-pill">
<h4 class="mt-4 d-block">$299</h4>Month
</div>
</div><!--end price value-->
<div class="pricing-features">
<ul class="list-unstyled mb-0">
<li>Full Access</li>
<li>Source Files</li>
<li>100 User Accounts</li>
<li>1 Year License</li>
</ul>
<div class="price-button p-4">
<a href="#" class="btn btn-primary rounded-pill">Buy Now</a>
</div><!--end button-->
</div><!--end price features-->
</div><!--end table-->
</div><!--end col-->
<div class="col-lg-3 col-md-6 mt-4 pt-2">
<div class="pricing-table shadow rounded bg-white text-center">
<h5 class="pricing-plan rounded-top text-uppercase bg-light p-4 mb-0">Professional</h5>
<div class="price-value p-4 text-center position-relative">
<div class="price-lable rounded-pill">
<h4 class="mt-4 d-block">$399</h4>Month
</div>
</div><!--end price value-->
<div class="pricing-features">
<ul class="list-unstyled mb-0">
<li>Full Access</li>
<li>Source Files</li>
<li>100 User Accounts</li>
<li>1 Year License</li>
</ul>
<div class="price-button p-4">
<a href="#" class="btn btn-primary rounded-pill">Buy Now</a>
</div><!--end button-->
</div><!--end price features-->
</div><!--end table-->
</div><!--end col-->
</div><!--end row-->
</div><!--end container-->
</section><!--end section-->
<!-- Price End -->
<!-- Testimonial Start -->
<section class="cta-image" id="testimonial">
<div class="container-fluid">
<div class="row position-relative">
<div class="col-lg-7 order-lg-1 order-2">
<div class="cta-image-img-box">
<div class="row">
<div class="col-lg-12">
<div class="text-center testi-twitter">
<i class="mdi mdi-twitter mdi-48px text-primary"></i>
</div>
<div class="tiny-single-item">
<div class="tiny-slide">
<div class="testimonial text-center">
<div class="content-review">
<p class="review fst-italic text-muted mt-3">" It has roots in a piece of classical Latin literature from 45 BC, making sure there isn't years old. Richard McClintock, a Latin professor atliterature from 45 BC, making sure there isn't years old Hampden-Sydney College in Virginia "</p>
<h5 class="name mb-1 mt-3 text-dark">@bert_official</h5>
</div>
</div><!--end content-->
</div>
<div class="tiny-slide">
<div class="testimonial text-center">
<div class="content-review">
<p class="review fst-italic text-muted mt-3">" Literature from 45 BC, making sure there isn't years old in a piece of classical Latin literature from 45 BC, making sure there isn't years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia "</p>
<h5 class="name mb-1 mt-3 text-dark">@mark_wood</h5>
</div>
</div><!--end content-->
</div>
<div class="tiny-slide">
<div class="testimonial text-center">
<div class="content-review">
<p class="review fst-italic text-muted mt-3">" Classical Latin literature from 45 BC, making literature from 45 BC, making sure there isn't years old sure there isn't years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia "</p>
<h5 class="name mb-1 mt-3 text-dark">@kevin_peterson</h5>
</div>
</div><!--end content-->
</div>
</div>
</div> <!-- end col -->
</div> <!-- end row -->
</div> <!-- end cta-image detail -->
</div> <!-- end col -->
<div class="col-lg-5 offset-lg-7 order-lg-2 order-1 padding-less img" style="background-image:url('assets/images/cta1.jpg')"></div><!-- end col -->
</div><!--end row-->
</div><!--end container fluid-->
</section><!--end section-->
<!-- Testimonial Start -->
<!-- Blog Start -->
<section class="section bg-light" id="blog">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 text-center">
<div class="section-title">
<h4 class="title text-uppercase fw-normal mb-4">Latest <span class="text-primary fw-bold">News</span> </h4>
<p class="text-muted mx-auto para-desc mb-0">Splash your dream color Bring your home to lively Colors. We make it a priotity to offer flexible services to accomodate your needs</p>
</div>
</div><!--end col-->
</div><!--end row-->
<div class="row">
<div class="col-lg-4 col-md-6 mt-4 pt-2">
<div class="blog-post bg-white rounded">
<img src="assets/images/blog/01.jpg" class="img-fluid rounded-top" alt="">
<div class="blog-content p-3">
<h5><a href="#" class="blog-title text-dark">How To Better Understand Yourself</a></h5>
<p class="text-muted">Splash your dream color Bring your home to lively Colors We make it a priotity to offer flexible services</p>
<div class="tag text-muted">
<a href="javascript:void(0)" class="float-end mb-0 text-muted"><i class="mdi mdi-account me-2"></i>Shreethemes</a>
<a href="javascript:void(0)" class="mb-0 text-muted"><i class="mdi mdi-calendar-heart me-2"></i>1st July 2019</a>
</div>
</div>
</div><!--end blog post-->
</div><!--end col-->
<div class="col-lg-4 col-md-6 mt-4 pt-2">
<div class="blog-post bg-white rounded">
<img src="assets/images/blog/02.jpg" class="img-fluid rounded-top" alt="">
<div class="blog-content p-3">
<h5><a href="#" class="blog-title text-dark">How To Get Out Your Comfort Zone</a></h5>
<p class="text-muted">Splash your dream color Bring your home to lively Colors We make it a priotity to offer flexible services</p>
<div class="tag text-muted">
<a href="javascript:void(0)" class="float-end mb-0 text-muted"><i class="mdi mdi-account me-2"></i>Shreethemes</a>
<a href="javascript:void(0)" class="mb-0 text-muted"><i class="mdi mdi-calendar-heart me-2"></i>1st July 2019</a>
</div>
</div>
</div><!--end blog post-->
</div><!--end col-->
<div class="col-lg-4 col-md-6 mt-4 pt-2">
<div class="blog-post bg-white rounded">
<img src="assets/images/blog/03.jpg" class="img-fluid rounded-top" alt="">
<div class="blog-content p-3">
<h5><a href="#" class="blog-title text-dark">Be One With Nature | Zero-wast Life</a></h5>
<p class="text-muted">Splash your dream color Bring your home to lively Colors We make it a priotity to offer flexible services</p>
<div class="tag text-muted">
<a href="javascript:void(0)" class="float-end mb-0 text-muted"><i class="mdi mdi-account me-2"></i>Shreethemes</a>
<a href="javascript:void(0)" class="mb-0 text-muted"><i class="mdi mdi-calendar-heart me-2"></i>1st July 2019</a>
</div>
</div>
</div><!--end blog post-->
</div><!--end col-->
</div><!--end row-->
</div><!--end container-->
</section><!--end section-->
<!-- Blog End -->
<!-- Cta Download STart -->
<section class="section" style="background: url('assets/images/download.jpg')">
<div class="container">
<div class="row">
<div class="col-12 text-center">
<div class="section-title">
<h4 class="title text-uppercase text-white mb-4"> Have a great opportunity for your business</h4>
<p class="text-white-50 mx-auto para-desc mb-0">Splash your dream color Bring your home to lively Colors. We make it a priotity to offer flexible services to accomodate your needs</p>
</div><!--end section title-->
</div><!--end col-->
</div><!--end row-->
<div class="row justify-content-center">
<div class="col-md-8 text-center">
<a href="#contact" class="btn btn-primary rounded-pill">Get Free Trial</a>
</div><!--end col-->
</div><!--end row-->
</div><!--end container-->
</section><!--end section-->
<!-- Cta Download STart -->
<!-- Contact Start -->
<section class="section" id="contact">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 text-center">
<div class="section-title">
<h4 class="title text-uppercase fw-normal mb-4">Get in <span class="text-primary fw-bold">touch !</span> </h4>
<p class="text-muted mx-auto para-desc mb-0">Splash your dream color Bring your home to lively Colors. We make it a priotity to offer flexible services to accomodate your needs</p>
</div>
</div><!--end col-->
</div><!--end row-->
<div class="row justify-content-center mt-4 pt-2">
<div class="col-lg-8">
<form method="post" name="myForm">
<p id="error-msg" class="mb-0"></p>
<div id="simple-msg"></div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Your Name <span class="text-danger">*</span></label>
<input name="name" id="name" type="text" class="form-control" placeholder="Name :">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Your Email <span class="text-danger">*</span></label>
<input name="email" id="email" type="email" class="form-control" placeholder="Email :">
</div>
</div><!--end col-->
<div class="col-12">
<div class="mb-3">
<label class="form-label">Subject</label>
<input name="subject" id="subject" class="form-control" placeholder="subject :">
</div>
</div><!--end col-->
<div class="col-12">
<div class="mb-3">
<label class="form-label">Comments <span class="text-danger">*</span></label>
<textarea name="comments" id="comments" rows="4" class="form-control" placeholder="Message :"></textarea>
</div>
</div>
</div>
<div class="col-12">
<div class="">
<button type="submit" id="submit" name="send" class="btn rounded-pill w-100 btn-primary">Send Message</button>
</div>
</div><!--end col-->
</form>
</div><!--end col-->
</div><!--end row-->
</div><!--end container-->
</section><!--end section-->
<section>
<div class="container-fluid">
<div class="row">
<div class="col-12 p-0">
<div class="map map-gray">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d197764.93543986446!2d21.960352949732812!3d39.24112105942661!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sin!4v1559731777131!5m2!1sen!2sin" style="border: 0;" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</section>
<!-- Contact End -->
<!-- Footer Start -->
<footer class="footer py-5 bg-dark">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12">
<a class="footer-logo" href="#">Anokhu</a>
<p class="text-foot mt-3">Splash your dream color Bring your home to lively Colors home to lively Colors</p>
<ul class="list-unstyled social-icon social mb-0">
<li class="list-inline-item"><a href="#"><i class="mdi mdi-facebook" title="facebook"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="mdi mdi-linkedin" title="linkedin"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="mdi mdi-youtube" title="youtube"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="mdi mdi-instagram" title="instagram"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="mdi mdi-twitter" title="twitter"></i></a></li>
</ul>
</div><!--end col-->
<div class="col-lg-2 col-md-4 mt-4 pt-2 mt-lg-0 pt-lg-0">
<h4 class="text-light text-uppercase footer-head">Links</h4>
<ul class="list-unstyled footer-list mt-4 mb-0">
<li class="mt-2"><a href="#" class="text-foot"><i class="mdi mdi-chevron-right me-2"></i> Aboutus</a></li>
<li class="mt-2"><a href="#" class="text-foot"><i class="mdi mdi-chevron-right me-2"></i> Services</a></li>
<li class="mt-2"><a href="#" class="text-foot"><i class="mdi mdi-chevron-right me-2"></i> Team</a></li>
<li class="mt-2"><a href="#" class="text-foot"><i class="mdi mdi-chevron-right me-2"></i> Pricing</a></li>
</ul>
</div><!--end col-->
<div class="col-lg-3 col-md-4 mt-4 pt-2 mt-lg-0 pt-lg-0">
<h4 class="text-light text-uppercase footer-head">Supports</h4>
<ul class="list-unstyled footer-list mt-4 mb-0">
<li class="mt-2"><a href="#" class="text-foot"><i class="mdi mdi-chevron-right me-2"></i> Contact Us</a></li>
<li class="mt-2"><a href="#" class="text-foot"><i class="mdi mdi-chevron-right me-2"></i> Submit a Ticket</a></li>
<li class="mt-2"><a href="#" class="text-foot"><i class="mdi mdi-chevron-right me-2"></i> Refund Policy</a></li>
<li class="mt-2"><a href="#" class="text-foot"><i class="mdi mdi-chevron-right me-2"></i> Professional Services</a></li>
</ul>
</div><!--end col-->
<div class="col-lg-3 col-md-4 mt-4 pt-2 mt-lg-0 pt-lg-0">
<h4 class="text-light text-uppercase footer-head">Get In Touch !</h4>
<ul class="list-unstyled contact-foot text-foot footer-list mt-4 mb-0">
<li class="mt-2"><a href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d39206.002432144705!2d-95.4973981212445!3d29.709510002925988!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8640c16de81f3ca5%3A0xf43e0b60ae539ac9!2sGerald+D.+Hines+Waterwall+Park!5e0!3m2!1sen!2sin!4v1566305861440!5m2!1sen!2sin" class="video-play-icon text-foot"><i class="mdi mdi-map-marker me-2"></i> 3/2/64 Mongus Street, UK</a></li>
<li class="mt-2"><a href="mailto:contact@example.com" class="text-foot"><i class="mdi mdi-email me-2"></i> name@domain.com</a></li>
<li class="mt-2"><a href="tel:+152534-468-854" class="text-foot"><i class="mdi mdi-phone me-2"></i> +(125) 215-4561</a></li>
<li class="mt-2"><a href="#" class="text-foot"><i class="mdi mdi-earth me-2"></i> www.yourdomain.com</a></li>
</ul>
</div><!--end col-->
</div><!--end row-->
</div><!--end container-->
<!-- Back to top -->
<a href="#" class="back-to-top" id="back-to-top" title="Back to home">
<i class="mdi mdi-chevron-up"> </i>
</a>
<!-- Back to top -->
</footer>
<footer class="footer bg-dark footer-bar py-4">
<div class="container text-foot text-center">
<p class="mb-0">© <script>document.write(new Date().getFullYear())</script> Anokhu. Design with <i class="mdi mdi-heart text-danger"></i> by <a href="#" target="_blank" class="text-reset">Lulla</a>.</p>
</div><!--end container-->
</footer><!--end footer-->
<!-- Footer End --> 6. Now friends we just need to add below code into angulardemo/src/app/app-routes.ts file:
import { Routes } from '@angular/router';
import { Home } from './home/home';
export const routes: Routes = [
{
path: '', title: 'Home Page', component: Home,
},
];
Friends in the end must run ng serve command into your terminal to run the angular 20 ecommerce project (localhost:4200).
Guys click here to check the Angular 20 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.
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