JavaScript
challenge6-webdev-js
1 <!DOCTYPE html> 2 <html lang="id"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1" /> 6 <title>HealthTech Indonesia</title> 7 8 <!-- Bootstrap --> 9 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> 10 11 <!-- Custom CSS --> 12 <link rel="stylesheet" href="check.css" /> 13 <link rel="stylesheet" href="responsive.css" /> 14 </head> 15 <body> 16 17 <!-- NAVBAR --> 18 <nav class="navbar navbar-dark bg-dark fixed-top"> 19 <div class="container-fluid px-4"> 20 <span class="navbar-brand fw-bold">HealthNext</span> 21 <div class="navbar-nav ms-auto"> 22 <a class="nav-link" href="#berita">News</a> 23 <a class="nav-link" href="#issue">Issues</a> 24 <a class="nav-link" href="#contact">Contact</a> 25 </div> 26 </div> 27 </nav> 28 29 <!-- CAROUSEL --> 30 <div id="healthCarosel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="5000"> 31 <div class="carousel-inner"> 32 33 <div class="carousel-item active bg-slide bg-1"> 34 <div class="carousel-overlay"></div> 35 <div class="carousel-content"> 36 <h1>Indonesian Students' Health</h1> 37 <p>Student health is an important foundation in building a productive and competitive Indonesian generation. Many students still face health issues such as fatigue, lack of physical activity, and academic stress. Early awareness of a healthy lifestyle can help students grow with better physical and mental well-being.</p> 38 </div> 39 </div> 40 41 <div class="carousel-item bg-slide bg-2"> 42 <div class="carousel-overlay"></div> 43 <div class="carousel-content"> 44 <h1>Meeting the Nutritional Needs of Indonesian Children</h1> 45 <p>Balanced nutrition plays a vital role in the growth and development of children and teenagers. A lack or excess of nutritional intake can affect learning concentration, immunity, and long-term health. Therefore, it is important for students to understand healthy eating patterns that match their body's needs.</p> 46 </div> 47 </div> 48 49 <div class="carousel-item bg-slide bg-3"> 50 <div class="carousel-overlay"></div> 51 <div class="carousel-content"> 52 <h1>The Importance of Reproductive Health for Teenagers</h1> 53 <p>Reproductive health is an important part of adolescent health that is often not fully understood. Proper understanding helps teenagers maintain personal hygiene, body health, and make responsible decisions. Early education can prevent various health problems in the future.</p> 54 </div> 55 </div> 56 57 <div class="carousel-item bg-slide bg-4"> 58 <div class="carousel-overlay"></div> 59 <div class="carousel-content"> 60 <h1>The Importance of Sleep for Students</h1> 61 <p>Getting enough sleep is very important to maintain students’ concentration, mood, and memory. Lack of sleep can cause fatigue, decreased focus, and reduced academic performance. Maintaining a regular sleep schedule helps the body and brain function more optimally every day.</p> 62 </div> 63 </div> 64 65 <div class="carousel-item bg-slide bg-5"> 66 <div class="carousel-overlay"></div> 67 <div class="carousel-content"> 68 <h1>Exercise is Important for Students</h1> 69 <p>Physical activity helps maintain body fitness and improve students’ mental health. Regular exercise can reduce stress, increase energy, and help students stay more focused while studying. It doesn’t have to be intense workouts—simple activities done consistently already provide great benefits.</p> 70 </div> 71 </div> 72 73 </div> 74 75 76 <button class="carousel-control-prev" type="button" data-bs-target="#healthCarousel" data-bs-slide="prev"> 77 <span class="carousel-control-prev-icon"></span> 78 </button> 79 <button class="carousel-control-next" type="button" data-bs-target="#healthCarousel" data-bs-slide="next"> 80 <span class="carousel-control-next-icon"></span> 81 </button> 82 </div> 83 84 <!-- News --> 85 <section id="berita" class="news-section"> 86 <h2 class="text-center fw-bold mb-3">News</h2> 87 <br> 88 89 <div class="marquee"> 90 <div class="marquee-track"> 91 92 <!-- CARD --> 93 <div class="news-card"> 94 <img class="news-photo" src="images/news1.jpg" alt="News"> 95 <h6>Lack of Sleep = Reduced Focus</h6> 96 <p class="news-desc"> 97 Lack of sleep can make it difficult for the brain to concentrate and slow down memory performance. Students who sleep less than 6 hours tend to feel tired more quickly and have difficulty understanding lessons. Getting enough sleep helps the body and brain recover for the next day’s activities. 98 </p> 99 </div> 100 101 <div class="news-card"> 102 <img class="news-photo" src="images/news2.jpeg" alt="News"> 103 <h6>Sitting Too Long Makes You Tired Faster</h6> 104 <p class="news-desc"> 105 Sitting too long without moving can make muscles stiff and slow down blood circulation. This often causes soreness, dizziness, and sleepiness while studying. Light movement regularly helps the body stay fresh and focused. 106 </p> 107 </div> 108 109 <div class="news-card"> 110 <img class="news-photo" src="images/news3.jpg" alt="News"> 111 <h6>Breakfast Is More Than Just Eating</h6> 112 <p class="news-desc"> 113 Breakfast provides the initial energy the body and brain need to start the day. Skipping breakfast can cause weakness and difficulty concentrating in class. Simple meals are enough as long as they are nutritious and balanced. 114 </p> 115 </div> 116 117 <div class="news-card"> 118 <img class="news-photo" src="images/news4.jpg" alt="News"> 119 <h6>Thirst = Reduced Focus</h6> 120 <p class="news-desc"> 121 Lack of water intake can cause mild dehydration that affects concentration and mood. Many students do not realize that fatigue and dizziness are often caused by not drinking enough water. Drinking water regularly helps the body function more optimally. 122 </p> 123 </div> 124 125 <div class="news-card"> 126 <img class="news-photo" src="images/news5.jpg" alt="News"> 127 <h6>Stress Is Normal, But It Needs to Be Managed</h6> 128 <p class="news-desc"> 129 Assignments, exams, and academic targets can cause stress if not managed properly. Excessive stress can affect both mental and physical health. Managing rest time and seeking support are very important to maintain balance. 130 </p> 131 </div> 132 133 <!-- DUPLICATION FOR LOOP --> 134 <div class="news-card"> 135 <img class="news-photo" src="images/news6.jpg" alt="News"> 136 <h6>Using Your Phone Before Bed Disrupts Sleep Quality</h6> 137 <p class="news-desc"> 138 Using gadgets before bed can disrupt the body’s natural rhythm for resting. The light from the screen keeps the brain active and makes it harder to feel sleepy. This habit can cause poor sleep and waking up feeling tired. 139 </p> 140 </div> 141 142 <div class="news-card"> 143 <img class="news-photo" src="images/news7.jpg" alt="News"> 144 <h6>Movement Makes the Brain More Active</h6> 145 <p class="news-desc"> 146 Physical activity helps increase blood flow to the brain, improving focus and mood. Lack of movement makes the body tire quickly and feel less energetic. Light activities such as walking or stretching already provide benefits. 147 </p> 148 </div> 149 150 <div class="news-card"> 151 <img class="news-photo" src="images/news8.jpg" alt="News"> 152 <h6>Too Much Sugar = Energy Drops Quickly</h6> 153 <p class="news-desc"> 154 Foods and drinks high in sugar do provide quick energy, but the effect does not last long. After that, the body may feel weak and sleepy. Reducing sugar consumption helps maintain more stable energy throughout the day. 155 </p> 156 </div> 157 158 <div class="news-card"> 159 <img class="news-photo" src="images/news9.jpg" alt="News"> 160 <h6>Poor Posture Can Become a Bad Habit</h6> 161 <p class="news-desc"> 162 Incorrect sitting posture while studying can cause neck and back pain. If left unchecked, this habit can have long-term effects on body health. Maintaining proper sitting posture helps the body stay comfortable while studying. 163 </p> 164 </div> 165 166 <div class="news-card"> 167 <img class="news-photo" src="images/news10.jpg" alt="News"> 168 <h6>Health Starts with Small Habits</h6> 169 <p class="news-desc"> 170 Maintaining health does not have to start with big changes. Small habits done consistently are much more effective in the long run. Starting with one healthy habit can bring positive changes to the body. 171 </p> 172 </div> 173 </div> 174 </div> 175 </section> 176 177 178 <!-- WAVE DIVIDER 1 (News -> Issue) --> 179 <svg class="wave-divider" viewBox="0 0 1200 120" preserveAspectRatio="none"> 180 <path d="M0,50 Q300,0 600,50 T1200,50 L1200,120 L0,120 Z" fill="#fef3c7"/> 181 <path d="M0,60 Q150,20 300,60 T600,60 T900,60 T1200,60 L1200,120 L0,120 Z" fill="#fff8e7" opacity="0.8"/> 182 </svg> 183 184 <section id="issue" class="issue-section"> 185 <div class="container"> 186 187 <h2 class="text-center fw-bold mb-3"> 188 Health Issues Commonly Experienced by Students 189 </h2> 190 191 <p class="text-center text-muted mb-5"> 192 Some of the most common health problems experienced by students in Indonesia 193 based on daily habits and learning environments. 194 </p> 195 196 <!-- ROW 1 (4 ITEMS) --> 197 <div class="row gy-5 mb-5"> 198 <div class="col-md-3 issue-item" data-issue="sleep"> 199 <img class="issue-photo" src="images/issue1.jpg" alt="Lack of Sleep"> 200 <h5>Lack of Sleep</h5> 201 <p> 202 Irregular sleep schedules cause decreased focus, 203 fatigue, and mood disturbances in students. 204 </p> 205 </div> 206 207 <div class="col-md-3 issue-items" data-issue="nutrition"> 208 <img class="issue-photo" src="images/issue2.jpg" alt="Nutrition"> 209 <h5>Unbalanced Nutrition</h5> 210 <p> 211 Poor eating habits affect body energy, 212 immunity, and learning ability. 213 </p> 214 </div> 215 216 <div class="col-md-3 issue-item" data-issue="nutrition"> 217 <img class="issue-photo" src="images/issue3.jpg" alt="Activity"> 218 <h5>Lack of Physical Activity</h5> 219 <p> 220 Limited daily movement makes the body tire quickly 221 and increases the risk of posture problems. 222 </p> 223 </div> 224 225 <div class="col-md-3 issue-item" data-issue="stress"> 226 <img class="issue-photo" src="images/issue4.jpg" alt="Stress"> 227 <h5>Academic Stress</h5> 228 <p> 229 Excessive academic pressure can affect 230 students’ mental and emotional health. 231 </p> 232 </div> 233 </div> 234 235 <!-- ROW 2 (3 ITEMS) --> 236 <div class="row gy-5 justify-content-center"> 237 <div class="col-md-3 issue-item" data-issue="posture"> 238 <img class="issue-photo" src="images/issue5.png" alt="Posture"> 239 <h5>Poor Body Posture</h5> 240 <p> 241 Incorrect sitting habits while studying can cause 242 back and neck pain. 243 </p> 244 </div> 245 246 <div class="col-md-3 issue-item" data-issue="mental"> 247 <img class="issue-photo" src="images/issue6.jpg" alt="Mental Health"> 248 <h5>Mental Health</h5> 249 <p> 250 Mental fatigue and anxiety often go unnoticed, 251 yet they have a significant impact on students’ daily lives. 252 </p> 253 </div> 254 255 <div class="col-md-3 issue-item" data-issue="hydration"> 256 <img class="issue-photo" src="images/issue7.jpg" alt="Hydration"> 257 <h5>Lack of Hydration</h5> 258 <p> 259 Low fluid intake can reduce focus 260 and make the body tire more quickly. 261 </p> 262 </div> 263 </div> 264 265 </div> 266 </section> 267 268 269 <!-- WAVE DIVIDER 2 (Issue -> Contact) --> 270 <svg class="wave-divider" viewBox="0 0 1200 120" preserveAspectRatio="none"> 271 <path d="M0,50 Q250,10 500,50 T1000,50 T1200,50 L1200,0 L0,0 Z" fill="#fef3c7"/> 272 <path d="M0,40 Q200,80 400,40 T800,40 T1200,40 L1200,0 L0,0 Z" fill="#fff8e7" opacity="0.8"/> 273 </svg> 274 275 <!-- WHO CAN HELP --> 276 <section id="who-help" class="help-section"> 277 <div class="container"> 278 <h2 class="text-center fw-bold mb-3">Who can help?</h2> 279 <p class="text-center text-muted mb-5"> 280 Here are several professionals who can help with student health issues. Click the "Contact Me" button to reach them. 281 </p> 282 283 <div class="helpers-row d-flex flex-wrap justify-content-center gap-3"> 284 <div class="helper-card"> 285 <img class="helper-photo" src="images/Profesional1.jpg" alt="Dr. A"> 286 <h5 class="mt-3">Dr. Alia Putri</h5> 287 <p class="specialty text-primary">Pediatric Specialist</p> 288 <p class="helper-desc"> 289 Dr. Alia focuses on child and adolescent health, especially sleep and nutrition issues. She has experience working with schools on health education programs. 290 </p> 291 <a class="btn contact-btn btn-primary mt-3" href="mailto:[email protected]">Contact Me</a> 292 </div> 293 294 <div class="helper-card"> 295 <img class="helper-photo" src="images/Profesional2.jpg" alt="Dr. B"> 296 <h5 class="mt-3">Dr. Budi Santoso</h5> 297 <p class="specialty text-primary">Nutrition Specialist</p> 298 <p class="helper-desc"> 299 Provides practical nutrition consultations for students, creating simple meal plans that are easy for schools and families to follow. 300 </p> 301 <a class="btn contact-btn btn-primary mt-3" href="mailto:[email protected]">Contact Me</a> 302 </div> 303 304 <div class="helper-card"> 305 <img class="helper-photo" src="images/Profesional3.jpg" alt="Ms. C"> 306 <h5 class="mt-3">Ms. Clara Wijaya</h5> 307 <p class="specialty text-primary">Mental Health Counselor</p> 308 <p class="helper-desc"> 309 A counselor focused on adolescent mental well-being, stress management techniques, and emotional support for students. 310 </p> 311 <a class="btn contact-btn btn-primary mt-3" href="mailto:[email protected]">Contact Me</a> 312 </div> 313 314 <div class="helper-card"> 315 <img class="helper-photo" src="images/Profesional4.jpg" alt="Mr. D"> 316 <h5 class="mt-3">Mr. Dedi Prasetya</h5> 317 <p class="specialty text-primary">Physical Activity Instructor</p> 318 <p class="helper-desc"> 319 Helps design light physical activities that can be implemented in schools to improve fitness and reduce posture problems. 320 </p> 321 <a class="btn contact-btn btn-primary mt-3" href="mailto:[email protected]">Contact Me</a> 322 </div> 323 324 <div class="helper-card"> 325 <img class="helper-photo" src="images/Profesional5.jpg" alt="Ms. E"> 326 <h5 class="mt-3">Ms. Eka Nur</h5> 327 <p class="specialty text-primary">Hydration & Nutrition Expert</p> 328 <p class="helper-desc"> 329 Provides practical advice on maintaining proper hydration, including strategies to help students consistently drink enough water throughout the day. 330 </p> 331 <a class="btn contact-btn btn-primary mt-3" href="mailto:[email protected]">Contact Me</a> 332 </div> 333 </div> 334 </div> 335 </section> 336 337 338 <script src="check.js"></script> 339 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> 340 341 </body> 342 </html>
1 body { 2 margin-top: 56px; 3 font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif; 4 } 5 6 /* ===== NAVBAR ===== */ 7 .navbar { 8 background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%) !important; 9 box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2); 10 } 11 12 .navbar-brand { 13 color: #ffffff !important; 14 font-weight: 700; 15 font-size: 1.5rem; 16 } 17 18 .navbar-nav { 19 display: flex !important; 20 flex-direction: row; 21 gap: 2rem; 22 align-items: center; 23 } 24 25 .navbar-nav .nav-link { 26 color: #ffffff !important; 27 font-weight: 500; 28 transition: all 0.3s ease; 29 text-decoration: none; 30 display: inline-block; 31 white-space: nowrap; 32 opacity: 0.95; 33 } 34 35 .navbar-nav .nav-link:hover { 36 color: #ffffff !important; 37 opacity: 1; 38 text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 39 } 40 41 /* ===== CAROUSEL (UNCHANGED) ===== */ 42 .carousel, 43 .carousel-inner, 44 .carousel-item { 45 height: 85vh; 46 } 47 48 .bg-slide { 49 background-size: cover; 50 background-position: center; 51 position: relative; 52 } 53 54 .bg-1 { background-image: url("images/bg1.jpg"); } 55 .bg-2 { background-image: url("images/bg2.jpg"); } 56 .bg-3 { background-image: url("images/bg3.jpg"); } 57 .bg-4 { background-image: url("images/bg4.jpg"); } 58 .bg-5 { background-image: url("images/bg5.jpg"); } 59 60 .carousel-overlay { 61 position: absolute; 62 inset: 0; 63 background: rgba(0,0,0,.55); 64 } 65 66 .carousel-content { 67 position: absolute; 68 top: 50%; 69 left: 200px; 70 transform: translateY(-50%); 71 max-width: 520px; 72 color: #fff; 73 } 74 75 /* ===== NEWS (MODERN COLORS) ===== */ 76 .news-section { 77 padding: 4rem 0; 78 background: #ffffff; 79 position: relative; 80 } 81 82 .news-title { 83 font-size: 2rem; 84 font-weight: 700; 85 margin-bottom: 2rem; 86 } 87 88 .marquee { 89 overflow: hidden; 90 } 91 92 .marquee-track { 93 display: flex; 94 gap: 1.25rem; 95 width: max-content; 96 animation: marquee 10s linear infinite; 97 } 98 99 @keyframes marquee { 100 from { transform: translateX(0); } 101 to { transform: translateX(-50%); } 102 } 103 104 .news-card { 105 width: 260px; 106 background: #ffffff; 107 border-radius: 16px; 108 padding: 1.25rem; 109 flex-shrink: 0; 110 min-height: 280px; 111 display: flex; 112 flex-direction: column; 113 box-shadow: 0 4px 20px rgba(59, 130, 246, 0.08); 114 border: 1px solid rgba(59, 130, 246, 0.1); 115 transition: all 0.3s ease; 116 } 117 118 .news-card:hover { 119 transform: translateY(-4px); 120 box-shadow: 0 8px 30px rgba(59, 130, 246, 0.15); 121 border: 1px solid rgba(59, 130, 246, 0.2); 122 } 123 124 /* Wave divider styling */ 125 .wave-divider { 126 display: block; 127 width: 100%; 128 height: 120px; 129 /* overlap slightly to avoid a white gap between sections */ 130 margin: -6px 0 0 0; 131 } 132 133 .news-thumb { 134 height: 90px; 135 border-radius: 10px; 136 background: #dbeafe; 137 margin-bottom: .5rem; 138 } 139 140 /* Circular images for issue and helper cards */ 141 .issue-photo, 142 .helper-photo { 143 border-radius: 50%; 144 object-fit: cover; 145 } 146 147 .news-photo { 148 width: 100%; 149 height: 150px; 150 object-fit: cover; 151 margin-bottom: .75rem; 152 border-radius: 8px; 153 } 154 155 .issue-photo { 156 width: 120px; 157 height: 120px; 158 margin: 0 auto 1rem; 159 } 160 161 .helper-photo { 162 width: 150px; 163 height: 150px; 164 margin: 0 auto 1rem; 165 } 166 167 .news-card h6 { 168 font-size: .95rem; 169 font-weight: 700; 170 margin-bottom: .25rem; 171 flex: 0 0 auto; 172 } 173 174 .news-desc { 175 font-size: .82rem; 176 line-height: 1.4; 177 color: #555; 178 margin: 0; 179 flex: 1 1 auto; 180 } 181 182 /* ===== COMMON HEALTH ISSUES ===== */ 183 .issue-section { 184 padding: 5rem 0; 185 background: linear-gradient(135deg, #fef3c7 0%, #fff8e7 50%, #fef5e7 100%); 186 position: relative; 187 } 188 189 .issue-section h2 { 190 font-size: 2.2rem; 191 letter-spacing: -0.02em; 192 margin-bottom: 1.5rem; 193 } 194 195 .issue-section > .container > p { 196 max-width: 720px; 197 margin-left: auto; 198 margin-right: auto; 199 } 200 201 /* item issue */ 202 .issue-item { 203 text-align: center; 204 padding: 0 1rem; 205 cursor: pointer; 206 display: flex; 207 flex-direction: column; 208 align-items: center; 209 } 210 211 /* placeholder logo */ 212 .issue-icon { 213 width: 56px; 214 height: 56px; 215 margin: 0 auto 1rem; 216 border-radius: 50%; 217 background: linear-gradient(135deg, #dbeafe, #eef2ff); 218 display: flex; 219 align-items: center; 220 justify-content: center; 221 } 222 223 /* judul issue */ 224 .issue-item h5 { 225 font-weight: 700; 226 font-size: 1.05rem; 227 margin-bottom: .5rem; 228 transition: color 0.3s ease; 229 } 230 231 .issue-item:hover h5 { 232 color: #0ea5e9; 233 } 234 235 /* deskripsi issue */ 236 .issue-item p { 237 font-size: .9rem; 238 line-height: 1.6; 239 color: #555; 240 margin: 0; 241 } 242 243 /* ===== ISSUE EXPANDABLE PANEL (INLINE) ===== */ 244 .issue-detail-panel { 245 position: static; 246 padding: 1.5rem; 247 background: #ffffff; 248 border-radius: 12px; 249 box-shadow: 0 12px 32px rgba(0,0,0,.08); 250 animation: issueFade .25s ease; 251 width: 80vw; 252 margin: 1.25rem auto; 253 box-sizing: border-box; 254 } 255 256 @keyframes issueFade { 257 from { 258 opacity: 0; 259 transform: translateY(-6px); 260 } 261 to { 262 opacity: 1; 263 transform: translateY(0); 264 } 265 } 266 267 /* center the inner content so the panel is readable */ 268 .issue-detail-panel .detail-grid, 269 .issue-detail-panel h4 { 270 max-width: 1100px; 271 margin-left: auto; 272 margin-right: auto; 273 } 274 275 .issue-detail-panel h4 { 276 font-size: 1.5rem; 277 font-weight: 700; 278 margin-bottom: 1.5rem; 279 color: #1f2937; 280 } 281 282 /* center the inner content so panel spans full width but content stays readable */ 283 .issue-detail-panel .detail-grid, 284 .issue-detail-panel h4 { 285 max-width: 1100px; 286 margin-left: auto; 287 margin-right: auto; 288 } 289 290 .detail-grid { 291 display: grid; 292 grid-template-columns: repeat(3, 1fr); 293 gap: 2rem; 294 } 295 296 .detail-grid h6 { 297 font-size: 1rem; 298 font-weight: 700; 299 margin-bottom: 1rem; 300 color: #0ea5e9; 301 } 302 303 .detail-grid ul { 304 list-style-position: inside; 305 padding-left: 0; 306 margin: 0; 307 } 308 309 .detail-grid li { 310 font-size: .9rem; 311 line-height: 1.8; 312 color: #555; 313 margin-bottom: .5rem; 314 } 315 316 /* ===== WHO CAN HELP (HELPER CARDS) ===== */ 317 .help-section { 318 padding: 4rem 0 6rem 0; 319 background: #ffffff; 320 } 321 322 .helper-card { 323 background: #f9fafb; 324 border-radius: 12px; 325 padding: 1rem 1rem 1.5rem 1rem; 326 min-height: 360px; 327 display: flex; 328 flex-direction: column; 329 box-shadow: 0 2px 8px rgba(0,0,0,.04); 330 } 331 332 .contact-btn { 333 margin-top: 1rem; 334 background-color: #f59e0b !important; 335 border-color: #d97706 !important; 336 color: #ffffff !important; 337 font-weight: 600; 338 transition: all 0.3s ease; 339 } 340 341 .contact-btn:hover { 342 background-color: #d97706 !important; 343 border-color: #b45309 !important; 344 transform: translateY(-2px); 345 box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3); 346 } 347 348 .specialty { 349 font-weight: 700; 350 margin-bottom: .5rem; 351 } 352 353 .helper-desc { 354 color: #444; 355 margin-top: .25rem; 356 flex: 1 1 auto; 357 } 358 359 /* helpers-row layout: 5 cards in a row on large screens */ 360 .helpers-row { 361 display: flex; 362 gap: 2.5rem; 363 justify-content: center; 364 align-items: stretch; 365 } 366 367 .helpers-row .helper-card { 368 flex: 0 0 18%; 369 max-width: 18%; 370 border-radius: 16px; 371 padding: 2rem 1.5rem; 372 background: #ffffff; 373 box-shadow: 0 4px 20px rgba(34, 197, 94, 0.08); 374 border: 1px solid rgba(34, 197, 94, 0.1); 375 text-align: center; 376 transition: all 0.3s ease; 377 } 378 379 .helpers-row .helper-card:hover { 380 transform: translateY(-8px); 381 box-shadow: 0 8px 30px rgba(34, 197, 94, 0.15); 382 border: 1px solid rgba(34, 197, 94, 0.2); 383 } 384 385 @media (max-width: 1200px) { 386 .helpers-row .helper-card { 387 flex: 0 0 30%; 388 max-width: 30%; 389 } 390 } 391 392 @media (max-width: 900px) { 393 .helpers-row .helper-card { 394 flex: 0 0 48%; 395 max-width: 48%; 396 } 397 } 398 399 @media (max-width: 576px) { 400 .helpers-row .helper-card { 401 flex: 0 0 100%; 402 max-width: 100%; 403 } 404 } 405 406 /* responsive refinement */ 407 @media (max-width: 768px) { 408 .issue-item { 409 margin-bottom: 2.5rem; 410 } 411 412 .issue-section h2 { 413 font-size: 1.75rem; 414 } 415 416 .detail-grid { 417 grid-template-columns: 1fr; 418 } 419 420 .issue-detail-panel { 421 margin-top: 1.5rem; 422 padding: 1.5rem; 423 } 424 } 425 426 .news-section, 427 .issue-section { 428 position: relative; 429 } 430 431 .issue-section { 432 padding: 4rem 0; 433 background: linear-gradient(135deg, #fef3c7 0%, #fff8e7 50%, #fef5e7 100%); 434 position: relative; 435 } 436 437 /* ===== ISSUE EXPANDABLE PANEL (INLINE) ===== */ 438 439 .issue-detail-panel { 440 margin-top: 2rem; 441 padding: 2rem; 442 background: #ffffff; 443 border-radius: 16px; 444 box-shadow: 0 12px 32px rgba(0,0,0,.08); 445 animation: issueFade .25s ease; 446 } 447 448 @keyframes issueFade { 449 from { 450 opacity: 0; 451 transform: translateY(-6px); 452 } 453 to { 454 opacity: 1; 455 transform: translateY(0); 456 } 457 } 458 459 .detail-grid { 460 display: grid; 461 grid-template-columns: repeat(3, 1fr); 462 gap: 2rem; 463 } 464 465 @media (max-width: 768px) { 466 .detail-grid { 467 grid-template-columns: 1fr; 468 } 469 }
1 const issueData = { 2 sleep: { 3 title: "Lack of Sleep", 4 cause: [ 5 "Using gadgets before bedtime", 6 "Studying until late at night" 7 ], 8 impact: [ 9 "Decreased focus and memory", 10 "Easily tired and emotional" 11 ], 12 solution: [ 13 "Go to sleep at the same time every day", 14 "Stop using screens 30 minutes before bed" 15 ] 16 }, 17 nutrition: { 18 title: "Unbalanced Nutrition", 19 cause: [ 20 "Skipping breakfast", 21 "Excessive consumption of instant food" 22 ], 23 impact: [ 24 "Energy runs out quickly", 25 "Decreased immune system" 26 ], 27 solution: [ 28 "Have a simple nutritious breakfast", 29 "Drink more water" 30 ] 31 }, 32 activity: { 33 title: "Lack of Physical Activity", 34 cause: [ 35 "Sitting too long", 36 "Rarely exercising" 37 ], 38 impact: [ 39 "Body gets tired easily", 40 "Posture worsens" 41 ], 42 solution: [ 43 "Stretch every 1 hour", 44 "Take a light walk" 45 ] 46 }, 47 stress: { 48 title: "Academic Stress", 49 cause: [ 50 "Excessive assignments", 51 "Pressure from grades and expectations" 52 ], 53 impact: [ 54 "Anxiety", 55 "Difficulty sleeping" 56 ], 57 solution: [ 58 "Organize a study schedule", 59 "Make time to rest" 60 ] 61 }, 62 posture: { 63 title: "Poor Body Posture", 64 cause: [ 65 "Sitting in an incorrect position", 66 "Monitor screen placed too low" 67 ], 68 impact: [ 69 "Neck and back pain", 70 "Breathing problems" 71 ], 72 solution: [ 73 "Adjust chair and desk position properly", 74 "Rest and move your shoulders every hour" 75 ] 76 }, 77 mental: { 78 title: "Mental Health", 79 cause: [ 80 "Heavy academic workload", 81 "Social isolation or lack of support" 82 ], 83 impact: [ 84 "Anxiety and depression", 85 "Difficulty concentrating" 86 ], 87 solution: [ 88 "Talk to friends or a counselor", 89 "Do enjoyable activities" 90 ] 91 }, 92 hydration: { 93 title: "Lack of Hydration", 94 cause: [ 95 "Forgetting to drink water", 96 "Drinking caffeinated beverages more often" 97 ], 98 impact: [ 99 "Dizziness and difficulty concentrating", 100 "Easily tired" 101 ], 102 solution: [ 103 "Drink 200ml of water every hour", 104 "Carry a water bottle everywhere" 105 ] 106 } 107 }; 108 109 // create a single global panel and reuse it 110 const globalPanel = document.createElement('div'); 111 globalPanel.className = 'issue-detail-panel'; 112 globalPanel.hidden = true; 113 globalPanel.innerHTML = ` 114 <h4 class="issue-detail-title"></h4> 115 <div class="detail-grid"> 116 <div> 117 <h6>Causes</h6> 118 <ul class="issue-detail-cause"></ul> 119 </div> 120 <div> 121 <h6>Impacts</h6> 122 <ul class="issue-detail-impect"></ul> 123 </div> 124 <div> 125 <h6>Simple Solutions</h6> 126 <ul class="issue-detail-solution"></ul> 127 </div> 128 </div> 129 `; 130 131 132 // append to container so it's available to be moved with DOM operations 133 const issueContainer = document.querySelector('.issue-section .containers'); 134 if (issueContainer) issueContainer.appendChild(globalPanel); 135 136 document.querySelectorAll('.issue-item').forEach(item => { 137 item.addEventListener('click', () => { 138 const key = item.dataset.issues; 139 const data = issueData[key]; 140 if (!data) return; 141 142 const row = item.closest('.row'); 143 144 // if panel is already visible and placed after the same row -> toggle close 145 const placedAfterSameRow = !globalPanel.hidden && globalPanel.previousElementSibling === row; 146 if (placedAfterSameRow) { 147 globalPanel.hidden = true; 148 return; 149 } 150 151 // populate 152 globalPanel.querySelector('.issue-detail-title').textContent = data.title; 153 globalPanel.querySelector('.issue-detail-cause').innerHTML = data.cause.map(i => `<li>${i}</li>`).join(''); 154 globalPanel.querySelector('.issue-detail-impact').innerHTML = data.impact.map(i => `<li>${i}</li>`).join(''); 155 globalPanel.querySelector('.issue-detail-solution').innerHTML = data.solution.map(i => `<li>${i}</li>`).join(''); 156 157 // move panel to just after the row that contains the clicked item 158 if (row) row.append(globalPanel); 159 160 // show panel 161 globalPanel.hide = false; 162 }); 163 });
1 /* ========== COMPREHENSIVE RESPONSIVE DESIGN ========== */ 2 3 /* Mobile first: phones (320px - 575px) */ 4 @media (max-width: 575px) { 5 body { 6 margin-top: 64px; 7 } 8 9 .carousel, 10 .carousel-inner, 11 .carousel-item { 12 height: 50vh; 13 } 14 15 .carousel-content { 16 top: 50%; 17 left: 20px; 18 right: 20px; 19 max-width: calc(100% - 40px); 20 transform: translateY(-50%); 21 font-size: 0.9rem; 22 } 23 24 .carousel-content h1 { 25 font-size: 1.3rem; 26 margin-bottom: 0.8rem; 27 line-height: 1.2; 28 } 29 30 .carousel-content p { 31 font-size: 0.8rem; 32 line-height: 1.4; 33 } 34 35 .carousel-control-prev, 36 .carousel-control-next { 37 width: 30px; 38 } 39 40 .news-section { 41 padding: 1.5rem 0; 42 } 43 44 .news-section h2 { 45 font-size: 1.3rem; 46 margin-bottom: 1rem; 47 } 48 49 .news-section > p { 50 font-size: 0.85rem; 51 } 52 53 .news-card { 54 width: 180px; 55 min-height: 220px; 56 padding: 0.9rem; 57 gap: 0.4rem; 58 } 59 60 .news-photo { 61 height: 110px; 62 margin-bottom: 0.5rem; 63 } 64 65 .news-card h6 { 66 font-size: 0.85rem; 67 } 68 69 .news-desc { 70 font-size: 0.75rem; 71 line-height: 1.3; 72 } 73 74 .wave-divider { 75 height: 60px; 76 margin: -4px 0 0 0; 77 } 78 79 .issue-section { 80 padding: 1.5rem 0 2rem 0; 81 } 82 83 .issue-section h2 { 84 font-size: 1.3rem !important; 85 margin-bottom: 0.8rem; 86 } 87 88 .issue-section > p { 89 font-size: 0.85rem; 90 } 91 92 .issue-item { 93 padding: 0 0.5rem; 94 } 95 96 .issue-photo { 97 width: 90px; 98 height: 90px; 99 margin: 0 auto 0.8rem; 100 } 101 102 .issue-item h5 { 103 font-size: 0.95rem; 104 } 105 106 .issue-item p { 107 font-size: 0.8rem; 108 } 109 110 .issue-detail-panel { 111 width: calc(100% - 2rem); 112 margin-left: auto; 113 margin-right: auto; 114 padding: 1rem; 115 margin-top: 1rem; 116 } 117 118 .issue-detail-panel h4 { 119 font-size: 1rem; 120 } 121 122 .detail-grid { 123 grid-template-columns: 1fr !important; 124 gap: 1rem; 125 } 126 127 .detail-grid h6 { 128 font-size: 0.9rem; 129 } 130 131 .detail-grid ul { 132 padding-left: 1.2rem; 133 } 134 135 .detail-grid li { 136 font-size: 0.8rem; 137 } 138 139 .help-section { 140 padding: 1.5rem 0; 141 } 142 143 .help-section h2 { 144 font-size: 1.3rem; 145 margin-bottom: 0.8rem; 146 } 147 148 .help-section > p { 149 font-size: 0.85rem; 150 } 151 152 .helpers-row { 153 gap: 1rem; 154 } 155 156 .helper-card { 157 padding: 1rem 0.8rem; 158 min-height: auto; 159 } 160 161 .helper-photo { 162 width: 100px; 163 height: 100px; 164 margin: 0 auto 0.8rem; 165 } 166 167 .helper-card h5 { 168 font-size: 0.95rem; 169 margin-top: 0.8rem !important; 170 } 171 172 .helper-card .specialty { 173 font-size: 0.8rem; 174 margin-bottom: 0.3rem; 175 } 176 177 .helper-card .helper-desc { 178 font-size: 0.75rem; 179 } 180 181 .contact-btn { 182 font-size: 0.8rem; 183 padding: 0.4rem 0.8rem; 184 margin-top: 0.8rem !important; 185 } 186 } 187 188 /* Tablet: small tablets (576px - 767px) */ 189 @media (min-width: 576px) and (max-width: 767px) { 190 .carousel-content { 191 left: 40px; 192 right: 40px; 193 max-width: calc(100% - 80px); 194 } 195 196 .carousel-content h1 { 197 font-size: 1.6rem; 198 } 199 200 .carousel-content p { 201 font-size: 0.9rem; 202 } 203 204 .news-card { 205 width: 210px; 206 } 207 208 .issue-section h2 { 209 font-size: 1.6rem !important; 210 } 211 212 .issue-photo { 213 width: 100px; 214 height: 100px; 215 } 216 217 .detail-grid { 218 grid-template-columns: 1fr !important; 219 } 220 221 .helper-photo { 222 width: 120px; 223 height: 120px; 224 } 225 226 .helpers-row .helper-card { 227 flex: 0 0 calc(50% - 0.75rem); 228 max-width: calc(50% - 0.75rem); 229 } 230 } 231 232 /* Medium: tablets (768px - 991px) */ 233 @media (min-width: 768px) and (max-width: 991px) { 234 .carousel-content { 235 left: 60px; 236 right: 60px; 237 max-width: 550px; 238 } 239 240 .carousel-content h1 { 241 font-size: 2rem; 242 } 243 244 .news-card { 245 width: 240px; 246 } 247 248 .issue-section h2 { 249 font-size: 2rem; 250 } 251 252 .issue-item { 253 padding: 0 0.75rem; 254 } 255 256 .issue-photo { 257 width: 110px; 258 height: 110px; 259 } 260 261 .detail-grid { 262 grid-template-columns: 1fr 1fr !important; 263 } 264 265 .helper-photo { 266 width: 140px; 267 height: 140px; 268 } 269 270 .helpers-row .helper-card { 271 flex: 0 0 calc(33.333% - 1.67rem); 272 max-width: calc(33.333% - 1.67rem); 273 } 274 } 275 276 /* Large: desktops (992px and up) */ 277 @media (min-width: 992px) { 278 /* Ensure carousel content stays positioned correctly */ 279 .carousel-content { 280 left: 200px; 281 max-width: 520px; 282 } 283 284 .detail-grid { 285 grid-template-columns: repeat(3, 1fr); 286 } 287 288 /* Ensure helper cards stay 5 per row */ 289 .helpers-row .helper-card { 290 flex: 0 0 18%; 291 max-width: 18%; 292 } 293 } 294 295 /* Extra large screens (1400px and up) - fine-tuning */ 296 @media (min-width: 1400px) { 297 .container { 298 max-width: 1320px; 299 } 300 301 .carousel-content { 302 left: 250px; 303 } 304 305 .issue-detail-panel { 306 width: 75vw; 307 max-width: 1000px; 308 } 309 } 310 311 /* Fix for all screens - prevent overflow */ 312 * { 313 box-sizing: border-box; 314 } 315 316 html, 317 body { 318 width: 100%; 319 overflow-x: hidden; 320 } 321 322 img { 323 max-width: 100%; 324 height: auto; 325 display: block; 326 }