CSS Weather App

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

        <div id="menu">
            <i class="fa fa-map-marker"></i>
            <span>Paris, France</span>
            <div class="layouts">
                <i class="fa fa-th-large"></i>
                <i class="fa fa-th-list"></i>
            </div>
        </div>
        <ul>
            <li class="morning big">
                <div class="time">MORNING</div>
                <div class="temp">- 1°</div>
                <div class="details">
                    <div class="descr">Sunny</div>
                    <div>Wind : E 7 mph</div>
                    <div>Humidity : 10%</div>
                </div>
                <div class="icons">
                    <i class="sun fa fa-sun-o"></i>
                </div>
            </li>
            <li class="day small">
                <div class="time">DAY</div>
                <div class="temp">+ 3°</div>
                <div class="details">
                    <div class="descr">Mostly Sunny</div>
                    <div>Wind : E 7 mph</div>
                    <div>Humidity : 45%</div>
                </div>
                <div class="icons">
                    <i class="sun fa fa-sun-o"></i>
                    <i class="clouds fa fa-cloud"></i>
                </div>
            </li>
            <li class="evening small">
                <div class="time">EVENING</div>
                <div class="temp">0°</div>
                <div class="details">
                    <div class="descr">Rain</div>
                    <div>Wind : E 7 mph</div>
                    <div>Humidity : 91%</div>
                </div>
                <div class="icons">
                    <i class="sun fa fa-sun-o"></i>
                    <i class="clouds fa fa-cloud"></i>
                    <div class="rain">
                        <i class="fa fa-tint"></i>
                        <i class="fa fa-tint"></i>
        ...

CSS

@-webkit-keyframes rotate {
    to { transform: rotate(360deg); }
}
@-webkit-keyframes tilt {
    0% { transform: rotate(-20deg); }
    100% { transform: rotate(20deg); }
}
@-webkit-keyframes drop {
    to { 
        transform: rotate(20deg) translateX(-5px) translateY(10px);
        opacity: 0;
    }
}

body {
    margin: 0;
    background: #5F7462;
}

#phone {
    position: absolute;
    top: 50%; left: 50%;
    width: 290px;
    height: 560px;
    margin: -280px 0 0 -145px;
    background: #333;
    border-radius: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 300;
    box-shadow: 0 4px 15px rgba(0,0,0,.3);
    cursor: default;
}

#screen {
    position: absolute;
    top: 40px; right: 10px; bottom: 40px; left: 10px;
}

#menu {
    height: 10%;
    padding: 0 10px 0;
    line-height: 53px;
    background: #8ba892;
    color: white;
}
#menu .fa-map-marker {
    font-size: 20px;
    margin-right: 5px;
}

#menu .layouts {
    float: right;
}
#menu .layouts i {
    font-size: 18px;
    margin-left: 5px;
    cursor: pointer;
}

ul {
    list-style: none;
    position: absolute;
    top: 10%; right: 0; bottom: 0; left: 0;
    padding: 0;
    margin: 0;
}

li {
    position: relative;
    height: 25%;
    padding: 12px 0 0 60%;
    color: white;
    cursor: pointer;
    box-sizing: border-box;
    overflow: hidden;
    transition: all .3s;
}
li.big {
    height: 40%;
}
li.small {
    height: 20%;
}

li.morning { background: #E3BB88; }
li.day { background: #DB9864; }
li.evening { background: #b1695a; }
li.night { background: #644749; }

.time {
    color: rgba(255,255,255,.8);
}
.temp {
    font-size: 24px;
}

.details {
    font-size: 11px;
    transition: all .3s;
}
.details .descr {
    font-size: 16px;
    line-height: 30px;
}

li.small .details {
    margin-top: 30px;
    opacity: 0;
}

li .icons {
    position: absolute;
    top: 25px; left: 35px;
    transition: all .3s;
}
li.small .icons {
    margin-top: 50px;
    opacity:...

JavaScript

$('li').click(function() {
    $(this).removeClass('small').addClass('big');
    $(this).siblings('li').removeClass('big').addClass('small');
});