finished other webpages

Cyborgnetical · Mar 21, 2024 · d3e27fe · d3e27fe
1 parent 4a0f5a3
commit d3e27fe
Show file tree

Hide file tree

Showing 8 changed files with 162 additions and 21 deletions.
diff --git a/about/index.html b/about/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Alabama State Project | About</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+    <div id="jquery-header"></div>
+
+    <h1>About</h1>
+    <main>
+        <article>
+            <h2>What is this?</h2>
+            <p>This part of the website is not too important to the project. This is just here to explain some stuff. More like a Q&A.</p>
+        </article>
+        <article>
+            <h2>About the project</h2>
+            <p>This is a project for my naval science class, I am getting graded on this. Normal this would be a powerpoint or google slide but our instructor gives us some room for creativity and I have a bunch of time on my hands, so ta-da. This is just a way to practice my skills, improve on some stuff, and work on other projects indirectly. I get to do a presentation and reuse that code on other projects, win-win.</p>
+        </article>
+        <article>
+            <h2>Home page</h2>
+            <p>The homepage is just a bunch of dynamic slides made in html and css. Incase I need to convert then into powerpoint or google slides format fast.</p>
+        </article>
+        <article>
+            <h2>Essay</h2>
+            <p>The essay is in MLA format altho I was unsure if I should include direct quotations or not, as in some of my classes I require to have a direct quote <br>{ "Quote here" (author, year, website/book/article )} while other of my classes I just need to include the sources I used to get the information at the end in MLA format citations. When typing my internet connection time ran out and the store was closed so I was locked into what ever page I had loaded at the time (britannica). </p>
+        </article>
+    </main>
+
+    <div id="jquery-footer"></div>
+    <script src="/dependencies/jquery/jquery-3.7.1.js"></script>
+    <script defer>
+        $("#jquery-header").load("/dependencies/header/index.html");
+        $("#jquery-footer").load("/dependencies/footer/index.html");
+    </script>
+
+</body>
+
+</html>
diff --git a/about/style.css b/about/style.css
@@ -0,0 +1,16 @@
+h1{
+    margin-left: 25px;
+    position: relative;
+    border: 2px inset grey;
+    box-shadow: 0px 0px 5px 2px grey;
+}
+
+main{
+    margin-left: 50px;
+}
+main > * {
+    position: relative;
+    border: 2px inset grey;
+    box-shadow: 0px 0px 5px 2px grey;
+    margin-block: 20px;
+}
diff --git a/dependencies/header/index.html b/dependencies/header/index.html
@@ -1,9 +1,10 @@
 <header id="main-header">
-    <a id="main-header_Title" href="/" >State Project | Alabama</a>
+    <a id="main-header_title" href="/" >State Project | Alabama</a>
     <nav>
-        <a href="/essay/index.html">essay</a>
-        <a href="">about</a>
-        <a href="">sources</a>
+        <a href="/">home</a>
+        <a href="/essay">essay</a>
+        <a href="/about">about</a>
+        <a href="/sources">sources</a>
     </nav>
 </header>
 <style>
@@ -47,7 +48,7 @@
     position: relative;
     color: black;
     width: 10vw;
-    height:4vw;
+    height:40px;
     display: flex;
     align-items: center;
     justify-content: center;

diff --git a/essay/index.html b/essay/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>State Project | Alabama</title>
+    <title>Alabama State Project | Essay</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>

diff --git a/essay/style.css b/essay/style.css
@@ -9,7 +9,7 @@ body{
     "footer footer footer"
     ;
     grid-template-columns: 15% 1fr 15%;
-    grid-template-rows: 100px 100px 100px 1fr 100px;
+    grid-template-rows: auto 100px 100px 1fr 100px;
     justify-items: stretch;
     box-sizing: border-box;
 

diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html>
 
 <head>
-    <title>Alabama | State Project</title>
+    <title>Alabama State Project</title>
     <link rel="stylesheet" href="style.css">
     <!--Icon is not working-->
     <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
@@ -225,19 +225,6 @@ <h1 class="slide-header">Technical Schools and Beyond</h1>
         <h1 class="slide-header">Closing Slide</h1>
         tba
     </div>
-    <div class="slide">
-        <h1 class="slide-header">Sources</h1>
-        <div>
-            <span>
-                <a>https://encyclopediaofalabama.org</a>
-                <a>https://www.alapark.com</a>
-                <a>https://www.britannica.com/place/Mississippi-state/From-World-War-I-through-the-civil-rights-movement</a>
-            </span>
-        </div>
-    </div>
-    <footer>
-        Some of this code will be reused to improve the NJ website
-    </footer>
     <div id="jquery-footer"></div>
     <script src="/dependencies/jquery/jquery-3.7.1.js"></script>
     <script defer> 

diff --git a/sources/index.html b/sources/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Alabama State Project | Sources</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+    <div id="jquery-header"></div>
+
+    <main>
+        <h1>Sources Used</h1>
+        <article>
+            <div>
+                Encyclopedia of Alabama - <a>https://www.encyclopediaofalabama.org</a>
+                <ul>
+                    <li>Alabama's Statehood: <a href="https://encyclopediaofalabama.org/collection/alabama-day/">https://encyclopediaofalabama.org/collection/alabama-day/</a></li>
+                </ul>
+            </div>
+            <div>
+                State Symbol USA - <a href="https://statesymbolsusa.org">https://statesymbolsusa.org</a>
+                <ul>
+                    <li>Alabama's symbols & items: <a href=" https://statesymbolsusa.org/states/united-states/alabama"> https://statesymbolsusa.org/states/united-states/alabama</a></li>
+                </ul>
+            </div>
+            <div>
+                Britannica - <a href="https://www.britannica.com">https://www.britannica.com</a>
+                <ul>
+                    <li>Alabama's history: <a href="https://www.britannica.com/place/Alabama-state/History">https://www.britannica.com/place/Alabama-state/History</a></li>
+                    <li>Brief history of the Mississippi territory: <a href="https://www.britannica.com/place/Mississippi-state/From-World-War-I-through-the-civil-rights-movement">https://www.britannica.com/place/Mississippi-state/From-World-War-I-through-the-civil-rights-movement</a> </li>
+                    <li>Alabama's Capital: <a href="https://www.britannica.com/place/Montgomery-Alabama">https://www.britannica.com/place/Montgomery-Alabama</a></li>
+                </ul>
+            </div>
+            <div>
+                Alabama's state parks - <a href="https://www.alapark.com">https://www.alapark.com</a>
+                <ul>
+                    <li>Cathedral Caverns State Park: <a href="https://www.alapark.com/parks/cathedral-caverns-state-park">https://www.alapark.com/parks/cathedral-caverns-state-park</a></li>
+                    <li>Chewacla State Park: <a href="https://www.alapark.com/parks/chewacla-state-park">https://www.alapark.com/parks/chewacla-state-park</a> </li>
+                    <li>Cheaha State Park: <a href="https://www.alapark.com/parks/cheaha-state-park">https://www.alapark.com/parks/cheaha-state-park</a></li>
+                </ul>
+            </div>
+
+            <div>
+                Back-Up sources
+                <ul>
+                    <li>Alabama's official website: <a href="https://alabama.gov">https://alabama.gov</a></li>
+                </ul>
+            </div>
+        </article>
+    </main>
+
+    <div id="jquery-footer"></div>
+    <script src="/dependencies/jquery/jquery-3.7.1.js"></script>
+    <script defer>
+        $("#jquery-header").load("/dependencies/header/index.html");
+        $("#jquery-footer").load("/dependencies/footer/index.html");
+    </script>
+
+</body>
+
+</html>
diff --git a/sources/style.css b/sources/style.css
@@ -0,0 +1,28 @@
+main{
+    display: flex;
+    flex-direction: column;
+}
+
+main article{
+    display: flex;
+    flex-direction: column;
+    row-gap: 20px;
+}
+
+main article > *{
+    position: relative;
+    border: 2px inset grey;
+    box-shadow: 0px 0px 5px 2px grey;
+    margin-inline: 20px;
+    padding: 5px;
+}
+main h1{
+    position: relative;
+    border: 2px inset grey;
+    box-shadow: 0px 0px 5px 2px grey;
+    margin-inline: 10px;
+    padding-block:10px;
+    padding-inline:20px;
+    text-align: right;
+    font-family:Arial, Helvetica, sans-serif;
+}