<div class="main container">
<div class="row">
<div class="col-xs-12">
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-lg-4 col-lg-offset-4 weather-panel">
<div class="col-xs-6">
<h2>Lucerne<br><small>May 24, 2016</small></h2>
<p class="h3"><i class="mi mi-fw mi-lg mi-rain-heavy"></i> Rainy</p>
</div>
<div class="col-xs-6 text-center">
<div class="h1 temperature">
<span>12°</span>
<br>
<small>8° / 13°</small>
</div>
</div>
<div class="col-xs-12">
<ul class="list-inline row forecast">
<li class="col-xs-4 col-sm-2 text-center">
<h3 class="h5">Wed</h3>
<p><i class="mi mi-fw mi-2x mi-cloud-sun"></i><br>9°/18°</p>
</li>
<li class="col-xs-4 col-sm-2 text-center">
<h3 class="h5">Thu</h3>
<p><i class="mi mi-fw mi-2x mi-sun"></i><br>12°/23°</p>
</li>
<li class="col-xs-4 col-sm-2 text-center">
<h3 class="h5">Fri</h3>
<p><i class="mi mi-fw mi-2x mi-cloud-sun"></i><br>14°/24°</p>
</li>
<li class="col-xs-4 col-sm-2 text-center">
<h3 class="h5">Sat</h3>
<p><i class="mi mi-fw mi-2x mi-rain"></i><br>15°/23°</p>
</li>
<li class="col-xs-4 col-sm-2 text-center">
<h3 class="h5">Sun</h3>
<p><i class="mi mi-fw mi-2x mi-rain-heavy"></i><br>15°/22°</p>
</li>
<li class="col-xs-4 col-sm-2 text-center">
<h3 class="h5">Mon</h3>
<p><i class="mi mi-fw mi-2x mi-clouds"></i><br>12°/17°</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>.main {
margin-top: 50px;
}
.weather-panel {
background-image: url("https://unsplash.it/600/400?image=1043&blur");
background-size: cover;
border-radius: 20px;
box-shadow: 25px 25px 40px 0px rgba(0,0,0,0.33);
color: #fff;
overflow: hidden;
position: relative;
small {
color: inherit;
font-size: 50%;
}
ul.forecast > li {
border-top: 1px solid #fff;
}
.temperature {
& > span {
font-size: 2em;
}
}
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.