A collection of mini web development projects built with HTML, CSS, and JavaScript. Includes an ID card, portfolio card, student registration form, calculator, counter, to-do app, vote eligibility checker, grade calculator, CSS animations, and hover card effects — perfect for learning frontend fundamentals.
- HTML5
- CSS3 (Animations, Flexbox, Grid, Glassmorphism)
- Vanilla JavaScript (DOM Manipulation, Events)
| # | File | Description |
|---|---|---|
| 1 | iddd.html |
🪪 College ID Card — A realistic student ID card for Govt. Engineering College, Hassan with student photo, name, USN, barcode, signatures, college logo, and validity section. Styled with CSS using a dark blue/green color theme. |
| 2 | portfolio.html |
💼 Portfolio Card — An animated personal portfolio card with profile photo, name, bio, skill badges (HTML, CSS, Python, Java, SQL, Git, Linux), Download CV & Contact buttons. Features floating animation, glow border on hover, and smooth transitions. |
| 3 | REAL REGIATER .html |
📋 Student Registration Form — A complete form with personal info (name, email, phone, DOB, gender), address fields, academic info (student ID, program, year, GPA), language checkboxes, comments textarea, and terms agreement. Beautiful anime-styled background. |
| 4 | simplecalculator.html |
🧮 Simple Calculator — A two-number calculator with Add, Subtract, Multiply, and Divide operations. Dark themed UI with colorful gradient buttons and purple gradient background. |
| 5 | studentcalc.html |
📊 Student Grade Calculator — Enter marks (0–100) and get your grade (A–E). Includes a grade reference table. Glassmorphism UI with gradient background. |
| 6 | counter.html |
🔢 Counter App — A simple increment, decrement, and reset counter with colorful gradient buttons. Clean white card design on a purple gradient background. |
| 7 | todo.html |
✅ To-Do List App — Add tasks dynamically and remove them with a button click. Animated gradient background with glassmorphism styling. |
| 8 | voteeligibility.html |
🗳️ Vote Eligibility Checker — Enter your age to check if you're eligible to vote (18+). Animated gradient background with glassmorphism card and smooth hover effects. |
| 9 | password.html |
🔐 Password Toggle — A password input field with a show/hide toggle button using JavaScript DOM manipulation. Purple gradient background. |
| 10 | box.html |
🎨 CSS Box Animation — A box with continuous CSS keyframe animation (rotation, translation, border-radius morphing) and hover scale effect. Dark gradient background with neon glow. |
| 11 | ai description.HTML |
🤖 CSS Mini Project Page — Demonstrates hover buttons with lift effect, an AI-themed hover card with image zoom and slide-up info panel, and a navigation bar with hover color transitions. |
| 12 | description.html |
📄 AI Info Page + Student Card — An information page about Artificial Intelligence with an image, description text, hover button, and a basic student card section. |
| 13 | true.html |
🃏 Hover Cards Gallery — Three image cards (Mountain View, Beach Side, City Lights) with hover effects — image zoom, card lift, and slide-up content reveal with Explore buttons. |
| File | Description |
|---|---|
ai.jpeg |
AI-themed image used in the mini project page |
barcode.png |
Barcode image for the ID card |
logo.jpg |
College logo for the ID card header |
passoert2.png |
Passport-style photo for the portfolio card |
photo.png |
Student photo for the ID card |
principal.png |
Principal's signature for the ID card |
sinature.png |
Student's signature for the ID card |
- Clone the repository
- Open any
.htmlfile in your browser - No build tools or dependencies needed!
Jayanth P
- 🎓 B.E Computer Science & Engineering
- 🏫 Govt. Engineering College, Mosale Hosahalli, Hassan
- 📧 jayanthpjayanthp055@gmail.com