diff --git a/box-model1.html b/box-model1.html
index 4dc0c72..b81ba3d 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,17 @@
 <!-- ---------------------------------------------------------------------------------- -->
 <!-- ---------------------------------------------------------------------------------- -->
 <!-- ---------------------------------------------------------------------------------- -->
-<body> <!-- body begins here -->
-
 
-  The quickest of brown foxes.
+<body>
+  <!-- body begins here -->
 
 
+  <h1>Box Model Visual</h1>
+  <div style="width: 300px; height: 300px; background-color: red;">
+    <div style="width: 150px; height: 150px; background-color: blue;">
+      Inner DIV
+    </div>
+  </div>
 
 
   <!-- ====================================================== -->
diff --git a/box-model2.html b/box-model2.html
index 4dc0c72..740524a 100644
--- a/box-model2.html
+++ b/box-model2.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="">
@@ -12,6 +14,37 @@
 
   <link href="./css/style.css" rel="stylesheet">
   <script type="text/javascript" src="./js/header-functions.js"></script>
+  <style>
+    #parent {
+      background-color: red;
+      width: 400px;
+      height: 600px;
+      border: 1px solid green;
+      box-shadow: 2px 3px 2px;
+    }
+
+    #child1 {
+      position: absolute;
+      background-color: blue;
+      width: 150px;
+      height: 200px;
+      padding: 10px;
+      margin-left: 100px;
+      margin-top: 50px;
+      margin-right: 75px;
+      border: 2px solid white;
+    }
+
+    #child2 {
+      position: absolute;
+      background-color: beige;
+      height: 150px;
+      width: 250px;
+      margin-top: 300px;
+      margin-left: 30px;
+      margin-right: 50px;
+    }
+  </style>
 
 </head> <!-- header ends here -->
 <!-- ----------------------------------------------------------------- -->
@@ -32,13 +65,21 @@
 <!-- ---------------------------------------------------------------------------------- -->
 <!-- ---------------------------------------------------------------------------------- -->
 <!-- ---------------------------------------------------------------------------------- -->
-<body> <!-- body begins here -->
-
 
-  The quickest of brown foxes.
+<body>
+  <!-- body begins here -->
 
 
+  <h1>Box Model Visual</h1>
 
+  <div id="parent">
+    <div id="child1">
+      Inner DIV 1
+    </div>
+    <div id="child2">
+      Inner DIV 2
+    </div>
+  </div>
 
   <!-- ====================================================== -->
   <!-- ====================================================== -->
diff --git a/css/style.css b/css/style.css
index d17d83a..a8d80f3 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,9 +1,7 @@
-body {
-    background-color: navy;
-}
+body {}
 
 
 object {
     height: 100vh;
     width: 100vh;
-}
+}
\ No newline at end of file
diff --git a/cssexercise2.html b/cssexercise2.html
new file mode 100644
index 0000000..f204206
--- /dev/null
+++ b/cssexercise2.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Title of the page</title>
+</head>
+
+<body>
+    <h1>Box Model Visual</h1>
+    <div style="
+            top: 20;
+            left: 10;
+            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;
+                width:100px;
+                height:100px;
+                background-color: blue;
+                padding: 10px;
+                border: 2px solid white;
+                margin-left: 0;
+                margin-top: 10px;">
+            Inner div
+        </div>
+
+        <div id="innerdiv2" style="
+            top: 150px;
+            left: 10px;
+            width:100px;
+            position: absolute;
+            height:100px;
+            background-color: beige;
+            padding: 10px;
+            border: 2px solid white;
+            margin: 20;">
+            Inner div2
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/login-interface.html b/login-interface.html
new file mode 100644
index 0000000..df6eefe
--- /dev/null
+++ b/login-interface.html
@@ -0,0 +1,35 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login Interface</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+    <div id="login-frame">
+        <form action="">
+            <div>
+                <label for="userLogin">
+                    <h1>User Login</h1>
+                </label>
+            </div>
+            <div>
+                <input class="login-info" type="email" name="email" placeholder="Username">
+            </div>
+            <div>
+                <input type="password" name="password" placeholder="Password">
+            </div>
+            <div>
+                <button type="button">Login</button>
+            </div>
+            <div id="footer">
+                <label for="">Forgot password ?</label>
+            </div>
+        </form>
+
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..dd541cb
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,57 @@
+body {
+    background-color: lightgreen;
+    color: lightgray;
+    font-family: sans-serif;
+}
+
+#login-frame {
+
+    background-color: white;
+    border-radius: 2%;
+    box-shadow: 5px 5px 5px darkgrey;
+    width: 300px;
+    height: 400px;
+    position: fixed;
+    top: 200px;
+    left: 600px;
+
+}
+
+div div {
+    padding: 10px;
+    margin-top: 5%;
+}
+
+form {
+    padding: 20px;
+    margin-left: 15%;
+}
+
+input {
+    background-color: lightslategrey;
+    opacity: 75%;
+    height: 30px;
+    width: 150px;
+    font-size: large;
+    box-shadow: 3px 3px 3px darkgrey;
+    border-radius: 2%;
+
+}
+
+button {
+    font-size: large;
+    height: 30px;
+    width: 150px;
+    background-color: rgba(0, 153, 255, 0.952);
+    color: white;
+    box-shadow: 3px 3px 3px darkgrey;
+}
+
+.login-info {
+    color: black;
+}
+
+#footer {
+    margin-left: 10%;
+    color: orange;
+}
\ No newline at end of file
