Weather-App/index.html at main · harshilchovatiya/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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en">

<head>
     <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="apple-touch-icon"  href="https://harshilchovatiya.github.io/images/android-chrome-512x512.png">
    <link rel="icon" type="image/png" sizes="192x192" href="https://harshilchovatiya.github.io/images/android-chrome-192x192.png">

    <!-- Title: Concise and Descriptive -->
    <title>ClimaCare Weather - Harshil Chovatiya</title>
      <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
    />
    <!-- Meta Description: Engaging and Informative -->
    <meta name="description" content="Get accurate weather forecasts with ClimaCare Weather by Harshil Chovatiya. Check current weather conditions, temperatures, and more for your city.">

    <!-- Meta Keywords: Relevant and Targeted -->
    <meta name="keywords" content="ClimaCare Weather, weather forecast, Harshil Chovatiya, weather app, city weather">

    <!-- Author: Provide Attribution -->
    <meta name="author" content="Harshil Chovatiya">

    <!-- Favicon: Iconic and Recognizable -->
<!--     <link rel="icon" href="favicon.ico" type="image/x-icon"> -->

    <!-- Open Graph Protocol for Social Media Sharing -->
    <meta property="og:title" content="ClimaCare Weather - Harshil Chovatiya">
    <meta property="og:description" content="Get accurate weather forecasts with ClimaCare Weather by Harshil Chovatiya. Check current weather conditions, temperatures, and more for your city.">
    <meta property="og:image" content="https://user-images.githubusercontent.com/131672641/268946813-eadfaa85-c9e0-4744-a851-0384a8df0a9a.png">
    <meta property="og:url" content="https://https://harshilchovatiya.github.io/Weather-App">

    <!-- Twitter Card for Twitter Sharing -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@harshilbmk">
    <meta name="twitter:title" content="ClimaCare Weather - Harshil Chovatiya">
    <meta name="twitter:description" content="Get accurate weather forecasts with ClimaCare Weather by Harshil Chovatiya. Check current weather conditions, temperatures, and more for your city.">
    <meta name="twitter:image" content="https://user-images.githubusercontent.com/131672641/268946813-eadfaa85-c9e0-4744-a851-0384a8df0a9a.png">

    <!-- CSS and JavaScript Files -->
    <link rel="stylesheet" href="style.css">
    <script src="index.js" defer></script>

    <!-- Canonical URL: Specify Preferred Version -->
    <link rel="canonical" href="https://harshilchovatiya.github.io/Weather-App">
</head>

<body>


    <div class="container">

        <div class="left-side">
            <div class="left-part">
                <div class="search-bar">
                    <div class="search-input-container">
                        <input type="text" placeholder="Search City" class="search-input" id="search-input">
                        <button class="search-button" id="search-button">
                            <img src="images/search.png" alt="Search Icon">
                        </button>
                    </div>
                </div>
                <div class="left-side-top">
                    <div class="city-name">Surat</div>
                    <div class="date">Today's Date</div>
                </div>

                <div class="part">
                    <div class="content">
                        <img src="images/clouds.png" alt="Weather Icon" class="weather-icon">
                        <div class="temperature">25°C</div>
                    </div>

                    <div class="right-part">
                        <div class="humidity">Humidity: 60%</div>
                        <div class="wind">Wind: 10 km/h</div>
                    </div>
                </div>
            </div>
            <div class="next-days">
                <div class="next-day-card">
                    <div class="day-name">Today</div>
                    <div class="day-temperature">28°C</div>
                    <div class="day-weather-type">Sunny</div>
                </div>
                <div class="next-day-card">
                    <div class="day-name">Tomorrow</div>
                    <div class="day-temperature">29°C</div>
                    <div class="day-weather-type">Partly Cloudy</div>
                </div>
                <div class="next-day-card">
                    <div class="day-name">Tomorrow</div>
                    <div class="day-temperature">29°C</div>
                    <div class="day-weather-type">Partly Cloudy</div>
                </div>
                <div class="next-day-card">
                    <div class="day-name">Tomorrow</div>
                    <div class="day-temperature">29°C</div>
                    <div class="day-weather-type">Partly Cloudy</div>
                </div>
                <div class="next-day-card">
                    <div class="day-name">Tomorrow</div>
                    <div class="day-temperature">29°C</div>
                    <div class="day-weather-type">Partly Cloudy</div>
                </div>
                <div class="next-day-card">
                    <div class="day-name">Tomorrow</div>
                    <div class="day-temperature">29°C</div>
                    <div class="day-weather-type">Partly Cloudy</div>
                </div>
                <!-- Repeat for the next 4 days -->
            </div>


        </div>
        <div class="right-side">
            <h1>ClimaCare Weather by <br> Harshil Chovatiya</h1>


            <div class="social">
                <!-- <a href=""><i class="fab fa-facebook-f"></i></a> -->
                <a href="https://www.instagram.com/harshilchovatiyaa"><i class="fab fa-instagram"></i></a>
                <a href="https://twitter.com/harshilbmk"><i class="fab fa-twitter"></i></a>
                <a href="https://github.com/harshilchovatiya"><i class="fab fa-github"></i></a>
                <a href="https://www.linkedin.com/in/harshilbmk"><i class="fab fa-linkedin-in"></i></a>
              </div>
        </div>
</body>

</html>