diff --git a/box-model1.html b/box-model1.html
index 4dc0c72..511ae7b 100644
--- a/box-model1.html
+++ b/box-model1.html
@@ -1,57 +1,20 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Box Model Visual</title>
 
-<!-- ----------------------------------------------------------------- -->
-<!-- ----------------------------------------------------------------- -->
-<!-- ----------------------------------------------------------------- -->
-<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>
 
-  <link href="./css/style.css" rel="stylesheet">
-  <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:200px; background-color: red;">
+    <div style="width:100px; height:100px; background-color:blue;">
+      Inner div
+    </div>
+    
+    </div>
+  </body>
+</html>
 
-
-
-
-
-
-
-
-
-
-
-
-<!-- ---------------------------------------------------------------------------------- -->
-<!-- ---------------------------------------------------------------------------------- -->
-<!-- ---------------------------------------------------------------------------------- -->
-<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..18e8bec 100644
--- a/box-model2.html
+++ b/box-model2.html
@@ -1,57 +1,111 @@
 <!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>
+  <head>
+    <meta charset="utf-8">
+    <title>Box Model Visual 2</title>
+
+  </head>
+
+
+  <body>
+    <h1>Box Model Visual</h1>
+    
+
+    <div style="
+          top: 10;
+          left: 0;
+          position: absolute;
+          Width:200px; 
+          height:350px; 
+          background-color: red;
+          padding: 10px;
+          border: 2px solid green;
+          margin: 0;
+        ">
+   <div id="InnerDIV1" style="
+        top: 10px;
+        left: 60px;
+        position: absolute;
+        width:80px;
+        height:100px;
+        background-color:blue;
+        padding: 10px;
+        border: 2px solid white;
+        margin: 0;
+       ">
+     Inner DIV 1
+    </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: 40;
+            text-align: center;">
+                  Inner DIV 2
+     </div>
+    </div>
+    
+
+ 
+
+  <br></br>
+  <br></br>
+  <br></br>
+  <br></br>
+  <br></br>
+  <br></br>
+  <br></br>
+  <br></br>
+  <br></br>
+  <br></br>
+  <br></br>
+  <br></br>
+
+    <div style="
+          top: 80;
+          left: 60px;
+          right: 20px;
+          position: absolute;
+          Width:200px; 
+          height:350px; 
+          background-color: red;
+          padding:10px;
+          border: 2px solid green;
+          margin: 0;
+        ">
+        <div id="InnerDIV1" style="
+        top: 50px;
+        left: 10px;
+        position: absolute;
+        width:80px;
+        height:100px;
+        background-color:blue;
+        padding: 10px;
+        border: 2px solid white;
+        margin: 0;
+       ">
+     Inner DIV 1
+    </div>
+    <div id="InnerDIV2" style="
+            top: 200px;
+            left: 10px;
+            width:80px;
+            position: absolute;
+            height: 100px;
+            background-color: beige;
+            padding: 10px;
+            border: 2px solid white;
+            margin: 20;">
+            Inner DIV 2
+     </div>
+    </div>
+  
+  </body>
+</html>
 
-  <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/index.html b/index.html
index 4dc0c72..111ea65 100644
--- a/index.html
+++ b/index.html
@@ -35,9 +35,11 @@
 <body> <!-- body begins here -->
 
 
-  The quickest of brown foxes.
-
-
+  <!--The quickest of brown foxes.-->
+<br></br>
+  <a href="./box-model1.html">Box Model 1</a>
+  <br></br>
+  <a href="./box-model2.html">Box Model 2</a>
 
 
   <!-- ====================================================== -->
