diff --git a/box-model1.html b/box-model1.html
index 4dc0c72..432c0c1 100644
--- a/box-model1.html
+++ b/box-model1.html
@@ -35,7 +35,22 @@
 <body> <!-- body begins here -->
 
 
-  The quickest of brown foxes.
+  
+    <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>
 
 
 
diff --git a/box-model2.html b/box-model2.html
index 4dc0c72..ce43402 100644
--- a/box-model2.html
+++ b/box-model2.html
@@ -35,7 +35,81 @@
 <body> <!-- body begins here -->
 
 
-  The quickest of brown foxes.
+  
+    <h1>Box Model Visual</h1>
+    <div style="
+            top: 30;
+            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:75px;
+                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="
+            bottom: 10px;
+            left: 20px;
+            position: absolute;
+            width:200px;
+            height:300px;
+            background-color: red;
+            padding: 10px;
+            border: 2px solid green;
+            margin: 0;">
+        <div id="innerdiv1" style="
+                bottom: 140px;
+                left: 10px;
+                position: absolute;
+                width:75px;
+                height:100px;
+                background-color: blue;
+                padding: 10px;
+                border: 2px solid white;
+                margin: 0;">
+            Inner div
+        </div>
+
+        <div id="innerdiv2" style="
+            bottom: 2px;
+            left: 10px;
+            width:75px;
+            position: absolute;
+            height:75px;
+            background-color: beige;
+            padding: 10px;
+            border: 2px solid white;
+            margin: 20;">
+            Inner div2
+        </div>
+    </div>
+
 
 
 
diff --git a/css/style-login.css b/css/style-login.css
new file mode 100644
index 0000000..4a0d7d5
--- /dev/null
+++ b/css/style-login.css
@@ -0,0 +1,41 @@
+body {
+    background-color:greenyellow;
+}
+
+.container {
+    background-color:white;   
+    height:350px;
+    width: 250px;
+   text-align: center;
+   position: absolute; 
+   left: 40%; 
+   top:25%;
+   box-shadow: 10px 10px 5px grey;
+   
+
+}
+div div{
+    margin-top: 20px;
+   
+}
+
+#userform{
+    background-color: lightgray;
+    border: none;
+    text-align: center;
+}
+#button{
+    align-items: center;
+    background-color: turquoise;
+    color: white;
+    border: none;
+    width: 75px;
+}
+a{
+    color:red;
+}
+
+object {
+    height: 100vh;
+    width: 100vh;
+}
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/index.html b/index.html
index 4dc0c72..e1e08d5 100644
--- a/index.html
+++ b/index.html
@@ -35,8 +35,9 @@
 <body> <!-- body begins here -->
 
 
-  The quickest of brown foxes.
-
+ Click here for 
+ <a href="box-model1.html" target="_blank"> Box Model1</a>
+ <a href="box-model2.html" target="_blank"> Box Model2</a>
 
 
 
diff --git a/login-interface.html b/login-interface.html
new file mode 100644
index 0000000..f528638
--- /dev/null
+++ b/login-interface.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<head> <!-- header begins here -->
+    <meta charset="utf-8">
+  
+    <link href="./css/style-login.css" rel="stylesheet">
+  
+  </head> <!-- header ends here -->
+  <body>
+    <div class="container">        
+       <h1> User Login</h1>
+        <div><input id="userform" type="text" placeholder="Username"></div>
+       <div> <input id="userform"    type="password" placeholder="Password"></div>
+       <div> <input id="button" type="submit" value="Login"><br></div>
+       <div><a href="#" target="_blank">Forgot password?</a></div>  
+    </div>
+
+  </body>
\ No newline at end of file
