added recent activities containing 3 acts

lawrenceee04 · Jul 4, 2024 · e1cbd1b · e1cbd1b
1 parent 733ae50
commit e1cbd1b
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -4,16 +4,51 @@
         <meta charset="UTF-8">
         <link rel="stylesheet" type="text/css" href="style.css">
         <link rel="icon" type="image/png" href="favicon.png">
+        <script src="script.js"></script>
     </head>
     <body>
         <nav>
             <ul class="navbar">
-                <li><a href="https://youtu.be/dQw4w9WgXcQ?si=BC00jSwc5LqieFS4" target="_blank">Contacts</a></li>
+                <li>Socials</li>
+                <li>Hobbies</li>
             </ul>
         </nav>
-        <div>
-            <h1>Wait! Wala pa laman...</h1>
-            <button onclick="window.open('https://youtu.be/dQw4w9WgXcQ?si=BC00jSwc5LqieFS4', '_blank')">DON'T CLICK...</button>
-        </div>
+
+        <header class="greeting_div">
+            <h1 class ="greeting">Hi!</h1>
+        </header>
+
+        <section class="recent_act">
+            <h2>Recent Activities</h2>
+            <div class="flex_container">
+                <div class="recent_act_item">
+                    <div class="recent_act_item_pic_holder">
+                        <img class="recent_act_item_pic" src="media/picture/pic_2.jpg">
+                    </div>
+                    <div class="recent_act_item_title">PRESS 2024</div>
+                    <div class="recent_act_item_desc">
+                        <p>The <a onclick="FRS()">FEATI Railway Society</a> participated in the 1st Philippine Railway Engineering Student Summit <i>(PRESS 2024)</i>.</p>
+                    </div>
+                </div>
+                <div class="recent_act_item">
+                    <div class="recent_act_item_pic_holder">
+                        <img class="recent_act_item_pic" src="media/picture/pic_1.jpg">
+                    </div>
+                    <div class="recent_act_item_title">LRT Line 2</div>
+                    <div class="recent_act_item_desc">
+                        <p><a onclick="FRS()">FEATI Railway Society</a> students were given a rare opportunity to see different parts of the LRT Line 2 Depot such as the Light and Heavy Maintenance, and Operation Control Center.<p>
+                    </div>
+                </div>
+                <div class="recent_act_item">
+                    <div class="recent_act_item_pic_holder">
+                        <img class="recent_act_item_pic" src="media/picture/pic_0.jpg">
+                    </div>
+                    <div class="recent_act_item_title">DOST-MRIDC</div>
+                    <div class="recent_act_item_desc">
+                        <p><a onclick="FRS()">FEATI Railway Society</a> students had the opportunity to visit the Department of Science and Technology <i>(DOST)</i> Metals Industry Research and Development Center <i>(MRIDC)</i>.<p>
+                    </div>
+                </div>
+            </div>
+        </section>
     </body>
 </html>
diff --git a/media/picture/pic_0.jpg b/media/picture/pic_0.jpg
diff --git a/media/picture/pic_1.jpg b/media/picture/pic_1.jpg
diff --git a/media/picture/pic_2.jpg b/media/picture/pic_2.jpg
diff --git a/script.js b/script.js
@@ -0,0 +1,7 @@
+function neverGonnaGiveYouUp() {
+  window.open('https://youtu.be/dQw4w9WgXcQ?si=BC00jSwc5LqieFS4', '_blank');
+}
+
+function FRS() {
+    window.open('https://www.facebook.com/profile.php?id=61551070898282', '_blank');
+}
diff --git a/style.css b/style.css
@@ -2,14 +2,64 @@ body {
     color: white;
     font-family: Cabin;
     background-color: #006cffff;
+    max-height: 1000px;
 }
-div {
+.greeting_div {
     padding: 10px;
-    margin-top: 50%;
-    margin-bottom: 50%;
     text-align: center;
 }
 
+.recent_act {
+    margin: 0px 0px 0px 20px;
+    font-weight: bold;
+}
+
+.flex_container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.recent_act_item {
+    margin: 10px;
+    padding: 20px;
+    min-height: 250px;
+    max-height: auto;
+    min-width: 350px;
+    max-width: 600px;
+    background-color: #1136b1bc;
+    border-radius: 5px;
+    width: 30%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+
+.recent_act_item_pic_holder {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.recent_act_item_pic {
+    min-width: 350px;
+    max-width: 400px;
+    min-height: 100px;
+    max-height: 240px;
+    border-radius: 5px;
+}
+
+.recent_act_item_title {
+    font-size: 20px;
+    font-weight: bold;
+}
+
+.recent_act_item_desc{
+    font-size: 14px;
+}
+
 button {
     font-weight: bold;
     background-color: #ffffffe8;
@@ -24,7 +74,19 @@ button {
 
 h1 {
     text-align: center;
+    font-size: 50px;
+}
+
+a {
+    color: rgb(77, 255, 249);
+    text-decoration: underline;
+}
+
+a:hover {
+    color: #006cffff;
+    text-decoration: underline;
 }
+
 .navbar {
     display: flex;
     list-style-type: none;
@@ -34,11 +96,11 @@ h1 {
     background-color: #006cffff;
 }
 
-.navbar li {
-    float: left;
+.navbar:hover {
+    background-color: rgb(0, 123, 255);
 }
 
-.navbar li a {
+.navbar li {
     display: block;
     color: white;
     text-align: center;
@@ -47,6 +109,6 @@ h1 {
     border-radius: 5px;
 }
 
-.navbar li a:hover {
+.navbar li:hover {
     background-color: #2a324de8;
 }