diff --git a/box-model1.html b/box-model1.html
index 4dc0c72..6ae3d0c 100644
--- a/box-model1.html
+++ b/box-model1.html
@@ -1,57 +1,19 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
 
-<!-- ----------------------------------------------------------------- -->
-<!-- ----------------------------------------------------------------- -->
-<!-- ----------------------------------------------------------------- -->
-<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="">
+<head>
+    <meta charset="utf-8">
+    <title>Box Model 1</title>
+</head>
 
-  <link href="./css/style.css" rel="stylesheet">
-  <script type="text/javascript" src="./js/header-functions.js"></script>
-
-</head> <!-- header ends here -->
-<!-- ----------------------------------------------------------------- -->
-<!-- ----------------------------------------------------------------- -->
-<!-- ----------------------------------------------------------------- -->
-
-
-
-
-
-
-
-
-
-
-
-
-<!-- ---------------------------------------------------------------------------------- -->
-<!-- ---------------------------------------------------------------------------------- -->
-<!-- ---------------------------------------------------------------------------------- -->
-<body> <!-- body begins here -->
-
-
-  The quickest of brown foxes.
-
-
-
-
-  <!-- ====================================================== -->
-  <!-- ====================================================== -->
-  <footer>
-    <!-- footer of page begins here -->
-    <script type="text/javascript" src="./js/footer-functions.js"></script>
-  </footer> <!-- footer of page ends here -->
-  <!-- ====================================================== -->
-  <!-- ====================================================== -->
+<body>
+  <h1>Box Model Visual</h1>
 
+  <div style="width: 200px; height: 200px; background-color: red;">
+    <div style="width: 100px; height: 100px; background-color: blue">
+      Inner DIV
+    </div>
+    </div>
 </body>
-<!-- ---------------------------------------------------------------------------------- -->
-<!-- ---------------------------------------------------------------------------------- -->
-<!-- ---------------------------------------------------------------------------------- -->
 
 </html>
\ No newline at end of file
diff --git a/box-model2.html b/box-model2.html
index 4dc0c72..d2b1326 100644
--- a/box-model2.html
+++ b/box-model2.html
@@ -1,57 +1,88 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Title of the page</title>
+</head>
+
+<body>
+    <h1>Box Model Visual</h1>
+    <div style="
+            top: 100;
+            left: 0;
+            position: absolute;
+            width:200px;
+            height:300px;
+            background-color: red;
+            padding: 10px;
+            border: 2px solid green;
+            margin: 0;">
+        <div id="innerdiv1" style="
+                top: 10px;
+                left: 50px;
+                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: 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: 500px;
+            left: 50px;
+            position: absolute;
+            width:200px;
+            height:300px;
+            background-color: red;
+            padding: 10px;
+            border: 2px solid green;
+            margin: 0;">
+        <div id="innerdiv3" style="
+                top: 50px;
+                left: 10px;
+                position: absolute;
+                width: 90px;
+                height: 110px;
+                background-color: blue;
+                padding: 10px;
+                border: 2px solid white;
+                margin: 0;">
+            Inner DIV3
+        </div>
+
+        <div id="innerdiv4" style="
+            top: 200px;
+            left: 10px;
+            width:90px;
+            height:94px;
+            position: absolute;
+            background-color: beige;
+            padding: 10px;
+            border: 2px solid white;
+            margin: 20;">
+            Inner DIV4
+        </div>
+    </div>
 
-<!-- ----------------------------------------------------------------- -->
-<!-- ----------------------------------------------------------------- -->
-<!-- ----------------------------------------------------------------- -->
-<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 -->
-<!-- ----------------------------------------------------------------- -->
-<!-- ----------------------------------------------------------------- -->
-<!-- ----------------------------------------------------------------- -->
-
-
-
-
-
-
-
-
-
-
-
-
-<!-- ---------------------------------------------------------------------------------- -->
-<!-- ---------------------------------------------------------------------------------- -->
-<!-- ---------------------------------------------------------------------------------- -->
-<body> <!-- body begins here -->
-
-
-  The quickest of brown foxes.
-
-
-
-
-  <!-- ====================================================== -->
-  <!-- ====================================================== -->
-  <footer>
-    <!-- footer of page begins here -->
-    <script type="text/javascript" src="./js/footer-functions.js"></script>
-  </footer> <!-- footer of page ends here -->
-  <!-- ====================================================== -->
-  <!-- ====================================================== -->
 
 </body>
-<!-- ---------------------------------------------------------------------------------- -->
-<!-- ---------------------------------------------------------------------------------- -->
-<!-- ---------------------------------------------------------------------------------- -->
 
 </html>
\ No newline at end of file
diff --git a/login-registration.html b/login-registration.html
new file mode 100644
index 0000000..5b3450a
--- /dev/null
+++ b/login-registration.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Portal</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body style="background-color: yellow;">
+
+    <!-- Center Content Pane -->
+    <div id="center-content">
+
+        <!-- Center Title Icon-->
+        <div id="title-icon">
+
+            <!-- Background -->
+            <div class="green-circle">
+                <!-- Image -->
+                <img src="https://cdn4.iconfinder.com/data/icons/small-n-flat/24/user-alt-512.png" height="50"
+                    width="50" id="user-icon">
+            </div>
+
+
+        </div>
+
+        <!-- Form -->
+        <div id="form-container">
+            <h1 style="text-align: center;">User Login</h1>
+            <input class="form-text-field" type="text" placeholder="Username" />
+            <br>
+            <input class="form-text-field" type="text" placeholder="Password" />
+            <br>
+            <button class="form-button">Login</button>
+            <br>
+                <div style="text-align:center;"><a href="">Forgot Password?</a></div>
+                <br>
+               
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..790e83d
--- /dev/null
+++ b/style.css
@@ -0,0 +1,52 @@
+.green-circle{
+    width:20%;
+    height:20%;
+    background-color: green;
+    box-shadow: grey;
+    align-content: center;
+    border-radius: 100px;
+    margin: 0 auto;
+    box-shadow: 5px 5px 5px 5px rgba(0,0,0,.5);
+}
+
+#user-icon{
+    margin: 0 auto;
+}
+
+#form-container{
+    background-color: beige;
+    position: relative;
+    margin: 0 auto;
+    height: 100%;
+}
+
+.form-text-field{
+    font-size: 2em;
+    background-color: lightgrey;
+    height: 35px;
+    width:200px;
+    display: block;
+    margin: 0 auto;
+}
+
+.form-button{
+    font-size: 1em;
+    background-color: cyan;
+    color: white;
+    height: 35px;
+    width: 200px;
+    display: block;
+    margin: 0 auto;
+}
+
+#title-icon{
+    background-color: beige;
+}
+
+#center-content{
+    background-color: beige;
+    height: 350px;
+    width: 300px;
+    margin: 0 auto;
+    box-shadow: 5px 10px 10px 10px rgba(0,0,0,.5);
+}
\ No newline at end of file
