diff --git a/NewLab1.css b/NewLab1.css
new file mode 100644
index 0000000..ae995b7
--- /dev/null
+++ b/NewLab1.css
@@ -0,0 +1,68 @@
+
+    h1 {
+        background: darkgray;
+        left: 0%;
+        top: 0%;
+        font-size: 5000;
+        font-family: Arial;
+        padding: 50px;
+        margin-top: 1px;
+        
+    }
+
+    h2 {
+        padding: 50px;
+
+    }
+
+    /* h3 {
+        float: left;
+    } */
+
+    .footer {
+        position: fixed;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        background-color: darkgray;
+        color: white;
+        text-align: center; 
+    }
+
+    ul {
+        color: orange;
+    }
+
+    .container{
+        width: 100%;
+    }
+
+    .mainbody{
+        width:75%;
+        float: left;
+    }
+
+    .image{
+        float: left;
+        margin-right: 7.5%;
+    }
+
+    .blog{
+        align-self: auto;
+        height: 100%;
+    }
+
+    .sidebar{
+        width:20%;
+        height: 100%;
+        float: right;
+        background-color: gray;
+    }
+
+    /*see if you can get the viewport height and set the sidebar height to viewport height*/
+
+    
+
+
+
+
diff --git a/NewLab1.html b/NewLab1.html
new file mode 100644
index 0000000..747a137
--- /dev/null
+++ b/NewLab1.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html> 
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="NewLab1.css">
+        <title>Document</title>
+        
+    </head>
+    
+    <body>  
+        <header style="background-color:dimgrey;"> <h1 style="color:orange;">My Website</h1></header>
+        
+        <div class="container">
+            <div class="mainbody">
+                <div class="image">
+                    <img src="https://images.unsplash.com/photo-1593845006124-1e10fde373a1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" width="500" height="333">
+                </div>
+
+                <div class="blog">
+                    <h2>This is a Loerm Ispum Heading</h2>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</p>
+                    <h3 style="color:orange;"><a href="http://google.com">Read more</a></h3>
+                </div>
+            </div>
+
+            <div class="sidebar">    
+                <h3>Sidebar Links</h3>
+                <hr>
+                
+                <ul>
+                    <li>Link 1</li>
+                    <li>Link 2</li>
+                    <li>Link 3</li>
+                    <li>Link 4</li>
+                </ul>
+
+                <h3>Other Widgets</h3>
+                <hr>
+            
+                <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus lacinia, est vel vestibulum bibendum, ex massa porta metu. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas</p>
+                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias</p>    
+                
+            </div>
+        </div>
+
+        <div class="footer">
+            <p>Copyright Your Site. All rights reserved.</p>
+        </div>
+
+    </body>
+</html>
+
+
+
+
