<div id="background"></div>
<div class="container">
<div id="location">
<i class="fas fa-map-marker-alt"></i>
<p class="place">Turin, Italy</p>
<p class="day">Today<br>22 March 2018</p>
</div>
<!-- /////////////////////////////////////////////////////////////////////////////// morning -->
<div id="morning" class="section">
<p class="time">Morning</p>
<!-- ////////////////////////////////////////// icona -->
<div class="icon-box">
<svg class="icon sun" version="1.1"
x="0px" y="0px"
width="80px"
height="80px"
viewBox="0 0 46 46" style="enable-background:new 0 0 46 46;" xml:space="preserve">
<path class="st0 circle" d="M23,12.5c5.8,0,10.5,4.7,10.5,10.5S28.8,33.5,23,33.5S12.5,28.8,12.5,23S17.2,12.5,23,12.5 M23,10.5
c-6.9,0-12.5,5.6-12.5,12.5S16.1,35.5,23,35.5S35.5,29.9,35.5,23S29.9,10.5,23,10.5L23,10.5z"/>
</svg>
<svg class="icon rays" version="1.1"
x="0px" y="0px"
width="80px"
height="80px"
viewBox="0 0 46 46" style="enable-background:new 0 0 46 46;" xml:space="preserve">
<path class="st0" d="M23,8c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v6C24,7.6,23.6,8,23,8z"/>
<path class="st0" d="M45,24h-6c-0.6,0-1-0.4-1-1s0.4-1,1-1h6c0.6,0,1,0.4,1,1S45.6,24,45,24z"/>
<path class="st0" d="M37,16.2c-0.4,0-0.7-0.2-0.9-0.5c-0.3-0.5-0.1-1.1,0.4-1.4l5.2-2.9c0.5-0.3,1.1-0.1,1.4,0.4
c0.3,0.5,0.1,1.1-0.4,1.4l-5.2,2.9C37.3,16.2,37.1,16.2,37,16.2z"/>
<path class="st0" d="M31.2,10.2c-0.2,0-0.4,0-0.5-0.1c-0.5-0.3-0.6-0.9-0.3-1.4l3.1-5.1c0.3-0.5,0.9-0.6,1.4-0.3s0.6,0.9,0.3,1.4
L32,9.8C31.9,10.1,31.5,10.2,31.2,10.2z"/>
<path class="st0" d="M23,46c-0.6,0-1-0.4-1-1v-6c0-0.6,0.4-1,1-1s1,0.4,1,1v6C24,45.6,23.6,46,23,46z"/>
<path class="st0" d="M33.7,43.2c-0.4,0-0.7-0.2-0.9-0.5l-2.9-5.2c-0.3-0.5-0.1-1.1,0.4-1.4c0.5-0.3,1.1-0.1,1.4,0.4l2.9,5.2
c0.3,0.5,0.1,1.1-0.4,1.4C34,43.2,33.9,43.2,33.7,43.2z"/>
<path class="st0" d="M41.9,35.3c-0.2,0-0.4,0-0.5-0.1L36.2,32c-0.5-0.3-0.6-0.9-0.3-1.4c0.3-0.5,0.9-0.6,1.4-0.3l5.1,3.1
c0.5,0.3,0.6,0.9,0.3,1.4C42.6,35.1,42.2,35.3,41.9,35.3z"/>
<path class="st0" d="M7,24H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h6c0.6,0,1,0.4,1,1S7.6,24,7,24z"/>
<path class="st0" d="M3.8,34.7c-0.4,0-0.7-0.2-0.9-0.5c-0.3-0.5-0.1-1.1,0.4-1.4l5.2-2.9c0.5-0.3,1.1-0.1,1.4,0.4
c0.3,0.5,0.1,1.1-0.4,1.4l-5.2,2.9C4.1,34.7,3.9,34.7,3.8,34.7z"/>
<path class="st0" d="M11.7,42.9c-0.2,0-0.4,0-0.5-0.1c-0.5-0.3-0.6-0.9-0.3-1.4l3.1-5.1c0.3-0.5,0.9-0.6,1.4-0.3
c0.5,0.3,0.6,0.9,0.3,1.4l-3.1,5.1C12.4,42.7,12.1,42.9,11.7,42.9z"/>
<path class="st0" d="M15.2,10c-0.4,0-0.7-0.2-0.9-0.5l-2.9-5.2c-0.3-0.5-0.1-1.1,0.4-1.4s1.1-0.1,1.4,0.4l2.9,5.2
c0.3,0.5,0.1,1.1-0.4,1.4C15.6,10,15.4,10,15.2,10z"/>
<path class="st0" d="M9.2,15.8c-0.2,0-0.4,0-0.5-0.1l-5.1-3.1c-0.5-0.3-0.6-0.9-0.3-1.4c0.3-0.5,0.9-0.6,1.4-0.3L9.8,14
c0.5,0.3,0.6,0.9,0.3,1.4C9.9,15.6,9.6,15.8,9.2,15.8z"/>
</svg>
</div>
<!-- ////////////////////////////////////////// text -->
<div class="text-wrapper">
<p class="degree">4<sup>°</sup></p>
<p>Sunny</p>
<p>Wind: E 7 mph</p>
<p>Humidity: 45%</p>
</div>
</div>
<!-- /////////////////////////////////////////////////////////////////////////////// midday -->
<div id="midday" class="section">
<p class="time">Midday</p>
<!-- ////////////////////////////////////////// icona -->
<div class="icon-box">
<svg class="icon sun" version="1.1"
x="0px" y="0px"
width="80px"
height="80px"
viewBox="0 0 46 46" style="enable-background:new 0 0 46 46;" xml:space="preserve">
<path class="st0 circle" d="M23,12.5c5.8,0,10.5,4.7,10.5,10.5S28.8,33.5,23,33.5S12.5,28.8,12.5,23S17.2,12.5,23,12.5 M23,10.5
c-6.9,0-12.5,5.6-12.5,12.5S16.1,35.5,23,35.5S35.5,29.9,35.5,23S29.9,10.5,23,10.5L23,10.5z"/>
</svg>
<svg class="icon rays" version="1.1"
x="0px" y="0px"
width="80px"
height="80px"
viewBox="0 0 46 46" style="enable-background:new 0 0 46 46;" xml:space="preserve">
<path class="st0" d="M23,8c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v6C24,7.6,23.6,8,23,8z"/>
<path class="st0" d="M45,24h-6c-0.6,0-1-0.4-1-1s0.4-1,1-1h6c0.6,0,1,0.4,1,1S45.6,24,45,24z"/>
<path class="st0" d="M37,16.2c-0.4,0-0.7-0.2-0.9-0.5c-0.3-0.5-0.1-1.1,0.4-1.4l5.2-2.9c0.5-0.3,1.1-0.1,1.4,0.4
c0.3,0.5,0.1,1.1-0.4,1.4l-5.2,2.9C37.3,16.2,37.1,16.2,37,16.2z"/>
<path class="st0" d="M31.2,10.2c-0.2,0-0.4,0-0.5-0.1c-0.5-0.3-0.6-0.9-0.3-1.4l3.1-5.1c0.3-0.5,0.9-0.6,1.4-0.3s0.6,0.9,0.3,1.4
L32,9.8C31.9,10.1,31.5,10.2,31.2,10.2z"/>
<path class="st0" d="M23,46c-0.6,0-1-0.4-1-1v-6c0-0.6,0.4-1,1-1s1,0.4,1,1v6C24,45.6,23.6,46,23,46z"/>
<path class="st0" d="M33.7,43.2c-0.4,0-0.7-0.2-0.9-0.5l-2.9-5.2c-0.3-0.5-0.1-1.1,0.4-1.4c0.5-0.3,1.1-0.1,1.4,0.4l2.9,5.2
c0.3,0.5,0.1,1.1-0.4,1.4C34,43.2,33.9,43.2,33.7,43.2z"/>
<path class="st0" d="M41.9,35.3c-0.2,0-0.4,0-0.5-0.1L36.2,32c-0.5-0.3-0.6-0.9-0.3-1.4c0.3-0.5,0.9-0.6,1.4-0.3l5.1,3.1
c0.5,0.3,0.6,0.9,0.3,1.4C42.6,35.1,42.2,35.3,41.9,35.3z"/>
<path class="st0" d="M7,24H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h6c0.6,0,1,0.4,1,1S7.6,24,7,24z"/>
<path class="st0" d="M3.8,34.7c-0.4,0-0.7-0.2-0.9-0.5c-0.3-0.5-0.1-1.1,0.4-1.4l5.2-2.9c0.5-0.3,1.1-0.1,1.4,0.4
c0.3,0.5,0.1,1.1-0.4,1.4l-5.2,2.9C4.1,34.7,3.9,34.7,3.8,34.7z"/>
<path class="st0" d="M11.7,42.9c-0.2,0-0.4,0-0.5-0.1c-0.5-0.3-0.6-0.9-0.3-1.4l3.1-5.1c0.3-0.5,0.9-0.6,1.4-0.3
c0.5,0.3,0.6,0.9,0.3,1.4l-3.1,5.1C12.4,42.7,12.1,42.9,11.7,42.9z"/>
<path class="st0" d="M15.2,10c-0.4,0-0.7-0.2-0.9-0.5l-2.9-5.2c-0.3-0.5-0.1-1.1,0.4-1.4s1.1-0.1,1.4,0.4l2.9,5.2
c0.3,0.5,0.1,1.1-0.4,1.4C15.6,10,15.4,10,15.2,10z"/>
<path class="st0" d="M9.2,15.8c-0.2,0-0.4,0-0.5-0.1l-5.1-3.1c-0.5-0.3-0.6-0.9-0.3-1.4c0.3-0.5,0.9-0.6,1.4-0.3L9.8,14
c0.5,0.3,0.6,0.9,0.3,1.4C9.9,15.6,9.6,15.8,9.2,15.8z"/>
</svg>
<svg class="icon cloud" version="1.1"
x="0px"
y="0px"
width="80px"
height="40px"
viewBox="0 0 42.6 22" style="enable-background:new 0 0 42.6 22;"
xml:space="preserve">
<path class="st1" d="M42.6,4.9c0-2.2-1.7-3.9-3.9-3.9c-1.5,0-2.8,0.9-3.4,2.1C34.9,3,34.5,3,34,3c-0.5,0-0.9,0-1.3,0.1
C31.6,1.3,29.6,0,27.2,0c-3.1,0-5.7,2.2-6.3,5.1c-0.2,0-0.4,0-0.6,0C16.9,5.1,14,8,14,11.5c0,3.5,2.9,6.4,6.4,6.4
c0.9,0,1.8-0.2,2.6-0.5c0.4,1.4,1.7,2.4,3.2,2.4c1.1,0,2.2-0.6,2.8-1.4c1.4,1,3.2,1.7,5.1,1.7c4.7,0,8.5-3.8,8.5-8.5
c0-1.4-0.4-2.8-1-4C42.2,6.8,42.6,5.9,42.6,4.9z"/>
<path class="st1" d="M28.6,6.9c0-2.2-1.7-3.9-3.9-3.9c-1.5,0-2.8,0.9-3.4,2.1C20.9,5,20.5,5,20,5c-0.5,0-0.9,0-1.3,0.1
C17.6,3.3,15.6,2,13.2,2c-3.1,0-5.7,2.2-6.3,5.1c-0.2,0-0.4,0-0.6,0C2.9,7.1,0,10,0,13.5c0,3.5,2.9,6.4,6.4,6.4
c0.9,0,1.8-0.2,2.6-0.5c0.4,1.4,1.7,2.4,3.2,2.4c1.1,0,2.2-0.6,2.8-1.4c1.4,1,3.2,1.7,5.1,1.7c4.7,0,8.5-3.8,8.5-8.5
c0-1.4-0.4-2.8-1-4C28.2,8.8,28.6,7.9,28.6,6.9z"/>
</svg>
</div>
<!-- ////////////////////////////////////////// text -->
<div class="text-wrapper">
<p class="degree">8<sup>°</sup></p>
<p>Mostly Sunny</p>
<p>Wind: E 2 mph</p>
<p>Humidity: 40%</p>
</div>
</div>
<!-- /////////////////////////////////////////////////////////////////////////////// afternooon -->
<div id="afternoon" class="section">
<p class="time">Afternoon</p>
<!-- ////////////////////////////////////////// icona -->
<div class="icon-box">
<svg class="icon cloud" version="1.1"
x="0px"
y="0px"
width="80px"
height="40px"
viewBox="0 0 42.6 22" style="enable-background:new 0 0 42.6 22;"
xml:space="preserve">
<path class="st1" d="M42.6,4.9c0-2.2-1.7-3.9-3.9-3.9c-1.5,0-2.8,0.9-3.4,2.1C34.9,3,34.5,3,34,3c-0.5,0-0.9,0-1.3,0.1
C31.6,1.3,29.6,0,27.2,0c-3.1,0-5.7,2.2-6.3,5.1c-0.2,0-0.4,0-0.6,0C16.9,5.1,14,8,14,11.5c0,3.5,2.9,6.4,6.4,6.4
c0.9,0,1.8-0.2,2.6-0.5c0.4,1.4,1.7,2.4,3.2,2.4c1.1,0,2.2-0.6,2.8-1.4c1.4,1,3.2,1.7,5.1,1.7c4.7,0,8.5-3.8,8.5-8.5
c0-1.4-0.4-2.8-1-4C42.2,6.8,42.6,5.9,42.6,4.9z"/>
<path class="st1" d="M28.6,6.9c0-2.2-1.7-3.9-3.9-3.9c-1.5,0-2.8,0.9-3.4,2.1C20.9,5,20.5,5,20,5c-0.5,0-0.9,0-1.3,0.1
C17.6,3.3,15.6,2,13.2,2c-3.1,0-5.7,2.2-6.3,5.1c-0.2,0-0.4,0-0.6,0C2.9,7.1,0,10,0,13.5c0,3.5,2.9,6.4,6.4,6.4
c0.9,0,1.8-0.2,2.6-0.5c0.4,1.4,1.7,2.4,3.2,2.4c1.1,0,2.2-0.6,2.8-1.4c1.4,1,3.2,1.7,5.1,1.7c4.7,0,8.5-3.8,8.5-8.5
c0-1.4-0.4-2.8-1-4C28.2,8.8,28.6,7.9,28.6,6.9z"/>
</svg>
<svg class="icon cloud cloud02" version="1.1"
x="0px"
y="0px"
width="80px"
height="40px"
viewBox="0 0 42.6 22" style="enable-background:new 0 0 42.6 22;"
xml:space="preserve">
<path class="st1" d="M42.6,4.9c0-2.2-1.7-3.9-3.9-3.9c-1.5,0-2.8,0.9-3.4,2.1C34.9,3,34.5,3,34,3c-0.5,0-0.9,0-1.3,0.1
C31.6,1.3,29.6,0,27.2,0c-3.1,0-5.7,2.2-6.3,5.1c-0.2,0-0.4,0-0.6,0C16.9,5.1,14,8,14,11.5c0,3.5,2.9,6.4,6.4,6.4
c0.9,0,1.8-0.2,2.6-0.5c0.4,1.4,1.7,2.4,3.2,2.4c1.1,0,2.2-0.6,2.8-1.4c1.4,1,3.2,1.7,5.1,1.7c4.7,0,8.5-3.8,8.5-8.5
c0-1.4-0.4-2.8-1-4C42.2,6.8,42.6,5.9,42.6,4.9z"/>
<path class="st1" d="M28.6,6.9c0-2.2-1.7-3.9-3.9-3.9c-1.5,0-2.8,0.9-3.4,2.1C20.9,5,20.5,5,20,5c-0.5,0-0.9,0-1.3,0.1
C17.6,3.3,15.6,2,13.2,2c-3.1,0-5.7,2.2-6.3,5.1c-0.2,0-0.4,0-0.6,0C2.9,7.1,0,10,0,13.5c0,3.5,2.9,6.4,6.4,6.4
c0.9,0,1.8-0.2,2.6-0.5c0.4,1.4,1.7,2.4,3.2,2.4c1.1,0,2.2-0.6,2.8-1.4c1.4,1,3.2,1.7,5.1,1.7c4.7,0,8.5-3.8,8.5-8.5
c0-1.4-0.4-2.8-1-4C28.2,8.8,28.6,7.9,28.6,6.9z"/>
</svg>
</div>
<!-- ////////////////////////////////////////// text -->
<div class="text-wrapper">
<p class="degree">6<sup>°</sup></p>
<p>Cloudy</p>
<p>Wind: N 5 mph</p>
<p>Humidity: 60%</p>
</div>
</div>
<!-- /////////////////////////////////////////////////////////////////////////////// evening -->
<div id="evening" class="section">
<p class="time">Evening</p>
<!-- ////////////////////////////////////////// icona -->
<div class="icon-box">
<svg class="icon cloud" version="1.1"
x="0px"
y="0px"
width="80px"
height="40px"
viewBox="0 0 42.6 22" style="enable-background:new 0 0 42.6 22;"
xml:space="preserve">
<path class="st1" d="M42.6,4.9c0-2.2-1.7-3.9-3.9-3.9c-1.5,0-2.8,0.9-3.4,2.1C34.9,3,34.5,3,34,3c-0.5,0-0.9,0-1.3,0.1
C31.6,1.3,29.6,0,27.2,0c-3.1,0-5.7,2.2-6.3,5.1c-0.2,0-0.4,0-0.6,0C16.9,5.1,14,8,14,11.5c0,3.5,2.9,6.4,6.4,6.4
c0.9,0,1.8-0.2,2.6-0.5c0.4,1.4,1.7,2.4,3.2,2.4c1.1,0,2.2-0.6,2.8-1.4c1.4,1,3.2,1.7,5.1,1.7c4.7,0,8.5-3.8,8.5-8.5
c0-1.4-0.4-2.8-1-4C42.2,6.8,42.6,5.9,42.6,4.9z"/>
<path class="st1" d="M28.6,6.9c0-2.2-1.7-3.9-3.9-3.9c-1.5,0-2.8,0.9-3.4,2.1C20.9,5,20.5,5,20,5c-0.5,0-0.9,0-1.3,0.1
C17.6,3.3,15.6,2,13.2,2c-3.1,0-5.7,2.2-6.3,5.1c-0.2,0-0.4,0-0.6,0C2.9,7.1,0,10,0,13.5c0,3.5,2.9,6.4,6.4,6.4
c0.9,0,1.8-0.2,2.6-0.5c0.4,1.4,1.7,2.4,3.2,2.4c1.1,0,2.2-0.6,2.8-1.4c1.4,1,3.2,1.7,5.1,1.7c4.7,0,8.5-3.8,8.5-8.5
c0-1.4-0.4-2.8-1-4C28.2,8.8,28.6,7.9,28.6,6.9z"/>
</svg>
<svg class="icon cloud02" version="1.1"
x="0px"
y="0px"
width="80px"
height="40px"
viewBox="0 0 42.6 22" style="enable-background:new 0 0 42.6 22;"
xml:space="preserve">
<path class="st1" d="M42.6,4.9c0-2.2-1.7-3.9-3.9-3.9c-1.5,0-2.8,0.9-3.4,2.1C34.9,3,34.5,3,34,3c-0.5,0-0.9,0-1.3,0.1
C31.6,1.3,29.6,0,27.2,0c-3.1,0-5.7,2.2-6.3,5.1c-0.2,0-0.4,0-0.6,0C16.9,5.1,14,8,14,11.5c0,3.5,2.9,6.4,6.4,6.4
c0.9,0,1.8-0.2,2.6-0.5c0.4,1.4,1.7,2.4,3.2,2.4c1.1,0,2.2-0.6,2.8-1.4c1.4,1,3.2,1.7,5.1,1.7c4.7,0,8.5-3.8,8.5-8.5
c0-1.4-0.4-2.8-1-4C42.2,6.8,42.6,5.9,42.6,4.9z"/>
<path class="st1" d="M28.6,6.9c0-2.2-1.7-3.9-3.9-3.9c-1.5,0-2.8,0.9-3.4,2.1C20.9,5,20.5,5,20,5c-0.5,0-0.9,0-1.3,0.1
C17.6,3.3,15.6,2,13.2,2c-3.1,0-5.7,2.2-6.3,5.1c-0.2,0-0.4,0-0.6,0C2.9,7.1,0,10,0,13.5c0,3.5,2.9,6.4,6.4,6.4
c0.9,0,1.8-0.2,2.6-0.5c0.4,1.4,1.7,2.4,3.2,2.4c1.1,0,2.2-0.6,2.8-1.4c1.4,1,3.2,1.7,5.1,1.7c4.7,0,8.5-3.8,8.5-8.5
c0-1.4-0.4-2.8-1-4C28.2,8.8,28.6,7.9,28.6,6.9z"/>
</svg>
<svg class="rain01" version="1.1"
x="0px"
y="0px"
width="10px"
height="10px"
viewBox="0 0 2.2 2.7" style="enable-background:new 0 0 2.2 2.7;"
xml:space="preserve">
<path class="st0" d="M2.1,0c0,0-1.2,0.1-1.9,1.1C-0.1,1.6,0,2.2,0.5,2.5s1.1,0.2,1.4-0.3C2.5,1.2,2.1,0,2.1,0z"/>
</svg>
<svg class="rain02" version="1.1"
x="0px"
y="0px"
width="10px"
height="10px"
viewBox="0 0 2.2 2.7" style="enable-background:new 0 0 2.2 2.7;"
xml:space="preserve">
<path class="st0" d="M2.1,0c0,0-1.2,0.1-1.9,1.1C-0.1,1.6,0,2.2,0.5,2.5s1.1,0.2,1.4-0.3C2.5,1.2,2.1,0,2.1,0z"/>
</svg>
<svg class="rain03" version="1.1"
x="0px"
y="0px"
width="10px"
height="10px"
viewBox="0 0 2.2 2.7" style="enable-background:new 0 0 2.2 2.7;"
xml:space="preserve">
<path class="st0" d="M2.1,0c0,0-1.2,0.1-1.9,1.1C-0.1,1.6,0,2.2,0.5,2.5s1.1,0.2,1.4-0.3C2.5,1.2,2.1,0,2.1,0z"/>
</svg>
</div>
<!-- ////////////////////////////////////////// text -->
<div class="text-wrapper">
<p class="degree">8<sup>°</sup></p>
<p>Rain</p>
<p>Wind: N 9 mph</p>
<p>Humidity: 80%</p>
</div>
</div>
<!-- /////////////////////////////////////////////////////////////////////////////// nightday -->
<div id="nightday" class="section">
<p class="time">Nightday</p>
<!-- ////////////////////////////////////////// icona -->
<div class="icon-box">
<svg version="1.1"
x="0px"
y="0px"
width="50px"
height="50px"
viewBox="0 0 23.3 25.9" style="enable-background:new 0 0 23.3 25.9;" xml:space="preserve">
<path class="st0" d="M22,20.9c-7.2,0-13-5.8-13-13c0-3,1-5.7,2.7-7.9C5.1,0.6,0,6.2,0,12.9c0,7.2,5.8,13,13,13c4.2,0,7.9-2,10.3-5.1
C22.9,20.9,22.4,20.9,22,20.9z"/>
</svg>
<svg class="icon cloud" version="1.1"
x="0px"
y="0px"
width="80px"
height="40px"
viewBox="0 0 42.6 22" style="enable-background:new 0 0 42.6 22;"
xml:space="preserve">
<path class="st1" d="M42.6,4.9c0-2.2-1.7-3.9-3.9-3.9c-1.5,0-2.8,0.9-3.4,2.1C34.9,3,34.5,3,34,3c-0.5,0-0.9,0-1.3,0.1
C31.6,1.3,29.6,0,27.2,0c-3.1,0-5.7,2.2-6.3,5.1c-0.2,0-0.4,0-0.6,0C16.9,5.1,14,8,14,11.5c0,3.5,2.9,6.4,6.4,6.4
c0.9,0,1.8-0.2,2.6-0.5c0.4,1.4,1.7,2.4,3.2,2.4c1.1,0,2.2-0.6,2.8-1.4c1.4,1,3.2,1.7,5.1,1.7c4.7,0,8.5-3.8,8.5-8.5
c0-1.4-0.4-2.8-1-4C42.2,6.8,42.6,5.9,42.6,4.9z"/>
<path class="st1" d="M28.6,6.9c0-2.2-1.7-3.9-3.9-3.9c-1.5,0-2.8,0.9-3.4,2.1C20.9,5,20.5,5,20,5c-0.5,0-0.9,0-1.3,0.1
C17.6,3.3,15.6,2,13.2,2c-3.1,0-5.7,2.2-6.3,5.1c-0.2,0-0.4,0-0.6,0C2.9,7.1,0,10,0,13.5c0,3.5,2.9,6.4,6.4,6.4
c0.9,0,1.8-0.2,2.6-0.5c0.4,1.4,1.7,2.4,3.2,2.4c1.1,0,2.2-0.6,2.8-1.4c1.4,1,3.2,1.7,5.1,1.7c4.7,0,8.5-3.8,8.5-8.5
c0-1.4-0.4-2.8-1-4C28.2,8.8,28.6,7.9,28.6,6.9z"/>
</svg>
</div>
<!-- ////////////////////////////////////////// text -->
<div class="text-wrapper">
<p class="degree">8<sup>°</sup></p>
<p>Cloudy</p>
<p>Wind: E 7 mph</p>
<p>Humidity: 45%</p>
</div>
</div>
</div>body {
font-family: 'Dosis', sans-serif;
padding: 0;
margin: 0;
}
#background {
background-image: url('http://drp-images.nettavisen.no/images/article/2017/01/05/3423299080/1/w1024/3350301.jpg');
background-size: cover;
background-repeat: no-repeat;
/* filter: blur(60px); */
height: 100vh;
width: 100%;
}
#background:after {
bottom: 0;
content:"";
background-color: rgba(3,28,46,0.95);
left: 0;
position: absolute;
right: 0;
top: 0;
}
.container {
border-radius: 10px;
box-shadow: -10px 10px 10px rgba(0,0,0,0.5);
display: flex;
flex-direction: column;
height: 500px;
letter-spacing: 2px;
left: 50%;
justify-content: space-between;
overflow: hidden;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
width: 350px;
}
.container > div + div {
box-shadow: inset 0px 5px 5px rgba(0,0,0,0.2);
}
.st0 {fill: #fff}
.st1 {opacity: 0.8; fill: #fff;}
/* //////////////////////////////////////// location ///////*/
#location {
align-items: baseline;
background-image: url('http://www.linformale.eu/wp-content/uploads/2018/02/torino.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: top;
background-color: #094067;
color: #fff;
display: flex;
height: 800px;
justify-content: space-between;
text-shadow: 0px 1px 2px rgba(0,0,0,0.5);
width: 100%;
transition: height 0.4s ease-in-out;
}
#location .fa-map-marker-alt {color: #125482; margin-left: 1em;}
#location .place {margin-left: 0.5em;}
#location .day {
margin-left: auto;
margin-right: 1em;
text-align: right;
}
#location.open-menu {
height: 200px;
}
/* //////////////////////////////////////// general / icon //////*/
.section {
cursor: pointer;
height: 100px;
overflow: hidden;
position: relative;
transition: height 0.2s;
transition-timing-function: cubic-bezier(.68,.03,.32,1.47);
width: 100%;
}
.section:hover {
height: 400px;
}
.time {
color: rgba(255,255,255,0.6);
font-family: 'Poppins', sans-serif;
font-size: 0.8em;
font-width: 900;
margin: 0;
position: absolute;
right: 1em;
top: 1em;
}
.section:hover .time {
color: rgba(255,255,255,1);
font-size: 1.2em;
}
.icon-box {
animation-origin: center;
/* background-color: red; */
height: 50px;
left: -10em;
opacity: 0;
position: absolute;
top: 3.5em;
transition-timing-function: cubic-bezier(.68,.03,.32,1.47);
width: 80px;
}
.section:hover .icon-box {
animation: icon-anima 0.4s ease-in-out;
animation-fill-mode: forwards;
}
@keyframes icon-anima {
0% {left: -10em; opacity: 0}
100% {left: 2em; opacity: 1}
}
.icon {
position: absolute;
}
.rays {
animation: rays-anima 2s infinite linear;
animation-origin: center;
position: absolute;
}
@keyframes rays-anima {
0% {transform: rotate(0)}
100% {transform: rotate(180deg)}
}
.cloud {
left: -10px;
bottom: 0;
animation: cloud-anima 5s infinite ease;
animation-origin: center;
position: absolute;
}
@keyframes cloud-anima {
0% {left: -10px;}
50% {left: 10px;}
100% {left: -10px;}
}
.cloud02 {
bottom: 20px;
left: 30px;
animation: cloud-anima2 5s infinite ease;
animation-origin: center;
position: absolute;
}
@keyframes cloud-anima2 {
0% {left: 20px;}
50% {left: 10px;}
100% {left: 20px;}
}
.rain01 {
bottom: -5px;
left: 60px;
position: absolute;
}
.rain02 {
bottom: -5px;
left: 25px;
position: absolute;
}
.rain03 {
bottom: -10px;
left: 40px;
position: absolute;
}
.text-wrapper {
color: #fff;
display: flex;
flex-direction: column;
margin: 0;
opacity: 0;
position: absolute;
right: 1em;
top: 4em;
}
.text-wrapper p {margin: 0; margin-left: auto;}
.degree {font-size: 2.2em;}
.degree sup {font-size: 0.6em;}
.section:hover .text-wrapper {
animation: text-anima 0.4s ease-in-out;
animation-fill-mode: forwards;
}
@keyframes text-anima {
0% {top: 10em; opacity: 0}
100% {top: 4.2em; opacity: 1}
}
/* //////////////////////////////////////// morning ///////*/
#morning {
background-color: #42b9f4;
/* height: 300px; */
}
/* //////////////////////////////////////// midday ///////*/
#midday {
background-color: #32a2db;
}
/* //////////////////////////////////////// afternoon ///////*/
#afternoon {
background-color: #1e89bf;
}
/* //////////////////////////////////////// evening ///////*/
#evening {
background-color: #14659E;
}
/* //////////////////////////////////////// nightday ///////*/
#nightday {
background-color: #125482;
}
(function($) {
var container = $('.container');
var location = $('#location');
var section = $('.section');
section.on('mouseover', function(){
location.addClass('open-menu');
});
section.on('mouseout', function(){
location.removeClass('open-menu');
});
location.on('mouseover', function(){
location.addClass('open-menu');
});
location.on('mouseout', function(){
location.removeClass('open-menu');
});
})(jQuery);
External CSS
This Pen doesn't use any external CSS resources.