/* ╔══════════════════════════════════════════════════════════╗ ║ 🧋 SCHOOL BUZZ — style.css ║ ║ ║ ║ SECTION 1 — Page & Navbar ║ ║ EX 1 — Style the page background & text → line ~45 ║ ║ EX 2 — Style the navbar bar → line ~63 ║ ║ EX 3 — Colour the app name span → line ~77 ║ ║ EX 4 — Style the active nav button → line ~96 ║ ║ ║ ║ SECTION 2 — Landing Page ║ ║ EX 5 — Style the live badge → line ~118 ║ ║ EX 6 — Animate the blinking dot → line ~139 ║ ║ EX 7 — Style the big headline → line ~163 ║ ║ EX 8 — Style the Enter button → line ~181 ║ ║ EX 9 — Style the preview cards → line ~212 ║ ║ EX 10 — Add colours to avatar circles → line ~236 ║ ║ ║ ║ SECTION 3 — Feed Page ║ ║ EX 11 — Style the input fields → line ~265 ║ ║ EX 12 — Style the Post button → line ~288 ║ ║ EX 13 — Style each post card → line ~320 ║ ║ EX 14 — Add colours to mood tags → line ~345 ║ ║ EX 15 — Add colour for YOUR new mood tag → line ~363 ║ ║ ║ ║ SECTION 4 — Detail Page ║ ║ EX 16 — Style the Back button → line ~378 ║ ║ EX 17 — Style the action buttons → line ~403 ║ ║ ║ ║ CHALLENGES (write rules from scratch): ║ ║ CH 1 — Style the character counter → line ~428 ║ ║ CH 2 — Style the Clear Form button → line ~450 ║ ║ CH 3 — Style the search bar → line ~468 ║ ║ CH 4 — Add outline glow on post cards → line ~487 ║ ║ CH 5 — Add a bounce animation → line ~510 ║ ║ CH 6 — Style the Back to Top button → line ~530 ║ ╚══════════════════════════════════════════════════════════╝ HOW CSS WORKS: selector { ← WHO to style property: value; ← WHAT to change } COLOUR PALETTE (use these throughout): Dark background : #111111 Card background : #141414 Sidebar bg : #0a0a0a Border colour : #222222 Orange accent : #f97316 Muted text : #888888 Light text : #f0f0f0 */ /* ── Reset — removes default browser spacing ── */ * { margin: 0; padding: 0; box-sizing: border-box; } /* ══════════════════════════════════════════════ SECTION 1 — PAGE & NAVBAR ══════════════════════════════════════════════ */ /* ════════════════════════════════════ EX 1 — Style the page background & text colour 🎨 The wraps the whole page. Set: font-family → Arial, sans-serif background → a dark colour (try #111111) color → light text colour (try #f0f0f0) min-height → 100vh (fills the full screen height) ✏️ Write the 4 properties inside body { } below: ════════════════════════════════════ */ body { /* ✏️ YOUR STYLES GO HERE */ font-family: Arial, Helvetica, sans-serif; background-color: #111111; color: #f0f0f0; min-height: 100vh; } /* ════════════════════════════════════ EX 2 — Style the navbar bar 🔲 The .navbar sits at the very top of every screen. Set: background → a darker colour than the page (try #000000) border-bottom → 1px solid #222222 padding → 12px 30px (top-bottom, left-right) display → flex align-items → center justify-content → space-between ✏️ Write the 6 properties inside .navbar { } below: ════════════════════════════════════ */ .navbar { /* ✏️ YOUR STYLES GO HERE */ background: #000000; border-bottom: #222222; padding: 12px 30px; display: flex; align-items: center; justify-content: space-between; } .nav-title { font-size: 18px; font-weight: bold; } /* ════════════════════════════════════ EX 3 — Colour the app name 🌈 The inside .nav-title gets the accent colour. This is how just part of the text becomes orange. Set: color → your accent colour (try #f97316) ✏️ Write the 1 property below: ════════════════════════════════════ */ .nav-title span { /* ✏️ YOUR STYLES GO HERE */ color: #f97316; } .nav-buttons { display: flex; gap: 8px; } /* Default (not active) nav button */ .nav-btn { background: #1a1a1a; border: 1px solid #333; color: #888; padding: 6px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; font-family: Arial, sans-serif; } /* ════════════════════════════════════ EX 4 — Style the ACTIVE nav button ✅ When a button is active (selected), it should look different. The class .nav-btn.active targets a button with BOTH classes. Set: background → your accent colour (e.g. #f97316) border-color → same accent colour color → white font-weight → bold ✏️ Write the 4 properties inside .nav-btn.active { } below: ════════════════════════════════════ */ .nav-btn.active { /* ✏️ YOUR STYLES GO HERE */ background: #f97316; border-color: #f97316; color: white; font-weight: bold; } /* ── Show / hide screens (keep this — it's needed for JS to work) ── */ .screen { display: none; } .screen.active { display: block; } /* ══════════════════════════════════════════════ SECTION 2 — LANDING PAGE ══════════════════════════════════════════════ */ /* Layout: 2 equal columns side by side */ .landing { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 55px); } .landing-left { padding: 80px 60px; border-right: 1px solid #222; display: flex; flex-direction: column; justify-content: center; } .landing-right { padding: 60px; background: #0a0a0a; display: flex; flex-direction: column; justify-content: center; gap: 14px; } /* ════════════════════════════════════ EX 5 — Style the "Live Now" badge 🔴 This is the small orange pill above the headline. Set: display → inline-flex align-items → center gap → 8px background → rgba(249, 115, 22, 0.12) ← orange at 12% opacity border → 1px solid rgba(249, 115, 22, 0.3) color → #f97316 border-radius → 20px ← makes it a pill shape padding → 5px 14px font-size → 12px font-weight → bold margin-bottom → 24px width → fit-content ✏️ Write the 11 properties inside .live-badge { } below: ════════════════════════════════════ */ .live-badge { /* ✏️ YOUR STYLES GO HERE */ display: inline-flex; align-items: center; gap: 8px; background: rgba(249, 115, 22, 0.12) ; border: 1px solid rgba(249, 115, 22, 0.3); color: #f97316; border-radius: 20px; padding: 5px 14px; font-size: 12px; font-weight: bold; margin-bottom: 24px; width: fit-content; } /* ════════════════════════════════════ EX 6 — Animate the blinking dot ⚡ The orange dot inside the badge blinks on and off. STEP 1 — Style the dot itself: Set: width → 8px height → 8px background → #f97316 border-radius → 50% ← makes it a circle animation → blink 1.4s infinite STEP 2 — Write the @keyframes animation: @keyframes blink tells the browser HOW to animate. At 0% and 100% (start & end) → opacity: 1 (fully visible) At 50% (middle) → opacity: 0.2 (nearly invisible) ✏️ Write .live-dot { } then @keyframes blink { } below: ════════════════════════════════════ */ .live-dot { /* ✏️ YOUR DOT STYLES GO HERE (width, height, background, border-radius, animation) */ width: 8px; height: 8px; background: #f97316; border-radius: 50%; animation: blink 1.4 infinite; } @keyframes blink { /* ✏️ Write: 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } */ } /* ════════════════════════════════════ EX 7 — Style the big headline 📰 The

is the giant text on the left. Set: font-size → 80px font-weight → 900 ← heaviest/boldest weight line-height → 0.9 ← lines sit tight together color → white margin-bottom → 16px ✏️ Write the 5 properties inside .big-title { } below: ════════════════════════════════════ */ .big-title { /* ✏️ YOUR STYLES GO HERE */ font-size: 80px; font-weight: 900; line-height: 0.9; color: white; margin-bottom: 16px; } /* The coloured dot in the headline */ .big-title .accent { color: #f97316; /* change this if you change your accent colour */ } .tagline { font-size: 16px; color: #888; line-height: 1.6; margin-bottom: 36px; max-width: 360px; } /* ════════════════════════════════════ EX 8 — Style the "See What's Happening" button 🟠 This is the big orange call-to-action button. Set: background → #f97316 color → white border → none border-radius → 12px padding → 18px 28px font-size → 16px font-weight → bold cursor → pointer max-width → 340px width → 100% display → flex justify-content → space-between font-family → Arial, sans-serif ALSO add a hover state: .enter-btn:hover { background: #e06010; } ✏️ Write .enter-btn { } and .enter-btn:hover { } below: ════════════════════════════════════ */ .enter-btn { /* ✏️ YOUR STYLES GO HERE */ background: #f97316; color: white; border: none; border-radius: 12px; padding: 18px 28px; font-size: 16px; font-weight: bold; cursor: pointer; max-width: 340px; width:100%; display :flex; justify-content: space-between; font-family:Arial, sans-serif; } .enter-btn:hover { /* ✏️ YOUR HOVER STYLE GOES HERE */ .enter-btn:hover { background: #e06010; } .enter-btn {} .enter-btn:hover {} } .preview-label { font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; } /* ════════════════════════════════════ EX 9 — Style the preview cards 🃏 These are the small post preview cards on the right side. Each card is a flex row: [avatar circle] [text] Set: background → #141414 border → 1px solid #222222 border-radius → 10px padding → 14px display → flex align-items → center gap → 12px ALSO add a hover state that lightens the border: .preview-card:hover { border-color: #333333; } ✏️ Write .preview-card { } and .preview-card:hover { } below: ════════════════════════════════════ */ .preview-card { /* ✏️ YOUR STYLES GO HERE */ background:#141414; border: 1px solid #222222; border-radius: 10px; padding:14px; display: flex; align-items:center; gap:12px; } .preview-card:hover { /* ✏️ YOUR HOVER STYLE GOES HERE */ .preview-card:hover { border-color: #333333; } .preview-card{} .preview-card:hover{} } /* ════════════════════════════════════ EX 10 — Add colours to avatar circles 🔵🟠🟣 Each avatar is a circle with a letter inside. The base .avatar rule makes it a circle — already written below. YOU write the colour classes that go on each avatar. Pattern: .orange-av { background: #f97316; } .blue-av { background: #3b82f6; } ... and so on Available colours to use: Orange: #f97316 Blue: #3b82f6 Purple: #a855f7 Green: #22c55e Pink: #ec4899 Teal: #14b8a6 ✏️ Write all 6 colour classes below: ════════════════════════════════════ */ .avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 14px; color: white; flex-shrink: 0; } /* ✏️ Write your 6 colour classes here: .orange-av { } .blue-av { } .purple-av { } .green-av { } .pink-av { } .teal-av { } */ .preview-username { font-size: 12px; font-weight: bold; color: #f97316; margin-bottom: 3px; } .preview-text { font-size: 12px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ══════════════════════════════════════════════ SECTION 3 — FEED PAGE ══════════════════════════════════════════════ */ /* Layout: fixed left sidebar + flexible right feed */ .feed-layout { display: grid; grid-template-columns: 340px 1fr; height: calc(100vh - 55px); } .sidebar { border-right: 1px solid #222; background: #0a0a0a; overflow-y: auto; } .compose-box { padding: 20px; border-bottom: 1px solid #222; } .compose-box h3 { font-size: 13px; color: #aaa; margin-bottom: 14px; } /* ════════════════════════════════════ EX 11 — Style the input fields 📝 The .field class is shared by ,