Posts

Showing posts with the label HTML CSS

Auto Dark Mode Scheduler | Switch Between Light & Dark Automatically | FuzzuTech Project

Image
  Demo : Click Video ðŸ‘‡ðŸ‘‡ðŸ‘‡ 🧩 Key Features: Automatically switches theme based on local time Fully responsive and lightweight Clean UI with modern design Dark mode between 7PM–7AM Light mode during day hours Code : <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1" />     <title>Auto Dark Mode Scheduler</title>     <style>         /* Base Styles */         body {             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;             background-color: #f0f0f0;             color: #222;             transition: background-color 0.8s ease, color 0.8s ease;             margin: 0;   ...

🔥 Responsive Card Grid Using Flexbox | Modern UI Design with Hover Effect

Image
Demo : Click Video ðŸ‘‡ðŸ‘‡ðŸ‘‡ 🎯 Features: ✅ Fully responsive on all devices 📱💻 ✅ Smooth hover effect for a modern look 🔥 ✅ Perfect for portfolios, blogs, and product showcases Code : 📂 Folder Structure: /responsive-card-grid   │── index.html   │── style.css   HTML : <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Responsive Card Grid with Flexbox</title>     <link rel="stylesheet" href="style.css"> </head> <body>     <div class="card-container">         <div class="card">             <img src="https://via.placeholder.com/300" alt="Card Image">             <h2>Card Title 1</h2>             <p>...