From 07f89f79ea8cb46283a39096f124f8c9fe5e974d Mon Sep 17 00:00:00 2001
From: thienqui-communistspy <professionalbusiness505@gmail.com>
Date: Fri, 20 Sep 2019 11:53:03 -0400
Subject: [PATCH] Added

---
 index.html    |  18 ++---
 my-styles.css | 201 ++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 210 insertions(+), 9 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..c0e8c39 100644
--- a/my-styles.css
+++ b/my-styles.css
@@ -2,3 +2,204 @@
 
 /* All your edits should go here */
 
+#display-01 div{
+  display: inline;
+  margin: 20px;
+  border: solid blue 1px;
+}
+#display-02 span{
+  display: flex;
+  border: solid red 1px;
+}
+#display-03 div{
+  display: inline;
+  border: solid green 1px;
+  padding: 50px;
+}
+#display-04 div:first-of-type{
+  display:none;
+}
+#display-05 a{
+  display: inline-block;
+  padding: 50px 10px;
+  background-color: green;
+  width: 50%;
+  background-position: center;
+  margin: 0 25%
+}
+#boxmodel-01 div{
+  width: 50%;
+  margin: 0 34%;
+  border: solid green 20px;
+  padding: 60px;
+}
+#boxmodel-02 div{
+  width: 50%;
+  margin: 0 34%;
+  border: solid green 20px;
+  padding: 60px;
+  box-sizing: content-box;
+  width: 54%;
+}
+#float-01 img{
+  float: left;
+  display: inline;
+  margin: 30px 10px 10px 0px;
+}
+#float-02 img{
+  float: right;
+  margin: 35px 0px 10px 30px;
+}
+#float-03 img{
+  float: left;
+  display: inline;
+  margin: 30px 10px 10px 0px;
+}
+#float-03 .clear{
+  clear: left;
+}
+
+#float-04 img{
+  float: left;
+  display: inline;
+  margin: 30px 10px 10px 0px;
+}
+#float-04 div{
+  background-color: #00FFFF;
+  display: flow-root;
+}
+
+#float-05 p:first-of-type{
+  float: left;
+  width: 45%;
+  padding: 10px;
+}
+#float-05 p:last-of-type{
+  float: right;
+  width: 45%;
+  padding: 10px;
+  border-left: solid black 1px;
+}
+#float-06{
+
+}
+#float-06 div{
+  float: left;
+  width: 45%;
+  padding: 10px;
+}
+#float-06 p:last-child{
+  content: "";
+  display: table;
+  clear: both;
+}
+
+#position-01 div{
+  background-color: red;
+  height: 50px;
+  width: 50px;
+}
+#position-01 div:nth-of-type(even){
+  position: relative;
+  right: -50px;
+}
+#position-02 div{
+  border: solid black 1px;
+}
+#position-02 span:first-child{
+  position: absolute;
+  top: 10px;
+  left: 10px;
+}
+#position-02 span:nth-child(2){
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+#position-02 span:nth-child(3){
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+}
+#position-02 span:nth-child(4){
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+}
+#position-03 div{
+  border: solid black 1px;
+  height: 100px;
+}
+#position-03 span:nth-child(2){
+  position: absolute;
+  top: 42px;
+  right: 42px;
+}
+#position-03 span:nth-child(3){
+  position: absolute;
+  bottom: 42px;
+  right: 42px;
+}
+#position-03 span:nth-child(4){
+  position: absolute;
+  bottom: 42px;
+  left: 42px;
+}
+#position-04 div{
+  position: static;
+}
+#position-04 div{
+  position: absolute;
+  top: -5px;
+}
+body{
+  position: relative;
+}
+#position-05 .outer-box{
+  width: 4rem;
+  height: 4rem;
+  background-color: #D3D3D3;
+}
+#position-05 .inner-box{
+  width: 1rem;
+  height: 1rem;
+  background-color: #A9A9A9;
+}
+#position-05 .outer-box:first-child{
+  position: relative;
+  right: -90%;
+  bottom: 10px;
+}
+#position-05 .outer-box:last-child{
+  position: relative;
+  left: 10px;
+  bottom: 100px;
+}
+#position-05 .inner-box{
+position: absolute;
+bottom: 30px;
+left: 33px;
+}
+#position-06{
+  position: relative;
+}
+#position-06 div{
+  outline: solid black 1px;
+  background: color;
+  background-color: #E6E6FA;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+#position-07 a{
+  position: fixed;
+  right: 10px;
+  bottom: 10px;
+  background-color: yellow;
+  margin: 20px 20px;
+}
+#position-07 a:hover{
+  color:  white;
+}