diff --git a/box-model1.html b/box-model1.html
index 4dc0c72..fb1ac00 100644
--- a/box-model1.html
+++ b/box-model1.html
@@ -14,44 +14,17 @@
   <script type="text/javascript" src="./js/header-functions.js"></script>
 
 </head> <!-- header ends here -->
-<!-- ----------------------------------------------------------------- -->
-<!-- ----------------------------------------------------------------- -->
-<!-- ----------------------------------------------------------------- -->
-
-
-
-
-
-
-
-
-
+<body>
+    <h1>Box Model Visual</h1>
+    <div style="width: 200px; height: 201px; background-color: red; padding: 0px; margin: 0;">
+        <div style="width: 100px; height: 100px; background-color: blue; position: absolute; top: 80px; left: 8px; padding: 0px; margin: 0;">
+            Inner DIV
+        </div>
+    </div>
 
 
-
-<!-- ---------------------------------------------------------------------------------- -->
-<!-- ---------------------------------------------------------------------------------- -->
-<!-- ---------------------------------------------------------------------------------- -->
-<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/box-model2.html b/box-model2.html
index 4dc0c72..641fb2a 100644
--- a/box-model2.html
+++ b/box-model2.html
@@ -1,57 +1,182 @@
 <!DOCTYPE html>
-<html lang="en">
 
-<!-- ----------------------------------------------------------------- -->
-<!-- ----------------------------------------------------------------- -->
-<!-- ----------------------------------------------------------------- -->
-<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="">
+<html>
 
-  <link href="./css/style.css" rel="stylesheet">
-  <script type="text/javascript" src="./js/header-functions.js"></script>
 
-</head> <!-- header ends here -->
-<!-- ----------------------------------------------------------------- -->
-<!-- ----------------------------------------------------------------- -->
-<!-- ----------------------------------------------------------------- -->
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>Title of the page</title>
 
+</head>
 
 
 
+<body>
 
+    <h1>Box Model Visual</h1>
 
 
+    <div style="
 
+            top: 100;
 
-<!-- ---------------------------------------------------------------------------------- -->
-<!-- ---------------------------------------------------------------------------------- -->
-<!-- ---------------------------------------------------------------------------------- -->
-<body> <!-- body begins here -->
+            left: 0;
 
+            position: absolute;
 
-  The quickest of brown foxes.
+            width:220px;
 
+            height:300px;
 
+            background-color: red;
+
+            padding: 10px;
+
+            border: 2px solid green;
+
+            margin: 0;">
+
+        <div id="innerdiv1" style="
+
+                top: 10px;
+
+                left: 60px;
+
+                position: absolute;
+
+                width:90px;
+
+                height:100px;
+
+                background-color: blue;
+
+                padding: 10px;
+
+                border: 2px solid white;
+
+                margin: 0;">
+
+            Inner DIV 1
+
+        </div>
+
+
+
+        <div id="innerdiv2" style="
+
+            top: 160px;
+
+            left: 5px;
+
+            width:150px;
+
+            position: absolute;
+
+            height:80px;
+
+            background-color: beige;
+
+            padding: 10px;
+
+            border: 2px solid white;
+
+            margin: 20;">
+
+            Inner DIV 2
+
+        </div>
+
+    </div>
+
+<p>
+
+</p>
+    
+
+    <div style="
+
+    top: 450px;
+
+    left: 50px;
+
+    position: absolute;
+
+    width:220px;
+
+    height:350px;
+
+    background-color: red;
+
+    padding: 10px;
+
+    border: 2px solid green;
+
+    margin: 0;">
+
+        <div id="innerdiv3" style="
+
+                top: 90px;
+
+                left: 20px;
+
+                position: absolute;
+
+                width:90px;
+
+                height:120px;
+
+                background-color: blue;
+
+                padding: 10px;
+
+                border: 2px solid white;
+
+                margin: 0;">
+
+            Inner div
+
+        </div>
+
+
+
+        <div id="innerdiv4" style="
+
+            top: 240px;
+
+            left: 20px;
+
+            width:90px;
+
+            position: absolute;
+
+            height:100px;
+
+            background-color: beige;
+
+            padding: 10px;
+
+            border: 2px solid white;
+
+            margin: 20;">
+
+            Inner DIV 2
+
+        </div>
+    </div>
+<p> </p>
+<p> </p>
+<p> </p>
+<br>
+<br>
+<br>
 
 
-  <!-- ====================================================== -->
-  <!-- ====================================================== -->
-  <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/index.html b/index.html
index 4dc0c72..3e0ea64 100644
--- a/index.html
+++ b/index.html
@@ -1,21 +1,39 @@
 <!DOCTYPE html>
+
 <html lang="en">
 
+
+
 <!-- ----------------------------------------------------------------- -->
+
 <!-- ----------------------------------------------------------------- -->
+
 <!-- ----------------------------------------------------------------- -->
+
 <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 -->
+
 <!-- ----------------------------------------------------------------- -->
+
 <!-- ----------------------------------------------------------------- -->
+
 <!-- ----------------------------------------------------------------- -->
 
 
@@ -24,34 +42,78 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
 
 
 <!-- ---------------------------------------------------------------------------------- -->
+
 <!-- ---------------------------------------------------------------------------------- -->
+
 <!-- ---------------------------------------------------------------------------------- -->
+
 <body> <!-- body begins here -->
 
 
+
+<p>
+<a href="box-model1.html" target="_blank">Example 1</a>
+</p>
+<p>
+    <a href="box-model2.html" target="_blank">Example 2</a>
+</p>
+
   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
+
+
+</html>
+
diff --git a/login-interface.html b/login-interface.html
new file mode 100644
index 0000000..15e4641
--- /dev/null
+++ b/login-interface.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+
+    <meta charset="utf-8">
+
+    <title>Login Interface</title>
+
+</head>
+
+<body>
+    <h1>Login Interface</h1>
+
+    <div style="
+
+            top: 100;
+
+            left: 200;
+
+            position: absolute;
+
+            width:400px;
+
+            height:300px;
+
+            background-color: green;
+
+            padding: 10px;
+
+            border: 2px solid green;
+
+            margin: 0;">
+
+        <div id="innerdiv1" style="
+
+                top: 20px;
+
+                left: 50px;
+
+                position: absolute;
+
+                width:300px;
+
+                height:250px;
+
+                background-color: white;
+
+                padding: 10px;
+
+                border: 2px solid white;
+
+                margin: 0; text-align: center;
+                font-family: arial, sands-serif;">
+
+            User Login
+            <p><div id="username" style="
+                background-color: #acacac;
+            
+            ">Username</div></p>
+
+            <p><div id="password" style="
+                background-color: #acacac;
+            
+                ">Password</div></p>
+
+            <p><div id="login" style="
+                top: 100px;  
+                background-color: #008080;
+            
+                ">LOGIN</div></p>
+
+            <p><div id="forgotPassword" style="
+                color: orange;
+                font-size: .5em;
+                ">Forgot password?</div></p>
+
+
+        </div>
+
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
