diff --git a/box-model1.html b/box-model1.html
index 4dc0c72..03ee125 100644
--- a/box-model1.html
+++ b/box-model1.html
@@ -17,26 +17,18 @@
 <!-- ----------------------------------------------------------------- -->
 <!-- ----------------------------------------------------------------- -->
 <!-- ----------------------------------------------------------------- -->
-
-
-
-
-
-
-
-
-
-
-
-
 <!-- ---------------------------------------------------------------------------------- -->
 <!-- ---------------------------------------------------------------------------------- -->
 <!-- ---------------------------------------------------------------------------------- -->
 <body> <!-- body begins here -->
+  <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>
 
 
-  The quickest of brown foxes.
-
 
 
 
diff --git a/box-model2.html b/box-model2.html
index 4dc0c72..0b61693 100644
--- a/box-model2.html
+++ b/box-model2.html
@@ -18,14 +18,83 @@
 <!-- ----------------------------------------------------------------- -->
 <!-- ----------------------------------------------------------------- -->
 
-
-
-
-
-
-
-
-
+<h1>Box Model Visual</h1>
+    <div style="
+            top: 10;
+            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: 40px;
+                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:130px;
+            position: absolute;
+            height:80px;
+            background-color: beige;
+            padding: 10px;
+            border: 2px solid white;
+            margin: 20;">
+            Inner div2
+        </div>
+    </div>
+<!-- between the boxes -->
+
+<div style="
+top: 450px;
+left: 50px;
+position: absolute;
+width:200px;
+height:300px;
+background-color: red;
+padding: 10px;
+border: 2px solid green;
+margin: 0;">
+
+<div id="innerdiv1" style="
+top: 50px;
+left: 10px;
+position: absolute;
+width:80px;
+height:120px;
+background-color: blue;
+padding: 10px;
+border: 2px solid white;
+margin: 0;">
+Inner div
+</div>
+
+<div id="innerdiv2" style="
+            top: 215px;
+            left: 10px;
+            position: absolute;
+            width:80px;
+            height:80px;
+            background-color: beige;
+            padding: 10px;
+            border: 2px solid white;
+            margin: 20;">
+            Inner div2
+        </div>
+
+</div>
 
 
 
@@ -35,7 +104,6 @@
 <body> <!-- body begins here -->
 
 
-  The quickest of brown foxes.
 
 
 
diff --git a/css/style.css b/css/style.css
index d17d83a..fa42c31 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,5 +1,5 @@
 body {
-    background-color: navy;
+    background-color: white;
 }
 
 
diff --git a/css/style2.css b/css/style2.css
new file mode 100644
index 0000000..0ab568f
--- /dev/null
+++ b/css/style2.css
@@ -0,0 +1,10 @@
+body {
+    background-color: #B6DB49;
+}
+
+
+
+object {
+    height: 100vh;
+    width: 100vh;
+}
diff --git a/index.html b/index.html
index 4dc0c72..f101efa 100644
--- a/index.html
+++ b/index.html
@@ -17,7 +17,9 @@
 <!-- ----------------------------------------------------------------- -->
 <!-- ----------------------------------------------------------------- -->
 <!-- ----------------------------------------------------------------- -->
-
+<a href="box-model1.html">Box Model 1</a>
+<br>
+<a href="box-model2.html">Box Model 2</a>
 
 
 
@@ -35,7 +37,6 @@
 <body> <!-- body begins here -->
 
 
-  The quickest of brown foxes.
 
 
 
diff --git a/login-interface.html b/login-interface.html
new file mode 100644
index 0000000..d68c5de
--- /dev/null
+++ b/login-interface.html
@@ -0,0 +1,91 @@
+<!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/style2.css" rel="stylesheet">
+  <script type="text/javascript" src="./js/header-functions.js"></script>
+
+</head> <!-- header ends here -->
+<!-- ----------------------------------------------------------------- -->
+<!-- ----------------------------------------------------------------- -->
+<!-- ----------------------------------------------------------------- -->
+
+
+<!-- ---------------------------------------------------------------------------------- -->
+<!-- ---------------------------------------------------------------------------------- -->
+<!-- ---------------------------------------------------------------------------------- -->
+<body> <!-- body begins here -->
+
+  <div style="
+  top: 100px;
+  left: 200px;
+  position: absolute;
+  width:200px;
+  height:280px;
+  background-color: #E8E8E8;
+  padding: 10px;
+  border: 0px;
+  margin: 0px auto;">
+User Login
+<div id="innerdiv1" style="
+  top:100px;
+  left: 30px;
+  position: absolute;
+  width:120px;
+  height:15px;
+  background-color: #D3D3D3;
+  padding: 10px;
+  border: 0px;
+  margin: 0;">
+Username
+</div>
+<div id="innerdiv1" style="
+      top:150px;
+      left: 30px;
+      position: absolute;
+      width:120px;
+      height:15px;
+      background-color: #D3D3D3;
+      padding: 10px;
+      border: 0px;
+      margin: 0;">
+  Password
+</div>
+
+<div id="innerdiv2" style="
+  top: 200px;
+  left: 30px;
+  width:120px;
+  position: absolute;
+  height:15px;
+  background-color: #66CCE2;
+  padding: 10px;
+  border: 0px;
+  margin: 20;">
+  Login
+</div>
+</div>
+
+  <!-- ====================================================== -->
+  <!-- ====================================================== -->
+  <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
