Commit d1e7f935 by Arjun

initial push

parent 18a98410
...@@ -28,9 +28,13 @@ ...@@ -28,9 +28,13 @@
"src/assets" "src/assets"
], ],
"styles": [ "styles": [
"src/styles.scss" "src/styles.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
], ],
"scripts": [] "scripts": [
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/jquery/dist/jquery.min.js"
]
}, },
"configurations": { "configurations": {
"production": { "production": {
......
...@@ -2929,6 +2929,11 @@ ...@@ -2929,6 +2929,11 @@
"multicast-dns-service-types": "^1.1.0" "multicast-dns-service-types": "^1.1.0"
} }
}, },
"bootstrap": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz",
"integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag=="
},
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
...@@ -6405,6 +6410,11 @@ ...@@ -6405,6 +6410,11 @@
} }
} }
}, },
"jquery": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
"integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw=="
},
"js-levenshtein": { "js-levenshtein": {
"version": "1.1.6", "version": "1.1.6",
"resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz", "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
......
...@@ -19,6 +19,8 @@ ...@@ -19,6 +19,8 @@
"@angular/platform-browser": "~8.2.14", "@angular/platform-browser": "~8.2.14",
"@angular/platform-browser-dynamic": "~8.2.14", "@angular/platform-browser-dynamic": "~8.2.14",
"@angular/router": "~8.2.14", "@angular/router": "~8.2.14",
"bootstrap": "^4.3.1",
"jquery": "^3.4.1",
"rxjs": "~6.4.0", "rxjs": "~6.4.0",
"tslib": "^1.10.0", "tslib": "^1.10.0",
"zone.js": "~0.9.1" "zone.js": "~0.9.1"
......
...@@ -2,7 +2,11 @@ import { NgModule } from '@angular/core'; ...@@ -2,7 +2,11 @@ import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router'; import { Routes, RouterModule } from '@angular/router';
const routes: Routes = []; const routes: Routes = [{
path:"",
redirectTo:"index",
pathMatch:"full"
}];
@NgModule({ @NgModule({
imports: [RouterModule.forRoot(routes)], imports: [RouterModule.forRoot(routes)],
......
...@@ -3,14 +3,20 @@ import { NgModule } from '@angular/core'; ...@@ -3,14 +3,20 @@ import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import {HomeModule} from './home/home.module';
import { NavbarComponent } from './navbar/navbar.component';
import { FooterComponent } from './footer/footer.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
AppComponent AppComponent,
NavbarComponent,
FooterComponent
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
AppRoutingModule AppRoutingModule,
HomeModule
], ],
providers: [], providers: [],
bootstrap: [AppComponent] bootstrap: [AppComponent]
......
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FooterComponent } from './footer.component';
describe('FooterComponent', () => {
let component: FooterComponent;
let fixture: ComponentFixture<FooterComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ FooterComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(FooterComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-footer',
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.scss']
})
export class FooterComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {ModuleRouting} from './home.routing';
import { IndexComponent } from './index/index.component';
@NgModule({
declarations: [IndexComponent],
imports: [
CommonModule,
ModuleRouting
]
})
export class HomeModule { }
import { ModuleWithProviders } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { IndexComponent } from './index/index.component';
const ModuleRoutes: Routes = [
{ path: 'index', component: IndexComponent }
];
export const ModuleRouting:ModuleWithProviders= RouterModule.forChild(
ModuleRoutes
);
\ No newline at end of file
<section class="cms-slider">
<div id="demo" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="container">
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-7">
<div>
<h1>Better Course For<br>
<span>Better Skills</span></h1>
<div class="mt-5">
<a href="#" class="btn btn-started">Get Started</a>
<a href="#" class="btn btn-course">View Course</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-7">
<div>
<h1>Better Course For<br>
<span>Better Skills</span></h1>
<div class="mt-5">
<a href="#" class="btn btn-started">Get Started</a>
<a href="#" class="btn btn-course">View Course</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-7">
<div>
<h1>Better Course For<br>
<span>Better Skills</span></h1>
<div class="mt-5">
<a href="#" class="btn btn-started">Get Started</a>
<a href="#" class="btn btn-course">View Course</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<div class="slider-boxes d-md-block d-none">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="purple-box">
<div class="main-box">
<img src="assets/main_menu1.png" class="img-fluid" alt="Image">
<h1>STUDENTS EVENTS</h1>
</div>
</div>
</div>
<div class="col-md-4">
<div class="blue-box">
<div class="main-box">
<img src="assets/main_menu2.png" class="img-fluid" alt="Image">
<h1>TEACHERS PROFILES</h1>
</div>
</div>
</div>
<div class="col-md-4">
<div class="purple-box">
<div class="main-box">
<img src="assets/main_menu3.png" class="img-fluid" alt="Image">
<h1>National Awards</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="cm-welcome">
<div class="container">
<div class="row">
<div class="col-md-7 pr-md-5 pr-3">
<h1>Experience</h1>
<h2>CM.H.SEC.School</h2>
<p class="mt-4 text-justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus </p>
<a href="#" class="btn btn-readmore">READ MORE ABOUT US</a>
</div>
<div class="col-md-5 mt-md-0 mt-5">
<div class="welcome-img-c">
<img src="assets/welcome-img.png" class="img-fluid" alt="welcome-img">
<h3>50 years of excellence</h3>
</div>
</div>
</div>
<div class="row mt-5 facility-row text-center">
<div class="col-md-3 pl-md-0 pl-3 pr-md-0 pr-3">
<img src="assets/welcome-1.png" class="img-fluid" alt="Image">
</div>
<div class="col-md-3 pl-md-0 pl-3 pr-md-0 pr-3">
<img src="assets/welcome-2.png" class="img-fluid" alt="Image">
</div>
<div class="col-md-3 pl-md-0 pl-3 pr-md-0 pr-3">
<img src="assets/welcome-3.png" class="img-fluid" alt="Image">
</div>
<div class="col-md-3 pl-md-0 pl-3 pr-md-0 pr-3">
<img src="assets/welcome-4.png" class="img-fluid" alt="Image">
</div>
</div>
</div>
</section>
<section class="cmachievements text-md-left text-center">
<div class="container">
<h1>Our Achievements</h1>
<div class="row mt-5">
<div class="col-md-3 pr-md-5 pr-0 mt-md-0 mt-5">
<div class="counter-box border-right">
<img src="assets/icon-1.png" class="img-fluid" alt="Icon">
<h2 class="count mt-3">1969</h2>
<h3>Year Founded</h3>
</div>
</div>
<div class="col-md-3 pr-md-5 pr-0 mt-md-0 mt-5">
<div class="counter-box border-right">
<img src="assets/icon-2.png" class="img-fluid" alt="Icon">
<h2 class="count mt-3">36</h2>
<h3>Certified Teachers</h3>
</div>
</div>
<div class="col-md-3 pr-md-5 pr-0 mt-md-0 mt-5">
<div class="counter-box border-right">
<img src="assets/icon-3.png" class="img-fluid" alt="Icon">
<h2 class="count mt-3">60536</h2>
<h3>Passout Students</h3>
</div>
</div>
<div class="col-md-3 mt-md-0 mt-5">
<div class="counter-box">
<img src="assets/icon-4.png" class="img-fluid" alt="Icon">
<h2 class="count mt-3">256</h2>
<h3>Award Winner</h3>
</div>
</div>
</div>
</div>
</section>
.cms-slider {
position: relative;
.carousel-item {
background: url('../../../assets/slider-1.jpg') no-repeat;
background-size: cover !important;
background-position: center center !important;
height: 100vh;
.container {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
h1 {
font-size: 50px;
color: #fff;
font-weight: 300;
line-height: 1;
span {
font-weight: 700;
}
}
.btn-started {
background-color: #ff9700;
border: 2px solid #ff9700;
border-radius: 0;
color: #fff;
margin-right: 15px;
padding: 5px 25px;
}
.btn-course {
border: 2px solid #fff;
color: #fff;
border-radius: 0;
padding: 5px 25px;
}
}
}
.carousel-item:nth-child(2) {
background: url('../../../assets/slider-2.jpg') no-repeat;
}
.carousel-item:nth-child(3) {
background: url('../../../assets/slider-1.jpg') no-repeat;
}
.slider-boxes {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
.purple-box {
background-color:#7f3c58;
}
.blue-box {
background-color:#1d3162;
}
.main-box {
background-image: url('../../../assets/art.png');
padding: 15px 25px;
}
img {
max-height: 60px;
}
h1 {
color: #fff;
font-size: 24px;
margin-top: 25px;
margin-bottom: 0;
text-transform: uppercase;
}
}
}
.cm-welcome {
padding: 70px 0;
h1 {
font-size: 40px;
font-weight: 900;
}
h2 {
font-size: 30px;
font-weight: 700;
line-height: 1;
}
.btn-readmore {
border: 2px solid #000;
border-radius: 0;
font-weight: 600;
}
.welcome-img-c {
background-color: #272727;
max-width: 410px;
margin-left: auto;
h3 {
width: 100%;
color: #7d7d7d;
padding: 22px 0 26px 0;;
text-align: center;
line-height: 1;
}
}
.facility-row {
background-color: #283b69;
}
}
.cmachievements {
background-image: url('../../../assets/counter-img.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 40px 0;
h1 {
color: #fff;
font-weight: 700;
}
.border-right {
border-right: 1px solid #7d7d7d;
}
.counter-box {
img {
max-height: 75px;
}
h2 {
color: #fff;
font-size: 50px;
font-weight: 900;
}
h3 {
font-size: 22px;
color: #fff;
line-height: 1;
font-weight: 300;
}
}
}
@media only screen and (max-width: 992px) {
.facility-row {
background-color: #fff !important;
}
.border-right {
border-right: 0 !important;
}
}
\ No newline at end of file
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { IndexComponent } from './index.component';
describe('IndexComponent', () => {
let component: IndexComponent;
let fixture: ComponentFixture<IndexComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ IndexComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(IndexComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
declare var $: any;
declare const window: any;
@Component({
selector: 'app-index',
templateUrl: './index.component.html',
styleUrls: ['./index.component.scss']
})
export class IndexComponent implements OnInit {
constructor() { }
ngOnInit() {
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 3000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
}
}
<header class="cms-header" [class.scrolled_navbar]="isClicked">
<div class="sub-header text-right">
<div class="container">
<ul>
<li><a href="#" class="cms-call-h"><img src="assets/call-icon.png" class="pr-2" alt="Call"> 044-26801999</a></li>
<li class="vr-c">|</li>
<li><a href="#" class="nav-soci"><img src="assets/icon-twitter.png" alt="Twitter"></a></li>
<li><a href="#" class="nav-soci"><img src="assets/icon-facebook.png" alt="Facebook"></a></li>
</ul>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-light cms-navbar">
<div class="container">
<a class="navbar-brand" href="#">
<img src="assets/logo.png" class="img-fluid" alt="Logo">
</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" (click)="toggleClick()">
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
<div class="collapse navbar-collapse mt-md-0 mt-4" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Academics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">School Activity</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Infrastructure</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Feedback</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
.cms-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 2;
transition: all .4s ease-in-out;
.sub-header {
.cms-call-h {
color: #fff;
text-decoration: none;
}
.vr-c {
font-size: 34px;
font-weight: 100;
color: #fff;
padding-top: 5px;
top: 4px;
position: relative;
padding: 0 5px;
cursor: context-menu;
}
ul {
li {
display: inline-block;
margin-left: 15px;
}
}
}
.cms-navbar {
.navbar-brand {
padding: 0;
img {
height: 100px;
margin-top: -75px;
transition: all .4s ease-in-out;
}
}
.nav-link {
margin-left: 5px;
text-transform: uppercase;
font-size: 14px;
color: #fff;
padding: 5px 20px;
}
.active>.nav-link {
border: 1px solid #fff;
}
}
}
.icon-bar {
width: 22px;
height: 2px;
background-color: #B6B6B6;
display: block;
transition: all 0.2s;
margin-top: 4px
}
.navbar-toggler {
border: none;
background: transparent !important;
padding: 0;
}
.navbar-toggler:focus {
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
outline: none;
}
.navbar-toggler .top-bar {
transform: rotate(45deg);
transform-origin: 10% 10%;
}
.navbar-toggler .middle-bar {
opacity: 0;
}
.navbar-toggler .bottom-bar {
transform: rotate(-45deg);
transform-origin: 10% 90%;
}
.navbar-toggler.collapsed .top-bar {
transform: rotate(0);
}
.navbar-toggler.collapsed .middle-bar {
opacity: 1;
}
.navbar-toggler.collapsed .bottom-bar {
transform: rotate(0);
}
.cms-header.scrolled_navbar {
background-color: #000;
box-shadow: 0px 2px 19px 0px rgba(0, 0, 0, 0.15);
margin-top: -66px;
}
.cms-header.scrolled_navbar .cms-navbar {
.navbar-brand {
img {
height: 40px !important;
margin-top: 0 !important;
}
}
}
@media only screen and (max-width: 992px) {
// .cms-header {
// background-color: #000;
// }
.cms-header.scrolled_navbar {
margin-top: 0;
}
.sub-header {
display: none;
}
.cms-navbar {
.navbar-brand {
img {
height: 40px !important;
margin-top: 0 !important;
}
}
.nav-link {
padding: 5px 8px !important;
}
}
}
@media only screen and (max-width: 1200px) {
.nav-link {
font-size: 12px !important;
}
}
\ No newline at end of file
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { NavbarComponent } from './navbar.component';
describe('NavbarComponent', () => {
let component: NavbarComponent;
let fixture: ComponentFixture<NavbarComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ NavbarComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(NavbarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit, HostListener } from '@angular/core';
declare var $: any;
declare const window: any;
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {
isClicked:boolean;
constructor() {
this.isClicked =false;
}
ngOnInit() {
}
toggleClick(){
this.isClicked = !this.isClicked;
}
@HostListener('window:scroll', [])
onWindowScroll() {
const number = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
$(window).scroll(function () {
const sticky = $('.cms-header'),
scroll = $(window).scrollTop();
if (scroll > 10) { sticky.addClass('scrolled_navbar'); } else { sticky.removeClass('scrolled_navbar'); }
});
window.addEventListener('load', function() {
const sticky = $('.cms-header'),
scroll = $(window).scrollTop();
if (scroll > 10) { sticky.addClass('scrolled_navbar'); } else { sticky.removeClass('scrolled_navbar'); }
});
}
}
...@@ -6,6 +6,8 @@ ...@@ -6,6 +6,8 @@
<base href="/"> <base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head> </head>
<body> <body>
<app-root></app-root> <app-root></app-root>
......
/* You can add global styles to this file, and also import other style files */ /* You can add global styles to this file, and also import other style files */
/* reset file */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-family: 'Roboto', sans-serif;
vertical-align: baseline;
line-height: 1.5;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a:hover, a:focus, a:active, a:visited {
text-decoration: none;
outline: none;
}
button:hover, button:focus, button:active, button:visited, .btn:focus, .btn:active:focus {
outline: none;
}
/* width */
::-webkit-scrollbar {
width: 5px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #61941e;
box-shadow: inset 0 0 5px grey;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #000;
box-shadow: inset 0 0 5px grey;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment