Weather widget
This is html for make weather widget
Weather 1
21 °C
Mostly Cloudy
- London, UK
- 15%
- 6.45 MPH
<div class="widget">
<!-- widget title -->
<div class="block-title-4">
<h4 class="h5 title-arrow">
<span>Weather 1</span>
</h4>
</div>
<!-- widget content -->
<div class="weather-widget bg-primary">
<div class="row">
<div class="col-sm-4 pe-sm-0">
<div class="p-4 text-center">
<img src="../../assets/img/weather/animated/rainy-1.svg">
</div>
</div>
<div class="col-sm-8 ps-sm-0 text-center-down">
<div class="p-4 text-white">
<div class="h1 text-white">21 <sup><span>°</span>C</sup></div>
<div class="w-100">Mostly Cloudy</div>
</div>
</div>
</div>
</div>
<div class="mb-4">
<ul class="list-unstyled p-3 border border-top-0">
<li class="d-inline-block me-3">London, UK</li>
<li class="d-inline-block me-3"><span class="me-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-thermometer-snow" viewBox="0 0 16 16">
<path d="M5 12.5a1.5 1.5 0 1 1-2-1.415V9.5a.5.5 0 0 1 1 0v1.585A1.5 1.5 0 0 1 5 12.5z"/>
<path d="M1 2.5a2.5 2.5 0 0 1 5 0v7.55a3.5 3.5 0 1 1-5 0V2.5zM3.5 1A1.5 1.5 0 0 0 2 2.5v7.987l-.167.15a2.5 2.5 0 1 0 3.333 0L5 10.486V2.5A1.5 1.5 0 0 0 3.5 1zm5 1a.5.5 0 0 1 .5.5v1.293l.646-.647a.5.5 0 0 1 .708.708L9 5.207v1.927l1.669-.963.495-1.85a.5.5 0 1 1 .966.26l-.237.882 1.12-.646a.5.5 0 0 1 .5.866l-1.12.646.884.237a.5.5 0 1 1-.26.966l-1.848-.495L9.5 8l1.669.963 1.849-.495a.5.5 0 1 1 .258.966l-.883.237 1.12.646a.5.5 0 0 1-.5.866l-1.12-.646.237.883a.5.5 0 1 1-.966.258L10.67 9.83 9 8.866v1.927l1.354 1.353a.5.5 0 0 1-.708.708L9 12.207V13.5a.5.5 0 0 1-1 0v-11a.5.5 0 0 1 .5-.5z"/>
</svg>
</span>15%</li>
<li class="d-inline-block">
<span class="me-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-wind" viewBox="0 0 16 16">
<path d="M12.5 2A2.5 2.5 0 0 0 10 4.5a.5.5 0 0 1-1 0A3.5 3.5 0 1 1 12.5 8H.5a.5.5 0 0 1 0-1h12a2.5 2.5 0 0 0 0-5zm-7 1a1 1 0 0 0-1 1 .5.5 0 0 1-1 0 2 2 0 1 1 2 2h-5a.5.5 0 0 1 0-1h5a1 1 0 0 0 0-2zM0 9.5A.5.5 0 0 1 .5 9h10.042a3 3 0 1 1-3 3 .5.5 0 0 1 1 0 2 2 0 1 0 2-2H.5a.5.5 0 0 1-.5-.5z"/>
</svg>
</span>6.45 MPH
</li>
</ul>
</div>
<!-- end widget content -->
<div class="gap-0"></div>
</div>
Weather 2
21 °C
Mostly Cloudy
humidity: 20%
wind: 6.45 MPH
Sunday, 8.00am
- London, UK
- October 29, 2019
<div class="widget">
<!-- widget title -->
<div class="block-title-4">
<h4 class="h5 title-arrow">
<span>Weather 2</span>
</h4>
</div>
<!-- widget content -->
<div class="weather-widget bg-primary">
<div class="row">
<div class="col-sm-4 pe-sm-0">
<div class="text-center">
<img src="../../assets/img/weather/animated/rainy-1.svg">
<br>
<div class="h1 display-md-4 text-white">21 <sup><span>°</span>C</sup></div>
</div>
</div>
<div class="col-sm-8 ps-sm-0 text-center-down">
<div class="p-4 text-white">
<div class="h1 text-white">Mostly Cloudy</div>
<p class="text-white mb-0">humidity: 20%</p>
<p class="text-white mb-0">wind: 6.45 MPH</p>
<p class="text-white mb-0">Sunday, 8.00am</p>
</div>
</div>
</div>
</div>
<div class="mb-4">
<ul class="list-unstyled p-3 border border-top-0">
<li class="d-inline-block me-3">
<span class="me-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-alt" viewBox="0 0 16 16">
<path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z"/>
<path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
</svg>
</span> London, UK</li>
<li class="d-inline-block me-3">
<span class="me-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar2-check" viewBox="0 0 16 16">
<path d="M10.854 8.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM2 2a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H2z"/>
<path d="M2.5 4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V4z"/>
</svg></span>
October 29, 2019
</li>
</ul>
</div>
<!-- end widget content -->
<div class="gap-0"></div>
</div>
Weather Images
This is weather animate images from amCharts.
Cloudy
Rainy
Snowy
Miscellaneous
