Untitled

<body>
  <div class="container">
    <div class="row">
      <div class="twelve columns">
        <h2>sleepy  time</h2>
        <div class="main">
          <p>I have to wake up at...</p>
          <div style="text-align:center;">
            <select id="hour" style="background-color:#001f3f;">
              <option>(hour)</option>
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
              <option>6</option>
              <option>7</option>
              <option>8</option>
              <option>9</option>
              <option>10</option>
              <option>11</option>
              <option>12</option>
            </select>
             <select id="minute" style="background-color:#001f3f;">
              <option>(minute)</option>
              <option>0</option>
              <option>5</option>
              <option>10</option>
              <option>15</option>
              <option>20</option>
              <option>25</option>
              <option>30</option>
              <option>35</option>
              <option>40</option>
              <option>45</option>
              <option>50</option>
              <option>55</option>
            </select>
            <select id="ampm" style="background-color:#001f3f;">
              <option>AM</option>
              <option>PM</option>
            </select>
            <br>
            <button id="calculate">Calculate</button>
            <p></p>
          </div>
          <p style="text-align:center">
            <i>or</i>
          </p>
          <p style="font-size:100%;">
            Find out when to get up if you go to bed now
          </p>
          <center>
            <button id="zzz">ZZZ</button>
          </center>
        </div>
        <!--end main-->
        <!--starts wake up time result when to sleep-->
        <div id="results" style="display : none;">
          <p  style="font-size : 150%">"You should try to " <b>fall asleep</b> " at one of the following times :</p>
          <span id="result1" title="Six Cycles: Nine Hours of Sleep" style="font-size: 300%; color: rgb(1, 223, 116);"></span>
          <i style="font-size: 200%;">or</i>
          <span id="result2" title="Five Cycles: Seven and a half Hours of Sleep" style="font-size: 300%; color: rgb(1, 223, 116);"></span>
          <i style="font-size: 200%;">or</i>
          <span id="result3" title="Four Cycles: Six Hours of Sleep" style="font-size: 300%; color: rgb(1, 223, 116);"></span>
          <i style="font-size: 200%;">or</i>
          <span id="result4" title="Three Cycles: Four and a half Hours of Sleep" style="font-size: 300%; color: rgb(1, 223, 116);"></span>
          <p style="margin-top: 1em; font-size: 150%; color: rgb(0, 128, 255);">
            "Please keep in mind that you sholud be "
            <b>falling asleep</b>
            " at these times."</p>
          <p style="font-size: 150%; color: rgb(0, 128, 255);">"The average human takes "
            <b>fourteen minutes</b>
            " to fall asleep, so plan acordingly!</p>
          <p style="font-size: 150%; color: rgb(153, 102, 204);">"Sleepy time works by counting backwards in "<b>sleep cycles</b>". Waking up in the middle of the cycle leaves you feeling tired and groggy, but waking up "
            <i>in between</i>
            " cycles wakes you up feeling refreshed and alert!"</p>
          <center>
            <a class="back" href="#" style="font-size:200%;">back</a>
            <br>
          </center>
        </div>
        <!--end results-->
        <!--starts wake up time result when to wake up-->
        <div id="resultsNow" style="display: none;">
          <p style="font-size: 150%">"It takes the average human "
            <b>fourteen minutes</b>
             " to fall asleep."
          </p>
          <p style="font-size: 150%">"If you head to bed right now, you should try to wake up at one of the following times:"</p>
          <span id="resultNow1"  title="One Cycle: One and a half Hours of Sleep" style="font-size: 300%; color: rgb(168, 39, 254);"></span>
          <i style="font-size: 200%;">or</i>
          <span id="resultNow1"  title="Two Cycle: Three Hours of Sleep" style="font-size: 300%; color: rgb(168, 39, 254);"></span>
          <i style="font-size: 200%;">or</i>
          <span id="resultNow1"  title="Three Cycle: Four and a half Hours of Sleep" style="font-size: 300%; color: rgb(168, 39, 254);"></span>
          <i style="font-size: 200%;">or</i>
          <span id="resultNow1"  title="Four Cycle: Six Hours of Sleep" style="font-size: 300%; color: rgb(168, 39, 254);"></span>
          <i style="font-size: 200%;">or</i>
          <span id="resultNow1"  title="Five Cycle: Seven and a half Hours of Sleep" style="font-size: 300%; color: rgb(168, 39, 254);"></span>
          <i style="font-size: 200%;">or</i>
          <span id="resultNow1"  title="Six Cycle: Nine Hours of Sleep" style="font-size: 300%; color: rgb(168, 39, 254);"></span>
          <p style="margin-top: 1em; font-size: 150%; color: rgb(0, 128, 255);">"A good night's sleep consists of 5-6 complete sleep cycles."
          </p>
          <center>
            <a class="back" href="#" style="font-size:200%;">back</a>
            <br>
          </center>
        </div>
        <!--end resultsNow-->
      </div>
    </div>
  </div>
</body>