MY BLOG <title> <style> /* --- 2003-2005 GLOSSY / VICTORY VIBES STYLING --- */ body { /* Light aqua/teal background, often seen in official site backgrounds */ background-color: #a8dadc; background-image: radial-gradient(#ffffff 1px, transparent 1px), radial-gradient(#ffffff 1px, transparent 1px); background-size: 40px 40px; /* Large, subtle polka dots */ font-family: 'Comic Sans MS', cursive, sans-serif; /* The iconic 2000s font for maximum cuteness */ margin: 0; padding: 10px; color: #333; } /* Main Container: Glossy, chunky border */ #container { max-width: 980px; margin: 0 auto; background-color: #ffffff; border: 10px solid #ff007f; /* Hot Pink Border */ border-radius: 25px; /* Super rounded corners */ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); padding: 20px; } /* HEADER: Bubblegum Title with reflections */ header { text-align: center; padding-bottom: 20px; } h1 { /* Simulating a chunky, glossy font like VAG Rounded */ font-family: 'Arial Black', sans-serif; font-size: 3.5rem; color: #ff007f; /* Deep Pink */ text-shadow: 5px 5px 0px #00ff00, -2px -2px 0px #ffffff; /* Lime Green 3D shadow with a white highlight */ margin: 0; line-height: 1; } .subtitle { font-size: 1.2rem; color: #1d3557; /* Dark Blue */ display: block; margin-top: 5px; text-transform: uppercase; } /* Marquee: A simple header banner */ .marquee-container { background: linear-gradient(90deg, #ffcc00 0%, #ff007f 100%); /* Yellow to Pink Gradient */ color: white; padding: 5px 0; margin: 15px 0; font-weight: bold; border-radius: 10px; box-shadow: inset 0 0 5px rgba(0,0,0,0.5); } /* NAVIGATION: Chunky, Reflective Buttons */ nav { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; } button.nav-btn { background: #457b9d; /* Medium Aqua */ color: white; border: 3px solid #1d3557; /* Darker border */ border-radius: 20px; padding: 8px 18px; font-family: 'Verdana', sans-serif; font-weight: bold; cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"><circle cx="15" cy="15" r="10" fill="lime"/></svg>') 15 15, pointer; /* Custom pointer */ transition: 0.2s; text-shadow: 1px 1px 0px #000; } button.nav-btn:hover { background: #00ff00; /* Lime Green Flash */ color: black; border-color: #ff007f; } button.nav-btn.active { background: #ff007f; /* Hot Pink when active */ border-color: #ffcc00; /* Yellow outline when active */ } /* CONTENT LAYOUT */ #content-display { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 25px; padding-top: 10px; } /* POST CARD */ .post-card { background: #fff; border: 5px dashed #457b9d; /* Aqua dashed border */ padding: 15px; border-radius: 15px; position: relative; transition: transform 0.3s; } .post-card:hover { transform: scale(1.03) rotate(1deg); /* Slight lift and tilt on hover */ box-shadow: 0 5px 15px rgba(255, 0, 127, 0.5); } .post-card img { width: 100%; height: 200px; object-fit: cover; border: 4px solid #ffcc00; /* Yellow Photo Frame */ border-radius: 5px; margin-bottom: 10px; opacity: 0.9; } .post-date { background: #00ff00; /* Lime Green Tag */ color: black; font-size: 0.8rem; display: inline-block; padding: 2px 8px; border-radius: 10px; font-weight: bold; margin-bottom: 8px; } .caption { font-size: 1rem; line-height: 1.4; margin-top: 5px; } .post-tags { font-size: 0.75rem; color: #ff007f; margin-top: 10px; font-weight: bold; } </style> </head> <body> <div id="container"> <header> <h1>MY ONLINE DIARY</h1> <span class="subtitle">SHARING MY LIFE AND ACHIEVEMENTS</span> <div class="marquee-container"> <marquee scrollamount="4"> NEW POSTS! * Stay tuned for future projects * </marquee> </div> </header> <nav id="navbar"> <button class="nav-btn active" onclick="filterPosts('all')">✨ ALL POSTS</button> <button class="nav-btn" onclick="filterPosts('arts')">🎨 ARTS AND MUSIC</button> <button class="nav-btn" onclick="filterPosts('sports')">⚽ SPORTS</button> <button class="nav-btn" onclick="filterPosts('volunteering')">💖 VOLUNTEERING</button> <button class="nav-btn" onclick="filterPosts('travel')">✈️ TRAVELS</button> <button class="nav-btn" onclick="filterPosts('passion')">🌟 PASSION</button> </nav> <div id="content-display"> </div> <footer style="text-align: center; margin-top: 30px; font-size: 0.8rem; color: #457b9d;"> <p>XOXO, Your Favorite Blogger</p> </footer> </div> <script> // =============================================== // 👇👇👇 PASTE YOUR PICS & CAPTIONS HERE 👇👇👇 // =============================================== const myBlogData = [ { category: "arts", date: "DEC 7, 2025", image: "https://images.unsplash.com/photo-1579783902677-fcb69784e183?w=800&auto=format&fit=crop&q=60", caption: "New painting is finished! It's super bright and inspired by a rainbow lollipop. So cute!", tags: "#art #rainbow #glossy" }, { category: "travel", date: "NOV 20, 2025", image: "https://images.unsplash.com/photo-1543781792-71c1b72e507b?w=800&auto=format&fit=crop&q=60", caption: "Just came back from Egypt. So good being back after almost 4 years!!", tags: "#egypt #travel #summer #family #beach" }, { category: "sports", date: "OCT 14, 2023", image: "https://images.unsplash.com/photo-1517649763962-0c623066013b?w=800&auto=format&fit=crop&q=60", caption: "Just did my first aquathlon. Got 5th place but i'll train even harder for the next one!", tags: "#athlete #goals #aquathlon #competition #swimming #running #nolimit" }, { category: "volunteering", date: "DEC 2, 2025", image: "https://images.unsplash.com/photo-1582213782170-6b8969ac70f2?w=800&auto=format&fit=crop&q=60", caption: "Just launched my new non-profit organization for teenagers in Qatar called HBF (Hoping For a Better Future). Join us on social media! @hbf.qa", tags: "#community #non-profit #organization #hbf #youth " }, { category: "projects", date: "JAN 20, 2023", image: "https://images.unsplash.com/photo-1542831371-29b0f74f9449?w=800&auto=format&fit=crop&q=60", caption: "Just started my new website using Java Script. I will be posting regularly about any projects and just my daily life. Stay tuned!", tags: "#coding #javascript #website" }, { category: "passion", date: "JAN 28, 2025", image: "https://images.unsplash.com/photo-1534008139-4457e8412e62?w=800&auto=format&fit=crop&q=60", caption: "Just finished my first day at the THIMUN (The Hague Model United Nations). It's truly an amazing experience and I can't wait for tommorow!", tags: "#internationalrelations #diplomacy #ModelUN #UnitedNations" } ]; // =============================================== // 👆👆👆 END OF EDITING SECTION 👆👆👆 // =============================================== const display = document.getElementById('content-display'); const buttons = document.querySelectorAll('.nav-btn'); function renderPosts(filterCategory) { display.innerHTML = ''; const postsToShow = filterCategory === 'all' ? myBlogData : myBlogData.filter(post => post.category === filterCategory); if (postsToShow.length === 0) { display.innerHTML = '<p style="color:#ff007f; grid-column: 1/-1; text-align:center;">// NO POSTS HERE YET! CHECK BACK LATER // </p>'; return; } postsToShow.forEach(post => { const postHTML = ` <div class="post-card"> <span class="post-date">${post.date}</span> <img src="${post.image}" alt="Blog Image"> <div class="caption">${post.caption}</div> <div class="post-tags">${post.tags}</div> </div> `; display.innerHTML += postHTML; }); } function filterPosts(category) { // Update active button state buttons.forEach(btn => btn.classList.remove('active')); event.target.classList.add('active'); // Render content renderPosts(category); } // Initial Load renderPosts('all'); </script> </body> </html>