Skip to content

Commit a5557b5

Browse files
Daniel1000cDaniel1000c
committed
delete format and reformat footer, and header
1 parent c34bd3f commit a5557b5

File tree

1 file changed

+43
-55
lines changed

1 file changed

+43
-55
lines changed

‎weatherApp/index.html‎

Lines changed: 43 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -2,73 +2,61 @@
22
<html lang="en-us">
33
<head>
44
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
56
<title>Weather App</title>
6-
<link rel="icon" type="image/x-icon" href="favicon/favicon.ico">
7+
<link rel="icon" type="image/x-icon" href="favicon/favicon.ico"><!--Link to Favicon-->
8+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"><!--Link to Bootstrap css-->
79
<link rel="stylesheet" href="css/style.css">
8-
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"><!--Insert boostrap link-->
9-
<link href="https://cdn.jsdelivr.net/npm/boxicons@2.1.1/css/boxicons.min.css" rel="stylesheet"><!--Insert boxicon link-->
10-
<script src="jquery/jquery3.7.1.js"></script><!--Link to Jquery script file-->
11-
<script src="scripts/script.js"></script><!--Link to script file-->
12-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script><!--Insert bootstrap script link-->
10+
<link href="https://cdn.jsdelivr.net/npm/boxicons@2.1.2/css/boxicons.min.css" rel="stylesheet"><!--Include boxicon link-->
11+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script><!--Include bootstrap js script-->
12+
<script src="scripts/script.js"></script><!--Link to personal js script-->
1313
</head>
1414
<body>
1515
<header>
16-
<!--Insert bootstrap nav bar-->
17-
<nav class="navbar navbar-expand-lg navbar-light bg-primary">
18-
<a class="navbar-brand" href="index.html">Weather App <i class='bx bxs-sun' ></i></a>
19-
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
20-
<span class="navbar-toggler-icon"></span>
21-
</button>
22-
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
23-
<div class="navbar-nav">
24-
<a class="nav-item nav-link" href="../index.html#home">Back To Home</a>
25-
<a class="nav-item nav-link" href="index.html#about">About Weather App</a>
26-
<a class="nav-item nav-link" href="../index.html#projects">See More Projects</a>
16+
17+
<!--Navigation bar-->
18+
<nav class="navbar navbar-expand-lg bg-primary">
19+
<div class="container-fluid">
20+
<a class="navbar-brand" href="index.html">Weather App <i class='bx bxs-sun'></i></a>
21+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
22+
<span class="navbar-toggler-icon"></span>
23+
</button>
24+
<div class="collapse navbar-collapse" id="navbarNav">
25+
<ul class="navbar-nav">
26+
<li class="nav-item">
27+
<a class="nav-link" aria-current="page" href="index.html#weather">Weather</a>
28+
</li>
29+
<li class="nav-item">
30+
<a class="nav-link" href="index.html#about">About</a>
31+
</li>
32+
<li class="nav-item">
33+
<a class="nav-link" href="../index.html#projects">Other Projects</a>
34+
</li>
35+
</ul>
2736
</div>
2837
</div>
29-
</nav>
38+
</nav>
39+
3040
</header>
3141
<main>
32-
<!--Create weather app container-->
33-
<section class="weatherContainer">
34-
<h2>The Weather</h2>
35-
36-
<!--Create search bar-->
37-
<div class="searchBar">
38-
<input type="text" id="searchInput" placeholder="Search for a City" spellcheck="false">
39-
<button><i class='bx bx-search'></i></button>
40-
</div>
41-
<!--Create search results container-->
42-
<div class="weatherResult">
43-
<img class="weatherIcon" src="images/cloudy.png">
44-
<h3 class="temp">22C</h3>
45-
<h4 class="cityName">Germany</h4>
46-
47-
<!--Insert details column-->
48-
<div class="details">
49-
50-
</div>
51-
</div>
52-
</section>
42+
43+
</main>
44+
<footer>
45+
<!--Quick links Container-->
46+
<div class="footerInfoContainer">
47+
<div class="quickLinks">
48+
<h3>Quick Links <i class='bx bx-link' ></i></h3>
5349

54-
<!--Create about Section-->
55-
<section id="about" class="aboutContainer">
56-
<h2>About Weather App</h2>
50+
<p><a href="index.html#weather">Check Weather</a></p>
51+
<p><a href="index.html#about">About Weather App</a></p>
52+
<p><a href="../index.html#projects">Other Script Lab Projects</a></p>
53+
</div>
54+
<div class="socialMedia">
55+
<h3>Get In Touch <i class='bx bxs-phone-call' ></i></h3>
5756

58-
<!--Create about text container-->
59-
<div class="textContainer">
60-
<img src="images/cartoonSunNoBg.png" alt="Weather App">
61-
62-
<p>
63-
The Purpose of this application is to help the user know what is the weather
64-
in other regions of the world. This app will also display the img of what the weather is like in that region.
65-
Furthermore, I will display the temperature of what that current region is when the user searches up that region of the world.
66-
</p>
6757
</div>
68-
</section>
69-
</main>
70-
<footer>
71-
&copy; 2024 ScriptLab | All Rights Reserved
58+
</div>
59+
<p>&copy; 2024 ScritLab | All Rights Reserved</p>
7260
</footer>
7361
</body>
7462
</html>

0 commit comments

Comments
 (0)