diff --git a/box-model1.html b/box-model1.html
index 4dc0c72..b8452bd 100644
--- a/box-model1.html
+++ b/box-model1.html
@@ -4,7 +4,9 @@
 <!-- ----------------------------------------------------------------- -->
 <!-- ----------------------------------------------------------------- -->
 <!-- ----------------------------------------------------------------- -->
-<head> <!-- header begins here -->
+
+<head>
+  <!-- header begins here -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="">
@@ -32,12 +34,25 @@
 <!-- ---------------------------------------------------------------------------------- -->
 <!-- ---------------------------------------------------------------------------------- -->
 <!-- ---------------------------------------------------------------------------------- -->
-<body> <!-- body begins here -->
-
-
-  The quickest of brown foxes.
-
 
+<body>
+  <!-- body begins here -->
+
+
+  <h1>Box Model Visual</h1>
+  <div style="
+            width:200px;
+            height:300px;
+            background-color: red;
+            border: 2px solid green;
+            margin: 0;">
+    <div style="width:100px;
+                height:100px;
+                background-color: blue;
+                margin: 0;">
+      Inner div
+    </div>
+  </div>
 
 
   <!-- ====================================================== -->
diff --git a/box-model2.html b/box-model2.html
index 4dc0c72..3c7b845 100644
--- a/box-model2.html
+++ b/box-model2.html
@@ -4,13 +4,14 @@
 <!-- ----------------------------------------------------------------- -->
 <!-- ----------------------------------------------------------------- -->
 <!-- ----------------------------------------------------------------- -->
-<head> <!-- header begins here -->
+
+<head>
+  <!-- header begins here -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="">
   <meta name="author" content="">
 
-  <link href="./css/style.css" rel="stylesheet">
   <script type="text/javascript" src="./js/header-functions.js"></script>
 
 </head> <!-- header ends here -->
@@ -32,10 +33,86 @@
 <!-- ---------------------------------------------------------------------------------- -->
 <!-- ---------------------------------------------------------------------------------- -->
 <!-- ---------------------------------------------------------------------------------- -->
-<body> <!-- body begins here -->
-
 
-  The quickest of brown foxes.
+<body>
+  <!-- body begins here -->
+
+
+  <h1>Box Model Visual</h1>
+  <div style="
+            top: 100px;
+            left: 40px;
+            position: absolute;
+            width:250px;
+            height:400px;
+            background-color: red;
+            padding: 10px;
+            border: 2px solid green;
+            margin: 0;">
+
+    <div id="innerdiv1" style="
+                top: 10px;
+                left: 60px;
+                position: absolute;
+                width:100px;
+                height:100px;
+                background-color: blue;
+                padding: 10px;
+                border: 2px solid white;
+                margin: 0;">
+      Inner div 1
+    </div>
+
+    <div id="innerdiv2" style="
+            top: 150px;
+            left: 10px;
+            width:150px;
+            position: absolute;
+            height:100px;
+            background-color: beige;
+            padding: 10px;
+            border: 2px solid white;
+            margin: 20;">
+      Inner div2
+    </div>
+  </div>
+
+  <div style="
+            top: 550px;
+            left: 40px;
+            position: absolute;
+            width:250px;
+            height:400px;
+            background-color: red;
+            padding: 10px;
+            border: 2px solid green;
+            margin: 0;">
+    <div id="innerdiv1" style="
+                top: 60px;
+                left: 60px;
+                position: absolute;
+                width:100px;
+                height:100px;
+                background-color: blue;
+                padding: 10px;
+                border: 2px solid white;
+                margin: 0;">
+      Inner div
+    </div>
+
+    <div id="innerdiv2" style="
+            top: 200px;
+            left: 60px;
+            width:100px;
+            position: absolute;
+            height:100px;
+            background-color: beige;
+            padding: 10px;
+            border: 2px solid white;
+            margin: 20;">
+      Inner div2
+    </div>
+  </div>
 
 
 
diff --git a/css/style.css b/css/style.css
index d17d83a..a8d8b8d 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,9 +1,70 @@
-body {
-    background-color: navy;
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.container {
+    top: 0;
+    bottom: 0;
+    margin: 10% auto;
+    width: 400px;
+    height: 600px;
+    position: relative;
 }
 
+img {
+    position: absolute;
+    width: 200px;
+    height: 200px;
+    margin: -120px 50px 0 120px;
+}
+
+.inputs {
+    background-color: rgb(187, 187, 187);
+    width: 450px;
+    height: 500px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    border: 2px solid  #63EFFF;
+    border-radius: 20px;
+    box-shadow: 20px 30px 30px rgb(187, 187, 187);
+    font-family: 'Poppins', sans-serif;
+}
 
-object {
-    height: 100vh;
-    width: 100vh;
+input {
+    font-size: 30px;
+    font-size: 200;
+    margin: 20px 0;
+    padding: 5px;
+    border-radius: 200px;
+    border: 1px solid #63EFFF;
+    text-align: center;
 }
+
+.btn {
+    width: 75%;
+    background-color: #63EFFF;
+    border: 1px solid rgb(112, 112, 112);
+    padding: 0;
+    color: white;
+    font-family: 'Poppins', sans-serif;
+}
+
+.btn:hover {
+    background-color:white;
+    border: 1px solid  #63EFFF;
+    color: rgb(112, 112, 112);
+}
+
+h1 {
+    margin-bottom: 10px;
+    font-size: 40px;
+    font-weight: 100;
+    color:#63EFFF;
+    font-family: 'Poppins', sans-serif;
+}
\ No newline at end of file
diff --git a/img/undraw_male_avatar_323b.svg b/img/undraw_male_avatar_323b.svg
new file mode 100644
index 0000000..a05ed8c
--- /dev/null
+++ b/img/undraw_male_avatar_323b.svg
@@ -0,0 +1 @@
+<svg id="e59edb86-a3bc-4694-8aac-31e565ca5cfc" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="676" height="676" viewBox="0 0 676 676"><title>male_avatar</title><path d="M938,450a336.852,336.852,0,0,1-27.22,133.1L909.66,585.68A338.559,338.559,0,0,1,541.35,782.93q-3.045-.54-6.08-1.12a334.98111,334.98111,0,0,1-61.14-18.03q-4.815-1.935-9.56-4.01c-2.16-.94-4.32-1.91-6.46-2.91A338.41424,338.41424,0,0,1,262,450c0-186.67,151.33-338,338-338S938,263.33,938,450Z" transform="translate(-262 -112)" fill="#63efff"/><path d="M541.35,782.93q-3.045-.54-6.08-1.12c-1.32-38.31-5.85-116.94-21.30005-199.29C505.52,537.45,493.79,491.25,477.52,449.95a412.60387,412.60387,0,0,0-19.07-41.84c-16.44-31.05-36.38-57.19-60.56-74.9l3.56-4.86q30.165,22.11,54.22,62.08,7.215,11.97,13.86005,25.54,7.125,14.52,13.59,30.83,4.125,10.38,7.97,21.48,16.74,48.195,28.46,109.98,2.59506,13.65,4.94,27.97C536.6,680.2,540.25,748.59,541.35,782.93Z" transform="translate(-262 -112)" opacity="0.2"/><path d="M464.57,759.77c-2.16-.94-4.32-1.91-6.46-2.91-2.09-22.7-5.93-50.86-12.95-77.59A254.55666,254.55666,0,0,0,433.35,644.07c-8.01-18.75-18.38-34.69-31.79-44.52l3.56-4.85c14.04,10.28,24.87,26.53,33.24,45.54,9.43,21.42,15.72,46.35,19.91,70.17C461.38,728.1,463.34,745.19,464.57,759.77Z" transform="translate(-262 -112)" opacity="0.2"/><circle cx="102.26174" cy="190.98167" r="30.08857" opacity="0.2"/><circle cx="111.9514" cy="449.99083" r="30.08857" opacity="0.2"/><path d="M483.71449,353.52139c-6.38046,35.99732,7.70456,68.59225,7.70456,68.59225s24.42979-25.76825,30.81025-61.76557-7.70457-68.59225-7.70457-68.59225S490.09494,317.52407,483.71449,353.52139Z" transform="translate(-262 -112)" opacity="0.2"/><path d="M383.71766,438.97122c34.33494,12.555,68.83676,4.498,68.83676,4.498s-21.16612-28.41279-55.50106-40.96784-68.83675-4.498-68.83675-4.498S349.38272,426.41617,383.71766,438.97122Z" transform="translate(-262 -112)" opacity="0.2"/><path d="M377.89534,668.333c24.066,8.80008,48.28314,3.0594,48.28314,3.0594S411.37687,651.384,387.31086,642.5839s-48.28314-3.0594-48.28314-3.0594S353.82933,659.53292,377.89534,668.333Z" transform="translate(-262 -112)" opacity="0.2"/><circle cx="337.30608" cy="281.0788" r="131.77014" fill="#d0cde1"/><path d="M547.83337,493.96531s16.47127,78.23852,16.47127,86.47415,78.23852,45.296,78.23852,45.296L712.546,613.382,737.253,539.26129s-41.17817-61.76725-41.17817-86.47415Z" transform="translate(-262 -112)" fill="#d0cde1"/><path d="M910.78,583.1,909.66,585.68A338.559,338.559,0,0,1,541.35,782.93q-3.045-.54-6.08-1.12a334.98111,334.98111,0,0,1-61.14-18.03q-4.815-1.935-9.56-4.01c-2.16-.94-4.32-1.91-6.46-2.91a337.59273,337.59273,0,0,1-55.25-32.28l-15.62-45.31,8.78-6.69995,18.06-13.79,19.27-14.71,5.01-3.83,75.61-57.72,5.58-4.26,39.3-30,.01-.01s42.5,69.25,104.27,48.66,60.42-79.63,60.42-79.63Z" transform="translate(-262 -112)" fill="#2f2e41"/><path d="M485.03538,286.916s41.83653-90.64581,122.02321-69.72755,125.50958,52.29566,128.996,83.67306-1.74319,78.44348-1.74319,78.44348-8.716-64.498-64.498-50.55247-142.94147,3.48638-142.94147,3.48638L512.9264,457.74849s-15.6887-22.66145-33.12058-8.71594S429.25335,314.807,485.03538,286.916Z" transform="translate(-262 -112)" fill="#2f2e41"/><path d="M474.13,763.78q-4.815-1.935-9.56-4.01c-2.16-.94-4.32-1.91-6.46-2.91a338.835,338.835,0,0,1-87.59-58.7c9.19-12.52,16.72-18.89,16.72-18.89h61.77l9.26,31.14Z" transform="translate(-262 -112)" fill="#2f2e41"/><path d="M856.67,576.32l52.99,9.36A337.94434,337.94434,0,0,1,852.9,674.25Z" transform="translate(-262 -112)" fill="#2f2e41"/></svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 4dc0c72..d5bf0d9 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,9 @@
 <!-- ----------------------------------------------------------------- -->
 <!-- ----------------------------------------------------------------- -->
 <!-- ----------------------------------------------------------------- -->
-<head> <!-- header begins here -->
+
+<head>
+  <!-- header begins here -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="">
@@ -32,11 +34,16 @@
 <!-- ---------------------------------------------------------------------------------- -->
 <!-- ---------------------------------------------------------------------------------- -->
 <!-- ---------------------------------------------------------------------------------- -->
-<body> <!-- body begins here -->
-
 
-  The quickest of brown foxes.
+<body>
+  <!-- body begins here -->
 
+  <div class="container">
+    <h2>Login Page</h2>
+    <a href="box-model1.html"> Box Model 1</a>
+    <br><a href="box-model2.html"> Box Model 2</a>
+    <br><a href="login_page.html"> Login Page</a>
+  </div>
 
 
 
diff --git a/login_page.html b/login_page.html
new file mode 100644
index 0000000..5c01545
--- /dev/null
+++ b/login_page.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Login Page</title>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+
+<body>
+    <div class="container">
+        <img src="img/undraw_male_avatar_323b.svg" alt="Profile Picture">
+        <div class="inputs">
+            <h1>User Login</h1>
+            <input type="text" name="username" id="username" placeholder="USERNAME">
+            <input type="password" name="password" id="password" placeholder="PASSWORD">
+            <input type="submit" value="LOGIN" class="btn">
+        </div>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
