Weather-App/index.html at master · mohamedbasemdev/Weather-App · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!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="style.css">
    <link rel="stylesheet" href="css/all.min.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="form">
                <input class="searchcity" type="text" placeholder="Search City">
            </div>
            <i class="fas fa-search btn-search"></i>
        </div>
        <div class="section-found">
            <div class="always-section">
                <div class="location">
                    <i class="fa-solid fa-location-dot"></i>
                    <div class="loc">
                        <p class="city">Cairo</p>
                    </div>
                </div>
                <div class="date-txt">Sat 24 Jan</div>
            </div>
            <div class="always-section summary">
                <img class="cloud" src="assets/assets/weather/clear.svg" alt="">
                <div class="temperature">
                    <h1 class="temp">21 °C</h1>
                    <p class="weather">Clear</p>
                </div>
            </div>
            <div class="always-section ">
                <div class="humidity-wind">
                    <i class="fa-solid fa-droplet"></i>
                    <div class="degree-info">
                        <p>Humidity</p>
                        <h5 class="hum-degree">19%</h5>
                    </div>
                </div>
                <div class="humidity-wind">
                    <i class="fa-solid fa-wind"></i>
                    <div class="degree-info">
                        <p>Wind Speed</p>
                        <h5 class="wind-degree">4.12 M/s</h5>
                    </div>
                </div>
            </div>
            <div class="forecast-section">
                <div class="forecast">
                    <div class="date-info">Jan 25</div>
                    <img class="fore-cloud"  src="assets/assets/weather/clear.svg" alt="">
                    <h5 class="fore-degree">21 °C</h5>
                </div>
                <div class="forecast">
                    <div class="date-info">Jan 25</div>
                    <img class="fore-cloud" src="assets/assets/weather/clear.svg" alt="">
                    <h5 class="fore-degree">21 °C</h5>
                </div>
                <div class="forecast">
                    <div class="date-info">Jan 25</div>
                    <img class="fore-cloud" src="assets/assets/weather/clear.svg" alt="">
                    <h5 class="fore-degree">21 °C</h5>
                </div>
                <div class="forecast">
                    <div class="date-info">Jan 25</div>
                    <img class="fore-cloud" src="assets/assets/weather/clear.svg" alt="">
                    <h5 class="fore-degree">21 °C</h5>
                </div>
                <div class="forecast">
                    <div class="date-info">Jan 25</div>
                    <img class="fore-cloud" src="assets/assets/weather/clear.svg" alt="">
                    <h5 class="fore-degree">21 °C</h5>
                </div>
            </div>
        </div>
        <div class="section-search">
            <img src="assets/assets/message/search-city.png" alt="">
            <h1>Search City</h1>
            <p>Find Out The Weather Conditions Of The City</p>
        </div>
        <div class="not-found-search">
            <img src="assets/assets/message/not-found.png" alt="">
            <h1>Search City</h1>
            <p>Find Out The Weather Conditions Of The City</p>
        </div>
    </div>
    <script src="main.js"></script>
</body>
</html>