css/solution.html at main · Herve176/css · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CSS Float</title>
  <style>
    div {
      display: inline-block;
      width: 40%;
    }

    p {
      font-size: 2em;
    }

    .cat {
      float: left;
      background-color: aquamarine;
    }

    .dog {
      float: right;
      background-color: coral;
    }

    img {
      float: left;
    }

    footer {
      clear: both;
      text-align: center;
      background-color: blueviolet;
    }
  </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 the corn cob.</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>