MapCast-Final-Project/index.html at main · shubhijoshi/MapCast-Final-Project · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>MapCast</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
   <link rel="stylesheet" href="style.css" id="theme-stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap" rel="stylesheet">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
    <link rel="icon" href="images/logo4.png" type="image/png">
</head>
<body>
<nav class="navbar px-4 py-3">
  <span class="navbar-brand">MapCast 🌍</span>
  <span class="ms-auto tagline">Real Time Weather Insights on MAPS!</span>
</nav>

  <div class="overlay d-flex justify-content-center align-items-center">
    <div class="text-center">
        <div>
    <div class="tagline-main">
      We bring real time weather directly to your MAPS, helping you stay ahead!
    </div>
    <div class="tagline-sub">
      Ready to unlock live weather like never before?
    </div>
   <a class="btn btn-primary btn-lg" href="main_index.html" role="button">Let's go!</a>

  </div>

    </div>
  </div>


<!-- Footer HTML -->
<footer id="bottom" class="footer mt-5">
  <div class="container">

    <!-- Section 1: About -->
    <div class="mb-4">
      <h5>About MapCast</h5>
      <p>
        At MapCast, we've built an interactive weather map experience just for you.
        We bring real-time weather data to life on a dynamic map — complete with location traversal
        by either pinpointing directly on the map or using a search bar. You’ll also find light & dark modes,
        weather parameters, and a 5-day weather forecast to help you stay informed and plan ahead with confidence!
      </p>
    </div>

    <!-- Section 2: Contact -->
    <div>
      <div class="fw-normal">Crafted with ❤️</div>
      <div class="fw-bold">Shubhi Joshi</div>
      <div class="d-flex justify-content-center gap-3 mt-2">
        <a href="mailto:shubhijoshi4jw@gmail.com"><i class="bi bi-envelope-fill"></i></a>
        <a href="https://www.linkedin.com/in/shubhijoshi123/" target="_blank"><i class="bi bi-linkedin"></i></a>
        <a href="https://github.com/shubhijoshi" target="_blank"><i class="bi bi-github"></i></a>
      </div>
    </div>

  </div>
</footer>

</body>
</html>