/* ============================================================ HAPPY 18TH BIRTHDAY WEBSITE STYLE.CSS Created for: Tanatswa Moshiwa Every section is labelled so you can easily edit it later. PART 1 ============================================================ */ /* ============================================================ 01. RESET These settings remove browser defaults. Usually you never need to edit this section. ============================================================ */ *{ margin:0; padding:0; box-sizing:border-box; } /* ============================================================ 02. WEBSITE COLOURS Change these colours if you ever want a different theme. ============================================================ */ :root{ --background:black; --text:white; --silver:#d9d9d9; --gold:#FFD700; --glow:white; } /* ============================================================ 03. BODY Controls the entire page. ============================================================ */ body{ background:var(--background); color:var(--text); font-family:'Poppins',sans-serif; overflow-x:hidden; } /* ========================================== MOBILE / DESKTOP ========================================== */ #desktop-message{ display:none; } @media screen and (min-width:700px){ body{ display:flex; justify-content:center; align-items:center; height:100vh; overflow:hidden; } #desktop-message{ display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; position:fixed; top:0; left:0; width:100%; height:100%; background:black; color:white; z-index:999999; } #intro, .age-section, .letter, .photobooth, .movie-wrapper, .final-message{ display:none; } } /* ============================================================ 05. MOBILE DETECTION Don't edit unless you know CSS. ============================================================ */ @media (min-width:700px){ #desktop-message{ display:flex; } #intro, .age-section{ display:none; } } /* ============================================================ 06. INTRO SECTION First thing people see. ============================================================ */ #intro{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:30px; position:relative; } /* ============================================================ 07. MAIN TITLE Happy 18th Birthday Change font size here. ============================================================ */ #typewriter{ font-family:'Cinzel',serif; font-size:3rem; color:white; text-shadow: 0 0 10px white, 0 0 20px white, 0 0 35px silver, 0 0 60px white; } /* ============================================================ 08. NAME Tanatswa Moshiwa ============================================================ */ #intro h2{ margin-top:20px; font-family:'Great Vibes',cursive; font-size:2.3rem; color:white; } /* ============================================================ 09. HERO IMAGE This is your PNG. ============================================================ */ .hero{ margin-top:40px; } /* ============================================================ 10. HERO IMAGE SIZE Change width if needed. ============================================================ */ .hero img{ width:280px; max-width:100%; } /* ============================================================ 11. HERO IMAGE GLOW One of the prettiest parts. Increase blur numbers for an even stronger glow. ============================================================ */ .hero img{ filter: drop-shadow(0 0 20px white) drop-shadow(0 0 40px silver) drop-shadow(0 0 70px white); } /* ============================================================ 12. INTRO TEXT ============================================================ */ .intro-text{ margin-top:40px; font-size:1.2rem; line-height:2; color:white; } /* ============================================================ 13. SCROLL TEXT ============================================================ */ .scroll{ margin-top:60px; font-size:1.3rem; animation:bounce 2s infinite; } /* ============================================================ 14. AGE SECTIONS ============================================================ */ .age-section{ padding:70px 25px; text-align:center; } /* ============================================================ 15. AGE TITLES ============================================================ */ .age-section h2{ font-family:'Cinzel',serif; font-size:2.2rem; margin-bottom:20px; text-shadow: 0 0 10px white, 0 0 30px silver; } /* ============================================================ 16. PARAGRAPHS ============================================================ */ .age-section p{ margin-top:20px; font-size:1rem; line-height:1.9; } /* ============================================================ 17. MEMORY PHOTOS Every normal photo uses this. ============================================================ */ .memory{ width:90%; margin-top:35px; border:8px solid gold; border-radius:12px; box-shadow: 0 0 20px gold, 0 0 40px rgba(255,215,0,.5); } /* ============================================================ 18. BABY PHOTOS Makes baby photos slightly more rounded. ============================================================ */ .baby-photo{ border-radius:20px; } /* ============================================================ 19. FLOATING STARS JavaScript will create stars. ============================================================ */ #stars{ position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:999; } /* ============================================================ 20. STAR STYLE ============================================================ */ .star{ position:absolute; background:white; border-radius:50%; animation:twinkle 4s infinite; } /* ============================================================ 21. FLOATING HEARTS ============================================================ */ #hearts{ position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:998; } /* ============================================================ 22. HEART STYLE ============================================================ */ .heart{ position:absolute; font-size:18px; color:silver; animation:floatHeart 10s linear infinite; opacity:.8; } /* ============================================================ 23. BOUNCE ANIMATION ============================================================ */ @keyframes bounce{ 0%{ transform:translateY(0); } 50%{ transform:translateY(12px); } 100%{ transform:translateY(0); } } /* ============================================================ 24. STAR TWINKLE ============================================================ */ @keyframes twinkle{ 0%{ opacity:.2; transform:scale(.5); } 50%{ opacity:1; transform:scale(1.5); } 100%{ opacity:.2; transform:scale(.5); } } /* ============================================================ 25. HEART FLOATING ============================================================ */ @keyframes floatHeart{ 0%{ transform:translateY(100vh); opacity:0; } 20%{ opacity:1; } 80%{ opacity:1; } 100%{ transform:translateY(-100vh); opacity:0; /* ============================================================ PART 2 Luxury Frames • Letters • Movie Strip • Photo Booth ============================================================ */ /* ============================================================ 26. DIAMOND CHECKER DIVIDER Place this between sections in the HTML:
============================================================ */ .diamond-divider{ height:45px; margin:60px 0; background: repeating-linear-gradient( 45deg, #111 0px, #111 20px, #222 20px, #222 40px); box-shadow: 0 0 20px silver; } /* ============================================================ 27. LUXURY GOLD PHOTO FRAMES Every framed photo should have class="gold-frame" ============================================================ */ .gold-frame{ background:#111; padding:12px; border:5px solid #FFD700; border-radius:10px; box-shadow: 0 0 15px gold, 0 0 35px rgba(255,215,0,.5), inset 0 0 10px rgba(255,255,255,.15); margin:35px auto; width:92%; } /* Photo inside frame */ .gold-frame img{ width:100%; display:block; border-radius:5px; } /* ============================================================ 28. PHOTO HOVER Tiny zoom when tapped. ============================================================ */ .gold-frame img{ transition:.4s; } .gold-frame img:active{ transform:scale(1.03); } /* ============================================================ 29. LETTERS Used for Mom, Dad and Brother. ============================================================ */ .letter{ width:90%; margin:50px auto; padding:25px; background:#141414; border:2px solid silver; border-radius:20px; box-shadow: 0 0 25px rgba(255,255,255,.25); } /* Letter heading */ .letter h2{ font-family:'Great Vibes',cursive; font-size:2.5rem; margin-bottom:15px; text-shadow: 0 0 10px white; } /* Letter paragraph */ .letter p{ font-size:1rem; line-height:2; text-align:left; } /* ============================================================ 30. RIBBONS ============================================================ */ .ribbon{ width:120px; margin:35px auto; display:block; opacity:.9; } /* ============================================================ 31. SILVER BOWS ============================================================ */ .bow{ width:80px; margin:20px auto; display:block; } /* ============================================================ 32. PHOTO BOOTH Age 13 /* ============================================================ PHOTO BOOTH ============================================================ */ .photobooth{ background:white; padding:18px; width:220px; margin:40px auto; border-radius:10px; box-shadow: 0 0 25px silver; } .photobooth img{ display:block; width:100%; aspect-ratio:1 / 1; object-fit:cover; margin-bottom:12px; border-radius:4px; } .photobooth p{ color:black; font-family:'Poppins',sans-serif; font-size:.85rem; text-align:center; margin-top:8px; } /* Each photo */ .photobooth img{ width:100%; margin-bottom:12px; border-radius:4px; /* ============================================================ 33. MOVIE STRIP Age 16 ==========================================================*/ .movie-strip{ display:flex; gap:18px; overflow-x:scroll; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; white-space:nowrap; } .movie-strip::-webkit-scrollbar{ display:none; } /* ============================================================ 34. MOVIE STRIP FADE EDGES ============================================================ */ .movie-wrapper{ position:relative; overflow:hidden; } /* ============================================================ 35. LETTER GLOW ============================================================ */ .letter{ animation:letterGlow 5s infinite alternate; } /* ============================================================ 36. FADE IN ============================================================ */ .fade{ opacity:0; transform:translateY(50px); transition:1s; } .fade.show{ opacity:1; transform:translateY(0); } /* ============================================================ 37. FINAL SECTION ============================================================ */ .final-message{ padding:90px 25px; text-align:center; } /* Big heading */ .final-message h1{ font-size:3rem; font-family:'Cinzel',serif; text-shadow: 0 0 10px white, 0 0 30px silver, 0 0 60px white; } /* Final paragraph */ .final-message p{ margin-top:30px; line-height:2; font-size:1.1rem; } /* ============================================================ 38. REPLAY BUTTON ============================================================ */ .replay{ margin-top:45px; padding:18px 35px; background:black; border:2px solid silver; color:white; font-size:1rem; border-radius:40px; box-shadow: 0 0 20px silver; cursor:pointer; transition:.4s; } /* Button animation */ .replay:hover{ transform:scale(1.08); box-shadow: 0 0 35px white; } /* ============================================================ 39. LETTER ANIMATION ============================================================ */ @keyframes letterGlow{ from{ box-shadow: 0 0 10px silver; } to{ box-shadow: 0 0 35px white; } } /* ============================================================ 40. PHOTO FRAME SHIMMER ============================================================ */ .gold-frame{ animation:goldGlow 4s infinite alternate; } @keyframes goldGlow{ from{ box-shadow: 0 0 15px gold; } to{ box-shadow: 0 0 40px gold, 0 0 70px rgba(255,215,0,.5); } } /* ============================================================ 41. STAR SHOWER Used at the ending animation. ============================================================ */ .star-fall{ position:fixed; top:-20px; width:8px; height:8px; background:white; border-radius:50%; animation:fallStars linear forwards; } @keyframes fallStars{ to{ transform:translateY(120vh); } } /* ============================================================ 42. POPUP Baby photo popup ============================================================ */ .popup{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); background:#111; padding:30px; border:2px solid silver; border-radius:20px; box-shadow: 0 0 35px white; z-index:99999; text-align:center; max-width:85%; } /* Popup text */ .popup h2{ font-size:1.6rem; font-family:'Great Vibes',cursive; } /* ============================================================ END OF PART 2 ============================================================ */ } }