Update 4.3

Added hover effects to sections. Improved the comments. Improved the layout.
JohnPatrickAncajas · Oct 15, 2023 · 3f6486f · 3f6486f
1 parent c024620
commit 3f6486f
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -92,8 +92,10 @@ <h2 class="display-6"><strong>My Education!</strong></h2>
                 <!-- This is the first school modal -->
 
                 <li class="list-inline-item" data-bs-toggle="modal" data-bs-target="#school1Modal" id="school1">
-                    <h3><strong>Senior Highschool</strong></h3>
-                    <p>San Diego Parochial School</p>
+                    <div class="schoolMain">
+                        <h3><strong>Senior Highschool</strong></h3>
+                        <p>San Diego Parochial School</p>
+                    </div>
                     <div class="modal fade" id="school1Modal" tabindex="-1" aria-labelledby="school1ModalLabel" aria-hidden="true">
                         <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
 
@@ -132,8 +134,10 @@ <h1 class="display-6"><strong>San Diego Parochial School</strong><br><br></h1>
                 <!-- This is the second school modal -->
 
                 <li class="list-inline-item" data-bs-toggle="modal" data-bs-target="#school2Modal" id="school2">
-                    <h3><strong>Highschool</strong></h3>
-                    <p>Obando National Highschool</p>
+                    <div class="schoolMain">
+                        <h3><strong>Highschool</strong></h3>
+                        <p>Obando National Highschool</p>
+                    </div>
                     <div class="modal fade" id="school2Modal" tabindex="-1" aria-labelledby="school2ModalLabel" aria-hidden="true">
                         <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
 
@@ -179,8 +183,10 @@ <h1 class="display-6"><strong>Obando National Highschool</strong><br><br></h1>
                 <!-- This is the third school modal -->
 
                 <li class="list-inline-item" data-bs-toggle="modal" data-bs-target="#school3Modal" id="school3">
-                    <h3><strong>Elementary</strong></h3>
-                    <p>Obando Central School</p>
+                    <div class="schoolMain">
+                        <h3><strong>Elementary</strong></h3>
+                        <p>Obando Central School</p>
+                    </div>
                     <div class="modal fade" id="school3Modal" tabindex="-1" aria-labelledby="school3ModalLabel" aria-hidden="true">
                         <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
 

diff --git a/script.js b/script.js
@@ -1,12 +1,12 @@
-// This code deals header margin-top, div height and scrolling adjustment
+// This code deals with header margin, div height and scrolling adjustment
 
 const { createApp, onMounted, ref } = Vue;
 
 createApp({
   setup() {
     const navHeight = ref(0);
 
-    // This part is about responsive header margin-top
+    // This part is about responsive top margin of header
 
     const updateHeaderMargin = () => {
       let nav = document.querySelector('nav');
@@ -19,7 +19,7 @@ createApp({
       }, 100);
     };
 
-    // This part is about responsive div height
+    // This part is about responsive and equal height of div
 
     const updateSchoolHeights = () => {
       let school1 = document.querySelector('#school1');
@@ -75,4 +75,4 @@ createApp({
       scrollToEducation: () => scrollToSection('#education'),
     };
   },
-}).mount('#app');
+}).mount('#app');
diff --git a/styles.css b/styles.css
@@ -182,8 +182,14 @@ section h3 {
     background-color: #3b68c5;
     background-image: linear-gradient(315deg, #3b68c5 0%, #2752a2 74%);    
     cursor: pointer;
+    transition: color 0.01;
 }
 
+#project1:active, #project2:active, #project3:active {
+    color: #f0f0f094;
+}
+
+
 #project1Details, #project2Details, #project3Details {
     text-align: justify;
 }
@@ -213,6 +219,16 @@ section h3 {
     cursor: pointer;
 }
 
+#school1:hover, #school2:hover, #school3:hover {
+    color: #f0f0f094;
+}
+
+.schoolMain {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 50%;
+}
+
 #school1ModalContent, #school2ModalContent, #school3ModalContent {
     color: #000000;
 }