Java, .NET, PHP, PYTHON, ANGULAR, .NET, ML, Data Scince, Testing, CI Tutorials in Easy Languages.

"Best Software Training, Internship, Project Development center of Indore India, Helpline 780506-3968"

Step1st:-  Download Template  and extract

Step2nd:-  copy all css,js,img  into assets

step3rd:-  copy all CSS and js into index.html

Step4th:-  copy the header part of the template and footer part of the template in appcomponet.html and in the middle part router-outlet should be similar to this

<div id="page">

<nav class="gtco-nav" role="navigation">
<div class="gtco-container">

<div class="row">
<div class="col-sm-2 col-xs-12">
<div id="gtco-logo"><a href="index.html">Beryllium</a></div>
</div>
<div class="col-xs-10 text-right menu-1">
<ul>
<li class="active"><a routerLink="home">Home</a></li>
<li><a routerLink="about">About</a></li>
<li class="has-dropdown">
<a href="services.html">Services</a>
<ul class="dropdown">
<li><a href="#">Web Design</a></li>
<li><a href="#">eCommerce</a></li>
<li><a href="#">Branding</a></li>
<li><a href="#">API</a></li>
</ul>
</li>
<li class="has-dropdown">
<a href="#">Dropdown</a>
<ul class="dropdown">
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">Sass</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>

</div>
</nav>

<router-outlet></router-outlet>

<footer id="gtco-footer" class="gtco-section" role="contentinfo">
<div class="gtco-container">
<div class="row row-pb-md">
<div class="col-md-4 gtco-widget gtco-footer-paragraph">
<h3>Beryllium</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus placerat enim et urna sagittis, rhoncus euismod.</p>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-6 gtco-footer-link">
<h3>Links</h3>
<ul class="gtco-list-link">
<li><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Testimonial</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="col-md-6 gtco-footer-link">
<h3>Work</h3>
<ul class="gtco-list-link">
<li><a href="#">New York Arena</a></li>
<li><a href="#">Eagle Park</a></li>
<li><a href="#">Nationals Park</a></li>
<li><a href="#">Manila Park</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-4 gtco-footer-subscribe">
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="" placeholder="Email">
  </div>
  <button type="submit" class="btn btn-primary">Send</button>
</form>
</div>
</div>
</div>
<div class="gtco-copyright">
<div class="gtco-container">
<div class="row">
<div class="col-md-6 text-left">
<p><small>&copy; 2016 Free HTML5. All Rights Reserved. </small></p>
</div>
<div class="col-md-6 text-right">
<p><small>Designed by <a href="http://freehtml5.co/" target="_blank">FreeHTML5.co</a> Demo Images: <a href="http://pixeden.com/" target="_blank">Pixeden</a> &amp; <a href="http://unsplash.com" target="_blank">Unsplash</a></small> </p>
</div>
</div>
</div>
</div>
</footer>
<!-- END footer -->

</div>

<div class="gototop js-top">
<a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a>
</div>


Step5th:-  Create Route under app-route-module.cs:-

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CalcComponent } from './calc/calc.component'; 
import { CheckboxexampleComponent } from './checkboxexample/checkboxexample.component';
import { FactappComponent } from './factapp/factapp.component';
import { ScsComponent } from './scs/scs.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
const routes: Routes = [ 
   { path: '', redirectTo: '/home', pathMatch: 'full' },
   {path:"calc/:id", component:CalcComponent}, 
   {path:"checkbox", component:CheckboxexampleComponent},
   {path:"fact", component:FactappComponent} ,
    {path:"scs", component:ScsComponent} ,
    {path:"home", component:HomeComponent} ,
    {path:"about", component:AboutComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { 


}


5) define routerLink in navigation under app-component

6) Check proper path of css and js of index.html file  sample of index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ShivaTutorials</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="https://fonts.googleapis.com/css?family=Merriweather:300,400|Montserrat:400,700" rel="stylesheet">
<!-- Animate.css -->
<link rel="stylesheet" href="assets/css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="assets/css/icomoon.css">
<!-- Themify Icons-->
<link rel="stylesheet" href="assets/css/themify-icons.css">
<!-- Bootstrap  -->
<link rel="stylesheet" href="assets/css/bootstrap.css">

<!-- Owl Carousel  -->
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<link rel="stylesheet" href="assets/css/owl.theme.default.min.css">

<!-- Theme style  -->
<link rel="stylesheet" href="assets/css/style.css">

<!-- Modernizr JS -->
<script src="assets/js/modernizr-2.6.2.min.js"></script>
</head>
<body>
  <app-root></app-root>
</body>
<script src="assets/js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="assets/js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="assets/js/jquery.waypoints.min.js"></script>
<!-- Carousel -->
<script src="assets/js/owl.carousel.min.js"></script>

<!-- Main -->
<script src="assets/js/main.js"></script>

</html>


7) Sample of about.component.html of about component

<div class="gtco-section">
<div class="gtco-container">
<div class="row gtco-heading">
<div class="col-md-7 text-left">
<h2>Our Team</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus placerat enim et urna sagittis, rhoncus euismod erat tincidunt. Donec tincidunt volutpat erat.</p>
</div>
<div class="col-md-3 col-md-push-2 text-center">
<p class="mt-md"><a href="#" class="btn btn-special btn-block">Join our team</a></p>
</div>
</div>
<div class="row">

<div class="col-md-12">
<div class="owl-carousel owl-carousel-carousel">
<div class="item">
<div class="gtco-staff">
<img src="images/staff_1.jpg" alt="" class="img-responsive">
<h2>Jane Simpson</h2>
<p class="role">Architect</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus placerat enim et urna sagittis, rhoncus euismod erat tincidunt. Donec tincidunt volutpat erat.</p>
<ul class="fh5co-social">
<li><a href="#"><i class="icon-facebook"></i></a></li>
<li><a href="#"><i class="icon-twitter"></i></a></li>
<li><a href="#"><i class="icon-linkedin"></i></a></li>
</ul>
</div>
</div>
<div class="item">
<div class="gtco-staff">
<img src="images/staff_2.jpg" alt="" class="img-responsive">
<h2>Richard Wilson</h2>
<p class="role">Civil Engineer</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus placerat enim et urna sagittis, rhoncus euismod erat tincidunt. Donec tincidunt volutpat erat.</p>
<ul class="fh5co-social">
<li><a href="#"><i class="icon-facebook"></i></a></li>
<li><a href="#"><i class="icon-twitter"></i></a></li>
<li><a href="#"><i class="icon-linkedin"></i></a></li>
</ul>
</div>
</div>
<div class="item">
<div class="gtco-staff">
<img src="images/staff_3.jpg" alt="" class="img-responsive">
<h2>Craig Davidson</h2>
<p class="role">Engineer</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus placerat enim et urna sagittis, rhoncus euismod erat tincidunt. Donec tincidunt volutpat erat.</p>
<ul class="fh5co-social">
<li><a href="#"><i class="icon-facebook"></i></a></li>
<li><a href="#"><i class="icon-twitter"></i></a></li>
<li><a href="#"><i class="icon-linkedin"></i></a></li>
</ul>
</div>
</div>

<div class="item">
<div class="gtco-staff">
<img src="images/staff_1.jpg" alt="" class="img-responsive">
<h2>Jane Simpson</h2>
<p class="role">Architect</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus placerat enim et urna sagittis, rhoncus euismod erat tincidunt. Donec tincidunt volutpat erat.</p>
<ul class="fh5co-social">
<li><a href="#"><i class="icon-facebook"></i></a></li>
<li><a href="#"><i class="icon-twitter"></i></a></li>
<li><a href="#"><i class="icon-linkedin"></i></a></li>
</ul>
</div>
</div>
<div class="item">
<div class="gtco-staff">
<img src="images/staff_2.jpg" alt="" class="img-responsive">
<h2>Richard Wilson</h2>
<p class="role">Civil Engineer</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus placerat enim et urna sagittis, rhoncus euismod erat tincidunt. Donec tincidunt volutpat erat.</p>
<ul class="fh5co-social">
<li><a href="#"><i class="icon-facebook"></i></a></li>
<li><a href="#"><i class="icon-twitter"></i></a></li>
<li><a href="#"><i class="icon-linkedin"></i></a></li>
</ul>
</div>
</div>
<div class="item">
<div class="gtco-staff">
<img src="images/staff_3.jpg" alt="" class="img-responsive">
<h2>Craig Davidson</h2>
<p class="role">Engineer</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus placerat enim et urna sagittis, rhoncus euismod erat tincidunt. Donec tincidunt volutpat erat.</p>
<ul class="fh5co-social">
<li><a href="#"><i class="icon-facebook"></i></a></li>
<li><a href="#"><i class="icon-twitter"></i></a></li>
<li><a href="#"><i class="icon-linkedin"></i></a></li>
</ul>
</div>
</div>
<div class="item">
<div class="gtco-staff">
<img src="images/staff_1.jpg" alt="" class="img-responsive">
<h2>Jane Simpson</h2>
<p class="role">Architect</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus placerat enim et urna sagittis, rhoncus euismod erat tincidunt. Donec tincidunt volutpat erat.</p>
<ul class="fh5co-social">
<li><a href="#"><i class="icon-facebook"></i></a></li>
<li><a href="#"><i class="icon-twitter"></i></a></li>
<li><a href="#"><i class="icon-linkedin"></i></a></li>
</ul>
</div>
</div>
<div class="item">
<div class="gtco-staff">
<img src="images/staff_2.jpg" alt="" class="img-responsive">
<h2>Richard Wilson</h2>
<p class="role">Civil Engineer</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus placerat enim et urna sagittis, rhoncus euismod erat tincidunt. Donec tincidunt volutpat erat.</p>
<ul class="fh5co-social">
<li><a href="#"><i class="icon-facebook"></i></a></li>
<li><a href="#"><i class="icon-twitter"></i></a></li>
<li><a href="#"><i class="icon-linkedin"></i></a></li>
</ul>
</div>
</div>
<div class="item">
<div class="gtco-staff">
<img src="images/staff_3.jpg" alt="" class="img-responsive">
<h2>Craig Davidson</h2>
<p class="role">Engineer</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus placerat enim et urna sagittis, rhoncus euismod erat tincidunt. Donec tincidunt volutpat erat.</p>
<ul class="fh5co-social">
<li><a href="#"><i class="icon-facebook"></i></a></li>
<li><a href="#"><i class="icon-twitter"></i></a></li>
<li><a href="#"><i class="icon-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END .gtco-services -->

<div class="gtco-section">
<div class="gtco-container">
<div class="row">
<div class="col-md-6 gtco-news">
<h2>News</h2>
<ul>
<li>
<a href="#">
<span class="post-date">September 10, 2016</span>
<h3>Manila Bridge Re-construction</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus placerat enim et urna sagittis, rhoncus euismod...</p>
</a>
</li>

<li>
<a href="#">
<span class="post-date">September 10, 2016</span>
<h3>Manila Bridge Re-construction</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus placerat enim et urna sagittis, rhoncus euismod...</p>
</a>
</li>

<li>
<a href="#">
<span class="post-date">September 10, 2016</span>
<h3>Manila Bridge Re-construction</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus placerat enim et urna sagittis, rhoncus euismod...</p>
</a>
</li>
</ul>
<p><a href="#" class="btn btn-sm btn-special">More News</a></p>
</div>
<!-- END News -->
<div class="col-md-5 col-md-push-1 gtco-testimonials">
<h2>Testimonials</h2>
<blockquote>
<p>&ldquo;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus placerat enim et urna sagittis, rhoncus euismod erat tincidunt. Donec tincidunt volutpat erat.&ldquo;</p>
<p class="author"><cite>&mdash; John Doe Dueller</cite></p>
</blockquote>
<blockquote>
<p>&ldquo;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus placerat enim et urna sagittis, rhoncus euismod erat tincidunt. Donec tincidunt volutpat erat.&ldquo;</p>
<p class="author"><cite>&mdash; John Doe Dueller</cite></p>
</blockquote>
</div>
</div>
</div>
</div>
<!-- END  -->

<div class="gtco-section gto-features">
<div class="gtco-container">
<div class="row">
<div class="col-md-4">
<div class="feature-left">
<i class="ti-zip icon"></i>
<div class="copy">
<h3>Architect</h3>
<p>Lorem ipsum dolor sit ameteista, consectetur adipiscing is not elitistaris.</p>
<p><a href="#" class="gtco-more">Learn more</a></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="feature-left">
<i class="ti-hummer icon"></i>
<div class="copy">
<h3>Planning</h3>
<p>Lorem ipsum dolor sit ameteista, consectetur adipiscing is not elitistaris.</p>
<p><a href="#" class="gtco-more">Learn more</a></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="feature-left">
<i class="ti-plug icon"></i>
<div class="copy">
<h3>Parks &amp; Events</h3>
<p>Lorem ipsum dolor sit ameteista, consectetur adipiscing is not elitistaris.</p>
<p><a href="#" class="gtco-more">Learn more</a></p>
</div>
</div>
</div>
</div>
</div>
</div>





Post a Comment

If you have any doubt in programming or join online classes then you can contact us by comment .

Previous Post Next Post