Angular Landing is a material design landing page built with Angular and Angular CLI. It implements Angular Material Design package with minimalist design. Each page section is composed of its own html, scss and ts files, organized in its own directory and So it's easy to customize and reuse.

IMPORTANT: It's not An regular HTML landing page. It's built with Angular

  • Angular Material
  • Full responsive
  • Multiple Home versions
  • Alternative sections

Getting Started

Make sure you have Nodejs, yarn and angular-cli installed on your computer.

Download node

Angular CLI Doc:

Serve and build

Use terminal and navigate to project root.

Then run yarn

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200. The app will automatically reload if you change any of the source files.

Code Scaffolding

Run ng generate component componentName to generate a new component. You can also use ng generate directive/pipe/service/class/module.


Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Theming Guide

First create color palettes for

  • primary
  • accent and
  • warn

Create palette here Copy sass code for angular 2+, create file like src/assets/styles/themes/indigo.scss with the generated code. And include that file in .angular-cli.json

For more about theming, visit these links

Common CSS Classes

Background color
  • .mat-bg-primary
  • .mat-bg-accent
  • .mat-bg-warn
  • .mat-color-primary
  • .mat-color-accent
  • .mat-color-warn
  • .m-0
  • .mt-1
  • .mr-1
  • .mb-1
  • .ml-1
  • .mb-05
  • .margin-333
  • .pt-1
  • .pr-1
  • .pb-1
  • .pl-1
  • .p-0
Font related
  • .fz-1
  • .fz-2
  • .text-center
  • .font-normal
  • .text-muted
  • .text-muted-white
  • .text-sm
  • .bg-none
  • .bg-white
  • .height-100
  • .mat-box-shadow
  • .full-width

Do you like Angular Landing?

Please give Angular Landing a 5 star rating.

This will inspire me to add more features.