hi

index.html

@@ -19,7 +19,7 @@
       <div class="project" id="gold-rush">
          <div class="content">
             <br>
-            <img id="gold-rush-icon" src="Images/gold-rush-icon.png" alt="">
+            <img class="display-image-light" id="gold-rush-icon" src="Images/gold-rush-icon.png" alt="">
             <h2>Gold Rush</h2>
             <h4>A simple incremental game made with JavaScript</h4>
             <p>You can play it <a href="https://squirrel-314.github.io">here</a>, or download the app <a href="download-gold-rush.html">here</a>. You can find the GitHub repository <a href="https://github.com/Squirrel-314/squirrel-314.github.io">here</a>.</p>
@@ -27,24 +27,30 @@
       </div>
       <div class="project" id="incremental">
          <br>
+         <img class="display-image-dark" src="Images/cheese.png" alt="">
          <h2>Incremental</h2>
          <h4>A simple incremental game template made with JavaScript, set up as a four lesson class. Please feel free to copy the code, but I'd rather you changed the theme.</h4>
          <p>You can find the GitHub repository <a href="https://github.com/Squirrel-314/incremental">here</a>.</p>
       </div>
       <div class="project" id="style">
          <br>
+         <img class="display-image-light" src="Images/style.png" alt="">
          <h2>Style</h2>
          <h4>Here we do things in <strong>style!</strong> Check out the nice CSS effects and apply them to your own websites!</h4>
          <p>You can find the GitHub repository <a href="https://github.com/Squirrel-314/style">here</a>.</p>
       </div>
       <div class="project" id="hillside">
          <br>
+         <img class="display-image-dark" src="Images/lamp-post.png" alt="">
          <h2>Hillside Township</h2>
          <h4>Ours homes all have a place in our heart-and sometimes on the web! I'D LIKE TO MAKE IT ABSOLUTLY CLEAR THIS IS NOT THE NEW JERSEY HILLSIDE TOWNSHIP THIS ONE IS BETTER AND HAS A BETTER FAVICON. Now that I've made that clear, my <a href="https://github.com/PusheenMaster5">friend</a> and I made a website for our town.</h4>
          <p>You can find the GitHub repository <a href="https://github.com/hillside-township/hillside-township.github.io">here</a>.</p>
       </div>
       <div class="project" id="schoolarly-bay">
          <br>
+         <img class="display-image-light" src="Images/library-1.png" alt="">
+         <img class="display-image-light" src="Images/library-2.png" alt="">
+         <img class="display-image-light" src="Images/library-3.png" alt="">
          <h2>The Schoolarly Bay</h2>
          <h4>Scientific research papers! Publish research papers, read research papers, get paper cuts on research papers! Research papers for all!</h4>
          <p>You can find the GitHub repository <a href="https://github.com/Squirrel-314/style">here</a>.</p>

styles.css

@@ -7,7 +7,6 @@ body {
    background-color: whitesmoke;
    padding: 0;
    margin: 0;
-   overflow-x: hidden;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
 }
@@ -127,18 +126,74 @@ Project Contents
 Other
 ==================================================*/
 
-#gold-rush-icon {
+@keyframes heavenly-glow {
-   width: 150px;
+   0% {
-   position: absolute;
+      box-shadow: none;
-   bottom: 30px;
-   right: 60px;
-   border-radius: 50%;
-   transition: all .8s;
    }
-
+   50% {
-#gold-rush-icon:hover {
       box-shadow: 5px 5px 5px whitesmoke,
                   5px -5px 5px whitesmoke,
                   -5px 5px 5px whitesmoke,
                   -5px -5px 5px whitesmoke;
    }
+   100% {
+      box-shadow: none;
+   }
+}
+
+@keyframes darkness-grows {
+   0% {
+      box-shadow: none;
+   }
+   50% {
+      box-shadow: 5px 5px 5px #262626,
+                  5px -5px 5px #262626,
+                  -5px 5px 5px #262626,
+                  -5px -5px 5px #262626;
+   }
+   100% {
+      box-shadow: none;
+   }
+}
+
+/*==================================================
+Display Images
+==================================================*/
+
+.display-image-dark {
+   width: 150px;
+   position: absolute;
+   bottom: 30px;
+   right: 60px;
+   border-radius: 50%;
+   animation: darkness-grows 3s infinite;
+}
+
+.display-image-light {
+   width: 150px;
+   height: 150px;
+   position: absolute;
+   bottom: 30px;
+   right: 60px;
+   border-radius: 50%;
+   animation: heavenly-glow 3s infinite;
+}
+
+#schoolarly-bay img:nth-child(2) {
+   bottom: 20%;
+   left: 20%;
+   width: 175px;
+   height: 175px;
+}
+
+#schoolarly-bay img:nth-child(3) {
+   bottom: 20%;
+   left: 20%;
+}
+
+#schoolarly-bay img:nth-child(4) {
+   bottom: 20%;
+   left: 20%;
+   width: 125px;
+   height: 125px;
+}