Installation

Basic Installation

Steps to be followed for getting started with the template:

There are followings basics packages you should install before going further.

  1. Open terminal or CMD and go the root directory of the template
  2. Run in terminal or CMD: npm install
  3. To Run project on Local environment run: ng serve
  4. Then visit: http://localhost:4200

Development to production

Here is the steps of production:

  1. If you can deploy in subdirectory and set the production path in environment.ts
  2. To Deploy project on server create production build by running: ng build --prod
  3. This will generate /dist folder in project root directory you'll have to upload these file using a FTP on your server
  4. Now that you have followed these steps your basic installation is complete and ready to flaunt your site to the world.

Folder Structure

Here is the general structure of the template:


qloud-angular
| - e2e
   | - src
     - protractor.conf.js
     - tsconfig.json

| - node_modules

| - src
  | - app
    | - about
    | - blog
    | - cloud-analytics
    | - cloud-compute
    | - cloud-databases
    | - cloud-hosting
    | - contact-us
    | - landing-page1
    | - landing-page2
    | - landing-page3
    | - pages
    | - portfolio
    | - qloud
    | - app-routing.module.ts
    | - app.component.html
    | - app.component.ts
    | - app.module.ts

  | - assets
    | - css
    | - fonts
    | - images
    | - js
    | - revslider

| - constants
    | - menu.js                            
| - environments
    | - environment.prod.ts
    | - environment.ts

  - favicon.ico
  - index.html
  - .editorconfig
  - .gitignore
  - angular.json
  - package-lock.json
  - package.json
  - README.md

For Favicon icon

Set favicon for replace favicon.ico and restart server

For Logo

Use the header style 1 which is in qloud -> components -> header. Replace "logo.png" with your own logo image URL.


<app-header [logoImg]="logoImage" [navItemList]="navItems"></app-header>

<app-footer [logoImg]="logoImage" [contactInfo]="contactInfo"></app-footer>

  import { topMenuBarItems } from '../../../constants/menu';
  
    export class LandingPage1Component implements OnInit {
        logoImage = './assets/images/logo.png';
        contactInfo: any = {
            contactNumber: '+0123456789',
            email: 'support@iqnonicthemes.com'
        };

        public navItems: any = topMenuBarItems;

        ngOnInit() {
        }
    }

Use the header style 2 which is in qloud -> components -> header. Replace "logo.png" with your own logo image URL.


<app-header [logoImg]="logoImage" [classHeader]="classHeader" [navItemList]="navItems"></app-header>

<app-footer [logoImg]="footerlogoImg" [contactInfo]="contactInfo"></app-footer>

  import { topMenuBarItems } from '../../../constants/menu';
  
    export class LandingPage2Component implements OnInit {
        logoImage = './assets/images/logo-black.png';
        footerlogoImg = './assets/images/logo.png';
        classHeader = 'header2';
        contactInfo: any = {
            contactNumber: '+0123456789',
            email: 'support@iqnonicthemes.com'
        };

        public navItems: any = topMenuBarItems;

        ngOnInit() {
        }
    }

Layout Configure

Here is the layout and routing configure


 | - app
    | - landing-page1
    | - landing-page2
    | - landing-page3
 
| - app-routing.module.ts

Router url configure


// Set Layout in this route
const routes: Routes = [
    { path: 'landing-page1', loadChildren: './landing-page1/landing-page1.module#LandingPage1Module' },
    { path: 'landing-page2', loadChildren: './landing-page2/landing-page2.module#LandingPage2Module' },
    { path: 'landing-page3', loadChildren: './landing-page3/landing-page3.module#LandingPage3Module' },
];

Header

Here is the header object example just you can copy and paste and rename the title and href.


[
    {
        href: '#iq-about',
        title: 'About Us ',
        submenu: [
        {
            href: '/about-us-1',
            title: 'About Us One'
        },
        {
            href: '/about-us-2',
            title: 'About Us Two'
        }
        ]
    },
]

Use the header style 1 which is in qloud -> components -> header. Replace "logo.png" with your own logo image URL.


<app-header [logoImg]="logoImage" [navItemList]="navItems"></app-header>

<app-footer [logoImg]="logoImage" [contactInfo]="contactInfo"></app-footer>

  import { topMenuBarItems } from '../../../constants/menu';
  
    export class LandingPage1Component implements OnInit {
        logoImage = './assets/images/logo.png';
        contactInfo: any = {
            contactNumber: '+0123456789',
            email: 'support@iqnonicthemes.com'
        };

        public navItems: any = topMenuBarItems;

        ngOnInit() {
        }
    }

Use the header style 2 which is in qloud -> components -> header. Replace "logo-black.png" with your own logo image URL.


<app-header [logoImg]="logoImage" [classHeader]="classHeader" [navItemList]="navItems"></app-header>

<app-footer [logoImg]="footerlogoImg" [contactInfo]="contactInfo"></app-footer>

  import { topMenuBarItems } from '../../../constants/menu';
  
    export class LandingPage2Component implements OnInit {
        logoImage = './assets/images/logo-black.png';
        footerlogoImg = './assets/images/logo.png';
        classHeader = 'header2';
        contactInfo: any = {
            contactNumber: '+0123456789',
            email: 'support@iqnonicthemes.com'
        };

        public navItems: any = topMenuBarItems;

        ngOnInit() {
        }
    }


import { topMenuBarItems } from '../../../constants/menu';

public navItems: any = topMenuBarItems;

Browser Support

Supports all major Browsers like Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer 9 and above.

Change Log

Version 1.0

- Initial Release

Source & Credits

All images and videos are for preview purposes only and are not included in the download files. Images are of copyrights under Creative Commons CC0.


Images



Plugins



CSS & Fonts