<!doctype html>
<html>
  <head>
    <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
    <link rel='stylesheet' href='style.css'/>
	
  </head>
  <body>
    <div class="main">
      <div class="container">
        <div class="row">
          <div class="col-sm-5 col-sm-offset-7">
            <h1>70&deg;</h1>
            <h2>5-day forecast</h2>
            <div class="forecast">
              
              <div class="day row">
                <div class="weekday col-md-4">
                  <span class="glyphicon glyphicon-plus"></span>
                  <p>today</p>
                </div>
                <div class="weather col-md-3">
                  <img src="http://s3.amazonaws.com/codecademy-content/projects/2/forecast/sun.svg">
                </div>
                <div class="weather col-md-1">
                </div>
                <div class="high col-md-2">
                  <p>68&deg;</p>
                </div>
                <div class="low col-md-2">
                  <p>37&deg;</p>
                </div>
              </div>
              <div class="hourly row">
                <div class="col-md-4">
                </div>
                <div class="col-md-2">
                  <p class="hour">7AM</p>
                  <p><img src="http://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">44&deg;</p>
                </div>
                <div class="col-md-2">
                  <p class="hour">12PM</p>
                  <p><img src="http://s3.amazonaws.com/codecademy-content/projects/2/forecast/sun.svg"></p>
                  <p class="temp">68&deg;</p>
                </div>
                <div class="col-md-2">
                  <p class="hour">5PM</p>
                  <p><img src="http://s3.amazonaws.com/codecademy-content/projects/2/forecast/sun.svg"></p>
                  <p class="temp">59&deg;</p>
                </div>
                <div class="col-md-2">
                  <p class="hour">10PM</p>
                  <p><img src="http://s3.amazonaws.com/codecademy-content/projects/2/forecast/sun.svg"></p>
                  <p class="temp">46&deg;</p>
                </div>
              </div>


              <div class="day row">
                <div class="weekday col-md-4">
                  <span class="glyphicon glyphicon-plus"></span>
                  <p>tomorrow</p>
                </div>
                <div class="weather col-md-4">
                  <img src="http://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg">
                </div>
                <div class="high col-md-2">
                  <p>68&deg;</p>
                </div>
                <div class="low col-md-2">
                  <p>37&deg;</p>
                </div>
              </div>
              <div class="hourly row">
                <div class="col-md-4">
                </div>
                <div class="col-md-2">
                  <p class="hour">7AM</p>
                  <p><img src="http://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">44&deg;</p>
                </div>
                <div class="col-md-2">
                  <p class="hour">12PM</p>
                  <p><img src="http://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">68&deg;</p>
                </div>
                <div class="col-md-2">
                  <p class="hour">5PM</p>
                  <p><img src="http://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">59&deg;</p>
                </div>
                <div class="col-md-2">
                  <p class="hour">10PM</p>
                  <p><img src="http://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">46&deg;</p>
                </div>
              </div> 


              <div class="day row">
                <div class="weekday col-md-4">
                  <span class="glyphicon glyphicon-plus"></span>
                  <p>wednesday</p>
                </div>
                <div class="weather col-md-4">
                  <img src="http://s3.amazonaws.com/codecademy-content/projects/2/forecast/rain.svg">
                </div>
                <div class="high col-md-2">
                  <p>46&deg;</p>
                </div>
                <div class="low col-md-2">
                  <p>14&deg;</p>
                </div>
              </div>
              <div class="hourly row">
                <div class="col-md-4">
                </div>
                <div class="col-md-2">
                  <p class="hour">7AM</p>
                  <p><img src="http://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">38&deg;</p>
                </div>
                <div class="col-md-2">
                  <p class="hour">12PM</p>
                  <p><img src="http://s3.amazonaws.com/codecademy-content/projects/2/forecast/rain.svg"></p>
                  <p class="temp">44&deg;</p>
                </div>
                <div class="col-md-2">
                  <p class="hour">5PM</p>
                  <p><img src="http://s3.amazonaws.com/codecademy-content/projects/2/forecast/rain.svg"></p>
                  <p class="temp">32&deg;</p>
                </div>
                <div class="col-md-2">
                  <p class="hour">10PM</p>
                  <p><img src="http://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">19&deg;</p>
                </div>
              </div>


              <div class="day row">
                <div class="weekday col-md-4">
                  <span class="glyphicon glyphicon-plus"></span>
                  <p>thursday</p>
                </div>
                <div class="weather col-md-4">
                  <img src="http://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg">
                </div>
                <div class="high col-md-2">
                  <p>46&deg;</p>
                </div>
                <div class="low col-md-2">
                  <p>28&deg;</p>
                </div>
              </div>
              <div class="hourly row">
                <div class="col-md-4">
                </div>
                <div class="col-md-2">
                  <p class="hour">7AM</p>
                  <p><img src="http://s3.amazonaws.com/codecademy-content/projects/2/forecast/sun.svg"></p>
                  <p class="temp">20&deg;</p>
                </div>
                <div class="col-md-2">
                  <p class="hour">12PM</p>
                  <p><img src="http://s3.amazonaws.com/codecademy-content/projects/2/forecast/sun.svg"></p>
                  <p class="temp">38&deg;</p>
                </div>
                <div class="col-md-2">
                  <p class="hour">5PM</p>
                  <p><img src="http://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">34&deg;</p>
                </div>
                <div class="col-md-2">
                  <p class="hour">10PM</p>
                  <p><img src="http://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">31&deg;</p>
                </div>
              </div>


              <div class="day row">
                <div class="weekday col-md-4">
                  <span class="glyphicon glyphicon-plus"></span>
                  <p>friday</p>
                </div>
                <div class="weather col-md-4">
                  <img src="http://s3.amazonaws.com/codecademy-content/projects/2/forecast/sun.svg">
                </div>
                <div class="high col-md-2">
                  <p>59&deg;</p>
                </div>
                <div class="low col-md-2">
                  <p>32&deg;</p>
                </div>
              </div>
              <div class="hourly last row">
                <div class="col-md-4">
                </div>
                <div class="col-md-2">
                  <p class="hour">7AM</p>
                  <p><img src="http://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">38&deg;</p>
                </div>
                <div class="col-md-2">
                  <p class="hour">12PM</p>
                  <p><img src="http://s3.amazonaws.com/codecademy-content/projects/2/forecast/sun.svg"></p>
                  <p class="temp">56&deg;</p>
                </div>
                <div class="col-md-2">
                  <p class="hour">5PM</p>
                  <p><img src="http://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">45&deg;</p>
                </div>
                <div class="col-md-2">
                  <p class="hour">10PM</p>
                  <p><img src="http://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">40&deg;</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="http://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>
    <script src='script.js'></script>
  </body>
</html>
html,
body {
  margin: 0;
  padding: 0;
}

body {
  color: #211f1e;
  background: url(http://s3.amazonaws.com/codecademy-content/projects/2/forecast/bg.jpg) no-repeat center center fixed; 
  background-size: cover;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; 
}

.container {
  position: relative;
  top: 100px;
}

h1 {
  font-family: "HelveticaNeue-UltraLight", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 80px;
  font-weight: normal;
  margin: 0;
  text-align: right;
}

h2 {
  border-top: 1px solid #211f1e;
  font-size: 24px;
  font-weight: bold;
  margin: 10px 0 40px 0;
  padding: 30px 0 0 0;
  text-align: right;
}

.day {
  cursor: pointer;
}

.day > div {
  line-height: 48px;
}

.weekday span {
  font-size: 10px;
}

.weekday p {
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
}

.weather img {
  width: 48px;
}

.high p,
.low p,
.hourly .temp {
  font-size: 16px;
}

.hourly {
  text-align: center;
  display: none;
}

.hourly .hour {
  font-weight: bold;
  font-size: 16px;
}

.hourly img {
  width: 24px;
}

.hourly p {
  margin: 16px 0;
}

.last {
  margin-bottom: 100px;
}
var main = function() {
  $('.day').click(function(){
    $(this).next().toggle();
    $(this).find("span").toggleClass('glyphicon-minus');
  });
};

$(document).ready(main);

Browse more Codebits