CSSProject/Max.html at main · PhantasticPhor/CSSProject · 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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
<DOCTYPE html>
  <html id="maxHtmL">
  <img src="phantastickPhorBanner.jpg.png" class="maxBanner">
  <!-- original img source: https://www.popshopguide.com/funko-pop-licenses/pop-marvel/fantastic-four/ -->

  <head>

    <!--Animaiton section-->
    <style>
      .coolBall {
        height: 50px;
        width: 50px;
        border-radius: 50%;
        border: medium;
        border-color: black;
        background: linear-gradient(0deg, red, red, rgb(255, 81, 1), orange, rgb(255, 153, 0), yellow, rgb(255, 230, 0));
        position: relative;
      }

      .ball-1 {
        animation-name: fireBall;
        float: right;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-out;
      }

      .ball-2 {
        animation-name: fireBall-2;
        float: right;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-out;
      }

      .ball-3 {
        animation-name: fireBall-3;
        float: right;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-out;
      }

      @keyframes fireBall {
        0% {
          top: 0px;
        }

        50% {
          top: 300px;
        }

        100% {
          top: 0px;
        }
      }

      @keyframes fireBall-2 {
        0% {
          top: 0px;
        }

        5% {
          top: 0px;
        }

        50% {
          top: 300px;
        }

        55% {
          top: 300px;
        }

        100% {
          top: 0px;
        }
      }

      @keyframes fireBall-3 {
        0% {
          top: 0px;
        }

        10% {
          top: 0px;
        }

        50% {
          top: 300px;
        }

        60% {
          top: 300px;
        }

        100% {
          top: 0px;
        }
      }
    </style>

    <!--Nav menu-->
    <style>
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333333;
      }

      li {
        float: left;
      }

      li a {
        display: block;
        color: white;
        text-align: center;
        padding: 16px;
        text-decoration: none;
      }

      li a:hover {
        background-color: #111111;
      }
    </style>


    <link rel="stylesheet" href="main.css">
  </head>

  <body id="maxB">

    <div id="TorchPage">
      <!--Main Body of Info-->
      <header id="TorchBanner">
        <h1>The Human Torch</h1>
        <br>
        <nav id="nav">
          <ul>
            <li><a href=index.html>Home</a></li>
            <li><a href=team.html>The Team</a></li>
            <li><a href=attributes.html>Attributes</a></li>
            <li><a href=nested.html>Nested Examples</a></li>
            <li><a href=style.html>Style</a></li>
            <li><a href=tags.html>Tags</a></li>
            <li><a href=Jason.html>Jason's Page</a></li>
            <li><a href=Marc.html>Marc's Page</a></li>
            <li><a href=Ariah.html>Ariah's Page</a></li>
          </ul>
        </nav>
      </header>

      <br>

      <h2>About the Torch</h2>

      <img class="torchImgSize" src="humanTorch.png">

      <p class="torchNavText">
        Like the rest of the Fantastic Four, Jonathan "Johnny" Storm gained his powers on a spacecraft
        bombarded by cosmic rays. He can engulf his entire body in flames, fly, absorb fire harmlessly
        into his own body, and control any nearby fire by sheer force of will. "Flame on!," which the
        Torch customarily shouts when activating his full-body flame effect, has become his catchphrase.
        The youngest of the group, he is brash and impetuous in comparison to his reticent, overprotective
        and compassionate older sister, Susan Storm, his sensible brother-in-law, Reed Richards, and the grumbling Ben
        Grimm
      </p>

      <hr>

      <h2>Early Years</h2>


      <img class="torchImgSizeRight" src="humanTorch2.png">

      <p class="torchNavTextLeft">
        Johnny Storm and his older sister, Sue, lived uneventfully on Long Island until their mother, Mary Storm,
        died in an automobile accident. Their father, Franklin Storm, a doctor, failed to save her. Despondent, Franklin
        descended into booze and gambling, eventually winding up in a penitentiary for murder.[21] The children went to
        live with their aunt Marygay. Growing up in suburban Glenville, Johnny Storm was drawn to automobiles, despite
        his
        mother's death in a car accident, and became quite a mechanic at a young age.
        While still a teenager, he selflessly rescued two of his friends from a burning building. No stranger to
        adventure,
        Johnny was nearly chosen as the human host of the demonic Zarathos, and was attacked by the legendary St.
        Germaine,
        who sought the power for himself. Johnny escaped the lure of Zarathos with the help of archaeologist Max
        Parrish,
        the uncle of Cammy Brandeis, on whom Johnny had a bit of a crush.
      </p>

      <hr>

      <div id="TorchPage">
        <!--Torches Powers-->

        <div>
          <div class="ball-1 coolBall"></div>
          <div class="ball-2 coolBall"></div>
          <div class="ball-3 coolBall"></div>
        </div>

        <h2>A list of the powers The Torch has</h2>
        <ol id="maxLists">
          <l1><em id="maxPowers">-Envelop his body in fiery plasma.</em></l1><br>
          <l1><em id="maxPowers">-Able to fly by providing thrust for himself.</em></l1><br>
          <l1><em id="maxPowers">-Generating flame balls.</em></l1><br>
          <l1><em id="maxPowers">-Can manipulate his flames as he wishes.</em></l1><br>
          <l1><em id="maxPowers">-Can controll any fire in line of site.</em></l1><br>
          <l1><em id="maxPowers">-Ability to absorb flames into body with our harm.</em></l1><br>
        </ol>
      </div>
      <br>

      <!--Villians Taken On-->
      <h2>*Learn more about some of the villians that we have taken on*</h2>
      <ul>
        <li><strong id="maxVillian"><a href="https://en.wikipedia.org/wiki/Doctor_Doom">Dr.Doom</a></strong></li>
        <li><strong id="maxVillian"><a href="https://en.wikipedia.org/wiki/Galactus">Galactus</a></strong></li>
        <li><strong id="maxVillian"><a href="https://villains.fandom.com/wiki/Annihilus">Annihilus</a></strong>
        </li>
        <li><strong id="maxVillian"><a href="https://en.wikipedia.org/wiki/Puppet_Master_(Marvel_Comics)">Puppet
              Master</a></strong></li>
        <li><strong id="maxVillian"><a href="https://en.wikipedia.org/wiki/Molecule_Man">Molecule
              Man</a></strong></li>
        <li><strong id="maxVillian"><a href="https://en.wikipedia.org/wiki/Super-Skrull">Super-Skrull</a></strong></li>
      </ul>

    </div>
    <hr>
    <br>

    <div id="maxP">

      <h2>About Max Poole</h2>
      <img class="torchImgSize" id="maxIMG" src="IMG_2225 (1).png" alt="Image of Max Poole">

      <p>
        I am a Junior at Boise State University and a third year GIMM student in the college of innovation and design.
        I have always wanted to learn more about computers and how they worked. I was always curious of how computers
        were
        able to communicate between each other and allow us to communicate as well. That curiosity drove me to study
        more
        about computers and how they worked. This led me to an interest in using code to design art, and or build games.
        This was taught by our teachers as a great tool for learning new information. But it didn't just teach us how to
        view
        learning and seeing it in a new perspective, but it also taught us how to fail. What I mean is that, GIMM brings
        a lot
        of challenges your way. They understand the real world and how us learning will translate to jobs after college,
        so
        they teach you to try anything and everything. And if you fail, learn from your mistake and try again with the
        knowledge
        you have learned. And in the real world, life is going to give you challenges and problems that seem impossible.
        But
        by not giving up and pushing through all the challenges, you will surprise yourself with what you can
        accomplish.
      </p>
    </div>

    <div id="maxFooter">

      <!--Refrence Page-->
      <footer id="maxfoot">
        <p>
          Click for <a href="https://en.wikipedia.org/wiki/Human_Torch">more information</a> about the torch
          <br
          >Click for <a href="https://marvel.fandom.com/wiki/Jonathan_Storm_(Earth-616)">more information</a> about his early years
        </p>
      </footer>
      <!--End of Refrence Page-->
    </div>

  </body>

  </html>