Ironskydiving_solution

​

<nav class="nav-bar">

  <ul class='nav-bar-ul'>

    <li class='nav-bar-li'><a class='nav-bar-item' href='#structure'>Day Structure</a></li>

    <li class='nav-bar-li'><a class='nav-bar-item' href='#team'>Team</a></li>

    <li class='nav-bar-li'><a class='nav-bar-item' href='#schedule'>Schedule</a></li>

  </ul>

</nav>

​

<header class='header'>

  <h1><img src='https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/ironhack-skydive-logo.png' alt='IronSkydive logo'>IronSkydive</h1>

  <h2>Let the trip begin</h2>

​

  <aside class="quote">

    <i>"The best experience of our lives"</i><br />

    Ariel Quiñones & Gonzalo Manrique, Ironhack Founders

  </aside>

</header>

​

<section id="general-information" class="dark-background">

  <div class="container">

    <article class="col col-3">

      <h3>Hello!</h3>

      <p class="text">Welcome to IronSkydive, the adventure of a lifetime</p>

​

      <a class="link-btn" href="#">Learn More</a>

    </article>

​

    <article class="col col-3">

      <h3>About us</h3>

      <p class="text">We like coding website, but we enjoy jumping out of planes just as much.</p>

​

      <a class="link-btn" href="#">Watch Video</a>

    </article>

​

    <article class="col col-3">

      <h3>Take the Jump?</h3>

      <p class="text">People of all ages can jump with us, programmer or not.</p>

​

      <a class="link-btn" href="#">Register</a>

    </article>

​

    <div class="clearfix"></div>

  </div>

</section>

​

<section id="structure" class="container">

  <article class="col service-box">

    <img src="https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/ironskydive-training.png" alt="Training" class="img" />

​

    <h4>1. Training</h4>

    <p>We teach all the necessary things to jump from the plane without any kind of problem.</p>

  </article>

​

  <article class="col service-box">

    <img src="https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/ironskydive-get-ready.png" alt="Get ready" class="img" />

​

    <h4>2. Get ready</h4>

    <p>You are already prepared, you just need the suit and a parachute. All sizes available.</p>

  </article>

​

  <article class="col service-box">

    <img src="https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/ironskydive-fly.png" alt="Fly" class="img" />

​

    <h4>3. Fly</h4>

    <p>You are ready, and the plane is waiting for us in the hangar. Let's fly!</p>

  </article>

​

  <article class="col service-box">

    <img src="https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/ironskydive-jump.png" alt="Jump" class="img" />

​

    <h4>4. Jump!</h4>

    <p>You have done the most complicated. Just one step left... jump!</p>

  </article>

​

  <div class="clearfix"></div>

</section>

​

<section id="team" class="dark-background">

  <div class="container">

    <h3>Team</h3>

    <p class="section-text">Our team collectively has 75 years of experience. Odds are, when yuo jump out of the plane with these professionals, you won't go splat.</p>

    <hr>

    <article class="col col-3">

      <b class="member-name">Harold Rothstein</b>

      <img src="https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/team-1.jpg" alt="Harold Rothstein" height="250px" width="100%" />

    </article>

​

    <article class="col col-3 col-middle">

      <b class="member-name">Susan Phillips</b>

      <img src="https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/team-2.jpg" alt="Susan Phillips" height="250px" width="100%" />

    </article>

​

    <article class="col col-3">

      <b class="member-name">Taylor Roberts</b>

      <img src="https://s3-eu-west-1.amazonaws.com/ih-materials/uploads/team-3.jpg" alt="Taylor Roberts" height="250px" width="100%" />

    </article>

​

    <div class="clearfix"></div>

  </div>

</section>

​

<section id="schedule" class="container">

  <h3>Schedule</h3>

  <table class="schedule-table" cellpadding="0" cellspacing="0">

    <thead>

      <tr>

        <th>Time</th>

        <th>Monday</th>

        <th>Tuesday</th>

        <th>Wednesday</th>

        <th>Thursday</th>

        <th>Friday</th>

        <th>Saturday</th>

      </tr>

    </thead>

​

    <tbody>

      <tr>

        <td>9:00 - 11:00</td>

        <td></td>

        <td></td>

        <td>X</td>

        <td></td>

        <td>X</td>

        <td>X</td>

      </tr>

​

      <tr>

        <td>12:00 - 14:00</td>

        <td></td>

        <td></td>

        <td></td>

        <td></td>

        <td>X</td>

        <td>X</td>

      </tr>

​

      <tr>

        <td>15:00 - 17:00</td>

        <td></td>

        <td></td>

        <td>X</td>

        <td>X</td>

        <td>X</td>

        <td>X</td>

      </tr>

    </tbody>

  </table>

​

  <h3>Schedule a Time Slot</h3>

  <form class="slot-form" action="#">

    <div class="slot-form-container">

      <label for="email">Email</label>

      <input type="text" id="email" placeholder="Enter your email" />

    </div>

​

    <div class="slot-form-container">

      <label for="participants">Number of participants</label>

      <input type="number" id="participants" placeholder="Number of participants" />

    </div>

​

    <div class="slot-form-container">

      <label for="date">Date</label>

      <input type="date" id="date" />

    </div>

​

    <div class="slot-form-container">

      <label for="time">Time</label>

      <select id="time">

        <option value="early">9:00 - 11:00</option>

        <option value="mid">12:00 - 14:00</option>

        <option value="late">15:00 - 17:00</option>

      </select>

    </div>

​

    <div class="slot-form-container">

      <button type="submit">Reserve Your Slot!</button>

    </div>

  </form>

</section>

​

<footer class="dark-background footer">

  <div class="container">

    <section class="col col-3">

      <h5>Contact Information</h5>

      <address class="address">

        IronSkydive<br />

        33 Rue la Fayette,<br />

        75009 Paris,<br />

        France<br />

        +33 (0) 619 193 088

      </address>

​

      <h5>Follow Us</h5>

      <ul>

        <li class="follow-us-item"><a class="link" href="https://www.twitter.com" target='_blank'>Twitter</a></li>

        <li class="follow-us-item"><a class="link" href="https://www.facebook.com" target='_blank'>Facebook</a></li>

        <li class="follow-us-item"><a class="link" href="https://www.instagram.com" target='_blank'>Instagram</a></li>

      </ul>

    </section>

​

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.142047744348!2d2.3354330160472316!3d48.87456857928921!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e38f817b573%3A0x48d69c30470e7aeb!2sIronhack!5e0!3m2!1sen!2ses!4v1495208746099" class="map-frame" frameborder="0" style="border:0" allowfullscreen></iframe>

    <div class="clearfix"></div>

  </div>

</footer>

​

​