FirstTask/index.html at main · Ammoniy/FirstTask · 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
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="shortcut icon"
      href="https://placeBird.com/96/139"
      type="image/x-icon"
    />
    <script
      src="https://unpkg.com/htmx.org@1.9.10"
      integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <main>
      <h1>RavenPhotoApp</h1>
      <section>
        <p>
          I enjoy cute birds,
          <a href="https://en.wikipedia.org/wiki/Common_raven">ravens</a>
          especially!
        </p>

        <p>
          You can see more pics in my
          <a href="gallery.html">gallery</a>
        </p>

        <a href="gallery.html">
          <img
            src="img/RavensInSnow.webp"
            alt="Ravens play in snow."
            width="300"
            height="300"
        /></a>
      </section>
      <section>
        <h2>Raven lists</h2>
        <h3>Top 3 things ravens enjoy most:</h3>
        <ul>
          <li>logic games</li>
          <li>shiny objects</li>
          <li>nuts</li>
        </ul>
        <figure>
          <img
            src="img/Nuts.jpeg"
            alt="Raven with nut"
            width="300"
            height="300"
          />
          <figcaption>
            Ravens
            <em>love</em>
            nuts
          </figcaption>
        </figure>
        <h3>Top 3 things ravens hate most:</h3>
        <ol>
          <li>loneliness</li>
          <li>loud sudden noises</li>
          <li>strangers</li>
        </ol>
        <figure>
          <img
            src="img/RavenAttack.jpg"
            alt="Raven attack dude"
            width="300"
            height="300"
          />
          <figcaption>
            Ravens
            <strong>hate</strong>
            strangers
          </figcaption>
        </figure>
      </section>
      <section>
        <h2>Raven form</h2>

        <form action="https://www.freecatphotoapp.com/submit-cat-photo">
          <fieldset>
            <legend>Is you raven indoor or outdoor?</legend>
            <label for="indoor"
              ><input
                id="indoor"
                type="radio"
                name="indoor-outdoor"
                value="indoor"
                checked
              />
              Indoor</label
            >
            <label for="outdoor"
              ><input
                id="outdoor"
                type="radio"
                name="indoor-outdoor"
                value="outdoor"
              />
              Outdoor</label
            >
          </fieldset>
          <fieldset>
            <legend>What's you raven personality?</legend>
            <label for="Trickster"
              ><input
                id="trickster"
                type="checkbox"
                name="personality"
                value="trickster"
              />
              Trickster</label
            >

            <label for="Observer"
              ><input
                id="observer"
                type="checkbox"
                name="personality"
                value="observer"
              />
              Observer</label
            >
            <label for="Social Butterfly"
              ><input
                id="socialButterfly"
                type="checkbox"
                name="personality"
                value="socialButterfly"
              />
              Social Butterfly</label
            >
          </fieldset>
          <input type="text" placeholder="raven photo URL" required />
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
  </body>
</html>