Untitled

<!DOCTYPE html>
<html>
  <head>
    <title>The Amazing Spider-Man</title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Dancing+Script|Coming+Soon" rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
    <link rel="stylesheet" href="../assets/reset.css">
    <link rel="stylesheet" href="spider-man.css">
  </head>
  <body>
    <header>
      <img src="../assets/marvel-logo.jpg" alt="Marvel Logo">
      <h1>The Amazing Spider-Man</h1>
    </header>
    <main>
      <section id="table-of-content">
        <h2>Table of Content</h2>
        <ol>
          <li><a href="#cover-gallery">Cover gallery</a></li>
          <li><a href="#summary"> Summary</a></li>
          <li><a href="#enemies"> Enemies</a></li>
          <li><a href="#subscription"> Subscription</a></li>
          <li><a href="#spider-man-alterations"> Spider-Man alterations</a></li>
          <li><a href="#theme-song"> Theme song</a></li>
        </ol>
      </section>

      <section id="cover-gallery">
        <h2>Cover gallery</h2>
          <img src="../assets/amazing-v1-033.jpg" height="250" alt="Cover of Amazing V1 033">
          <img src="../assets/amazing-v1-050.jpg" height="250" alt="Cover of Amazing V1 050">
          <img src="../assets/amazing-v4-003.jpg" height="250" alt="Cover of Amazing V1 003">
      </section>

      <section id="summary">
        <h2>Summary</h2>

        <h3>Labels</h3>
        <div class="tag-list">
          <span class="tag">Peter Parker </span>
          <span class="tag">Super Hero </span>
          <span class="tag">New York </span>
        </div>
        <h3>Slogan</h3>
          <q>It's your friendly neighbourhood Spider-Man</q>

        <h3>Early life</h3>
          <p><em>Peter Parker</em> was born in Queens to <abbr title ="Central Intelligence Agency">CIA</abbr> agents Richard and Mary Parker. While Peter was still an infant, his parents were assigned to infiltrate the Algerian based spy ring controlled by the communist agent, the Red Skull (Albert Malik). The moment the Red Skull learned that Richard and Mary were double agents, he had them killed by one of his agents, the Finisher, in an airplane crash overseas and then framed them for treason.[21] Peter went to live with his uncle and aunt, Ben and May Parker, in Forest Hills, New York; they became Peterâ€™s surrogate parents and raised him as if he were their own son. Over the next nine years, Parker grew to be extremely bright in science and became a high honors student at Midtown High School. Parker's shyness and scholastic interest often made him a social outcast and a target for bullies, primarily football star Flash Thompson.</p>

        <h3>Becoming Spider-Man</h3>
         <p> While attending a public exhibition demonstrating the safe handling of nuclear laboratory waste materials, sponsored by the General Techtronics Corporation, the then-15-year-old Peter Parker was bitten on the hand by a spider that had been irradiated by a particle accelerator used in the demonstration. Unbeknownst to him, after the spider fell from his hand, it bit a girl, Cindy Moon on the ankle before it died from the radiation.[22] Making his way home afterwards, Peter was almost hit by a car; when Peter jumped out of the way, Peter discovered he had somehow gained incredible strength, agility, and the ability to cling to walls, spider-like traits that he immediately associated with the spider bite.</p>
         <p> Encountering an ad offering a cash prize for staying in the ring for three minutes with professional wrestler Joseph "Crusher" Hogan, Peter decided this would be a good way to test his powers. Wearing a mask to avoid potential embarrassment in case he lost the match, Peter easily defeated his opponent. TV producer Maxwell Shiffman observed his performance and convinced him to go on television with his 'act.' Designing a full costume and fabricating a fluid similar to a spider's web and wrist-mounted web-shooters, Peter called himself Spider-Man, becoming an immediate sensation.   </p>
         <p> Following his first TV appearance, Peter failed to act to stop an escaping thief, claiming that it was not his responsibility to do so. Peter forgot the incident as his fame rose, but days later he returned home at night to find his Uncle Ben had been murdered. Learning the police had the burglar responsible holed up in a warehouse, Peter changed to Spider-Man and easily captured him only to discover he was the same thief he had allowed to escape earlier. Filled with remorse, he realized that when someone has power, he has an obligation to use it responsibly, so he decided to become a superhero.</p>
      </section>

      <section id="enemies">
        <h2>Enemies</h2>

        <table>
          <caption> Comparison of greatest foes </caption>
          <tr>
            <th>Name</th>
            <th>Portrait</th>
            <th>Real Name</th>
            <th>Identity</th>
            <th>First appearence  </th>
          </tr>
          <tr>
            <th>Vulture</th>
            <td><span class="face-vulture">Vulture face</span></td>
            <td>Adrian Toomes</td>
            <td>Public</td>
            <td>Amazing Spider-Man #2 </td>
          </tr>
          <tr>
            <th>Green Goblin</th>
            <td><span class="face-green-goblin">Green Goblin face</span></td>
            <td>Norman Osborn</td>
            <td>Secret</td>
            <td>Amazing Spider-Man #14  </td>
          </tr>
          <tr>
            <th>Dr. Octopus</th>
            <td><span class="face-dr-octopus">Dr. Octopus face</span></td>
            <td>Dr. Otto Octavius</td>
            <td>Public</td>
            <td>Amazing Spider-Man #3</td>
          </tr>
        </table>
      </section>

      <section id="subscription">
        <h2>Subscription</h2>

        <form method="post">
          <fieldset>
            <legend>Personal information</legend>

              <label for="full-name">Full name  </label>
              <input type="text" name="full-name" id="full-name" placeholder="Please enter your name"><br>

              <label for="email">Email  </label>
              <input type="email" name="email" id="email"><br>

              <label for="telephone">Telephone  </label>
              <input type="tel" name="telephone" id="telephone"><br>

              <label for="age">Age  </label>
              <input type="number" name="age" id="age" min="12" max="70"><br>

              <label for="password">Password  </label>
              <input type="password" name="password" id="password"><br>

             <span class="label"> Gender </span>
              <label>
                <input type="radio" name="gender" value="male" checked> male
              </label>
              <label>
                <input type="radio" name="gender" value="female">female
              </label>
          </fieldset>
          <fieldset>
            <legend>Address</legend>
              <label for="country">Country</label>
              <select>
                <option value="" disabled selected>Please select a country</option>
                <option value="HU">Hungary</option>
                <option value="US">United States</option>
              </select> <br>
                <label for="city">City  </label>
                <input type="text" name="city" id="city" placeholder=""><br>

                <label for="street">Street  </label>
                <input type="text" name="street" id="street" placeholder=""><br>

                <span class="label">Disclaimer</span>
                <label>
                  <input type="checkbox" name="disclaimer"> I agree. I read, I swear.
                </label>
          </fieldset>
          <button>Submit</button>
        </form>
      </section>
      <section id="spider-man-alterations">
        <h2>Spider alterations</h2>

        <ul>
          <li>Superior Spider-Man </li>
          <li>Spider-Ham </li>
          <li>Spider-Man India </li>
          <li>Spider-UK </li>
          <li>Spider-Gwen </li>
        </ul>

        <a target="_blank" href="http://www.comicvine.com/forums/spider-man-167/spider-verse-character-checklist-and-hitlist-redon-1633856/">
          See complete list here
        <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
        </a>
      </section>

      <section id="theme-song">
        <h2> Theme song</h2>
        <audio controls>
          <source src="../assets/theme-song-michael-buble.mp3" type="audio/mpeg">
          Your browser is not supporting HTML5 audio tag yet.
        </audio>
      </section>

    </main>
    <footer>
    All rights reserved to Marvel Entertainment.
    </footer>
  </body>
</html>