HTML-learning-curve/index.html at main · Phantomcall/HTML-learning-curve · 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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="author" content="Patrick">
    <meta
      name="Description"
      content="This page contains all the things i am learning how to create as i learn html.">
    <title>MY first webpage</title>
    <link rel="icon" href="html5.png" type="image/x-icon">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>

  <body>
    <header>
      <h1>My Goals for the year</h1>

      <nav>
        <ul>
          <li>
            <a href="#html">Learning HTML</a>
          </li>
          <li>
            <a href="#vacation">Planning a Vacation</a>
          </li>
        </ul>
      </nav>
    </header>

    <hr>
    <main>
      <section id="html">
        <h2>I'm ready to learn HTML</h2>
        <p>This is my first webpage.</p>
        <img
          src="img/HTMLlogo.png"
          alt="HTML5 Logo"
          title="I am learning HTML5"
          width="300"
          height="300">
        <figure>
          <figcaption>
            An Example of HTML5 code
            <p>
              <code> &lt;h1&gt;Hello World!&lt;/h1&gt; </code>
            </p>
          </figcaption>
        </figure>

        <h3>My daily schedule</h3>
        <p>Let me tell you how:</p>
        <ol>
          <li>...I learn more about web dev.</li>
          <li>...I plan out my scheule.</li>
          <li>
            ...I use resources from
            <abbr title="Mozilla Developer Network">
              <a href="https://developer.mozilla.org/">MDN</a></abbr
            >.
          </li>
        </ol>
      </section>

      <hr>

      <section id="vacation">
        <h2>I am also planning a vacation</h2>
        <p>I've been working hard and <em>really need a getaway</em>.</p>
        <p>
          I live in <abbr title="Kansas">KS</abbr> and i want to visit the
          beach.
        </p>

        <h3>Places I'd like to visist</h3>
        <ul>
          <li>
            <p>I've heard good things about the Caribbean</p>
            <figure>
              <img
                src="img/carribean.jpg"
                alt="Carribean Beach"
                title="Photo of the Caribbean"
                width="410"
                height="400"
                loading="lazy" />
              <figcaption>Carribean Beach Getaway</figcaption>
            </figure>
          </li>
          <li>
            <p>I've heard good things about going here:</p>
            <address>
              Margaritaville Island Reserve Riviere cancun<br />
              Bahia petempich puerto morelos, Mexico<br />
              Colonia Morelos, Mexico 77580
            </address>
            <figure>
              <img
                src="img/vacation.jpg"
                alt="Cancun Vacation"
                title="It's five O'clock somewhere!"
                width="410"
                height="400"
                loading="lazy" />
              <figcaption>A Carribean Vacation Image</figcaption>
            </figure>
          </li>
        </ul>

        <!-- TODO: Add more places-->

        <h3>Places I'd want to Avoid</h3>
        <dl>
          <dt>North Pole</dt>
          <dd>I hear this <strong>cold!</strong></dd>

          <dt>South Pole</dt>
          <dd>This is also cold.</dd>

          <dt>Mountain Tops</dt>
          <dd>These are also cold.</dd>
        </dl>
      </section>
    </main>

    <hr>
    <footer>
      &lt;&lt;&lt; &copy; <a href="about.html">Amune Patrick</a>&gt;&gt;&gt;
      <p>
        <a href="#">Back to Top</a>
      </p>
    </footer>
  </body>
</html>