diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 06c7342..214c05f 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,8 +1,11 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; +import { WelcomeComponent } from './welcome/welcome.component'; - -const routes: Routes = []; +const routes: Routes = [ + { path: '', pathMatch: 'full', redirectTo: 'welcome' }, + { component: WelcomeComponent, path: 'welcome'} +]; @NgModule({ imports: [RouterModule.forRoot(routes)], diff --git a/src/app/welcome/welcome.component.html b/src/app/welcome/welcome.component.html index 6b4f37e..c5dab4c 100644 --- a/src/app/welcome/welcome.component.html +++ b/src/app/welcome/welcome.component.html @@ -1 +1,75 @@ -

welcome works!

+
+
+

+ Good Morning,
+ Shashank +

+

+ Your schedule for the day! +

+
+ + + + +
diff --git a/src/app/welcome/welcome.component.scss b/src/app/welcome/welcome.component.scss index e69de29..817bedd 100644 --- a/src/app/welcome/welcome.component.scss +++ b/src/app/welcome/welcome.component.scss @@ -0,0 +1,148 @@ +.page { + height: 100vh; + overflow: auto; + padding-bottom: 100px; + + &::before { + content: ''; + position: absolute; + left: 0; + top: 0; + height: 40vh; + width: 100%; + background-color: var(--black); + border-bottom-left-radius: 30px; + border-bottom-right-radius: 30px; + pointer-events: none; + } + + &::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + height: 70px; + pointer-events: none; + width: 100%; + background: linear-gradient(0deg, white, transparent); + } +} + +.upfold { + width: 100%; + color: white; + position: relative; + padding: 30px 10% 0 10%; + + h1 { + font-size: 24px; + font-weight: 400; + margin-bottom: 20px; + } + + p { + font-size: 17px; + } +} + +.subject-list { + position: relative; + width: 80%; + margin: 0 auto; + list-style: none; + + header { + color: var(--black); + + h5 { + font-size: 16px; + margin-top: 30px; + font-weight: 500; + } + + &:first-child { + color: white; + } + } + + li { + background-color: white; + border-radius: 15px; + overflow: hidden; + display: flex; + align-items: center; + padding: 15px 10px; + margin-top: 15px; + box-shadow: 0px 0px 5px -2px var(--black); + justify-content: space-between; + position: relative; + + &::before { + content: ''; + position: absolute; + left: 0; + top: 0; + width: 7px; + height: 100%; + background-color: var(--teal-green); + } + } + + .schedule { + width: 100px; + padding: 0 5px; + text-align: center; + } + + .subject { + width: calc(100% - 100px); + border-left: 1px solid #cecece; + padding-left: 15px; + + p { + margin-top: 10px; + } + } + + label { + font-size: 16px; + color: var(--black); + font-weight: 500; + } + + p { + font-size: 13px; + color: var(--dark-grey); + margin-top: 2px; + + img { + width: 20px; + height: 20px; + border-radius: 50%; + overflow: hidden; + object-fit: cover; + object-position: top; + vertical-align: middle; + } + + span { + vertical-align: middle; + margin-left: 3px; + } + } +} + +.start-button { + position: fixed; + width: 70%; + height: 50px; + box-shadow: 2px 2px 20px -5px var(--teal); + color: white; + background-color: var(--teal); + border-radius: 10px; + font-size: 14px; + bottom: 20px; + left: 15%; + border: 0px; + z-index: 1; +} diff --git a/src/styles.scss b/src/styles.scss index 8511378..a09755a 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -5,12 +5,16 @@ margin: 0; padding: 0; box-sizing: border-box; + line-height: 1.5; + letter-spacing: 0.5px; + font-weight: 400; + outline: none; } :root { --black: #1a1a1a; --ash-black: #282828; - --dark-grey: #666666; + --dark-grey: #4d4d4d; --light-grey: #999999; --teal: #06c4a8; --green: #8cc63f;