From 6063c24d73196fb1cc914e78010da16331bc7a32 Mon Sep 17 00:00:00 2001
From: coopcool <coopcool78@gmail.com>
Date: Sun, 10 Jan 2021 20:46:15 -0500
Subject: [PATCH] LAB1sidebars

---
 index.html | 101 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 styles.css |  81 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 182 insertions(+)
 create mode 100644 index.html
 create mode 100644 styles.css
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..aba957e
--- /dev/null
+++ b/index.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title>MyWebsite</title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="styles.css">
+
+        <style type="text/css">
+   
+            * {
+              padding:0;
+              box-sizing: border-box;
+            }
+
+          .main-content {
+            margin-top: -40px;
+            display: grid;
+            grid-template-columns: 7fr 3fr;
+          }
+
+          h2 {
+            font-size: 25px;;
+              }
+
+          h3 {
+            font-size: 25px;
+          }
+
+          .aside {
+            background-color: lightgray;
+            
+            flex-direction: column;
+            align-items: flex-start;
+            
+          }
+
+          </style>
+
+    </head>
+    <body>
+        <div class="header">
+            <h1>MyWebsite</h1>
+          </div>
+          <div class="main-content">
+            <div id="content">
+              <img src="http://placeimg.com/200/200/tech/sepia" class="profile-img">
+            <h1>This is a Lorem Ipsum Heading</h1>
+            <P>Sed non some long words which are in different language. <br>
+               More word are on this page but dont read too much.<br>
+               After this please look at the picture on the left.</p>
+               <a href="#">Read More</a></li>
+              </div>
+              <section class="aside">
+                <div class="sidebarlinks">
+                  <h2>Sidebar Links</h2>
+               </div>
+               
+                   <hr>
+                   <br>
+               <div class="links">  
+                 <ul style="list-style-type:none;">
+                   <li><a href="#">Link 1</a></li>
+                   <li><a href="#">Link 2</a></li>
+                   <li><a href="#">Link 3</a></li>
+                   <li><a href="#">Link 4</a></li>
+                   
+             </ul>      
+           </div>
+        
+   
+                 
+             <div class="other-widgets"
+              >
+   
+               <div>
+                 <h3>Other-Widget</h3>
+               </div>
+                    <hr>
+               <div>
+                 <p>This is Photoshops's version of Loorem Ipsum. Proin gravida nibh vel velit auctor alquet.</p>
+                 <p>Proin gravida nibh vel velit auctor alquet. This is Photoshops's version of Loorem Ipsum. Proin gravida nibh vel velit auctor alquet.</p>
+               </div>
+   
+                
+             
+          
+               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+             </div>
+              </section>   
+
+          </div>
+        
+          
+       <footer class="main-footer clearfix">
+            <p>Copyright <a href="#">YourSite</a>. All rights reserved.</p>
+        </footer>
+    </body>
+</html>
\ No newline at end of file
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..99c5717
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,81 @@
+.body {
+  background-color: aliceblue;
+}
+div.header {
+  background-color: rgb(32, 27, 27);
+  color: orange;
+  text-align:justify;
+  font-size: 30px;
+  margin-top: -10px;
+}
+
+h2{
+  margin: left;
+  margin-top: 50px;
+  text-align: left;
+}
+
+c.header {
+  padding: 60px;
+  text-align: left;
+  background: #222;
+  color: orange;
+  font-size: 25px;
+}
+.hline { width:100%; height:1px; background: #fff }
+.profile-img {
+  float:left;
+  margin-right: 20px;
+ }
+
+
+
+div.links {
+  margin: left 50px;
+  top: 20px;
+  text-align: start;
+  font-size: 20px;
+  bottom: 0px;
+  
+}
+
+
+ .main-footer {
+  width:100%;
+  background-color: #222;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  color: white;
+  height: 100px;
+  display:flex;
+  align-items: center;
+  justify-content: center;
+ 
+}
+
+
+.other-widgets {
+  background-color: lightgray;
+}
+
+.paragraph{
+  width: 500px;
+  margin-left:25px;
+  margin-right: auto;
+  margin-top:-25px;
+  display: inline-block;
+}
+
+.sidebar{
+  height: 1750px;
+  
+  margin-top:-10px;
+  display: inline-block;
+  background-color: grey;
+}
+
+.clearfix:: after {
+  content:"" ;
+  display: table;
+
+}
\ No newline at end of file
