Welcome page UI

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)],

src/app/welcome/welcome.component.html

@@ -1 +1,75 @@
-<p>welcome works!</p>
+<div class="page">
+    <section class="upfold">
+        <h1>
+            Good Morning, <br>
+            Shashank
+        </h1>
+        <p>
+            Your schedule for the day!
+        </p>
+    </section>
+
+    <ul class="subject-list">
+        <header> <h5> Classes: </h5> </header>
+
+        <li>
+            <div class="schedule">
+                <label> 3:30 PM </label>
+                <p> 40 Minutes </p>
+            </div>
+            <div class="subject">
+                <label> Mathematics </label>
+                <p>
+                    <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
+                    <span> Dwayne the Rock </span>
+                </p>
+            </div>
+        </li>
+
+        <li>
+            <div class="schedule">
+                <label> 4:20 PM </label>
+                <p> 40 Minutes </p>
+            </div>
+            <div class="subject">
+                <label> English </label>
+                <p>
+                    <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
+                    <span> Dwayne the Rock </span>
+                </p>
+            </div>
+        </li>
+
+        <header> <h5> Quiz: </h5> </header>
+
+        <li>
+            <div class="schedule">
+                <label> 5:30 PM </label>
+                <p> 40 Minutes </p>
+            </div>
+            <div class="subject">
+                <label> Mathematics </label>
+                <p>
+                    <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
+                    <span> Dwayne the Rock </span>
+                </p>
+            </div>
+        </li>
+
+        <li>
+            <div class="schedule">
+                <label> 6:20 PM </label>
+                <p> 40 Minutes </p>
+            </div>
+            <div class="subject">
+                <label> English </label>
+                <p>
+                    <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
+                    <span> Dwayne the Rock </span>
+                </p>
+            </div>
+        </li>
+    </ul>
+
+    <button class="start-button"> All right let's Start! </button>
+</div>

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;
+}

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;