Hello to all, welcome back to blog. Today in this blog post, I am going to show you, Angular 10 digital marketing responsive template.
Angular10 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 10 digital marketing responsive template use this carefully to avoid the mistakes:
1. Firstly friends we need fresh angular 10 setup and for this we need to run below commands but if you already have angular 10 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:
Guys you can skip this first step if you already have angular 10 fresh setup:
npm install -g @angular/cli ng new angularbootstrap //Create new Angular Project cd angularbootstrap // Go inside the Angular Project Folder ng serve --open // Run and Open the Angular Project http://localhost:4200/ // Working Angular Project Url
2. Now friends, please download zip(in this zip file there are js, css and images for angular bootstrap template) file from below path and extract zip and please put all the zip file folders in “src/assets” folder(which we will get from zip file):
https://therichpost.com/downloadsss.zip
3. Now friends please add below code into src/index.html file:
<head>
...
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<!-- Pogo Slider CSS -->
<link rel="stylesheet" href="assets/css/pogo-slider.min.css" />
<!-- Site CSS -->
<link rel="stylesheet" href="assets/css/style.css" />
<!-- Responsive CSS -->
<link rel="stylesheet" href="assets/css/responsive.css" />
<!-- Custom CSS -->
<link rel="stylesheet" href="assets/css/custom.css" />
<!-- ALL JS FILES -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<!-- ALL PLUGINS -->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<script src="assets/js/jquery.pogo-slider.min.js"></script>
<script src="assets/js/slider-index.js"></script>
<script src="assets/js/smoothscroll.js"></script>
<script src="assets/js/form-validator.min.js"></script>
<script src="assets/js/contact-form-script.js"></script>
<script src="assets/js/isotope.min.js"></script>
<script src="assets/js/images-loded.min.js"></script>
<script src="assets/js/custom.js"></script>
<!-- End Google Map -->
<script>
$(document).ready(function() {
$('#sidebarCollapse').on('click', function() {
$('#sidebar, #content').toggleClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
</script>
<style>
.contact_form{max-width: 100%;}
.pogoSlider-slide.slide1{background-image: url('assets/images/slider_1.jpg');}
.pogoSlider-slide.slide2{background-image: url('assets/images/slider_1.jpg');}
.pogoSlider-slide.slide3{background-image: url('assets/images/slider_1.jpg');}
</style>
</head>
4. Now friends we need to add below code into src/app/app.component.html file:
<div id="preloader">
<div class="loader">
<img src="assets/images/loader.gif" alt="#" />
</div>
</div>
<div class="wrapper">
<nav id="sidebar">
<div class="menu_section">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
</nav>
<div id="content">
<header class="top-header">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="logo_main">
<a href="#"><img src="assets/images/main_logo.png" /></a>
</div>
</div>
<div class="col-sm-6">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn"><img src="assets/images/menu_icon.png" /></button>
</div>
</div>
</div>
</header>
<div class="ulockd-home-slider">
<div class="container-fluid">
<div class="row">
<div class="pogoSlider" id="js-main-slider">
<div class="pogoSlider-slide slide1">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="slide_text">
<h6>Grow your business</h6>
<h3>Digital</h3>
<h4>Marketing</h4>
<br />
<a class="readmore_bt" href="#">Read More</a>
</div>
</div>
</div>
</div>
</div>
<div class="pogoSlider-slide slide2">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="slide_text">
<h6>Grow your business</h6>
<h3>Digital</h3>
<h4>Marketing</h4>
<br />
<a class="readmore_bt" href="#">Read More</a>
</div>
</div>
</div>
</div>
</div>
<div class="pogoSlider-slide slide3">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="slide_text">
<h6>Grow your business</h6>
<h3>Digital</h3>
<h4>Marketing</h4>
<br />
<a class="readmore_bt" href="#">Read More</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section about_section layout_padding dash_bg">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="full">
<div class="heading_main text_align_center">
<h2>What We Do</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
<div class="full feature_box">
<div class="full icon">
<img class="default-block" src="assets/images/icon_1.png" alt="#" />
<img class="default-none" src="assets/images/icon_1w.png" alt="#" />
</div>
<div class="full">
<h4>Link Building</h4>
</div>
<div class="full">
<p>It is a long established fact that a reader will be distracted by the readable content..</p>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
<div class="full feature_box">
<div class="full icon">
<img class="default-block" src="assets/images/icon_2.png" alt="#" />
<img class="default-none" src="assets/images/icon_2w.png" alt="#" />
</div>
<div class="full">
<h4>Monthly SEO Task</h4>
</div>
<div class="full">
<p>It is a long established fact that a reader will be distracted by the readable content..</p>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
<div class="full feature_box">
<div class="full icon">
<img class="default-block" src="assets/images/icon_3.png" alt="#" />
<img class="default-none" src="assets/images/icon_3w.png" alt="#" />
</div>
<div class="full">
<h4>On Page SEO</h4>
</div>
<div class="full">
<p>It is a long established fact that a reader will be distracted by the readable content..</p>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-3">
<div class="full feature_box">
<div class="full icon">
<img class="default-block" src="assets/images/icon_4.png" alt="#" />
<img class="default-none" src="assets/images/icon_4w.png" alt="#" />
</div>
<div class="full">
<h4>Online marketing</h4>
</div>
<div class="full">
<p>It is a long established fact that a reader will be distracted by the readable content..</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section about_section layout_padding padding_top_0">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="full">
<div class="heading_main text_align_center">
<h2 class="margin-bottom_30"><strong class="small theme_color">Increase your client for</strong><br />Better position of Business</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="full">
<div class="heading_small">
<h4>Increase your client</h4>
</div>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a pass<br /><br />age of Lorem Ipsum, you need to be sure there isn'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn</p>
</div>
<div class="full margin-top_30">
<a class="readmore_bt" href="#">Read More</a>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="full text_align_center">
<img class="img-responsive" src="assets/images/f1.png" alt="#" />
</div>
</div>
</div>
</div>
</div>
<div class="section about_section layout_padding padding_top_0">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="full">
<div class="heading_main text_align_center margin-bottom_30">
<h2><strong class="small theme_color">Previous Projects</strong><br />Our Case Studies</h2>
</div>
</div>
</div>
<div class="col-lg-10 offset-lg-1">
<div class="full text_align_center">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some
form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a
passage of Lorem Ipsum, you need to be sure there isn'</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="full text_align_center">
<img class="img-responsive" src="assets/images/video_img.jpg" alt="#" />
</div>
<div class="full center">
<a class="readmore_bt" href="#">Read More</a>
</div>
</div>
</div>
</div>
</div>
<div class="section dark_blue_layout white_fonts layout_padding">
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-4">
<div class="full">
<div class="heading_main text_align_left mb-0">
<h2><strong class="small">Get your free quote</strong><br />Today</h2>
</div>
</div>
</div>
<div class="col-md-12 col-lg-8">
<div class="full">
<div class="form_section">
<form class="news_submit_form">
<fieldset>
<div class="field">
<input type="email" placeholder="Enter url" name="#" required />
<button type="button">Submit</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section about_section layout_padding">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="full">
<div class="heading_main text_align_center margin-bottom_30">
<h2><strong class="small theme_color">We’ve done lot’s of work, Let’s</strong><br />Check some from here</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-3 col-lg-3">
<div class="work_blog margin-top_30">
<img class="img-responsive" src="assets/images/blog1.jpg" alt="#" />
<div class="hover_workblog">
<img src="assets/images/search_icon.png" alt="#" />
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-3">
<div class="work_blog margin-top_30">
<img class="img-responsive" src="assets/images/blog2.jpg" alt="#" />
<div class="hover_workblog">
<img src="assets/images/search_icon.png" alt="#" />
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-3">
<div class="work_blog margin-top_30">
<img class="img-responsive" src="assets/images/blog3.jpg" alt="#" />
<div class="hover_workblog">
<img src="assets/images/search_icon.png" alt="#" />
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-3">
<div class="work_blog margin-top_30">
<img class="img-responsive" src="assets/images/blog4.jpg" alt="#" />
<div class="hover_workblog">
<img src="assets/images/search_icon.png" alt="#" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section about_section layout_padding padding_top_0">
<div class="row">
<div class="col-md-12">
<div class="full">
<div class="heading_main text_align_center margin-bottom_30">
<h2>Get in touch</h2>
</div>
</div>
</div>
</div>
</div>
<div class="section contact_section">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 theme_color_bg fc3726 padding_0 text-center">
<div class="full contact_form">
<form class="contact_form_inner">
<fieldset>
<div class="field">
<input type="text" name="name" placeholder="Your name" />
</div>
<div class="field">
<input type="email" name="email" placeholder="Email" />
</div>
<div class="field">
<input type="text" name="phone_no" placeholder="Phone number" />
</div>
<div class="field">
<textarea placeholder="Message"></textarea>
</div>
<div class="field center">
<button type="button" class="margin-top_30">SEND</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
<footer class="footer-box">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="full">
<div class="heading_main text_align_center white_fonts margin-bottom_30">
<h2>Contact us</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6 white_fonts">
<div class="full footer_blog f_icon_1">
<p>Address<br /><small>151 Ho Ba KO To,<br />Ward 10,<br />Ho , Punjab</small></p>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 white_fonts">
<div class="full footer_blog f_icon_2">
<p>Phone<br /><small>+1212121212<br />+1212121212<br />Monday - Sunday<br />08:00 am - 05:00 pm</small></p>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 white_fonts">
<div class="full footer_blog f_icon_3">
<p>Email<br /><small>support@test.com<br />24 X 7 online support</small></p>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6 white_fonts">
<div class="full footer_blog_last">
<p>Social media</p>
<ul>
<li><a href="#"><i class="fa fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<div class="footer_bottom">
<div class="container">
<div class="row">
<div class="col-12">
<p class="crp">© Copyrights 2019 design by <a href="#" title="Love">Love</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="#" id="scroll-to-top" class="hvr-radial-out"><i class="fa fa-angle-up"></i></a>
Now we are done friends also and If you have any kind of query or suggestion or any requirement then feel free to comment below.
Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding must watch video above.
I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.
Jassa
Thanks
Recent Comments