Teams Mockup - Cloned

body { background-color: #f4f4f4; background-repeat: no-repeat; background-size: cover; height: 100%; margin: 0; } .sidebar { height: 100%; width: 250px; position: fixed; top: 0; left: 0; background-color: #404040; padding-top: 20px; color: #fff; } .sidebar a { display: block; padding: 10px 20px; color: #fff; text-decoration: none; transition: background-color 0.3s; } .sidebar a:hover { background-color: #555; } .content { margin-left: 250px; padding: 20px; } .pa

Microsoft Teams

/* =============================== BASICS ================================ */ :root{ --max-w: 1140px; --radius: 18px; --purple: #4b4d90; --purple2: #6f71a6; --bg: #f4f4f4; } body{ background: var(--bg); } /* Keep everything centered & neat */ .teams-wrap{ max-width: var(--max-w); margin: 0 auto; padding: 10px 12px 30px; } /* =============================== HERO (image + light gradient + pill under text) ================================ */ .teams-hero{ position: relative; height: 300px; /* 👈 change height here */ border-radius

ACADEX

 

#countdown-container { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; font-family: Arial, sans-serif; text-align: center; } .countdown-item { background: #4B2E83; color: #fff; padding: 20px; border-radius: 12px; min-width: 100px; box-shadow: 0 4px 10px rgba(0,0,0,.2); } .countdown-item span { display: block; font-size: 2.5rem; font-weight: bold; } .countdown-item label { display: block; margin-top: 5px; font-size: .9rem; text-transform: uppercase; }