KOKINIO - MANAGER
Edit File: style.css
*{ margin: 0; padding: 0; box-sizing: border-box; } body, html { margin: 0; padding: 0; overflow-x: hidden; } .front { display: flex; justify-content: center; align-items: center; height: 100vh; background-image: url("https://ames.ku.edu.np/board-2023-2024/images/bg.png"); background-size: cover; background-position: center; background-attachment: fixed; flex-direction: column; } .hero-head { display: flex; justify-content: center; align-items: center; flex-direction: column; } .hero-head h1 { font-size: 4vw; color: #ffffff; text-align: center; font-weight: bold; letter-spacing: 2px; font-family: Impact; -webkit-text-stroke-width: 0.01px; -webkit-text-stroke-color: rgb(0, 0, 0); text-shadow: 0 0 10px #7c3a3a47; } .hero-head h2 { font-size: 2vw; color: #ffffff; text-align: center; font-family: Arial, Helvetica, sans-serif; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: rgb(0, 0, 0); text-shadow: 0 0 10px #7c3a3a47; } .team-members { display: flex; justify-content: center; align-items: center; background-image: url("https://ames.ku.edu.np/board-2023-2024/images/background-image.png"); background-size: cover; background-position: center; background-attachment: fixed; } .member-container { display: flex; flex-wrap: wrap; justify-content: space-around; padding: 20px; } .member { display: flex; box-shadow: 0 4px 8px rgba(0,0,0,0.1); width: 90%; max-width: 800px; margin: 15px auto; background-color: #ffffff23; border-radius: 10px; overflow: hidden; backdrop-filter: blur(10px); } .member img { width: 50%; height: 100%; object-fit: cover; } /* Content area adjustments */ .member-content { width: 50%; padding: 10px; display: flex; flex-direction: column; justify-content: center; } .member h3, .member p { margin: 5px 0; } .member h3 { color: #ffffff; font-size: 1.5em; } .member p { color: #ffffff; font-size: 1em; } /* Media Queries for additional responsiveness */ @media (max-width: 768px) { .hero-head h1 { font-size: 6vw; } .hero-head h2 { font-size: 4vw; } .member { flex-direction: column; } .member img, .member-content { width: 100%; } } @media (max-width: 480px) { .hero-head h1 { font-size: 8vw; } .hero-head h2 { font-size: 6vw; } .member-content { padding: 5px; } } .back{ position: fixed; top: 10px; left: 20px; } a { display: inline-block; margin-top: 20px; text-decoration: none; z-index: 1000000; } button { padding: 10px 20px; background-color: #f4c37f; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; } button:hover { opacity: 0.8; }