Hello-World/fish.html at main · SenpaiVR/Hello-World · 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
<!DOCTYPE html>
<html lang="en-US">

<head>
  <link href="css/styles.css" rel="stylesheet" type="text/css">
  <title>Everything about fish</title>
</head>

<body>
  <h1>Everything about fish</h1>

  <p>Here is everything you need to know about fish. First, the important stuff:</p>

  <div class="important">
    <h2>Types of fish</h2>

    <p>There are many types of <span class="highlight">fish</span>. For example, there are <span class="fish-type">red</span> fish, <span class="fish-type">green</span> fish, <span class="fish-type">one</span> fish, and <span class="fish-type">two</span> fish. There are also <span class="highlight">more types of fish than you could possibly imagine</span>.</p>

    <p>Here are some types of fish:</p>

    <ul>
      <li>Goldfish</li>
      <li>Catfish</li>
      <li>And lots, lots more!</li>
    </uL>

    <h2>Other important stuff</h2>

    <p>Here is some other really important stuff about fish. Ut enim ad minim veniam, quis nostrud exercitation ullamco
      laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur.</p>
  </div>

  <p>Now, for some less important stuff about fish.</p>

  <div class="unimportant">
    <h2>Fish like to play golf</h2>

    <p>Little-known fact: fish like to play golf. Sed ut perspiciatis unde omnis iste natus error sit voluptatem
      accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
      architecto beatae vitae dicta sunt explicabo.</p>

    <h2>Fish are not mammals</h2>

    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Eaque ipsa
      quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
  </div>

  <div class="important">
    All of the code within the div class "important" will be <span class="highlight">red</span>. Note how the span here is inline because it targets only one word? We can use spans to target text that is less than one line (inline) while we'd use divs to target text that is more than one line (multiline).
  </div>
</body>

</html>