v 1.9.23.23 colors

findthelorax · Sep 24, 2023 · f7761da · f7761da
1 parent ffa1262
commit f7761da
Show file tree

Hide file tree

Showing 4 changed files with 241 additions and 52 deletions.
diff --git a/about.html b/about.html
@@ -29,7 +29,6 @@
             </ul>
         </nav>
     </div>
-
     <section>
         <div class="about_grid">
             <div class="about_grid_items" id="about_pic"><img src="./rpg_char_2.png" alt=""></div>
@@ -50,20 +49,22 @@ <h4>36518</h4><br>
                 Mana: <br>
                 <br>
                 <h4> Skills: </h4><br>
-                Juggling <br>
-                Snowboarding <br>
-                Mountain Biking <br>
-                blah <br>
+                Fire Poi Juggling <br>
+                Thumb Wrestling <br>
+                Irish Goodbye <br>
+                Snack Supply <br>
             </div>
             <div class="about_grid_items stats">
                 100/100 <br>
                 100/100 <br>
                 <br>
-                <h4>Weaknesses: </h4><br>
-                Large Bugs <br>
-                Jellyfish <br>
-                Crustaceans <br>
-                Cake <br>
+                <div class="weaknesses">
+                    <h4>Weaknesses: </h4><br>
+                    Large Bugs <br>
+                    Jellyfish <br>
+                    Rye Bread <br>
+                    Beets <br>
+                </div>
             </div>
         </div>
     </section>
@@ -95,10 +96,10 @@ <h2 class="recog_header">A look into my life</h2>
     <section>
         <div class="about_me">
                 <h2>My Story:</h2>
-                <p class="about_me_p">It all began
+                <p class="about_me_p"> It all began
             </p>
         </div>
     </section>
-
+        <div class="background"></div>
 </body>
 </html>
diff --git a/index.html b/index.html
@@ -20,7 +20,8 @@
                         <a href="./index.html" class="navbar_link"> Home </a>
                     </li>
                     <li>
-                        <a href="#projects" class="navbar_link"> Projects </a>
+                        <!-- ! Unsure how to link to this section from a different page ie. when on the About page the Projects link does not work. I've read it involves javascript and that's currently beyond me. -->
+                        <a href="./index.html#projects" class="navbar_link"> Projects </a>
                     </li>
                     <li>
                         <a href="./about.html" class="navbar_link"> About </a>
@@ -153,9 +154,11 @@ <h4 class="social_header">Follow Me</h4>
     <!-- Jump to Top -->
     <a href="#" class="top"><i class="fa-solid fa-arrow-up"></i></a>
 
-    <!-- Copyright -->
+    <!-- Copyright 
+        ! I copied the javascript to get the current year.
+    -->
     <div class="copyright">
-        <footer> <p>&copy; <script>document.write(new Date().getFullYear())</script> Brett Ferrante</p></footer>
+        <footer> <p><span class="c_symbol"> &copy; </span><script>document.write(new Date().getFullYear())</script> Brett Ferrante</p></footer>
     </div>
 </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -39,9 +39,12 @@ a:any-link {
 }
 
 html {
-    font-family: "Fjalla One", Arial;
+    font-family: "SpecialElite", Arial;
     font-weight: 200;
-    background: rgb(165, 109, 167);
+    background: #131313;
+    color: white;
+
+    /* background: rgb(165, 109, 167); */
     /* background: linear-gradient(130deg, rgb(1, 86, 88), rgb(240, 0, 168)); */
     background-attachment: fixed;
     scroll-behavior: smooth;
@@ -72,7 +75,7 @@ section {
         0 0 3px #fff,
         0 0 10px #ff00aa,
         0 0 21px #ff00aa,
-        0 0 42px rgb(251, 255, 0);
+        0 0 33px rgb(251, 255, 0);
 }
 .navbar_link:hover {
     color: white;
@@ -86,21 +89,24 @@ section {
     gap: 2rem;
     padding: 0 30px 0 0;
     font-size: 1.5rem;
+    font-family: "SpecialElite";
+    font-weight: 700;
+    color: #ffffff;
 }
 #navbar_div {
     position: sticky;
     top: 0;
+    z-index: 666; 
 }
 /*! Not Working for some reason */
 #navbar {
-    background: rgb(27, 27, 27);
-    box-shadow: 0 3px 20px #ff00aa, 0 3.5px 50px #fff;
+    background: #131313;
+    box-shadow: 0 3px 20px #ff5ac8, 0 3.5px 50px #fff;
     display: flex;
     justify-content: space-between;
     padding: 0 30px 0 0;
     position: sticky;
 	top: 0;
-    font-family: "SpecialElite";
 }
 
 /* Homepage Design Styling */
@@ -122,12 +128,12 @@ section {
     text-transform: uppercase;
     font-family: "SpecialElite";
     letter-spacing: .25rem;
-    color: #131313;
+    color: #ffffff;
     text-shadow:
-        0 0 7px #fff,
-        0 0 10px #ff00aa,
+        0 0 10px #dafeff,
+        0 0 15px #ff00aa,
         0 0 21px #ff00aa,
-        0 0 42px rgb(251, 255, 0);
+        0 0 42px rgb(208, 252, 255);
 }
 .home_content h3:nth-of-type(2) {
     margin-bottom: 2rem;
@@ -299,15 +305,14 @@ section {
 
 /* ! ABOUT SECTION */
 .about_grid {
-    border: 2px solid black;
+    border: 2px solid pink;
     display: grid;
     grid-template-columns: repeat(3, auto);
     font-family: "PressStart";
     font-size: 13px;
     line-height: 1.2rem;
     height: 400px;
 }
-/* ! Picture is above navbar...unsure why */
 #about_pic {
     grid-column-start: 1;
     grid-column-end: 2;
@@ -319,7 +324,7 @@ section {
 .about_grid_items img:nth-child(1) {
     background: pink;
     border: 2px solid black;
-    box-shadow: 20px 20px 20px black;
+    box-shadow: 20px 20px 20px rgb(255, 255, 255);
 }
 .yo-yo {
     width: 20%;
@@ -361,9 +366,10 @@ section {
     border: solid 3px pink;
     border-radius: 13px;
     max-width: 666px;
-    margin: 0 auto 250px auto;
+    margin: 0 auto 200px auto;
     padding: 20px 0 0 0;
     position: relative;
+    font-family: "SpecialElite";
 }
 .underline {
     border-bottom: solid 2px pink;
@@ -407,15 +413,18 @@ form {
 }
 #contact_button:hover {
     background: pink;
-    color: teal;
+    color: black;
     box-shadow: 0 0.6em 0.5em -0.4em #ff00aa, 0 0.6em 0.55em -0.4em white;
     transform: translateY(-0.25em);
 }
+#contact_button:active {
+}
+
 input[type='text'], [type='email'], select, textarea {
     background: none;
     border: none;
     border-bottom: solid 2px;
-    color: black;
+    color: #85aec0;
     letter-spacing: 1px;
     box-sizing: border-box;
     transition: all 0.3s;
@@ -425,7 +434,7 @@ input[type='text']:focus, [type='email']:focus, textarea:focus {
     outline: none;
 }
 button, input, select, textarea {
-    color: #5A5A5A;
+    color: #85aec0;
     font: inherit;
     margin: 0;
 }
@@ -434,7 +443,7 @@ textarea {
 	height: 100px;
 	resize: none;
     width: 100%;
-    color: black;
+    color: #85aec0;
 }
 
 /* Footer Social Media Styling */
@@ -447,7 +456,6 @@ textarea {
     margin-left: 50px;
     text-transform: uppercase;
     letter-spacing: .25rem;
-    color: #131313;
     text-shadow:
         0 0 7px #fff,
         0 0 10px #ff00aa,
@@ -496,17 +504,6 @@ textarea {
     background-color: #3d5b99;
     box-shadow: inset 0 2px 4px whitesmoke;
 }
-.fa-square-twitter {
-    padding: 10px 10px;
-    transition: .5s;
-    background-color: #2b2a29;
-    border-radius: 10px;
-    box-shadow: inset 0 2px 4px whitesmoke;
-}
-.fa-square-twitter:hover {
-    background-color: #00aced;
-    box-shadow: inset 0 2px 4px whitesmoke;
-}
 .fa-youtube {
     padding: 10px 10px;
     transition: .5s;
@@ -568,21 +565,24 @@ textarea {
 /* Copyright */
 .copyright {
     width: 100%;
-    line-height: 40px;
+    line-height: 50px;
     position: relative;
     color: #fff;
     text-align: center;
     bottom: 0px;
 }
-
+.c_symbol {
+    font-size: 25px;
+}
 /* Light and Dark Mode */
-/* @media screen and (prefers-color-scheme: dark) {
+@media screen and (prefers-color-scheme: dark) {
     body {
     --bg-color: black;
     --text-color: white;
     }
-  } */
+}
 
+/* ! Can't figure out how to actually change the background */
 /* Media Queries */
 
 /*
@@ -607,5 +607,3 @@ Min-width: 1200px (large devices and wide screens)
         top: 15%;
     }
 }
-
-