├── css ├── script.js ├── index.html └── style.css └── README.md /css/script.js: -------------------------------------------------------------------------------- 1 | document.querySelectorAll('.toggle-info').forEach(name => { 2 | name.addEventListener('click', () => { 3 | const info = name.nextElementSibling.nextElementSibling; 4 | info.classList.toggle('show'); 5 | }); 6 | }); 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Koushika's Creative Squad 2 | Welcome to Koushika's Creative Squad! This is a JavaScript + CSS powered showcase of my work, skills, and projects. The website dynamically shows info upon touching/clicking the name, with sleek animations and a futuristic, glowing design. 3 | 4 | ✨ Features: 5 | Neon Glow Title: A glowing, pulsating main title that adds a touch of magic. 6 | 7 | Magic Cards: Interactive cards that display your name, role, and a personal or project description. 8 | 9 | Glassmorphism Design: Elegant, frosted glass effect with background blur on the cards. 10 | 11 | Smooth Hover and Transition Effects: Cards scale and glow upon hover for added interactivity. 12 | 13 | Toggle Info: Click/tap on a name to reveal detailed information, powered by JavaScript. 14 | 15 | Mobile Responsive: The layout adjusts to fit different screen sizes with a flexible design. 16 | 17 | 📦 Installation: 18 | Clone this repository: 19 | 20 | bash 21 | Copy 22 | Edit 23 | git clone https://github.com/koushika31/creative-squad-showcase.git 24 | Navigate into the directory: 25 | 26 | bash 27 | Copy 28 | Edit 29 | cd creative-squad-showcase 30 | Open index.html in your browser to view the project. 31 | 32 | Optionally, serve the project using a local server or deploy it online for others to view! 33 | 34 | 🚀 Technologies Used: 35 | HTML5: Structure and content of the website. 36 | 37 | CSS3: Styling, animations, and layout. Includes advanced effects like glassmorphism and neon glow. 38 | 39 | JavaScript: Interactivity, including showing/hiding additional information when clicking the names. 40 | 41 | Google Fonts: Used Orbitron font for a futuristic look. 42 | 43 | 🛠 How to Contribute: 44 | Fork the repository. 45 | 46 | Make your changes and create a pull request. 47 | 48 | For bug reports or suggestions, please open an issue in the Issues tab. 49 | 50 | 🖋 Author: 51 | Koushika R.M 52 | 53 | B.Tech IT | Developer & Designer 54 | Based in Karur 💻 55 | -------------------------------------------------------------------------------- /css/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 🌟 Koushika's Magic Showcase 7 | 8 | 9 | 10 | 11 | 12 |

🌟 Koushika's Creative Squad

13 |
14 |
15 |
16 |

Koushika R.M

17 |

Ambitious Coder | Karur 🧠

18 | 19 |
20 |
21 |
22 |
23 |

Smart Canteen 🍽️

24 |

Major Project | Food Tech 💡

25 | 26 |
27 |
28 |
29 |
30 |

Expiry Alert System ⏰

31 |

Spring Boot + MySQL

32 | 33 |
34 |
35 |
36 |
37 |

Skills 💻

38 |

CSS ✨ Java 🧩 DBMS 📊

39 | 40 |
41 |
42 |
43 | 44 | 45 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: 'Orbitron', sans-serif; 5 | background: linear-gradient(135deg, #0f0f0f, #1a1a1a); 6 | color: #fff; 7 | overflow-x: hidden; 8 | } 9 | 10 | .main-title { 11 | text-align: center; 12 | font-size: 3rem; 13 | margin-top: 40px; 14 | color: #00ffe1; 15 | text-shadow: 0 0 5px #00ffe1, 0 0 20px #00ffe1; 16 | animation: glowPulse 2s infinite alternate; 17 | } 18 | 19 | @keyframes glowPulse { 20 | from { 21 | text-shadow: 0 0 5px #00ffe1, 0 0 20px #00ffe1; 22 | } 23 | to { 24 | text-shadow: 0 0 20px #00ffe1, 0 0 40px #00ffe1; 25 | } 26 | } 27 | 28 | .card-deck { 29 | display: flex; 30 | flex-wrap: wrap; 31 | justify-content: center; 32 | gap: 30px; 33 | margin: 50px auto; 34 | padding: 20px; 35 | } 36 | 37 | .magic-card { 38 | background: rgba(255, 255, 255, 0.1); 39 | border: 1px solid rgba(255, 255, 255, 0.2); 40 | border-radius: 20px; 41 | backdrop-filter: blur(15px); 42 | box-shadow: 0 8px 32px rgba(0, 255, 255, 0.2); 43 | width: 280px; 44 | padding: 25px; 45 | transition: transform 0.3s ease, box-shadow 0.3s ease; 46 | position: relative; 47 | } 48 | 49 | .magic-card:hover { 50 | transform: scale(1.05); 51 | box-shadow: 0 10px 40px rgba(0, 255, 255, 0.5); 52 | } 53 | 54 | .card-content h2 { 55 | color: #ff66ff; 56 | font-size: 1.5rem; 57 | margin-bottom: 10px; 58 | cursor: pointer; 59 | transition: color 0.3s; 60 | } 61 | 62 | .card-content h2:hover { 63 | color: #ffffff; 64 | text-shadow: 0 0 10px #ff66ff; 65 | } 66 | 67 | .card-content p { 68 | font-size: 1rem; 69 | color: #ccc; 70 | } 71 | 72 | .extra-info { 73 | margin-top: 15px; 74 | color: #a0fefe; 75 | font-size: 0.9rem; 76 | line-height: 1.6; 77 | opacity: 0; 78 | max-height: 0; 79 | overflow: hidden; 80 | transition: opacity 0.5s ease, max-height 0.5s ease; 81 | } 82 | 83 | .extra-info.show { 84 | opacity: 1; 85 | max-height: 200px; 86 | } 87 | 88 | @media screen and (max-width: 768px) { 89 | .card-deck { 90 | flex-direction: column; 91 | align-items: center; 92 | } 93 | 94 | .main-title { 95 | font-size: 2.2rem; 96 | } 97 | } 98 | --------------------------------------------------------------------------------