WDD130/align.html at main · wmezadev/WDD130 · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alignment assigment</title>
    <link rel="stylesheet" href="css/align.css">
</head>
<body>
    <div class="content">
        <h1>Block vs Inline alignment</h1>
        <p>Earlier in the semester you were introduced to the concept of
                    <kbd>block</kbd> and <kbd>inline</kbd> elements. Blocks flow
                    vertically down the page by default, and inline flows horizontally across.
                    You were also shown how to center both inline and block elements.
                    Let's review that again now. Follow the activity instructions to make this poem flow down the page.</p>
      </div>
      <div class="poem">
        <section class="block1">
          <h2>The Cataract of Lodore</h2>
          <p>...The cataract strong</p>
          <p> Then plunges along,</p>
          <p>Striking and raging</p>
        </section>
        <section class="block2">
          <p>As if a war waging Its caverns and rocks among;</p>
          <p> Rising and leaping, Sinking and creeping,</p>
          <p> Swelling and sweeping, Showering and springing,</p>
        </section>
        <section class="block3">
          <p> Flying and flinging, Writhing and ringing, </p>
          <p>Eddying and whisking, Spouting and frisking,</p>
          <p> Turning and twisting,</p>
       </section>
        <section class="block4">
          <p>Around and around With endless rebound:</p>
          <p> Smiting and fighting, A sight to delight in;</p>
          <p> Confounding, astounding, Dizzying and deafening</p>
          <p> the ear with its sound.</p>
        </section>
    </div>
</body>
</html>