diff --git a/about.html b/about.html
new file mode 100644
index 0000000..d8758e6
--- /dev/null
+++ b/about.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+
+
+<!--
+    Kuwait flag colors:
+    Green: #007b3a
+    Red: #cf0821
+    Black: black
+    White: white
+-->
+
+
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>Jhewit | Home</title>
+        <link rel="stylesheet" href="main.css" />
+    </head>
+    <body>
+        <div id="sider-outer">
+            <div id="sider">
+                <h2>Sidebar</h2>
+                <div id="sider-cats">
+                    <input type="checkbox" id="i_1" class="hidden" />
+                    <label for="i_1">Category 1</label>
+                    <div>
+                        <a href="#">This is a link</a><br>
+                        <a href="#">Another link</a>
+                    </div><br>
+                    <input type="checkbox" id="i_2" class="hidden" />
+                    <label for="i_2">Category 2</label>
+                    <div>
+                        <a href="#">Third link, new category</a><br>
+                        <a href="#">Links.</a>
+                    </div>
+                </div>
+                <img src="res/arrow-none.svg" onclick="toggle_sidebar()" />
+            </div>
+        </div>
+        <div id="outer">
+            <div id="header">
+                <div id="head-marker" class="scrolly"></div>
+                <div id="headin">
+                    <h1>Jhewit</h1>
+                    <div id="links-outer">
+                        <input id="hambugha" type="checkbox" style="display: none;">
+                        <label for="hambugha">Ham</label>
+                        <div id="links">
+                            <div class="link">
+                                <a href="index.html">HOME</a>
+                            </div>
+                            <div></div>
+                            <div class="link">
+                                <a href="about.html">ABOUT JHEWIT</a>
+                            </div>
+                            <div></div>
+                            <div class="dropdown">
+                                DROPDOWN MENU
+                            </div>
+                            <div>
+                                <div class="dropdown-inner">
+                                    <a>DROPDOWN MENU LINK</a>
+                                </div>
+                            </div>
+                            <!--<div>
+                                <div class="dropdown-inner">
+                                    <a href="#">
+                                        LINK
+                                    </a>
+                                    <a href="#">
+                                        LINK
+                                    </a>
+                                    <a href="#">
+                                        LINK
+                                    </a>
+                                </div>
+                            </div>-->
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="carousel-outer">
+                <img src="res/arrow-left.svg" />
+                <div class="carousel" id="carousel_1">
+                    <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);" class="selected">Category #1</div>
+                    <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #2</div>
+                    <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #3</div>
+                    <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #4</div>
+                    <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #5</div>
+                    <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #6</div>
+                    <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #7</div>
+                    <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #8</div>
+                    <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #9</div>
+                    <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #10</div>
+                    <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #11</div>
+                    <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #12</div>
+                    <div style="background-image: url(https://www.rebeccas.com/mm5/graphics/00000001/nv1364.jpg);">Category #13</div>
+                </div>
+                <img src="res/arrow-right.svg" />
+            </div>
+            <div id="content">
+                <p>
+    Some information about Jhewit
+</p>
+<p>
+    Some images and such
+</p>
+<p>
+    Contact info, perhaps?
+</p>
+            </div>
+            <div id="footer">
+                <p>
+                    This is a footer for content to go into.
+                </p>
+                <p>
+                    This is another part of the footer for more content.
+                </p>
+                <p>
+                    The footer is good for a quick About blurb, social icons, etc.
+                </p>
+            </div>
+            <div id="truebottom">
+                Website by <a href="https://swaous.asuscomm.com">Tyler Clarke</a>.
+            </div>
+        </div>
+        <script src="main.js"></script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 64c901f..510d805 100644
--- a/index.html
+++ b/index.html
@@ -47,31 +47,19 @@
                         <label for="hambugha">Ham</label>
                         <div id="links">
                             <div class="link">
-                                <a href="#">LINK 1</a>
+                                <a href="index.html">HOME</a>
+                            </div>
+                            <div></div>
+                            <div class="link">
+                                <a href="about.html">ABOUT JHEWIT</a>
                             </div>
                             <div></div>
                             <div class="dropdown">
-                                HI
+                                DROPDOWN MENU
                             </div>
                             <div>
                                 <div class="dropdown-inner">
-                                    <a>TEST</a>
-                                </div>
-                            </div>
-                            <div class="dropdown">
-                                HI
-                            </div>
-                            <div>
-                                <div class="dropdown-inner">
-                                    <a>TEST</a>
-                                </div>
-                            </div>
-                            <div class="dropdown">
-                                HI
-                            </div>
-                            <div>
-                                <div class="dropdown-inner">
-                                    <a>TEST</a>
+                                    <a>DROPDOWN MENU LINK</a>
                                 </div>
                             </div>
                             <!--<div>
@@ -137,6 +125,15 @@
         </p>
     </div>
 </div>
+<p>
+    Parallaxing image below. For reasons beyond my control it may look bad (or even not function at all) on iOS devices.
+    Parallaxes are primarily useful as dividers between paragraphs.
+</p>
+<div class="parallax" style="background-image: url('https://www.thoughtco.com/thmb/EXpjUAx2ZEgV64eKcsAsX7Ucl6w=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/GettyImages_482194715-56a1329e5f9b58b7d0bcf666.jpg');"></div>
+<p>
+    Generic paragraph element here
+</p>
+
             </div>
             <div id="footer">
                 <p>
@@ -146,7 +143,7 @@
                     This is another part of the footer for more content.
                 </p>
                 <p>
-                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt omnis dolor minus rerum eaque dicta tempora debitis. Aut, ut illo delectus qui debitis, laborum sit in repellat quo sint fugit.
+                    The footer is good for a quick About blurb, social icons, etc.
                 </p>
             </div>
             <div id="truebottom">
diff --git a/main.css b/main.css
index df24e2a..a9d7056 100644
--- a/main.css
+++ b/main.css
@@ -35,7 +35,7 @@ h1 {
     text-align: center;
     padding-top: 6%;
     padding-bottom: 10%;
-    min-height: 80vh;
+    min-height: 90vh;
     box-sizing: border-box;
     background-image: url(https://www.state.gov/wp-content/uploads/2022/02/Kuwait-2323x1406.png);
     background-attachment: fixed;
@@ -89,7 +89,7 @@ body {
     padding: 10px;
 }
 
-#content {
+#content > * {
     margin: 10%;
 }
 
@@ -123,6 +123,7 @@ h1 {
     /*color: red;*/
     margin-left: var(--sidebar-size);
     width: calc(100vw - var(--sidebar-size));
+    transition: margin-left 1s, width 1s;
     /*width: 100vw;*/
     background-color: white;
 }
@@ -349,6 +350,8 @@ h1 {
     grid-template-columns: 1fr 1fr 1fr;
     justify-content: space-evenly;
     background-color: black;
+    border-bottom: 0.3px solid grey;
+    margin-top: 10%;
 }
 
 #footer > p {
@@ -369,7 +372,7 @@ h1 {
     max-width: 100%;
 }
 
-@media (max-width: 900px) {
+@media (max-width: 1000px) {
     #footer {
         grid-template-columns: 1fr;
     }
@@ -411,6 +414,7 @@ h1 {
     #links-outer {
         display: flex;
         flex-direction: column;
+        font-size: 3em;
     }
 
     #links > div:nth-child(2n) {
@@ -425,4 +429,81 @@ h1 {
     #hambugha:checked + label + #links {
         visibility: visible;
     }
+
+    p {
+        margin-left: 20px !important;
+        margin-right: 20px !important;
+        font-size: 2em;
+    }
+
+    #head-marker {
+        margin-top: 30vh;
+    }
+}
+
+#content > p {
+    margin: 30px;
+    margin-left: 20vw;
+    margin-right: 20vw;
+    position: relative;
+    overflow: hidden;
+}
+
+#content > p > .overlay {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: -1000000;
+    opacity: 50%;
+}
+/*
+@keyframes shmoosh {
+    0% {
+        scale: 1;
+        translate: 10px -30px;
+    }
+
+    38% {
+        scale: 0.8 1;
+        translate: 80% 30%;
+        rotate: 160deg;
+    }
+
+    40% {
+        scale: 0.8 1;
+        translate: 80% 30%;
+        rotate: 160deg;
+    }
+
+    78% {
+        scale: 1.3;
+        translate: 0% 50%;
+        rotate: -20deg;
+    }
+
+    80% {
+        scale: 1.3;
+        translate: 0% 50%;
+        rotate: -20deg;
+    }
+
+    100% {
+        scale: 1;
+        translate: 10px -30px;
+    }
+}
+
+.shmoosh {
+    transform-origin: center;
+    animation: shmoosh 10s linear infinite;
+}*/
+
+.parallax {
+    height: clamp(100px, 40vh, 600px);
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
 }
\ No newline at end of file
diff --git a/main.js b/main.js
index 5dbe0d3..755bdb8 100644
--- a/main.js
+++ b/main.js
@@ -8,6 +8,9 @@ function clamp(min, val, max) {
     return val;
 }
 
+var ua = window.navigator.userAgent;
+var iOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i); // THANKS, STACKOVERFLOW
+
 function getNearestChildIndexTo(element, position) { 
     var nearest = undefined;
     var nearestValue = Infinity;
@@ -70,6 +73,11 @@ const scrollchecks = () => {
             }
         }
     });
+    if (iOS) {
+        Array.from(document.getElementsByClassName("parallax")).forEach((item, i) => {
+            item.style.backgroundPosition = "50% calc(" + (-item.getBoundingClientRect().top) + "px)";
+        });
+    }
 };
 
 
diff --git a/src/_about.html b/src/_about.html
new file mode 100644
index 0000000..3660346
--- /dev/null
+++ b/src/_about.html
@@ -0,0 +1,9 @@
+<p>
+    Some information about Jhewit
+</p>
+<p>
+    Some images and such
+</p>
+<p>
+    Contact info, perhaps?
+</p>
\ No newline at end of file
diff --git a/src/_index.html b/src/_index.html
index 7152900..12f4ae1 100644
--- a/src/_index.html
+++ b/src/_index.html
@@ -23,4 +23,12 @@
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum earum quia laudantium ipsam eius, qui sint. Repellat consectetur asperiores ex ea, earum deserunt in distinctio corrupti, soluta voluptates, tenetur dolore. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores animi necessitatibus, quia expedita architecto molestiae autem perferendis nulla minima quisquam consequatur laborum saepe repellat corporis, temporibus quibusdam omnis id nesciunt.
         </p>
     </div>
-</div>
\ No newline at end of file
+</div>
+<p>
+    Parallaxing image below. For reasons beyond my control it may look bad (or even not function at all) on iOS devices.
+    Parallaxes are primarily useful as dividers between paragraphs.
+</p>
+<div class="parallax" style="background-image: url('https://www.thoughtco.com/thmb/EXpjUAx2ZEgV64eKcsAsX7Ucl6w=/1500x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/GettyImages_482194715-56a1329e5f9b58b7d0bcf666.jpg');"></div>
+<p>
+    Generic paragraph element here
+</p>
diff --git a/src/template.html b/src/template.html
index 4d59f3a..068c911 100644
--- a/src/template.html
+++ b/src/template.html
@@ -47,31 +47,19 @@
                         <label for="hambugha">Ham</label>
                         <div id="links">
                             <div class="link">
-                                <a href="#">LINK 1</a>
+                                <a href="index.html">HOME</a>
+                            </div>
+                            <div></div>
+                            <div class="link">
+                                <a href="about.html">ABOUT JHEWIT</a>
                             </div>
                             <div></div>
                             <div class="dropdown">
-                                HI
+                                DROPDOWN MENU
                             </div>
                             <div>
                                 <div class="dropdown-inner">
-                                    <a>TEST</a>
-                                </div>
-                            </div>
-                            <div class="dropdown">
-                                HI
-                            </div>
-                            <div>
-                                <div class="dropdown-inner">
-                                    <a>TEST</a>
-                                </div>
-                            </div>
-                            <div class="dropdown">
-                                HI
-                            </div>
-                            <div>
-                                <div class="dropdown-inner">
-                                    <a>TEST</a>
+                                    <a>DROPDOWN MENU LINK</a>
                                 </div>
                             </div>
                             <!--<div>
@@ -121,7 +109,7 @@
                     This is another part of the footer for more content.
                 </p>
                 <p>
-                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt omnis dolor minus rerum eaque dicta tempora debitis. Aut, ut illo delectus qui debitis, laborum sit in repellat quo sint fugit.
+                    The footer is good for a quick About blurb, social icons, etc.
                 </p>
             </div>
             <div id="truebottom">
