index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Weather App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1 class="tittle">Weather App</h1>
        <form>
            <input type="text" id="input" name="input" placeholder="Enter City">
            <button id="btn" type="submit">Get Weather</button>
        </form>
        <img id="icon" src="1530392_weather_sun_sunny_temperature_icon.png" alt="sunny">
        <h2 id="temp">22°C</h2>
        <p id="weather">Sunny</p>
        <ul class="detail">
            <li id="feel">Feels like: 23°C</li>
            <li id="humidity">Humidity: 40%</li>
            <li id="wind">Wind speed: 5m/s</li>
        </ul>
    </div>
<script src="index.js"></script>
</body>
</html>