weather-app/index.html at master · Deep310/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
<!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 = 'style.css'>
    <title>Weather App</title>
</head>
<body>
    <div class="header">✨Weatheroole✨</div>
    <div class = 'container'>
        <div class = 'intro-lines'>
            <p id = 'fline'> Hey! What's today's weather in your city? </p>
            <br>
            <p id = "sline">Planning for a little trip over the mountains? Heading out for a nice sunbathe at the beach? Make sure</p>
            <p id = "tline"> the weather doesn't ruin your plans!</p>
            <br>
        </div>
        <div class = 'search-container'>
            <input id = 'searchbar' type = 'text' placeholder = "Search location.." autocomplete="off">
            <svg xmlns="http://www.w3.org/2000/svg" id="search-icon" width="30" height="30" viewBox="0 0 16 16"><path d="M15.784 13.68l-4.096-4.096c.585-.955.94-2.067.94-3.27a6.315 6.315 0 1 0-6.314 6.314 6.253 6.253 0 0 0 3.27-.937l4.096 4.094a.751.751 0 0 0 1.052 0l1.052-1.052a.75.75 0 0 0 0-1.053zm-9.47-3.157a4.21 4.21 0 1 1 0-8.419 4.21 4.21 0 0 1 0 8.42z"></path></svg>
        </div>
        <br>
        <br>
    </div>

    <div id = "hi" class="toggle-display">
        <p class = 'common' id = 'city'>City :</p>
        <p class = 'common' id = 'a1'></p>
        <p class = 'common' id = 'coords'>Latitude & Longitude :</p>
        <p class = 'common' id = 'a2'></p>
        <p class = 'common' id = 'weather'>Weather Today:</p>
        <p class = 'common' id = 'a3'></p>
        <p class = 'common' id = 'temp'>Temperature :</p>
        <p class = 'common' id = 'a4'></p>
        <p class = 'common' id = 'feel'>Feels like :</p>
        <p class = 'common' id = 'a5'></p>
        <p class = 'common' id = 'min'>Minimum Temerature :</p>
        <p class = 'common' id = 'a6'></p>
        <p class = 'common' id = 'max'>Maximum Temperature :</p>
        <p class = 'common' id = 'a7'></p>
        <p class = 'common' id = 'wind'>Wind speed :</p>
        <p class = 'common' id = 'a8'></p>
        <p class = 'common' id = 'rain'>Chance of rain :</p>
        <p class = 'common' id = 'a9'></p>
        <p class = 'common' id = 'humidity'>Humidity in air :</p>
        <p class = 'common' id = 'a10'></p>

    </div>
    <div class = 'container-2'>
        <!-- box1 of grid-->
        <div class = 'box-1 boxStyle'>
            <div class='img1 bkg'>
                <img src = "box1-beach.jpg" alt = ''>
            </div>
            <div class='commonDes'>
                <p>Check out how the weather is in more than 200,000 cities globally. Get the live coverage of weather globally with a <b><em>single click</em></b> and it is totally free!</p>
            </div>
        </div>
        <!-- finished box-1-->

        <!-- box-2 of grid-->
        <div class = 'box-2 boxStyle'>
            <div class='img2 bkg'>
                <img src = "box2-thermometer.jpg" alt = ''>
            </div>
            <div class='commonDes'>
                <p>Is it too hot to go to the beach and enjoy a nice warm sunbathe? Find out the current <b><em>minimum</em></b> and <b><em>maximum </em></b>temperatures in your favorite city now! </p>
            </div>
        </div>
        <!-- box2 done-->

        <!-- box-3 of grid-->
        <div class = 'box-3 boxStyle'>
            <div class='img3 bkg'>
                <img src = "box3-rainy.jpg" alt = ''>
            </div>
            <div class='commonDes'>
                <p>Wanna go out in a park for a nice barbeque in a nearby park with your family? Check out how likely it is <b><em>to rain</em></b> in your city and make sure you <b><em>get the most</em></b> out of your plans!</p>
            </div>
        </div>
        <!-- box3 done-->

        <!-- box-4 of grid-->
        <div class = 'box-4 boxStyle'>
            <div class='img4 bkg'>
                <img src = "box4-city.jpg" alt = ''>
            </div>
            <div class='commonDes'>
                <p>And it doesn't stop there! You can also find out the <b><em>current wind speed, latitude and longitude</em></b> of your city! Now what are you waiting for? Search your favorite city now!</p>
            </div>
        </div>
        <!-- done box4-->
    </div>

    <div class = 'footer'>
        <p>Made and designed with 💖 by Deep Parekh.</p>
    </div>
    <script src = 'script.js'></script>
</body>
</html>