code.html

<!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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
        integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<link rel="stylesheet" href="style.css">

<body>
    <section class="container">
        <!-- for writing the input field search -->
        <div class="weather_header">
            <form class="weather_search">
                <i class="fa-solid fa-magnifying-glass"></i>
                <input type="text" class="city_name" placeholder="search your city_name">
            </form>
        </div>
        <!-- main code or the main data -->
        <div class="weather_body">
            <h1 class="weather_city"></h1>
            <p class="weather_date_time"></p>
            <div class="weather_data">
                <p class="weather_forecast"></p>
                <div class="weather_icon"></div>
            </div>
            <p class="weather_temperature"></p>
            <div class="weather_minmax">
                <p class="weather_min"></p>
                <p class="weather_max"></p>
            </div>
            <section class="weather_info">
                <div class="weather_card">
                    <i class="fa-solid fa-temperature-three-quarters"></i>
                    <div>
                        <p>Feels like</p>
                        <p class="weather_feelslike">15&#176</p>
                    </div>
                </div>

                <div class="weather_card">
                    <i class="fa-solid fa-droplet"></i>
                    <div>
                        <p>Humidity</p>
                        <p class="weather_humidity">15&#176</p>
                    </div>
                </div>

                <div class="weather_card">
                    <i class="fa-solid fa-wind"></i>
                    <div>
                        <p>Wind</p>
                        <p class="weather_wind">15&#176</p>
                    </div>
                </div>

                <div class="weather_card">
                    <i class="fa-solid fa-gauge-high"></i>
                    <div>
                        <p>Pressure</p>
                        <p class="weather_pressure">15&#176</p>
                    </div>
                </div>

            </section>
        </div>
    </section>
    <script src="script.js"></script>
</body>

</html>