jackcodings
diff --git a/‎8.1 CSS Float/cat.jpeg
5.71 KB b/‎8.1 CSS Float/cat.jpeg
5.71 KB
diff --git a/‎8.1 CSS Float/dog.jpeg
11.1 KB b/‎8.1 CSS Float/dog.jpeg
11.1 KB
diff --git a/‎8.1 CSS Float/goal.png
2.49 MB b/‎8.1 CSS Float/goal.png
2.49 MB
diff --git a/‎8.1 CSS Float/index.html
+69 b/‎8.1 CSS Float/index.html
+69
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<!-- TODO
+1. Make both paragraph elements wrap around the image.
+2. Use Float to move the cat div to the left and the dog div to the right.
+3. Use clear to make the footer go below both the cat and dog div. -->
+
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Float</title>
+  <style>
+    div {
+      display: inline-block;
+      width: 40%;
+    }
+
+    p {
+      font-size: 2em;
+    }
+
+    .cat {
+      background-color: aquamarine;
+      float: left;
+    }
+
+    img {
+      float: left;
+    }
+
+    .dog {
+      background-color: coral;
+      float: right;
+    }
+
+    footer {
+      text-align: center;
+      background-color: blueviolet;
+      clear: both;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="cat">
+    <h2>CatCSS</h2>
+
+    <img src="cat.jpeg" alt="cat in a box" />
+    <p class="first-paragraph">Nap all day cat dog hate mouse eat string barf pillow no baths hate everything but kitty
+      poochy. Sleep on keyboard
+      toy
+      mouse squeak roll over. Mesmerizing birds. Poop on grasses licks paws destroy couch intently sniff hand. The dog
+      smells
+      bad gnaw.</p>
+  </div>
+  <div class="dog">
+    <h2>DogCSS</h2>
+    <img src="dog.jpeg" alt="dogs in a box" />
+    <p class="second-paragraph">Heckin good boys and girls long woofer big ol wow very biscit long woofer heck what a
+      nice
+      floof, long doggo noodle
+      horse vvv very taste wow. Very taste wow many pats aqua doggo he made many woofs pupperino, puggo doing me a
+      frighten.</p>
+  </div>
+
+  <footer>Copyright. This is the footer</footer>
+</body>
+
+</html>