diff --git a/src/_theme.scss b/src/_theme.scss index 6420d87..3a46a4e 100644 --- a/src/_theme.scss +++ b/src/_theme.scss @@ -8,4 +8,8 @@ $button-color: #d1d1d1; $step-color: #a3a3a3; $heading-color: #363636; $content-color: #868686; -$segment-section: #f7f7f7; \ No newline at end of file +$segment-section: #f7f7f7; + +$grey-shades: #d1d1d1, #c8c8c8, #868686, #363636, #151515; // lighter, light, grey, dark-grey, darkest-grey +$teal: #33ce93; +$greenishyellow:#6BD534; \ No newline at end of file diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 794a25e..1451beb 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -7,6 +7,7 @@ import { DashboardComponent } from './pages/dashboard/dashboard.component'; import { FinalinterviewComponent } from './pages/dashboard/finalinterview/finalinterview.component'; import { JoiningletterComponent } from './pages/dashboard/joiningletter/joiningletter.component'; import { PreliminaryComponent } from './pages/dashboard/preliminary/preliminary.component'; +import { QuizComponent } from './pages/dashboard/preliminary/quiz/quiz.component'; import { SkillinformationComponent } from './pages/dashboard/skillinformation/skillinformation.component'; import { TechnicalComponent } from './pages/dashboard/technical/technical.component'; import { LoginComponent } from './pages/onboarding/login/login.component'; @@ -29,6 +30,7 @@ const routes: Routes = [ { component: TechnicalComponent, path: 'dashboard/technincalinterview' }, { component: SkillinformationComponent, path: 'dashboard/skillinformation' }, { component: FinalinterviewComponent, path: 'dashboard/finalinterview' }, + { component: QuizComponent, path: 'dashboard/preliminary/quiz' }, ]; @NgModule({ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b7340c1..c0e8f08 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -16,6 +16,7 @@ import { ClosingdocsComponent } from './pages/dashboard/closingdocs/closingdocs. import { JoiningletterComponent } from './pages/dashboard/joiningletter/joiningletter.component'; import { CelebrationComponent } from './pages/dashboard/celebration/celebration.component'; import { FinalinterviewComponent } from './pages/dashboard/finalinterview/finalinterview.component'; +import { QuizComponent } from './pages/dashboard/preliminary/quiz/quiz.component'; @NgModule({ declarations: [ @@ -33,6 +34,7 @@ import { FinalinterviewComponent } from './pages/dashboard/finalinterview/finali JoiningletterComponent, CelebrationComponent, FinalinterviewComponent, + QuizComponent, ], imports: [ BrowserModule, diff --git a/src/app/pages/dashboard/_commonheader.scss b/src/app/pages/dashboard/_commonheader.scss index ca84518..a35744d 100644 --- a/src/app/pages/dashboard/_commonheader.scss +++ b/src/app/pages/dashboard/_commonheader.scss @@ -8,29 +8,30 @@ header { height: 90px; top: 0; left: 0; - padding: 0 20px; + padding-left:25px; .logo { display: flex; flex-direction: column; - padding: 6px 10px; + padding: 6px 14px; h5 { - font-family: "Oswald", sans-serif; color: $text-color; font-weight: 300; left: 0; - font-size: 21px; + font-size: 24px; + letter-spacing: 0.3px; } span { color: $white; - font-family: "Poppins", sans-serif; - font-size: 10px; + letter-spacing: 0.3px; + font-size: 13px; font-weight: 500; } } .cross-icon { + padding-right: 10px; button { border: none; background-color: transparent; @@ -49,7 +50,6 @@ header { border-radius: 25px; height: 45px; font-size: 14px; - font-family: "Poppins", sans-serif; border: none; margin: 5px 0; font-weight: 600; @@ -61,19 +61,27 @@ header { .upfold { padding: 30px 25px 0px; h3 { - font-size: 21px; + font-size: 24px; color: lighten($color: $heading-color, $amount: 20%); text-align: center; font-weight: 300; - padding-top: 10px; + padding-top: 13px; } p { color: $content-color; text-align: center; - font-size: 12.5px; - line-height: 25px; - font-weight: 500; + font-size: 14px; + line-height: 28px; padding: 15px 0; - font-weight: 300; + font-weight: 400; } } + +button { + border-radius: 30px; + height: 50px; + font-size: 16px; + border: none; + margin: 5px; + font-weight: 600; +} \ No newline at end of file diff --git a/src/app/pages/dashboard/dashboard.component.scss b/src/app/pages/dashboard/dashboard.component.scss index 45603bf..bea4fed 100644 --- a/src/app/pages/dashboard/dashboard.component.scss +++ b/src/app/pages/dashboard/dashboard.component.scss @@ -5,7 +5,7 @@ header { display: flex; align-items: center; justify-content: space-between; - height: 70px; + height: 90px; top: 0; left: 0; padding: 0 10px; @@ -24,7 +24,6 @@ header { text-decoration: none; h5 { - font-family: "Oswald", sans-serif; color: $text-color; font-weight: 100; left: 0; @@ -66,36 +65,32 @@ li { text-align: center; color: $step-color; font-size: 11px; - font-family: "Poppins", sans-serif; font-weight: 500; } h3 { text-align: center; color: lighten($color: $heading-color, $amount: 20%); - font-size: 21.5px; - font-family: "Oswald", sans-serif; + font-size: 24px; font-weight: 300; } } img { - padding: 22px 107px; + padding: 22px 120px; display: none; } p { color: $content-color; text-align: center; - font-family: "Poppins", sans-serif; - font-size: 12px; + font-size: 14px; line-height: 25px; display: none; padding: 5px 30px; } button { - border-radius: 25px; - height: 45px; - font-size: 14px; - font-family: "Poppins", sans-serif; + border-radius: 30px; + height: 50px; + font-size: 15px; border: none; margin: 25px 20px; font-weight: 600; @@ -124,7 +119,7 @@ li { } } div { - padding-top: 32px; + padding-top: 40px; background-color: $white; animation: slideup 0.3s; } diff --git a/src/app/pages/dashboard/preliminary/preliminary.component.html b/src/app/pages/dashboard/preliminary/preliminary.component.html index 0f50ee4..12dd5ff 100644 --- a/src/app/pages/dashboard/preliminary/preliminary.component.html +++ b/src/app/pages/dashboard/preliminary/preliminary.component.html @@ -12,12 +12,16 @@
-

Lets us check your knowledge.

+

Let us check your knowledge.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+
+
+
+

Quiz

- -
- \ No newline at end of file + \ No newline at end of file diff --git a/src/app/pages/dashboard/preliminary/preliminary.component.scss b/src/app/pages/dashboard/preliminary/preliminary.component.scss index d903d46..b24d4d0 100644 --- a/src/app/pages/dashboard/preliminary/preliminary.component.scss +++ b/src/app/pages/dashboard/preliminary/preliminary.component.scss @@ -1,38 +1,86 @@ @import "../commonheader"; .upfold { + position: relative; display: flex; flex-direction: column; align-items: center; padding: 20px; img { - padding: 20px; + padding: 15px; width: 100px; } } +.quiz-section-header { + div:nth-child(1) { + background-color: $background-color; + position: absolute; + width: 100%; + height: 25px; + transform: skew(-1deg, 3deg); + } + div:nth-child(2) { + width: 50%; + height: 20px; + background-color: $background-color; + } +} + .quiz-section { - background-color: $background-color; - background-image: url("../../../../assets/Sprinklers.svg"); - padding: 25px; + overflow: hidden; h3 { - color: $white; + color: nth($grey-shades, 2); + background-color: $background-color; font-weight: 300; + padding-left: 24px; + padding-bottom: 20px; + font-size: 24px; } - li { - display: flex; - list-style: none; - color: $white; - font-size: 12px; - line-height: 35px; - font-weight: 600; - opacity: 90%; - - img { - width: 35px; - padding-right: 20px; + ul { + padding-left: 20px; + background-color: $background-color; + background-image: url("../../../../assets/Sprinklers3.svg"); + padding-top: 2px; + li { + display: flex; + list-style: none; + color: $white; + font-size: 14px; + line-height: 35px; + font-weight: 600; + opacity: 90%; + padding-bottom: 10px; + padding-left: 9px; + + img { + width: 38.5px; + padding-right: 20px; + } } } } + +.btn-section { + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + background-color: nth($grey-shades, 5); + height: 18vh; + + button { + background-color: $teal; + width: 87vw; + color: white; + } + + span { + font-size: 18px; + color: nth($grey-shades, 2 ); + padding: 15px; + font-weight: 300; + } +} diff --git a/src/app/pages/dashboard/preliminary/quiz/quiz.component.html b/src/app/pages/dashboard/preliminary/quiz/quiz.component.html new file mode 100644 index 0000000..92b7911 --- /dev/null +++ b/src/app/pages/dashboard/preliminary/quiz/quiz.component.html @@ -0,0 +1,45 @@ +
+
+

Quiz

+ Question 01 +
+
+ +
+
+ +
+
How would you correctly display, “Hello, how are you?”?
+
01:00
+
+ +
+ +
+ +
+ +
+ +
+ +
diff --git a/src/app/pages/dashboard/preliminary/quiz/quiz.component.scss b/src/app/pages/dashboard/preliminary/quiz/quiz.component.scss new file mode 100644 index 0000000..3603f80 --- /dev/null +++ b/src/app/pages/dashboard/preliminary/quiz/quiz.component.scss @@ -0,0 +1,129 @@ +@import "../../../../../_theme.scss"; + +header { + display: flex; + justify-content: center; + text-align: center; + align-items: center; + background-color: $background-color; + height: 90px; + top: 0; + left: 0; + + h3 { + color: nth($grey-shades, 2); + font-weight: 300; + font-size: 24px; + padding: 15px; + padding-bottom: 5px; + } + span { + color: white; + font-size: 12px; + font-weight: 600; + } + + .cross-icon { + padding-right: 10px; + position: absolute; + right: 0; + + button { + border: none; + background-color: transparent; + width: 30px; + height: 30px; + margin: 14px; + cursor: pointer; + } + img { + width: 30px; + } + } +} +.upfold { + background-color: $background-color; + background-image: url("../../../../../assets/Sprinklers3.svg"); + height: 30vh; + width: 100%; + display: flex; + justify-content: center; + flex-direction: column; + + h5 { + color: nth($grey-shades, 2); + font-size: 23px; + font-weight: 300; + padding: 30px 50px; + text-align: center; + line-height: 45px; + } + div { + display: flex; + justify-content: center; + align-items: center; + align-self: center; + width: 60px; + height: 60px; + border: 3.5px solid $greenishyellow; + border-radius: 50px; + color: white; + + span { + font-size: 13px; + } + } +} + +.upfold-img { + background-color: white; + + img { + width: 100%; + } +} +.quiz-options { + ul { + display: flex; + flex-direction: column; + justify-content: center; + + li { + display: flex; + flex-direction: row; + align-items: center; + justify-content: start; + list-style: none; + border: 2px solid nth($grey-shades, 1); + margin: 10px 17px; + height: 50px; + border-radius: 30px; + + input { + margin: 0 20px; + } + + label { + font-size: 14px; + } + } + } +} + + +.next-page{ + display: flex; + justify-content: center; + align-items: center; + bottom: 0; + + button { + border-radius: 30px; + height: 50px; + width: 92vw; + font-size: 16px; + border: none; + margin: 5px; + font-weight: 600; + } +} \ No newline at end of file diff --git a/src/app/pages/dashboard/preliminary/quiz/quiz.component.spec.ts b/src/app/pages/dashboard/preliminary/quiz/quiz.component.spec.ts new file mode 100644 index 0000000..60e2038 --- /dev/null +++ b/src/app/pages/dashboard/preliminary/quiz/quiz.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { QuizComponent } from './quiz.component'; + +describe('QuizComponent', () => { + let component: QuizComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ QuizComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(QuizComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/dashboard/preliminary/quiz/quiz.component.ts b/src/app/pages/dashboard/preliminary/quiz/quiz.component.ts new file mode 100644 index 0000000..4d41aca --- /dev/null +++ b/src/app/pages/dashboard/preliminary/quiz/quiz.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-quiz', + templateUrl: './quiz.component.html', + styleUrls: ['./quiz.component.scss'] +}) +export class QuizComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/pages/dashboard/skillinformation/skillinformation.component.html b/src/app/pages/dashboard/skillinformation/skillinformation.component.html index b4f99de..dba3aa0 100644 --- a/src/app/pages/dashboard/skillinformation/skillinformation.component.html +++ b/src/app/pages/dashboard/skillinformation/skillinformation.component.html @@ -1,8 +1,8 @@
- +