diff --git a/package-lock.json b/package-lock.json index 3d523d4..530d023 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "n2v", + "name": "edupro", "version": "0.0.0", "lockfileVersion": 1, "requires": true, @@ -3563,8 +3563,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -3585,14 +3584,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3607,20 +3604,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -3737,8 +3731,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -3750,7 +3743,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3765,7 +3757,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -3773,14 +3764,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3799,7 +3788,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -3880,8 +3868,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -3893,7 +3880,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -3979,8 +3965,7 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -4016,7 +4001,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -4036,7 +4020,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -4080,14 +4063,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, @@ -5621,6 +5602,11 @@ "pify": "^3.0.0" } }, + "lesshat": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/lesshat/-/lesshat-4.1.0.tgz", + "integrity": "sha1-WjLco2pVFlaaSG+O0Q3//3nUyOA=" + }, "levn": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz", diff --git a/package.json b/package.json index 6f4ea42..9ec7e5b 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "core-js": "2.5.4", "font-awesome": "4.7.0", "jquery": "3.3.1", + "lesshat": "4.1.0", "node-sass": "4.11.0", "popper.js": "1.14.7", "rxjs": "6.3.3", diff --git a/src/app/app.component.html b/src/app/app.component.html index 8d08b1b..afe9f86 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,6 +1,5 @@ - diff --git a/src/app/app.module.ts b/src/app/app.module.ts index d271ace..3e4047e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -5,6 +5,7 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { HomeComponent } from './home/home.component'; + import { UserDashboardComponent } from './user-dashboard/user-dashboard.component'; import { ContactComponent } from './contact/contact.component'; import { NavbarComponent } from './shared/navbar/navbar.component'; @@ -16,9 +17,25 @@ import { CoursesDescriptionComponent } from './courses-description/courses-descr import { ForumComponent } from './forum/forum.component'; import { CoursePreviewComponent } from './course-preview/course-preview.component'; import { AboutComponent } from './about/about.component'; +import { BannerComponent } from './home/banner/banner.component'; +import { HomeAboutusComponent } from './home/home-aboutus/home-aboutus.component'; +import { HCategoryComponent } from './home/h-categories/h-category/h-category.component'; +import { HCategoriesComponent } from './home/h-categories/h-categories.component'; +import { HNumberComponent } from './home/h-numbers/h-number/h-number.component'; +import { HNumbersComponent } from './home/h-numbers/h-numbers.component'; +import { HomeCourseComponent } from './home/home-courses/home-course/home-course.component'; +import { HomeCoursesComponent } from './home/home-courses/home-courses.component'; @NgModule({ declarations: [ + HomeCourseComponent, + HomeCoursesComponent, + HNumberComponent, + HNumbersComponent, + HomeAboutusComponent, + HCategoryComponent, + HCategoriesComponent, + BannerComponent, AppComponent, HomeComponent, NavbarComponent, diff --git a/src/app/home/banner/banner.component.html b/src/app/home/banner/banner.component.html new file mode 100644 index 0000000..8a5b2d3 --- /dev/null +++ b/src/app/home/banner/banner.component.html @@ -0,0 +1,17 @@ + + diff --git a/src/app/home/banner/banner.component.scss b/src/app/home/banner/banner.component.scss new file mode 100644 index 0000000..675696f --- /dev/null +++ b/src/app/home/banner/banner.component.scss @@ -0,0 +1,98 @@ +.banner{ +// background-repeat: no-repeat; +// background-size: cover; +// background-image: url('https://ak7.picdn.net/shutterstock/videos/10060967/thumb/1.jpg'); +background-color: #D0DAFF; +padding: 100px; +} +.button-div{ + z-index: 2; +} +.quote{ +margin-left: 10%; + font-size: 3.5em; + width: 40%; +} + +// Buttons CSS +a.animated-button:link, a.animated-button:visited { + position: relative; + display: block; + margin: 30px auto 0; + padding: 14px 15px; + color: #44579A; + font-size:16px; + text-align: center; + text-decoration: none; + text-transform: uppercase; + overflow: hidden; + letter-spacing: .08em; + border-radius: 0; + text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2); + -webkit-transition: all 1s ease; + -moz-transition: all 1s ease; + -o-transition: all 1s ease; + transition: all 1s ease; +} +a.animated-button:link:after, a.animated-button:visited:after { + content: ""; + position: absolute; + height: 0%; + left: 50%; + top: 50%; + width: 150%; + z-index: -1; + -webkit-transition: all 0.75s ease 0s; + -moz-transition: all 0.75s ease 0s; + -o-transition: all 0.75s ease 0s; + transition: all 0.75s ease 0s; +} +a.animated-button:link:hover, a.animated-button:visited:hover { + color: #D0DAFF; + text-shadow: none; +} +a.animated-button:link:hover:after, a.animated-button:visited:hover:after { + height: 450%; +} +a.animated-button:link, a.animated-button:visited { + position: relative; + display: block; + margin: 30px auto 0; + padding: 14px 15px; + color: #44579A; + font-size:20px; + border-radius: 0; + text-align: center; + text-decoration: none; + text-transform: uppercase; + overflow: hidden; + letter-spacing: .08em; + text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2); + -webkit-transition: all 1s ease; + -moz-transition: all 1s ease; + -o-transition: all 1s ease; + transition: all 1s ease; +} + +/* Victoria Buttons */ + +a.animated-button.victoria-one { + border: 4px solid #44579A; +} +a.animated-button.victoria-one:after { + background: #44579A; + -moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg); + -ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg); + -webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg); + transform: translateX(-50%) translateY(-50%) rotate(-25deg); +} +a.animated-button.victoria-two { + border: 4px solid #44579A; +} +a.animated-button.victoria-two:after { + background: #44579A; + -moz-transform: translateX(-50%) translateY(-50%) rotate(25deg); + -ms-transform: translateX(-50%) translateY(-50%) rotate(25deg); + -webkit-transform: translateX(-50%) translateY(-50%) rotate(25deg); + transform: translateX(-50%) translateY(-50%) rotate(25deg); +} diff --git a/src/app/home/banner/banner.component.spec.ts b/src/app/home/banner/banner.component.spec.ts new file mode 100644 index 0000000..8c84e87 --- /dev/null +++ b/src/app/home/banner/banner.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { BannerComponent } from './banner.component'; + +describe('BannerComponent', () => { + let component: BannerComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ BannerComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(BannerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home/banner/banner.component.ts b/src/app/home/banner/banner.component.ts new file mode 100644 index 0000000..76d7881 --- /dev/null +++ b/src/app/home/banner/banner.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-banner', + templateUrl: './banner.component.html', + styleUrls: ['./banner.component.scss'] +}) +export class BannerComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/home/h-categories/h-categories.component.html b/src/app/home/h-categories/h-categories.component.html new file mode 100644 index 0000000..0ce2567 --- /dev/null +++ b/src/app/home/h-categories/h-categories.component.html @@ -0,0 +1,37 @@ + +
+

Trending Categories

+ + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + + +
diff --git a/src/app/home/h-categories/h-categories.component.scss b/src/app/home/h-categories/h-categories.component.scss new file mode 100644 index 0000000..ce04f01 --- /dev/null +++ b/src/app/home/h-categories/h-categories.component.scss @@ -0,0 +1,16 @@ +.container{ + margin-top: 80px; + align-items: center; + text-align: center; +} +.head{ + margin-bottom: 60px; + font-size: 3em; +} +.margin{ + padding-top: 50px; +} +.row{ + margin-top: 15px; + margin-bottom: 15px; +} diff --git a/src/app/home/h-categories/h-categories.component.spec.ts b/src/app/home/h-categories/h-categories.component.spec.ts new file mode 100644 index 0000000..6112669 --- /dev/null +++ b/src/app/home/h-categories/h-categories.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HCategoriesComponent } from './h-categories.component'; + +describe('HCategoriesComponent', () => { + let component: HCategoriesComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HCategoriesComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HCategoriesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home/h-categories/h-categories.component.ts b/src/app/home/h-categories/h-categories.component.ts new file mode 100644 index 0000000..444556f --- /dev/null +++ b/src/app/home/h-categories/h-categories.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'h-categories', + templateUrl: './h-categories.component.html', + styleUrls: ['./h-categories.component.scss'] +}) +export class HCategoriesComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/home/h-categories/h-category/h-category.component.html b/src/app/home/h-categories/h-category/h-category.component.html new file mode 100644 index 0000000..94b2b06 --- /dev/null +++ b/src/app/home/h-categories/h-category/h-category.component.html @@ -0,0 +1,5 @@ +
+ + +
{{categoryName}}
 +
diff --git a/src/app/home/h-categories/h-category/h-category.component.scss b/src/app/home/h-categories/h-category/h-category.component.scss new file mode 100644 index 0000000..f6fc165 --- /dev/null +++ b/src/app/home/h-categories/h-category/h-category.component.scss @@ -0,0 +1,27 @@ +.block{ + width: 10%; + text-align: center; + display: inline-block; + margin: 0 auto !important; +} +a{ + font-family: Verdana; + color: black; + text-decoration: none; +} +h6{ + font-size: 1.2em; + font-weight: 100; +} +a:hover{ + text-decoration: underline; +} +i{ + margin-bottom: 20px; + color: black; + font-size: 40px !important; + text-align: center; + line-height: 1.5 !important; + height: 40px; + width: 40px; +} diff --git a/src/app/home/h-categories/h-category/h-category.component.spec.ts b/src/app/home/h-categories/h-category/h-category.component.spec.ts new file mode 100644 index 0000000..2f3025a --- /dev/null +++ b/src/app/home/h-categories/h-category/h-category.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HCategoryComponent } from './h-category.component'; + +describe('HCategoryComponent', () => { + let component: HCategoryComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HCategoryComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HCategoryComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home/h-categories/h-category/h-category.component.ts b/src/app/home/h-categories/h-category/h-category.component.ts new file mode 100644 index 0000000..6727a7f --- /dev/null +++ b/src/app/home/h-categories/h-category/h-category.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'h-category', + templateUrl: './h-category.component.html', + styleUrls: ['./h-category.component.scss'] +}) +export class HCategoryComponent implements OnInit { + + constructor() { } + categoryName = 'Software Development'; + ngOnInit() { + } + +} diff --git a/src/app/home/h-numbers/h-number/h-number.component.html b/src/app/home/h-numbers/h-number/h-number.component.html new file mode 100644 index 0000000..ad7dcf1 --- /dev/null +++ b/src/app/home/h-numbers/h-number/h-number.component.html @@ -0,0 +1,5 @@ +
+ +
214+
+
Countries Worldwide
+
diff --git a/src/app/home/h-numbers/h-number/h-number.component.scss b/src/app/home/h-numbers/h-number/h-number.component.scss new file mode 100644 index 0000000..0ed93d4 --- /dev/null +++ b/src/app/home/h-numbers/h-number/h-number.component.scss @@ -0,0 +1,27 @@ +.box{ + padding: 10px; + background-color: #FEAFFF; + width: 180px; + text-align: center; + margin-top: 10px; + margin-bottom: 10px; +} +i{ + margin-bottom: 20px; + color: black; + font-size: 50px !important; + text-align: center; + line-height: 1.5 !important; + height: 50px; + width: 50px; +} +h5{ + color: #000; + font-size: 2.5em; + font-weight: 800; +} +h6{ + color: #000; + font-size: 1.5em; + font-weight: 300; +} diff --git a/src/app/home/h-numbers/h-number/h-number.component.spec.ts b/src/app/home/h-numbers/h-number/h-number.component.spec.ts new file mode 100644 index 0000000..1f3d095 --- /dev/null +++ b/src/app/home/h-numbers/h-number/h-number.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HNumberComponent } from './h-number.component'; + +describe('HNumberComponent', () => { + let component: HNumberComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HNumberComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HNumberComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home/h-numbers/h-number/h-number.component.ts b/src/app/home/h-numbers/h-number/h-number.component.ts new file mode 100644 index 0000000..b2732af --- /dev/null +++ b/src/app/home/h-numbers/h-number/h-number.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-h-number', + templateUrl: './h-number.component.html', + styleUrls: ['./h-number.component.scss'] +}) +export class HNumberComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/home/h-numbers/h-numbers.component.html b/src/app/home/h-numbers/h-numbers.component.html new file mode 100644 index 0000000..bde0435 --- /dev/null +++ b/src/app/home/h-numbers/h-numbers.component.html @@ -0,0 +1,19 @@ +
+

We By The Numbers

+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
diff --git a/src/app/home/h-numbers/h-numbers.component.scss b/src/app/home/h-numbers/h-numbers.component.scss new file mode 100644 index 0000000..5286b23 --- /dev/null +++ b/src/app/home/h-numbers/h-numbers.component.scss @@ -0,0 +1,10 @@ +.bigbox{ + text-align: center; + background-color: #E4E4E4; + padding-top: 30px; + padding-bottom: 30px; +} +h2{ + padding-bottom: 30px; +} + diff --git a/src/app/home/h-numbers/h-numbers.component.spec.ts b/src/app/home/h-numbers/h-numbers.component.spec.ts new file mode 100644 index 0000000..e68df71 --- /dev/null +++ b/src/app/home/h-numbers/h-numbers.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HNumbersComponent } from './h-numbers.component'; + +describe('HNumbersComponent', () => { + let component: HNumbersComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HNumbersComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HNumbersComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home/h-numbers/h-numbers.component.ts b/src/app/home/h-numbers/h-numbers.component.ts new file mode 100644 index 0000000..ef276ce --- /dev/null +++ b/src/app/home/h-numbers/h-numbers.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'h-numbers', + templateUrl: './h-numbers.component.html', + styleUrls: ['./h-numbers.component.scss'] +}) +export class HNumbersComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/home/home-aboutus/home-aboutus.component.html b/src/app/home/home-aboutus/home-aboutus.component.html new file mode 100644 index 0000000..f8ef7a9 --- /dev/null +++ b/src/app/home/home-aboutus/home-aboutus.component.html @@ -0,0 +1,22 @@ +
+

About Us

+
+
+
+ +

Contact Us

+
+
+ +

FAQ

+
+
+ +

Terms and Conditions

+
+
+ +

About us

+
+
+
diff --git a/src/app/home/home-aboutus/home-aboutus.component.scss b/src/app/home/home-aboutus/home-aboutus.component.scss new file mode 100644 index 0000000..34a07cf --- /dev/null +++ b/src/app/home/home-aboutus/home-aboutus.component.scss @@ -0,0 +1,41 @@ +h3{ + font-size: 2.2em; +} +.container{ + margin-top: 30px; + text-align: center; +} +.bor-1{ + border-bottom: 1px solid black; + width: 25%; + margin: 0 auto; + height: 10px; +} +i{ + margin-bottom: 20px; + font-size: 50px !important; + text-align: center; + line-height: 1.5 !important; + height: 80px; + width: 80px; +} +.fa-mobile-alt{ + color: #F58312; +} +.fa-question-circle{ +color :#DE4646; +} +.fa-paste{ + color: #F5ED12; +} +.fa-users{ + color: #264DB8; +} +.row{ + margin-top: 30px; +} +p{ + margin-top: 10px; + font-family: verdana; + font-size: 1.2em; +} diff --git a/src/app/home/home-aboutus/home-aboutus.component.spec.ts b/src/app/home/home-aboutus/home-aboutus.component.spec.ts new file mode 100644 index 0000000..3abd4af --- /dev/null +++ b/src/app/home/home-aboutus/home-aboutus.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HomeAboutusComponent } from './home-aboutus.component'; + +describe('HomeAboutusComponent', () => { + let component: HomeAboutusComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HomeAboutusComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HomeAboutusComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home/home-aboutus/home-aboutus.component.ts b/src/app/home/home-aboutus/home-aboutus.component.ts new file mode 100644 index 0000000..63d4792 --- /dev/null +++ b/src/app/home/home-aboutus/home-aboutus.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'home-aboutus', + templateUrl: './home-aboutus.component.html', + styleUrls: ['./home-aboutus.component.scss'] +}) +export class HomeAboutusComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/home/home-courses/home-course/home-course.component.html b/src/app/home/home-courses/home-course/home-course.component.html new file mode 100644 index 0000000..ed66222 --- /dev/null +++ b/src/app/home/home-courses/home-course/home-course.component.html @@ -0,0 +1,26 @@ + +
+ {{imageAlt}} +
+
{{courseName}}
 +
+
+ + + + + + + +
+ + + + + +
+
+
+ +
+
diff --git a/src/app/home/home-courses/home-course/home-course.component.scss b/src/app/home/home-courses/home-course/home-course.component.scss new file mode 100644 index 0000000..d017fca --- /dev/null +++ b/src/app/home/home-courses/home-course/home-course.component.scss @@ -0,0 +1,49 @@ + +.coursecard{ + margin-top: 20px; + margin-bottom: 20px; + overflow: hidden; + height: 250px; + width: 200px; + box-shadow: 0 19px 38px rgba(0,0,0,0.20), 0 15px 12px rgba(0,0,0,0.22); +} +.courseData{ + margin: 0 10%; +} +a{ + font-family: Verdana, Geneva, Tahoma, sans-serif; + color: black; + text-decoration: none; +} +a:hover{ + text-decoration: underline; +} +.rating{ + position: relative; +} + +//star-ratings +%flex-display { + display: flex; +} +.star-rating { + margin-top: 20px; + letter-spacing: 5px; + @extend %flex-display; + align-items: center; + font-size: 1.2em; +} +.back-stars { + @extend %flex-display; + color: white; + position: relative; + text-shadow: 1px 1px 1px black; +} +.front-stars { + @extend %flex-display; + color: #FFBC0B; + overflow: hidden; + position: absolute; + // text-shadow: 1px 1px 5px #d29b09; + top: 0; +} diff --git a/src/app/home/home-courses/home-course/home-course.component.spec.ts b/src/app/home/home-courses/home-course/home-course.component.spec.ts new file mode 100644 index 0000000..af760c5 --- /dev/null +++ b/src/app/home/home-courses/home-course/home-course.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HomeCourseComponent } from './home-course.component'; + +describe('HomeCourseComponent', () => { + let component: HomeCourseComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HomeCourseComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HomeCourseComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home/home-courses/home-course/home-course.component.ts b/src/app/home/home-courses/home-course/home-course.component.ts new file mode 100644 index 0000000..8962042 --- /dev/null +++ b/src/app/home/home-courses/home-course/home-course.component.ts @@ -0,0 +1,24 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'home-course', + templateUrl: './home-course.component.html', + styleUrls: ['./home-course.component.scss'] +}) +export class HomeCourseComponent implements OnInit { + + +//public imageUrl = "http://sdcollege.in/wp-content/uploads/2016/06/courses.jpg"; +public imageUrl = '../../../../assets/courses.jpg'; + +courseName = 'The Full Stack Web Development'; +imageAlt = this.courseName; +rating: string; +constructor() { + this.rating = '80%'; + } + ngOnInit() { + } + + +} diff --git a/src/app/home/home-courses/home-courses.component.html b/src/app/home/home-courses/home-courses.component.html new file mode 100644 index 0000000..a3a797d --- /dev/null +++ b/src/app/home/home-courses/home-courses.component.html @@ -0,0 +1,38 @@ +
+
+ +
+ Popular + New Launches +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ diff --git a/src/app/home/home-courses/home-courses.component.scss b/src/app/home/home-courses/home-courses.component.scss new file mode 100644 index 0000000..b9bf8a1 --- /dev/null +++ b/src/app/home/home-courses/home-courses.component.scss @@ -0,0 +1,28 @@ + +.container{ + margin-top: 50px; +} +.my-btn{ + border: 1px solid #85A0FF; + font-size: 1.5em; + width: 25%; + padding-top: 10px; + padding-bottom: 10px; + color: #85A0FF; +} +a:hover{ + background-color: #85A0FF; + color: white; +} +.row{ + margin-bottom: 20px; + margin-top: 20px; + align-self: auto; + align-content: center; +} + +.buttons{ + vertical-align: middle; + text-align: center; +} + diff --git a/src/app/home/home-courses/home-courses.component.spec.ts b/src/app/home/home-courses/home-courses.component.spec.ts new file mode 100644 index 0000000..ee28bf8 --- /dev/null +++ b/src/app/home/home-courses/home-courses.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HomeCoursesComponent } from './home-courses.component'; + +describe('HomeCoursesComponent', () => { + let component: HomeCoursesComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HomeCoursesComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HomeCoursesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home/home-courses/home-courses.component.ts b/src/app/home/home-courses/home-courses.component.ts new file mode 100644 index 0000000..ec8c8d2 --- /dev/null +++ b/src/app/home/home-courses/home-courses.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-home-courses', + templateUrl: './home-courses.component.html', + styleUrls: ['./home-courses.component.scss'] +}) +export class HomeCoursesComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index afc16a3..fb11862 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,3 +1,6 @@ -

- home works! -

+ + + + + + diff --git a/src/assets/banner.png b/src/assets/banner.png new file mode 100644 index 0000000..ebc1e97 Binary files /dev/null and b/src/assets/banner.png differ diff --git a/src/assets/bg-home.jpg b/src/assets/bg-home.jpg new file mode 100644 index 0000000..335256f Binary files /dev/null and b/src/assets/bg-home.jpg differ diff --git a/src/assets/courses.jpg b/src/assets/courses.jpg new file mode 100644 index 0000000..2561d98 Binary files /dev/null and b/src/assets/courses.jpg differ