From 65e2cdc5f8c73c1c97ca0f0d1bfc934bca6a4585 Mon Sep 17 00:00:00 2001
From: Benjamin <39armyguy@gmail.com>
Date: Thu, 19 Sep 2019 16:24:36 -0400
Subject: [PATCH 1/2] first commit not done

---
 index.html    |  18 ++---
 my-styles.css | 181 +++++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 187 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index 1f28407..6ea9533 100644
--- a/index.html
+++ b/index.html
@@ -58,7 +58,7 @@ <h2>Display</h2>
         <div>I should be hidden.</div>
         <div>I should be showing.</div>
       </section>
-      
+
       <ul>
         <li>Don't display the first div.</li>
         <li>But display the second. (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type" target="_blank">hint</a>)</li>
@@ -283,8 +283,8 @@ <h2>Position</h2>
       </section>
 
       <ul>
-        <li>Make each outer box a 4rem by 4rem light gray square.</li> 
-        <li>Make each inner box a 1rem by 1rem dark gray square.</li> 
+        <li>Make each outer box a 4rem by 4rem light gray square.</li>
+        <li>Make each inner box a 1rem by 1rem dark gray square.</li>
         <li>Position each outer box to opposite sides of the section.</li>
         <li>Position each inner box to be centered within its outer box. (You might have to do some math.)</li>
         <li>You shouldn't be using any padding or margin for this one!</li>
@@ -322,23 +322,23 @@ <h2>Layout</h2>
             <a href="#">nav item</a>
             <a href="#">nav item</a>
           </nav>
-        
+
           <aside>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sagittis posuere condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vitae mollis dui. Praesent porttitor quam lorem. Phasellus ullamcorper ligula vitae augue eleifend faucibus. Donec elementum nulla eu erat feugiat nec bibendum purus facilisis. Vestibulum tincidunt, lectus sed tristique condimentum, odio justo faucibus diam, sed imperdiet metus dui non augue. Ut felis enim, accumsan id tempor vitae, rutrum ut sem. Maecenas pulvinar bibendum lectus vel malesuada. Duis sodales ultricies congue. Maecenas id diam neque. Fusce ac interdum felis. Donec dictum massa eu enim aliquam rhoncus. Donec in dui diam. Aenean nisl risus, iaculis in convallis eu, condimentum a metus. Fusce ut purus odio. Curabitur vitae enim id nisl dignissim varius vitae vel dui. Aenean scelerisque ante vitae quam tempor non dignissim mauris venenatis.</p>
           </aside>
 
           <main>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sagittis posuere condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vitae mollis dui. Praesent porttitor quam lorem. Phasellus ullamcorper ligula vitae augue eleifend faucibus. Donec elementum nulla eu erat feugiat nec bibendum purus facilisis. Vestibulum tincidunt, lectus sed tristique condimentum, odio justo faucibus diam, sed imperdiet metus dui non augue. Ut felis enim, accumsan id tempor vitae, rutrum ut sem. Maecenas pulvinar bibendum lectus vel malesuada. Duis sodales ultricies congue. Maecenas id diam neque. Fusce ac interdum felis. Donec dictum massa eu enim aliquam rhoncus. Donec in dui diam. Aenean nisl risus, iaculis in convallis eu, condimentum a metus. Fusce ut purus odio. Curabitur vitae enim id nisl dignissim varius vitae vel dui. Aenean scelerisque ante vitae quam tempor non dignissim mauris venenatis.</p>
-            
+
             <p>Proin eleifend ornare gravida. Donec nunc ipsum, luctus eget iaculis sit amet, laoreet quis nisl. Curabitur euismod rutrum ornare. Morbi viverra rutrum purus non ullamcorper. Quisque sollicitudin elementum leo at lobortis. Vivamus nec dolor augue, sit amet blandit urna. Curabitur vitae elit id sem blandit tincidunt. Fusce aliquam sodales mauris vitae molestie. Aenean sit amet ligula sapien. Donec luctus ultrices condimentum. Fusce ac velit odio, sed luctus libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce orci neque, commodo quis dictum et, interdum vel diam. Curabitur congue, leo non commodo facilisis, quam magna rutrum enim, non malesuada dui mi vitae risus.</p>
-            
+
             <p>Suspendisse pellentesque mattis orci, non euismod dui pellentesque eget. Fusce posuere nisl in ligula interdum eget dapibus sem malesuada. Etiam eu ullamcorper neque. Maecenas eget sapien augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc felis diam, dictum ornare laoreet eget, semper sit amet arcu. Suspendisse ut pulvinar nisl. Quisque congue sem vel purus pharetra blandit. Praesent eget ante risus. Donec metus dui, molestie ac elementum et, fermentum nec ipsum.</p>
-            
+
             <p>Quisque ipsum lacus, ultricies a convallis quis, dictum in ipsum. Nam sit amet sem et diam tristique sagittis. Sed mi augue, mattis nec ornare euismod, pharetra vitae ante. Aenean sed augue turpis. Cras tincidunt sollicitudin lectus quis posuere. Vivamus vel eleifend purus. Nulla venenatis pharetra mi, nec pellentesque augue dapibus eget. Aliquam erat volutpat. Etiam eleifend tincidunt sem vitae ultricies. Suspendisse malesuada varius turpis eget sollicitudin. Etiam semper magna eu tellus dignissim vitae rutrum felis porta. Maecenas consectetur tempor arcu. Sed a facilisis elit. Quisque ac diam elit, nec condimentum lectus. Phasellus leo ligula, viverra ut venenatis non, blandit in orci. Suspendisse euismod leo at velit pharetra non congue augue semper. Cras vitae tortor massa.</p>
-            
+
             <p>Suspendisse pellentesque mattis orci, non euismod dui pellentesque eget. Fusce posuere nisl in ligula interdum eget dapibus sem malesuada. Etiam eu ullamcorper neque. Maecenas eget sapien augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc felis diam, dictum ornare laoreet eget, semper sit amet arcu. Suspendisse ut pulvinar nisl. Quisque congue sem vel purus pharetra blandit. Praesent eget ante risus. Donec metus dui, molestie ac elementum et, fermentum nec ipsum.</p>
           </main>
-            
+
           <footer>
             Copyright &copy; 2018 - Acme Web Sites
           </footer>
diff --git a/my-styles.css b/my-styles.css
index f7d02e4..d69ed06 100644
--- a/my-styles.css
+++ b/my-styles.css
@@ -1,4 +1,179 @@
 /* Your Stylesheet */
-
-/* All your edits should go here */
-
+#display-01 div{
+  display: inline;
+  border: thin solid blue;
+  margin: 20px;
+}
+#display-02 span{
+  display: block;
+  border: thin solid red;
+}
+#display-03 div{
+  float:left;
+  border: thin solid green;
+  height: 100px;
+  width: 100px;
+}
+#display-04 div:nth-of-type(1){
+display:none;
+}
+#display-05 a{
+  display: block;
+  width: 50%;
+  background: grey;
+  padding:30px;
+  margin-right:25%;
+  margin-left:25%;
+  text-align: center;
+}
+#boxmodel-01 div{
+  display: block;
+  width:50%;
+  margin-right: 25%;
+  margin-left: 25%;
+  text-align: center;
+  border: thick solid red;
+  padding: 50px;
+}
+#boxmodel-02 div{
+  display: block;
+  width:50%;
+  margin-right: 25%;
+  margin-left: 25%;
+  text-align: center;
+  border: thick solid red;
+  padding: 50px;
+  box-sizing: border-box;
+}
+#float-01 img{
+  float:left;
+  margin-right:1%;
+  margin-top: 1rem;
+  margin-bottom: 1%;
+}
+#float-02 img{
+  float:right;
+  margin-left:1%;
+  margin-top: 1rem;
+  margin-bottom: 1%;
+}
+#float-02 p{
+  text-align: justify;
+}
+#float-03 img{
+  float:left;
+  margin-right:1%;
+  margin-top: 1rem;
+  margin-bottom: 1%;
+  margin-left:1%;
+}
+#float-03 p:last-child{
+  clear:left;
+}
+#float-04 img{
+  float:left;
+  margin-right:1%;
+  margin-top: 1rem;
+  margin-bottom: 1%;
+  margin-left:1%;
+}
+#float-04 div{
+  background: lightblue;
+}
+#float-04 div{
+  content: "";
+    display: table;
+    clear: both;
+}
+#float-05 p:first-child{
+  box-sizing: border-box;
+  float:left;
+  width: 50%;
+  padding: 5%;
+  text-align: justify;
+  border-right: thin solid black;
+}
+#float-05 p:last-child{
+  float:right;
+  box-sizing: border-box;
+  width: 50%;
+  padding:5%;
+  text-align: justify;
+  }
+#float-06 div p:first-child{
+    box-sizing: border-box;
+    float:left;
+    width: 50%;
+    padding: 5%;
+    text-align: justify;
+    border-right: thin solid black;
+  }
+#float-06 div p:last-child{
+    float:right;
+    box-sizing: border-box;
+    width: 50%;
+    padding:5%;
+    text-align: justify;
+    }
+#float-06 div + p{
+  content: "";
+    display: table;
+    clear: both;
+}
+#position-01 div{
+  width: 50px;
+  height: 50px;
+  background:red;
+}
+#position-01 div:nth-child(even){
+  position: relative;
+  left: 50px;
+}
+#position-02 div{
+  border: solid thin red;
+}
+#position-02 div :nth-child(1){
+  position: absolute;
+  top:0;
+  left:0;
+}
+#position-02 div :nth-child(2){
+  position: absolute;
+  top:0;
+  right:0;
+}
+#position-02 div :nth-child(3){
+  position: absolute;
+  bottom:0;
+  left:0;
+}
+#position-02 div :nth-child(4){
+  position: absolute;
+  bottom:0;
+  right:0;
+}
+#position-03 div{
+  border: solid thin red;
+  height: 100px;
+  position:relative;
+}
+#position-03 div span:nth-child(1){
+  position: absolute;
+  top:0;
+  left:0;
+}
+#position-03 div :nth-child(2){
+  position: absolute;
+  top:0;
+  right:0;
+}
+#position-03 div :nth-child(3){
+  position: absolute;
+  bottom:0;
+  left:0;
+}
+#position-03 div :nth-child(4){
+  position: absolute;
+  bottom:0;
+  right:0;
+}

From f60d62f82d403ca77568bd6fdf6e39a2173bea5b Mon Sep 17 00:00:00 2001
From: Benjamin <39armyguy@gmail.com>
Date: Fri, 20 Sep 2019 10:20:27 -0400
Subject: [PATCH 2/2] remembering how to do things

---
 my-styles.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/my-styles.css b/my-styles.css
index d69ed06..dd52718 100644
--- a/my-styles.css
+++ b/my-styles.css
@@ -177,3 +177,6 @@ display:none;
   bottom:0;
   right:0;
 }
+#position-04 div{
+  top: 0;
+}