<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Weather App</title>
<link href=
rel="stylesheet">
<link href=
rel="stylesheet">
<style>
body {
background-color: #f0f2f5;
}
.weather-card {
max-width: 400px;
margin: 50px auto;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
background-color: #fff;
position: relative;
/* To position the sun icon */
}
.weather-title {
font-size: 24px;
font-weight: bold;
color: #333;
margin-bottom: 20px;
}
.input-group-text {
background-color: #fff;
border: none;
}
.weather-icon {
font-size: 48px;
margin-bottom: 20px;
}
.weather-info {
font-size: 18px;
color: #555;
margin-bottom: 10px;
}
.weather-btn {
background-color: #007bff;
border: none;
}
.weather-btn:hover {
background-color: #0056b3;
}
.sunny-icon {
position: absolute;
top: 10px;
right: 10px;
color: #ffce00;
font-size: 48px;
}
</style>
</head>
<body>
<div class="weather-card">
<div class="row justify-content-end">
<div class="col-auto">
<div class="sunny-icon">
<i class="bi bi-sun-fill"></i>
</div>
</div>
</div>
<h1 class="weather-title text-center mb-4">
Weather App</h1>
<div class="input-group mb-3">
<input type="text" class="form-control"
placeholder="Enter Your City Name"
aria-label="City Name"
aria-describedby="basic-addon2">
<button class="btn btn-primary weather-btn"
type="button" id="button-addon2">Get Weather</button>
</div>
<div id="weatherInfo">
<div class="weather-icon text-center">
<i class="bi bi-cloud-sun"></i>
</div>
<div class="weather-info text-center">
<p>Temperature: 20°C</p>
<p>Weather: Sunny</p>
<p>Humidity: 60%</p>
<p>Wind Speed: 5 m/s</p>
<p>Visibility: 10 km</p>
</div>
</div>
</div>
<script src=
</body>
</html>