Weather App

by lovromar

HTML

<ul>
    <li>
        <p><i class="icon">1</i> <b>16&deg;</b> Monday</p>
    </li>
    <li>
        <p><i class="icon">6</i> <b>14&deg;</b> Tuesday</p>
    </li>
    <li>
        <p><i class="icon">7</i> <b>17&deg;</b> Wednesday</p>
    </li>
    <li>
        <p><i class="icon">v</i> <b>18&deg;</b> Thursday</p>
    </li>
    <li>
        <p><i class="icon">3</i> <b>12&deg;</b> Friday</p>
    </li>
    <li>
        <p><i class="icon">z</i> <b>11&deg;</b> Saturday</p>
    </li>
    <li>
        <p><i class="icon">y</i> <b>9&deg;</b> Sunday</p>
    </li>
</ul>

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    font: 100%/1.5 Florencesans, sans-serif;
}
ul {
    list-style: none;
}
li {
    padding: .25em 1em;
}
li:nth-child(2n) {
    background: #eee;
}
p {
    color: #555;
    font-size: 1.25em;
    line-height: 1.2;
}
b {
    color: #6cf;
    display: inline-block;
    font-weight: bold;
    width: 3em;
}
.icon {
    color: #f66;
    display: inline-block;
    font-family: climacons;
    font-size: 3em;
    font-style: normal;
    width: 1.2em;
    vertical-align: middle;
}