weather-Api-with-js-/index.html at master · MohamedKamal100/weather-Api-with-js- · 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
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
      rel="stylesheet"
    />

    <!-- ?Style -->
    <link rel="stylesheet" href="Css/all.min.css" />
    <link rel="stylesheet" href="Css/bootstrap.min.css" />
    <link rel="stylesheet" href="Css/style.css" />
  </head>
  <body class="bg-dark">
    <div class="header bg-dark py-4">
      <nav class="navbar navbar-expand-lg text-white">
        <div class="container">
          <div class="logo">
            <a
              class="d-flex align-items-center justify-content-center g-1 navbar-brand"
              href="#"
              ><img
                class="me-2"
                src="images/logo@2x.png"
                width="60"
                height="40"
                alt=""
              />
              <div>
                <h1 class="header text-white fw-semibold fs-6">Weather</h1>
                <small class="tagline">tagline goes here</small>
              </div>
            </a>
          </div>

          <button
            class="navbar-toggler text-bg-primary"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul
              class="menu list-unstyled d-flex justify-content-center align-items-center ms-auto gap-4 me-4"
            >
              <li class="item nav-link current">
                <a href="#">Home</a>
              </li>
              <li class="item nav-link"><a href="#">News</a></li>
              <li class="item nav-link"><a href="#">Live cameras</a></li>
              <li class="item nav-link"><a href="#">Photos</a></li>
              <li class="item nav-link"><a href="#">Contact</a></li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
    <div class="search">
      <div class="container">
        <div class="form">
          <input
            class="w-100 searchInput border-0"
            type="text"
            name="findLocation"
            placeholder="Find your location..."
          />
          <a
            href="#"
            class="find text-white text-decoration-none d-flex align-items-center justify-content-center"
            >Find</a
          >
        </div>
      </div>
    </div>
    <div class="">
      <div class="container">
        <div class="forecast-container w-100">
          <div class="row g-0" id="forecast"></div>
        </div>
      </div>
    </div>
    <footer class="footer">
      <div class="container">
        <div class="row">
          <div class="col-md-8">
            <form action="#" class="subscribe">
              <input
                class="w-100 border-0"
                type="text"
                name="Email"
                placeholder="Enter your email to subscribe..."
              />
              <a
                href="#"
                class="find text-white text-decoration-none d-flex align-items-center justify-content-center"
                >Subscribe</a
              >
            </form>
          </div>
          <div class="col-md-3 col-md-offset-1">
            <div
              class="social-links d-flex align-items-center justify-content-center gap-2"
            >
              <a href="#" class="text-decoration-none"
                ><i class="fa-brands fa-facebook"></i
              ></a>
              <a href="#" class="text-decoration-none"
                ><i class="fa-brands fa-twitter"></i
              ></a>
              <a href="#" class="text-decoration-none"
                ><i class="fa-brands fa-google-plus"></i
              ></a>
              <a href="#" class="text-decoration-none"
                ><i class="fa-brands fa-pinterest"></i
              ></a>
            </div>
          </div>
        </div>

        <p>
          Copyright 2014 Company name. Designed by Arbawy. All rights reserved
        </p>
      </div>
    </footer>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/index.js"></script>
  </body>
</html>