Positions, Float, Media Queries - position: static

pktcodes · pktcodes · commit e8a846ce63ff · 2022-11-06T20:53:39.000-06:00
diff --git a/index.html b/index.html
@@ -11,30 +11,18 @@
   </head>
 
   <body>
-    <div class="first">
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni,
-        tempora.
+    <div>
+      <p class="first">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum
+        architecto ducimus, provident amet suscipit sequi magnam excepturi
+        dignissimos quaerat fugit?
       </p>
-    </div>
-    <div class="second">
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni,
-        tempora.
-      </p>
-    </div>
-    <div class="third">
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni,
-        tempora.
+      <p class="second">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum
+        architecto ducimus, provident amet suscipit sequi magnam excepturi
+        dignissimos quaerat fugit?
+        <span class="special">Hi, I'm absolute</span>
       </p>
     </div>
-    <!-- <div class="fourth">
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni,
-        tempora.
-      </p>
-    </div> -->
-    <h1>hello world</h1>
   </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -1,31 +1,23 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
+/* by default - position:static */
 
 div {
-  height: 200px;
-  width: 50%;
-  float: right;
+  border: 5px solid red;
+  background: yellow;
+  margin-top: 50px;
 }
 
 .first {
-  background: red;
-}
-
-.second {
   background: blue;
+  color: white;
 }
 
-.third {
-  background: greenyellow;
+.second {
+  background: green;
+  color: white;
 }
 
-.fourth {
+.special {
   background: fuchsia;
-}
-
-h1 {
-  clear: both;
+  color: black;
+  font-size: 20px;
 }
