index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>Wheather App</title>
</head>
<body>

<div class="card">
    <div class="search">
        <input type="text" placeholder="Enter your city name" spellcheck="false">
        <button><img src="./images/search.png" alt="search icon"></button>
        <div class="error"><p>Invalid City name</p></div>
    </div>

    <div class="weather">
        <img src="./images/rain.png" class="weather-icon">
        <h1 class="temp">28°c</h1>
        <h2 class="city">kottayam</h2>

        <div class="details">
            <div class="col">
            <img src="./images/humidity.png" >
            <div>
                <p class="humidity">50%</p>
                <p>Humidity</p>
            </div>
        </div>
    
            <div class="col">
            <img src="./images/wind.png" >
            <div>
                <p class="wind">15km/h</p>
                <p>wind speed</p>
            </div>
        </div>
        </div>
    </div>
   
</div>


<script src="script.js"></script>
</body>
</html>