Weather Widget HTML CSS

The source code for the design of the weather forecast widget made in HTML and CSS.

Weather Widget HTML CSS
The source code for the design of the weather forecast widget made in HTML and CSS.

HTML code

<!DOCTYPE html>
<html>
<head>
	<title>CSS Weather Widget</title>

	<!-- Style CSS -->
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<!-- Background Image -->
	<div class="bg"></div>

	<div class="container">
		<!-- Weather Widget -->
		<div class="widget">
			<div class="left">
				<img src="images/cloud.svg" class="icon">
				<h5 class="weather-status">Partly Cloud</h5>
			</div>
			<div class="right">
				<h5 class="city">Singapore</h5>
				<h5 class="degree">25&#176;c</h5>
			</div>
			<div class="bottom">
				<div>
					Wind Speed <span>22 kmph</span>
				</div>
				<div>
					Cloud Cover <span>22%</span>
				</div>
				<div>
					Pressure <span>1010 mb</span>
				</div>
			</div>
		</div>
		<!-- ./End of weather widget -->
	</div>
</body>
</html>

CSS code

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;600&display=swap');

body, html{
	height: 100%;
	margin: 0;
	font-family: 'Poppins', sans-serif;
}

.bg{
	background-image: url("images/bg.jpg");
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	filter: blur(20px);
	-webkit-filter: blur(20px);
}

.container{
	top: 50%;
	left: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
}

.widget{
	width: 400px;
	height: 200px;
	border-radius: 20px;
	background: rgba(299, 299, 299, 0.4);
}

.widget .left{
	position: absolute;
	left: 0;
	width: 200px;
}

.widget .right{
	position: absolute;
	right: 0;
	width: 200px;
	color: #fff;
	margin: 50px 0;
}

.icon{
	width: 75%;
	margin-bottom: -30px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.weather-status{
	color: #fff;
	text-align: center;
	margin-top: 0;
}

.widget .right .city{
	font-size: 1em;
	text-align: center;
	margin: 0;
	text-shadow: 1px 1px 5px #707070;
}

.widget .right .degree{
	font-size: 3em;
	font-weight: bold;
	text-align: center;
	margin: 0;
	text-shadow: 1px 1px 5px #707070;
}

.widget .bottom{
	width: 100%;
	position: absolute;
	bottom: 10px;
	display: flex;
	justify-content: center;
	color: #fff;
}

.widget .bottom div{
	margin: 5px 10px 5px 10px;
	text-align: center;
	line-height: 100%;
	font-size: 0.83em;
	text-shadow: 1px 1px 5px #707070;
}

.bottom div span{
	display: block;
}

 



on the site are taken from open sources. The site does not contain files for download. All links to files from open sources. Owners of copyrights to the material may request removal of the post from the site.