1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>School Announcement</title> 6 7 <!-- Bootstrap --> 8 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rele="stylesheet"> 9 10 <!-- Google Font --> 11 <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700;800&display=swap" rel="stylesheet"> 12 13 <link rel="stylesheet" href="debuging.css"> 14 </head> 15 <body> 16 17 <!-- NAVBAR --> 18 <nav class="navbar navbar-expand-lg custom-navbar"> 19 <div class="container nav-inner"> 20 <a class="navbar-brand fw-bold" href="#">Next Announcement</a> 21 <div class="ms-auto d-flex gap-4"> 22 <a href="#" class="nav-link">Newest</a> 23 <a href="#" class="nav-link">Timeline</a> 24 <a href="#" class="nav-link">Contact</a> 25 </div> 26 </div> 27 </nav> 28 29 <div class="container-fluid main-wrapper"> 30 31 <!-- ================= CURRENT EVENT ================= --> 32 33 <div class="section-title"> 34 <h2>Current Event</h2> 35 <div class="section-divider"></div> 36 </div> 37 38 <div class="taps d-flex"> 39 <div class="tab active" data-date="1">12 Feb</div> 40 <div class="tab" data-date="2">13 Feb</div> 41 <div class="tab" data-date="3">14 Feb</div> 42 <div class="tab" data-date="4">15 Feb</div> 43 <div class="tab" data-date="5">16 Feb</div> 44 </div> 45 46 <div class="cards"> 47 <div class="card active" id="card1"> 48 <div class="overlay-content"> 49 <h1>School Hackathon</h1> 50 <p>An intensive activity where students work in teams to create digital solutions (websites/applications) within 3 days.</p> 51 <ul> 52 <li>Time: 08:00 - 15:00 WIB</li> 53 <li>Location: School Hall</li> 54 </ul> 55 <button>More Information</button> 56 </div> 57 </div> 58 59 <div class="card" id="card-2"> 60 <div class="overlay-content"> 61 <h1>Game Development Day</h1> 62 <p>An event where students create simple games using tools such as Scratch, Construct, Unity, or Python Arcade in a mini hackathon format.</p> 63 <ul> 64 <li>Time: 13:00 - 15:00 WIB</li> 65 <li>Location: Computer Lab</li> 66 </ul> 67 <button>More Information</button> 68 </div> 69 </div> 70 71 <div class="card" id="card-3"> 72 <div class="overlay-content"> 73 <h1>School Esports Tournament</h1> 74 <p>A virtual sports gaming tournament such as FIFA or NBA2K for students who enjoy the combination of sports and gaming.</p> 75 <ul> 76 <li>Time: 07:00 - 15:00 WIB</li> 77 <li>Location: Auditorium</li> 78 </ul> 79 <button>More Information</button> 80 </div> 81 </div> 82 83 <div class="card" id="card-4"> 84 <div class="overlay-content"> 85 <h1>UI/UX Workshop</h1> 86 <p>An introductory workshop on user interface and user experience design using Figma or other design tools.</p> 87 <ul> 88 <li>Time: 13:00 - 15:00 WIB</li> 89 <li>Location: Auditorium</li> 90 </ul> 91 <button>More Information</button> 92 </div> 93 </div> 94 95 <div class="card" id="card-5"> 96 <div class="overlay-content"> 97 <h1>Coding Competition</h1> 98 <p>An internal school programming competition to test students’ logic, algorithmic thinking, and problem-solving skills using languages such as Python, Java, or JavaScript.</p> 99 <ul> 100 <li>Time: 08:00 - 15:00 WIB</li> 101 <li>Location: Universitas Indonesia</li> 102 </ul> 103 <button>More Information</button> 104 </div> 105 106 </div> 107 108 <!-- ================= PREVIOUS EVENT ================= --> 109 110 <div class="previous-section"> 111 112 <div class="section-title mt-5"> 113 <h2>Timeline</h2> 114 <div class="section-divider"></div> 115 </div> 116 117 <!-- ROW 1 --> 118 <div class="timeline-wrapper"> 119 <div class="timeline-dates"> 120 <div class="date-item">10 Feb</div> 121 <div class="date-item">8 Feb</div> 122 <div class="date-item">2 Feb</div> 123 <div class="date-item">1 Feb</div> 124 <div class="date-item">29 Jan</div> 125 </div> 126 127 <div class="timeline-line-wrapper"> 128 <svg class="timeline-svg" viewBox="0 0 100 20" preserveAspectRatio="none"> 129 <line x1="0" y1="10" x2="100" y2="10" stroke="#ff9ecb" stroke-width="3"/> 130 </svg> 131 <div class="timeline-dots"> 132 <div class="dot"></div> 133 <div class="dot"></div> 134 <div class="dot"></div> 135 <div class="dot"></div> 136 <div class="dot"></div> 137 </div> 138 </div> 139 140 <div class="timeline-row"> 141 <div class="previous-card"> 142 <img src="images/event1.jpeg"> 143 <h5>Fun Run</h5> 144 <p>A short-distance running event held at the school yard to promote a healthy lifestyle and student fitness.</p> 145 <br> 146 <button>More</button> 147 </div> 148 <div class="previous-card"> 149 <img src="images/event2.jpg"> 150 <h5>Drama Theater Performance</h5> 151 <p>A theater performance by students, featuring modern or traditional stories to enhance artistic skills and public speaking abilities.</p> 152 <button>More</button> 153 </div> 154 <div class="previous-card"> 155 <img src="images/event3.jpg"> 156 <h5>School Band and Music Festival</h5> 157 <p>A school music festival featuring student bands, choirs, or traditional musical instrument performances.</p> 158 <button>More</button> 159 </div> 160 <div class="previous-card"> 161 <img src="images/event4.jpg"> 162 <h5>Cyber Security Workshop</h5> 163 <p>An educational seminar about data security, digital ethics, and how to protect systems from cyber attacks.</p> 164 <button>More</button> 165 </div> 166 <div class="previous-card"> 167 <img src="images/event5.jpg"> 168 <h5>Mini Tech Exhibition</h5> 169 <p>A small exhibition in the classroom or school hall showcasing semester projects such as CRUD systems, games, or simple IoT applications.</p> 170 <button>More</button> 171 </div> 172 </div> 173 </div> 174 175 <!-- ROW 2 --> 176 <div class="timeline-wrapper"> 177 <div class="timeline-dates"> 178 <div class="date-item">25 Jan</div> 179 <div class="date-item">21 Jan</div> 180 <div class="date-item">16 Jan</div> 181 <div class="date-item">11 Jan</div> 182 <div class="date-item">3 Jan</div> 183 </div> 184 185 <div class="timeline-row"> 186 <div class="previous-card"> 187 <img src="images/event6.jpeg"> 188 <h5>Mobile App Development Workshop</h5> 189 <p>A workshop on creating simple Android applications using tools such as Flutter or MIT App Inventor.</p> 190 <button>More</button> 191 </div> 192 <div class="previous-card"> 193 <img src="images/event7.jpg"> 194 <h5>Tech Talk with Alumni</h5> 195 <p>A sharing session with alumni who are working or studying in the IT field to provide motivation and industry insights.</p> 196 <button>More</button> 197 </div> 198 <div class="previous-card"> 199 <img src="images/event8.jpg"> 200 <h5>Futsal Tournament</h5> 201 <p>A mini futsal league between classes using a round-robin system, focusing on teamwork and sportsmanship.</p> 202 <br> 203 <button>More</button> 204 </div> 205 <div class="previous-card"> 206 <img src="images/event9.jpg"> 207 <h5>Culture Day</h5> 208 <p>A local and international cultural exhibition showcasing dances, music, traditional costumes, and foods from various regions.</p> 209 <button>More</button> 210 </div> 211 <div class="previous-card"> 212 <img src="images/event10.jpg"> 213 <h5>New Academic Year Celebration</h5> 214 <p>A celebration event for the new academic year featuring various activities and educational programs for all students.</p> 215 <button>More</button> 216 </div> 217 </div> 218 </div> 219 220 </div> 221 222 </div> 223 224 <script src="script.js"></script> 225 </body> 226 </html>
1 body { 2 margin: 0; 3 font-family: 'Poppins', sans-serif; 4 background: url('images/background.jpg') no-repeat center center fixed; 5 background-size: cover; 6 } 7 8 9 /* NAVBAR */ 10 11 .custon-navbar { 12 background: rgba(255,255,255,0.95); 13 padding: 20px 0; 14 box-shadow: 0 5px 20px rgba(0,0,0,0.15); 15 } 16 17 .nav-inner { 18 padding-right: 10px; 19 } 20 21 .navbar-brand { 22 font-size: 22px; 23 color: #c44575 !important; 24 } 25 26 .nav-link { 27 text-decoration: none; 28 color: #333; 29 font-weight: 500; 30 transition: 0.3s; 31 } 32 33 .nav-link:hover { 34 color: #c44575; 35 } 36 37 /* MAIN WRAPPER */ 38 39 .main-wrapper { 40 padding: 60px 8%; 41 } 42 43 /* Section Title */ 44 45 .section-title h2 { 46 font-weight: 700; 47 margin-bottom: 15px; 48 color: #222; 49 } 50 51 .section-divider { 52 height: 3px; 53 width: 100%; 54 bakground: linear-gradient(90deg, #c44575, #d66ba0); 55 margin: 10px 0 30px 0; 56 border-radius: 10px; 57 } 58 59 /* Tabs */ 60 61 .tabs { 62 margin-bottom: 0; 63 position: relative; 64 z-index: 10; 65 } 66 67 .tab { 68 padding: 14px 35px; 69 background: #e8c4d5; 70 cursor: pointer; 71 font-weight: 600; 72 color: #333; 73 transition: 0.3s; 74 border-radius: 15px 15px 0 0; 75 } 76 77 .tab:not(:last-child) { 78 border-right: 2px solid #d8a9bf; 79 } 80 81 .tab.active { 82 background: rgba(255,255,255,0.95); 83 color: #c44575; 84 } 85 86 /* Cards */ 87 88 .cards { 89 position: relative; 90 height: 450px; 91 } 92 93 .card ( 94 position: absolute; 95 width: 100%; 96 height: 100%; 97 border-radius: 0 25px 25px 25px; 98 padding: 50px; 99 box-shadow: 0 20px 50px rgba(0,0,0,0.25); 100 opacity: 0; 101 transform: translateY(20px); 102 transition: 0.4s ease; 103 z-index: 0; 104 background-size: cover; 105 background-position: center; 106 color: #222; 107 ) 108 109 #card-1 { background-image: url('images/main1.jpg'); } 110 #card-2 { background-image: url('images/main2.jpg'); } 111 #card-3 { background-image: url('images/main3.jpg'); } 112 #card-4 { background-image: url('images/main4.jpg'); } 113 #card-5 { background-image: url('images/main5.jpeg'); } 114 115 .card.active { 116 opacity: 1; 117 transform: translateY(0); 118 z-index: 5; 119 } 120 121 /* Overlay */ 122 123 .overlay-content { 124 background: rgba(255,255,255,0.85); 125 padding: 40px; 126 border-radius: 20px; 127 width: 70%; 128 } 129 130 .overlay-content h1 { 131 font-size: 60px; 132 font-weight: 800; 133 margin-bottom: 20px; 134 color: #111; 135 } 136 137 .overlay-content button { 138 margin-top: 25px; 139 padding: 12px 35px; 140 background: linear-gradient(45deg, #c44575, #d66ba0); 141 border: none; 142 color: white; 143 border-radius: 30px; 144 cursor: pointer; 145 font-weight: 600; 146 transition: 0.3s; 147 } 148 149 .overlay-content button:hover { 150 transform: scale(1.05); 151 } 152 153 /* PREVIOUS EVENT */ 154 155 .previous-row { 156 display: flex; 157 justify-content: space-between; 158 margin-top: 40px; 159 } 160 161 .previous-card { 162 width: 18%; 163 background: rgba(255,255,255,0.95); 164 border-radius: 20px; 165 box-shadow: 0 15px 35px rgba(0,0,0,0.2); 166 padding: 15px; 167 } 168 169 .previous-card img { 170 width: 100%; 171 height: 120px; 172 object-fit: cover; 173 border-radius: 15px; 174 margin-bottom: 10px; 175 } 176 177 .previous-card h5 { 178 font-weight: 700; 179 margin-bottom: 8px; 180 color: #222; 181 } 182 183 .previous-card p { 184 font-size: 13px; 185 color: #444; 186 } 187 188 .previous-card button { 189 margin-top: 10px; 190 padding: 6px 15px; 191 background: linear-gradient(45deg, #c44575, #d66ba0); 192 border: none; 193 color: white; 194 border-radius: 20px; 195 font-size: 13px; 196 cursor: pointer; 197 } 198 199 /* TIMELINE STYLES */ 200 201 .timeline-wrapper { 202 margin-top: 40px; 203 display: flex; 204 flex-direction: column; 205 gap: 0; 206 } 207 208 .timeline-dates { 209 display: flex; 210 justify-content: space-between; 211 padding-bottom: 5px; 212 position: relative; 213 z-index: 1; 214 } 215 216 .date-item { 217 width: 18%; 218 text-align: center; 219 font-weight: 800; 220 color: #c44575; 221 font-size: 32px; 222 padding: 5px 0; 223 } 224 225 .timeline-line-wrapper { 226 position: relative; 227 height: 40px; 228 margin-bottom: 5px; 229 } 230 231 .timeline-svg { 232 width: 100%; 233 height: 100%; 234 } 235 236 .timeline-dots { 237 position: absolute; 238 top: 50%; 239 left: 0; 240 right: 0; 241 transform: translateY(-50%); 242 display: flex; 243 justify-content: space-between; 244 padding: 0 9%; 245 z-index: 2; 246 } 247 248 .dot { 249 width: 12px; 250 height: 12px; 251 background: white; 252 border: 3px solid #c44575; 253 border-radius: 50%; 254 box-shadow: 0 0 10px rgba(196, 69, 117, 0.5); 255 } 256 257 .timeline-row { 258 display: flex; 259 justify-content: space-between; 260 position: relative; 261 }
1 document.addEventListener("DOMContenLoaded", function() { 2 3 const tabs = document.querySelectorAll(".tab"); 4 const cards = document.querySelectorAll(".card"); 5 6 tabs.forEach(tab => { 7 tab.addEventListener("click", () => { 8 9 tabs.forEach(t => t.classList.remove("active")); 10 cards.forEach(c => c.classList.remove("active")); 11 12 tab.classList.add("active"); 13 14 const date = tab.getAttribute("data-date"); 15 const targetCard = document.getElementById("card_" + date); 16 17 if (targetCard) { 18 targetCard.classList.add("active"); 19 } 20 21 }); 22 }); 23 24 });