├── .github ├── ISSUE_TEMPLATE │ ├── bug.yml │ └── feature.yml ├── PULL_REQUEST_TEMPLATE.md └── workflows │ └── greetings.yml ├── .vscode └── settings.json ├── CONTRIBUTING.md ├── Favicon ├── android-chrome-192x192.png ├── android-chrome-512x512.png ├── apple-touch-icon.png ├── badge.png ├── favicon-16x16.png ├── favicon-32x32.png └── favicon.ico ├── README.md ├── assets ├── icons │ ├── chevron-left.png │ └── chevron-right.png └── images │ └── badge.png ├── close.svg ├── css ├── about.css └── contact.css ├── footer.html ├── homepage ├── images ├── an.png ├── css.png ├── html.png ├── js.png ├── mo.png ├── node.png └── react.png ├── index.html ├── js ├── badge-list.js ├── typing-badge-title.js └── typing.js ├── login.html ├── menu.svg ├── package-lock.json ├── pages ├── about.html ├── badges.html └── contact.html ├── sigin.html └── styles.css /.github/ISSUE_TEMPLATE/bug.yml: -------------------------------------------------------------------------------- 1 | name: ​🐞 Bug 2 | description: Report an issue to help us improve the project. 3 | title: '[BUG] ' 4 | labels: ["bug"] 5 | body: 6 | - type: textarea 7 | attributes: 8 | label: Description 9 | id: description 10 | description: A brief description of the issue or bug you are facing, also include what you tried and what didn't work. 11 | validations: 12 | required: false 13 | - type: textarea 14 | attributes: 15 | label: Screenshots 16 | id: screenshots 17 | description: Please add screenshots if applicable 18 | validations: 19 | required: false 20 | - type: textarea 21 | attributes: 22 | label: Any additional information? 23 | id: extrainfo 24 | description: Any additional information or Is there anything we should know about this bug? 25 | validations: 26 | required: false 27 | - type: dropdown 28 | id: browsers 29 | attributes: 30 | label: What browser are you seeing the problem on? 31 | multiple: true 32 | options: 33 | - Firefox 34 | - Chrome 35 | - Safari 36 | - Microsoft Edge 37 | - type: checkboxes 38 | id: no-duplicate-issues 39 | attributes: 40 | label: 'Checklist' 41 | options: 42 | - label: 'I have checked the existing issues' 43 | required: true 44 | 45 | - label: 'I have read the [Contributing Guidelines](https://github.com/rajatuiwebdev/badge-website/blob/main/CONTRIBUTING.md)' 46 | required: true 47 | - label: "I'm a GSSoC'24-Extd contributor" 48 | - label: "I'm a Hacktoberfest'24 contributor" 49 | 50 | - label: 'I am willing to work on this issue (optional)' 51 | required: false -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature.yml: -------------------------------------------------------------------------------- 1 | name: Feature Request 💡 2 | description: Have any new idea or new feature for Canvas-Editor? Please suggest! 3 | title: "[Feat]" 4 | labels: [enhancement] 5 | body: 6 | - type: textarea 7 | id: description 8 | attributes: 9 | label: Description 10 | description: A clear and concise description of any alternative solution or features you've considered. 11 | validations: 12 | required: true 13 | - type: textarea 14 | id: screenshots 15 | attributes: 16 | label: Screenshots 17 | description: Please add screenshots if applicable 18 | validations: 19 | required: false 20 | - type: checkboxes 21 | id: no-duplicate-issues 22 | attributes: 23 | label: "Checklist" 24 | options: 25 | - label: "I have checked the existing issues" 26 | required: true 27 | 28 | - label: "I have read the [Contributing Guidelines](https://github.com/rajatuiwebdev/badge-website/blob/main/CONTRIBUTING.md)" 29 | required: true 30 | - label: "I'm a GSSoC'24-Extd contributor" 31 | - label: "I'm a Hacktoberfest'24 contributor" 32 | 33 | - label: "I am willing to work on this issue (optional)" 34 | required: false 35 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## What does this PR do? 2 | 3 | 4 | 5 | Fixes #(issue) 6 | 7 | 8 | 9 | ## Type of change 10 | 11 | 12 | 13 | - Bug fix (non-breaking change which fixes an issue) 14 | - Chore (refactoring code, technical debt, workflow improvements) 15 | - New feature (non-breaking change which adds functionality) 16 | - Breaking change (fix or feature that would cause existing functionality to not work as expected) 17 | - This change requires a documentation update 18 | 19 | ## How should this be tested? 20 | 21 | 22 | 23 | - [ ] Test A 24 | - [ ] Test B 25 | 26 | ## Mandatory Tasks 27 | 28 | - [ ] Make sure you have self-reviewed the code. A decent size PR without self-review might be rejected. -------------------------------------------------------------------------------- /.github/workflows/greetings.yml: -------------------------------------------------------------------------------- 1 | name: Greetings 2 | 3 | on: [pull_request_target, issues] 4 | 5 | jobs: 6 | greeting: 7 | runs-on: ubuntu-latest 8 | permissions: 9 | issues: write 10 | pull-requests: write 11 | steps: 12 | - uses: actions/first-interaction@v1 13 | with: 14 | repo-token: ${{ secrets.GITHUB_TOKEN }} 15 | issue-message: "👋 Thank you @${{ github.actor }} for raising an issue! We appreciate your effort in helping us improve. Our team will review it shortly. Stay tuned!" 16 | pr-message: " 🎉 Thank you @${{ github.actor }} for your contribution! Your pull request has been submitted successfully. A maintainer will review it as soon as possible. We appreciate your support in making this project better" -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # please read the contribution rules before making a contribution 2 | 3 | **1.** Fork [this](https://github.com/rajatuiwebdev/badge-website.git) repository. 4 | 5 | **2.** Clone your forked copy of the project. 6 | 7 | ``` 8 | git clone https://github.com//badge-website.git 9 | ``` 10 | 11 | **3.** Navigate to the project directory :file_folder: . 12 | 13 | ``` 14 | cd badge-website 15 | ``` 16 | 17 | **4.** Add a reference(remote) to the original repository. 18 | 19 | ``` 20 | git remote add upstream https://github.com/rajatuiwebdev/badge-website.git 21 | ``` 22 | 23 | **5.** Check the remotes for this repository. 24 | ``` 25 | git remote -v 26 | ``` 27 | 28 | **6.** Always take a pull from the upstream repository to your master branch to keep it Updated from the latest updated/changes made in repository. 29 | 30 | ``` 31 | git pull upstream main 32 | ``` 33 | 34 | **7.** Create a new branch. 35 | 36 | ``` 37 | git checkout -b 38 | ``` 39 | 40 | **8.** Perform your desired changes to the code base. 41 | 42 | 43 | **9.** Track your changes:heavy_check_mark: . 44 | 45 | ``` 46 | git add . 47 | ``` 48 | 49 | **10.** Commit your changes . 50 | 51 | ``` 52 | git commit -m "Relevant message" 53 | ``` 54 | 55 | **11.** Push the committed changes in your feature branch to your remote repo. 56 | ``` 57 | git push -u origin 58 | ``` 59 | 60 | **12.** To create a pull request, click on `compare and pull requests`. Please ensure you compare your feature branch to the desired branch of the repository you are supposed to make a PR to. 61 | 62 | 63 | **13.** Add appropriate title and description to your pull request explaining your changes and efforts done. 64 | 65 | 66 | **14.** Click on `Create Pull Request`. 67 | 68 | 69 | **15** Wait for it to be reviewed and accepted. 70 | -------------------------------------------------------------------------------- /Favicon/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rajatrajputdev/badge-website/f731c646baecc46797969cb01c7a8486b1d684a8/Favicon/android-chrome-192x192.png -------------------------------------------------------------------------------- /Favicon/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rajatrajputdev/badge-website/f731c646baecc46797969cb01c7a8486b1d684a8/Favicon/android-chrome-512x512.png -------------------------------------------------------------------------------- /Favicon/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rajatrajputdev/badge-website/f731c646baecc46797969cb01c7a8486b1d684a8/Favicon/apple-touch-icon.png -------------------------------------------------------------------------------- /Favicon/badge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rajatrajputdev/badge-website/f731c646baecc46797969cb01c7a8486b1d684a8/Favicon/badge.png -------------------------------------------------------------------------------- /Favicon/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rajatrajputdev/badge-website/f731c646baecc46797969cb01c7a8486b1d684a8/Favicon/favicon-16x16.png -------------------------------------------------------------------------------- /Favicon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rajatrajputdev/badge-website/f731c646baecc46797969cb01c7a8486b1d684a8/Favicon/favicon-32x32.png -------------------------------------------------------------------------------- /Favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rajatrajputdev/badge-website/f731c646baecc46797969cb01c7a8486b1d684a8/Favicon/favicon.ico -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

Badge Website

Badge

View Demo · Report Bug · Request Feature

2 | 3 | 4 | Demo 5 | Visit our website via the link: Badge Website 6 | 7 | 8 | 9 | Introduction 10 | Simple website to showcase a badge to other people and to yourself. Feel free to contribute. Part of Hacktoberfest 2024. 11 | 12 | This project is built using HTML, CSS, and JavaScript. These core web development technologies enable a responsive, interactive, and visually appealing website. HTML provides the structure, CSS handles the styling, and JavaScript adds dynamic functionality to enhance user experience. 13 | 14 | Contributors 15 | This project exists thanks to all the people who contribute. [Contribute]. 16 | 17 | 18 | -------------------------------------------------------------------------------- /assets/icons/chevron-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rajatrajputdev/badge-website/f731c646baecc46797969cb01c7a8486b1d684a8/assets/icons/chevron-left.png -------------------------------------------------------------------------------- /assets/icons/chevron-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rajatrajputdev/badge-website/f731c646baecc46797969cb01c7a8486b1d684a8/assets/icons/chevron-right.png -------------------------------------------------------------------------------- /assets/images/badge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rajatrajputdev/badge-website/f731c646baecc46797969cb01c7a8486b1d684a8/assets/images/badge.png -------------------------------------------------------------------------------- /close.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css/about.css: -------------------------------------------------------------------------------- 1 | .about-section { 2 | margin-top: 70px; 3 | padding-top: 40px; 4 | background: linear-gradient(135deg, rgba(28, 31, 36, 0.8), rgba(45, 59, 69, 0.8), rgba(0, 0, 0, 0.8)); 5 | color: #dfe1e5; 6 | text-align: center; 7 | height: 82vh; 8 | background-repeat: no-repeat; 9 | background-size: cover; 10 | position: relative; 11 | overflow: hidden; 12 | } 13 | 14 | .about-section h2 { 15 | font-size: 36px; 16 | margin-bottom: 20px; 17 | } 18 | 19 | .about-section p { 20 | font-size: 18px; 21 | line-height: 1.6; 22 | max-width: 800px; 23 | margin: 0 auto 20px auto; 24 | } 25 | 26 | .about-section a { 27 | display: inline-block; 28 | padding: 10px 20px; 29 | background-color: #007BFF; 30 | color: white; 31 | text-decoration: none; 32 | border-radius: 5px; 33 | transition: background-color 0.3s; 34 | } 35 | 36 | .about-section a:hover { 37 | background-color: #0056b3; 38 | } 39 | -------------------------------------------------------------------------------- /css/contact.css: -------------------------------------------------------------------------------- 1 | .container { 2 | max-width: 500px; 3 | width: 100%; 4 | margin: 0 auto; 5 | } 6 | 7 | #contact { 8 | padding: 30px; 9 | margin: 50px 0; 10 | background: linear-gradient(300deg ,#00435f,#369ae6 ,rgb(164, 53, 161)); 11 | background-size: 180% 180%; 12 | animation: gradient-animation 6s ease infinite; 13 | box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); 14 | backdrop-filter: blur(4px); 15 | border-radius: 10px; 16 | border: 1px solid rgba(255, 255, 255, 0.18); 17 | } 18 | 19 | @keyframes gradient-animation { 20 | 0%{ 21 | background-position: 0% 50%; 22 | } 23 | 50%{ 24 | background-position: 100% 50%; 25 | } 26 | 100%{ 27 | background-position: 0% 50%; 28 | } 29 | } 30 | 31 | #contact h3 { 32 | color: white; 33 | display: block; 34 | font-size: 30px; 35 | font-weight: 300; 36 | margin-bottom: 10px; 37 | text-align: center; 38 | } 39 | 40 | fieldset { 41 | border: medium none !important; 42 | margin: 0 0 10px; 43 | min-width: 100%; 44 | padding: 0; 45 | width: 100%; 46 | } 47 | 48 | fieldset label { 49 | color: white; 50 | } 51 | 52 | #contact input[type="text"], 53 | #contact input[type="email"], 54 | #contact textarea { 55 | width: 100%; 56 | border: 1px solid #ccc; 57 | background: #FFF; 58 | margin: 5px 0 10px; 59 | padding: 10px; 60 | border-radius: 20px; 61 | } 62 | 63 | #contact input[type="text"]:hover, 64 | #contact input[type="email"]:hover, 65 | #contact textarea:hover { 66 | border: 1px solid #aaa; 67 | } 68 | 69 | #contact textarea { 70 | height: 100px; 71 | max-width: 100%; 72 | resize: none; 73 | } 74 | 75 | #contact button[type="submit"] { 76 | cursor: pointer; 77 | width: 30%; 78 | border: none; 79 | background: #00b439; 80 | color: #FFF; 81 | margin: 0 0 5px; 82 | padding: 10px; 83 | font-size: 15px; 84 | border-radius: 20px; 85 | } 86 | 87 | #contact button[type="submit"]:hover { 88 | background: #348cf1; 89 | transition: background-color 0.3s ease-in-out; 90 | } 91 | 92 | #contact button[type="submit"]:active { 93 | box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); 94 | } 95 | 96 | #contact input:focus, 97 | #contact textarea:focus { 98 | outline: 0; 99 | border: 1px solid #aaa; 100 | } -------------------------------------------------------------------------------- /footer.html: -------------------------------------------------------------------------------- 1 | 17 | -------------------------------------------------------------------------------- /homepage: -------------------------------------------------------------------------------- 1 | 2 | 3 | Badge Website 4 | 5 | 6 | 113 | 114 | 115 |
116 |
117 | Badge icon 118 | Badge Website 119 |
120 |
121 | Home 122 | About 123 | Contact 124 | Badges 125 |
126 |
127 |
128 |
129 | Season of AI Microsoft Learn Newcomer badge 130 |
131 |

Season of AI

132 |

Awarded to: hello.rajput@gmail.com

133 |

Issued on: Jul 28, 2023 at 1:11 AM

134 |

Download Badge

135 | 139 |
140 |
141 |
142 | Season of AI Microsoft Learn Newcomer badge 143 |
144 |

Season of AI

145 |

Awarded to: hello.rajput@gmail.com

146 |

Issued on: Jul 28, 2023 at 1:11 AM

147 |

Download Badge

148 | 152 |
153 |
154 |
155 | 156 | 157 | -------------------------------------------------------------------------------- /images/an.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rajatrajputdev/badge-website/f731c646baecc46797969cb01c7a8486b1d684a8/images/an.png -------------------------------------------------------------------------------- /images/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rajatrajputdev/badge-website/f731c646baecc46797969cb01c7a8486b1d684a8/images/css.png -------------------------------------------------------------------------------- /images/html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rajatrajputdev/badge-website/f731c646baecc46797969cb01c7a8486b1d684a8/images/html.png -------------------------------------------------------------------------------- /images/js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rajatrajputdev/badge-website/f731c646baecc46797969cb01c7a8486b1d684a8/images/js.png -------------------------------------------------------------------------------- /images/mo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rajatrajputdev/badge-website/f731c646baecc46797969cb01c7a8486b1d684a8/images/mo.png -------------------------------------------------------------------------------- /images/node.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rajatrajputdev/badge-website/f731c646baecc46797969cb01c7a8486b1d684a8/images/node.png -------------------------------------------------------------------------------- /images/react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rajatrajputdev/badge-website/f731c646baecc46797969cb01c7a8486b1d684a8/images/react.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Badge Website 7 | 8 | 9 | 13 | 18 | 24 | 30 | 31 | 32 | 33 | 34 | 35 |
36 |
37 | 41 | 49 |
50 |
51 | 52 |
53 |
54 |
55 | Badge Image 59 |
60 |

Season of AI | Beginner AI Learner

61 |

Awarded to: hello.rajat.rajput@gmail.com

62 |

63 | Issued on: Jul 28, 2024 at 64 | 1:11 AM 65 |

66 |
67 |
68 | Download Badge 71 |
72 | 96 |
97 |
98 | 99 |
100 |
101 | Badge Image 105 |
106 |

Season of AI | Intermediate AI Learner

107 |

Awarded to: example.user@example.com

108 |

109 | Issued on: Sep 17, 2024 at 110 | 3:55 PM 111 |

112 |
113 |
114 | Download Badge 117 |
118 | 142 |
143 |
144 |
145 |
146 | Badge Image 150 |
151 |

Season of AI | Intermediate AI Learner

152 |

Awarded to: example.user@example.com

153 |

154 | Issued on: Sep 17, 2024 at 155 | 3:55 PM 156 |

157 |
158 |
159 | Download Badge 162 |
163 | 187 |
188 |
189 |
190 |
191 | Badge Image 195 |
196 |

Season of AI | Intermediate AI Learner

197 |

Awarded to: example.user@example.com

198 |

199 | Issued on: Sep 17, 2024 at 200 | 3:55 PM 201 |

202 |
203 |
204 | Download Badge 207 |
208 | 232 |
233 |
234 |
235 |
236 | Badge Image 240 |
241 |

Season of AI | Intermediate AI Learner

242 |

Awarded to: example.user@example.com

243 |

244 | Issued on: Sep 17, 2024 at 245 | 3:55 PM 246 |

247 |
248 |
249 | Download Badge 252 |
253 | 277 |
278 |
279 | 280 |
281 |
282 | Badge Image 286 |
287 |

Season of AI | Advance AI Learner

288 |

Awarded to: example.user@example.com

289 |

290 | Issued on: Dec 17, 2024 at 291 | 8:55 PM 292 |

293 |
294 |
295 | Download Badge 298 |
299 | 323 |
324 |
325 |
326 | 327 | 346 | 347 |
348 |
349 |
350 |

351 | Follow us on 352 | Github 353 | | 354 | LinkedIn 355 |

356 |

© 2024 Rajat Rajput | All rights reserved

357 |
358 |
359 |
360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | -------------------------------------------------------------------------------- /js/badge-list.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | const slider = document.getElementById('badge-slider'); 4 | 5 | badgeList.forEach((badge) => { 6 | const slide = document.createElement('div'); 7 | slide.classList.add('badge-slide'); 8 | 9 | slide.innerHTML = ` 10 |
11 | Badge Image 12 |
13 |

${badge.title}

14 |

Awarded to: ${badge.awardedTo}

15 |

Issued on: ${badge.issuedOn} at ${badge.issuedAt}

16 |
17 |
18 | Download QR Code 19 | 20 |
21 |
22 | Download Badge 23 |
24 | 36 |
37 | `; 38 | 39 | slider.appendChild(slide); 40 | }); 41 | 42 | let currentIndex = 0; 43 | 44 | document.getElementById('next-btn').addEventListener('click', () => { 45 | if (currentIndex < badgeList.length - 1) { 46 | currentIndex++; 47 | } else { 48 | currentIndex = 0; 49 | } 50 | updateSliderPosition(); 51 | }); 52 | 53 | document.getElementById('prev-btn').addEventListener('click', () => { 54 | if (currentIndex > 0) { 55 | currentIndex--; 56 | } else { 57 | currentIndex = badgeList.length - 1; 58 | } 59 | updateSliderPosition(); 60 | }); 61 | 62 | function updateSliderPosition() { 63 | slider.style.transform = `translateX(-${currentIndex * 100}%)`; 64 | } -------------------------------------------------------------------------------- /js/typing-badge-title.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("DOMContentLoaded", function() { 2 | const badgeTitles = document.querySelectorAll('.typingeffect'); 3 | let typingSpeed = 100; // Speed of typing 4 | let pauseBetweenBadges = 2000; // Pause between badges when typing completes 5 | 6 | badgeTitles.forEach((badgeTitle, index) => { 7 | const badgeTitleText = badgeTitle.innerText; 8 | badgeTitle.innerText = ''; 9 | let charIndex = 0; 10 | let typingDirection = 1; 11 | 12 | // Start typing effect for each badge 13 | function typeEffect() { 14 | if (typingDirection === 1 && charIndex < badgeTitleText.length) { 15 | badgeTitle.innerText = badgeTitleText.substring(0, charIndex + 1); 16 | charIndex++; 17 | setTimeout(typeEffect, typingSpeed); 18 | } else if (typingDirection === -1 && charIndex > 0) { 19 | badgeTitle.innerText = badgeTitleText.substring(0, charIndex - 1); 20 | charIndex--; 21 | setTimeout(typeEffect, typingSpeed); 22 | } else { 23 | // Reverse typing direction once the typing/deleting is done 24 | typingDirection *= -1; 25 | 26 | // Pause before switching direction 27 | setTimeout(typeEffect, typingDirection === 1 ? pauseBetweenBadges : 500); 28 | } 29 | } 30 | 31 | // Delay starting the typing effect for each badge to create sequential typing 32 | setTimeout(typeEffect, index * (badgeTitleText.length * typingSpeed + pauseBetweenBadges)); 33 | }); 34 | }); 35 | 36 | // QR Code Generation 37 | const qrCodeCanvas = document.getElementById('qr-code-canvas'); 38 | 39 | // Badge details 40 | const recipientEmail = 'hello.rajat.rajput@gmail.com'; 41 | const issuedDate = 'Jul 28, 2024'; 42 | const badgeLink = `https://ai.mlsc-amity.tech?badge=${recipientEmail}&issued=${issuedDate}`; 43 | 44 | // Create QR code 45 | const qrCode = new QRious({ 46 | element: qrCodeCanvas, 47 | size: 200, 48 | value: `Badge awarded to: ${recipientEmail}\nIssued on: ${issuedDate}\nLink: ${badgeLink}`, 49 | }); 50 | 51 | // Download QR button functionality 52 | document.getElementById('download-qr-button').addEventListener('click', function () { 53 | const link = document.createElement('a'); 54 | link.href = qrCodeCanvas.toDataURL(); 55 | link.download = 'badge-qr.png'; 56 | link.click(); 57 | }); 58 | 59 | function createConfetti() { 60 | const totalConfetti = 100; // Total number of confetti pieces 61 | const confettiColors = ['#0d6efd', '#0a58ca', '#007bff', '#6cb2eb', '#81d4fa']; // Blue color palette 62 | 63 | for (let i = 0; i < totalConfetti; i++) { 64 | const confetti = document.createElement('div'); 65 | confetti.classList.add('confetti'); 66 | 67 | // Assign random sizes, colors, and positions for confetti pieces 68 | const size = Math.random() * 10 + 5 + 'px'; 69 | const leftPosition = Math.random() * 100 + 'vw'; 70 | const animationDuration = Math.random() * 3 + 2 + 's'; 71 | const animationDelay = Math.random() * 2 + 's'; 72 | const color = confettiColors[Math.floor(Math.random() * confettiColors.length)]; 73 | 74 | confetti.style.width = size; 75 | confetti.style.height = size; 76 | confetti.style.left = leftPosition; 77 | confetti.style.backgroundColor = color; 78 | confetti.style.animationDuration = animationDuration; 79 | confetti.style.animationDelay = animationDelay; 80 | 81 | document.body.appendChild(confetti); 82 | 83 | // Remove confetti from DOM after it falls 84 | setTimeout(() => { 85 | confetti.remove(); 86 | }, parseFloat(animationDuration) * 1000); // Convert animation duration from seconds to milliseconds 87 | } 88 | } 89 | 90 | function getRandomColor() { 91 | // Blue color palette for confetti 92 | const colorsBlu = ['#0d6efd', '#0a58ca', '#007bff', '#6cb2eb', '#81d4fa']; 93 | return colorsBlu[Math.floor(Math.random() * colorsBlu.length)]; 94 | } 95 | 96 | // Trigger the confetti on page load 97 | window.addEventListener('load', () => { 98 | createConfetti(); 99 | }); 100 | 101 | // Search bar functionality 102 | const searchInput = document.getElementById('badge-search'); 103 | const searchButton = document.getElementById('search-button'); 104 | const badges = document.querySelectorAll('.badge-item'); 105 | 106 | function filterBadges() { 107 | const searchQuery = searchInput.value.toLowerCase(); 108 | 109 | badges.forEach(badge => { 110 | const badgeTitle = badge.querySelector('.badge-details h2').innerText.toLowerCase(); 111 | 112 | if (badgeTitle.includes(searchQuery)) { 113 | badge.style.display = 'block'; // Show the badge if it matches 114 | } else { 115 | badge.style.display = 'none'; // Hide the badge if it doesn't match 116 | } 117 | }); 118 | } 119 | 120 | // Add event listener for search button click 121 | searchButton.addEventListener('click', function () { 122 | filterBadges(); 123 | }); 124 | 125 | searchInput.addEventListener('keyup', function (event) { 126 | if (event.key === 'Enter') { 127 | filterBadges(); 128 | } 129 | }); -------------------------------------------------------------------------------- /js/typing.js: -------------------------------------------------------------------------------- 1 | const badgeTitle = document.getElementById('typingeffect'); 2 | const badgeTitleText = badgeTitle.innerText; 3 | badgeTitle.innerText = ''; 4 | let index = 0; 5 | let typingSpeed = 100; 6 | let start = true; 7 | 8 | function typeEffect() { 9 | if (start) { 10 | if (index < badgeTitleText.length) { 11 | badgeTitle.innerText = badgeTitleText.substring(0, index+1); 12 | index++; 13 | setTimeout(typeEffect, typingSpeed); 14 | } else { 15 | start = false; 16 | setTimeout(typeEffect, 2000); 17 | } 18 | } else { 19 | if (index > 0) { 20 | badgeTitle.innerText = badgeTitleText.substring(0, index - 1); 21 | index--; 22 | setTimeout(typeEffect, typingSpeed); 23 | } else { 24 | start = true; 25 | setTimeout(typeEffect, 500); 26 | } 27 | } 28 | } 29 | 30 | window.onload = typeEffect; 31 | 32 | function createConfetti() { 33 | const confettiContainer = document.createDocumentFragment(); 34 | const totalDuration = 5000; // 10 seconds in milliseconds 35 | const intervalTime = 100; // Time in milliseconds to create a new confetti 36 | const totalConfetti = (totalDuration / intervalTime) * 3; // Total confetti to be created in 10 seconds 37 | 38 | let count = 0; 39 | const intervalId = setInterval(() => { 40 | const confetti = document.createElement('div'); 41 | confetti.classList.add('confetti'); 42 | confetti.style.backgroundColor = getRandomColor(); 43 | confetti.style.left = `${Math.random() * 100}vw`; 44 | 45 | // Random fall duration for each confetti piece 46 | const fallDuration = Math.random() * 3 + 1; 47 | confetti.style.animationDuration = `${fallDuration}s, ${fallDuration * 0.5}s`; // Match fade-out duration 48 | 49 | confettiContainer.appendChild(confetti); 50 | document.body.appendChild(confetti); 51 | 52 | count++; 53 | if (count >= totalConfetti) { 54 | clearInterval(intervalId); // Stop after creating confetti for 10 seconds 55 | } 56 | }, intervalTime); 57 | } 58 | 59 | function getRandomColor() { 60 | // Red color palette 61 | const colorsRed = [ 62 | '#ff0a54', 63 | '#ff477e', 64 | '#ff7096', 65 | '#ff85a1', 66 | '#fbb1bd', 67 | ]; 68 | // Blue color palette 69 | const colorsBlu = [ 70 | '#0d6efd', 71 | '#0a58ca', 72 | '#007bff', 73 | '#6cb2eb', 74 | '#81d4fa', 75 | ]; 76 | 77 | // populating confetti with blue color 78 | return colorsBlu[Math.floor(Math.random() * colorsBlu.length)]; 79 | } 80 | 81 | window.addEventListener('load', () => { 82 | createConfetti(); 83 | }); 84 | 85 | // Theme toggle functionality 86 | const themeToggleButton = document.getElementById('theme-toggle'); 87 | const body = document.body; 88 | 89 | themeToggleButton.addEventListener('click', () => { 90 | body.classList.toggle('dark-theme'); 91 | const isDarkTheme = body.classList.contains('dark-theme'); 92 | themeToggleButton.innerHTML = isDarkTheme 93 | ? '' 94 | : ''; 95 | }); 96 | 97 | document.addEventListener("DOMContentLoaded", function() { 98 | const sidebar = document.querySelector('.sidebar'); 99 | sidebar.style.display = 'none'; 100 | }); 101 | 102 | function showSidebar() { 103 | const sidebar = document.querySelector('.sidebar'); 104 | sidebar.style.display = 'flex'; // Show the sidebar 105 | } 106 | 107 | function hideSidebar() { 108 | const sidebar = document.querySelector('.sidebar'); 109 | sidebar.style.display = 'none'; // Hide the sidebar 110 | } 111 | 112 | -------------------------------------------------------------------------------- /login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Login Page 7 | 63 | 64 | 65 | lo 66 | 75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "badge-website", 3 | "lockfileVersion": 3, 4 | "requires": true, 5 | "packages": {} 6 | } 7 | -------------------------------------------------------------------------------- /pages/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | About - Badge Website 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 | 25 | 33 |
34 |
35 | 36 |
37 |

About Us

38 |

Welcome to Badge Website, where we celebrate achievements and empower individuals to showcase their skills and growth.

39 |

Our platform offers a unique space to earn, display, and share digital badges that recognize your hard work and dedication.

40 |

Join our community of learners and achievers, and inspire others by sharing your accomplishments in a vibrant and supportive environment.

41 |
42 | 43 |
44 |
45 |

46 | Follow us on 47 | Github | 48 | LinkedIn 49 |

50 |

© 2024 Rajat Rajput | All rights reserved

51 |
52 |
53 | 54 | 55 | -------------------------------------------------------------------------------- /pages/badges.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Badges 7 | 8 | 9 | 10 |
11 |
12 | 17 | 25 |
26 |
27 | 28 |
29 |
30 |
31 | HTML Badge 32 |

HTML Badge

33 |

Earned for mastering HTML.

34 |
35 |
36 | CSS Badge 37 |

CSS Badge

38 |

Earned for mastering CSS.

39 |
40 |
41 | JavaScript Badge 42 |

JavaScript Badge

43 |

Earned for mastering JavaScript.

44 |
45 |
46 | CSS Badge 47 |

React Badge

48 |

Earned for mastering React.

49 |
50 |
51 | JavaScript Badge 52 |

Angular Badge

53 |

Earned for mastering Angular.

54 |
55 |
56 | CSS Badge 57 |

Node js Badge

58 |

Earned for mastering Node js.

59 |
60 |
61 | JavaScript Badge 62 |

MongoDB Badge

63 |

Earned for mastering MongoDB.

64 |
65 | 66 |
67 |
68 | 69 |
70 |
71 |

72 | Follow us on 73 | Github | 74 | LinkedIn 75 |

76 |

© 2024 Rajat Rajput | All rights reserved

77 |
78 |
79 | 80 | 81 | -------------------------------------------------------------------------------- /pages/contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Contact - Badge Website 7 | 8 | 9 | 10 | 14 | 19 | 25 | 31 | 32 | 33 | 34 | 35 | 36 |
37 |
38 | 42 | 50 |
51 |
52 |
53 |
54 |
55 |

Contact Us

56 |
57 | 58 | 66 |
67 |
68 | 69 | 76 |
77 |
78 | 79 | 85 |
86 | 94 |
95 |
96 |
97 | 98 |
99 |
100 |

101 | Follow us on 102 | Github | 103 | LinkedIn 104 |

105 |

© 2024 Rajat Rajput | All rights reserved

106 |
107 |
108 | 109 | 110 | -------------------------------------------------------------------------------- /sigin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sign Up Page 7 | 63 | 64 | 65 | 66 | 77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | 2 | /* Reset styles */ 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | text-decoration: none; 7 | color: #fff; 8 | } 9 | 10 | /* Base Styles */ 11 | body { 12 | font-family: "Poppins", sans-serif; 13 | margin: 0; 14 | padding: 0; 15 | background-color: #f4f4f4; /* Light background */ 16 | color: #333; /* Dark text color */ 17 | transition: background-color 0.3s, color 0.3s; 18 | } 19 | 20 | /* Dark Theme Styles */ 21 | body.dark-theme { 22 | background: linear-gradient(135deg, #1c1f24, #2d3b45, #000000); 23 | color: #dfe1e5; /* Light text color */ 24 | } 25 | 26 | .header-container { 27 | display: flex; /* Flexbox for aligning items */ 28 | justify-content: space-between; /* Space between title and nav */ 29 | align-items: center; /* Center vertically */ 30 | } 31 | 32 | header { 33 | background: rgba(144, 214, 15, 0.9); /* Blue background color */ 34 | color: white; /* White text color */ 35 | padding: 20px; /* Padding around the header */ 36 | } 37 | 38 | h1 { 39 | font-size: 24px; /* Font size for header title */ 40 | } 41 | 42 | nav ul { 43 | list-style: none; /* Remove bullet points */ 44 | display: flex; /* Flexbox for horizontal layout */ 45 | } 46 | 47 | nav ul li { 48 | margin-left: 20px; /* Space between nav items */ 49 | } 50 | 51 | nav ul li a { 52 | color: white; /* Link color */ 53 | text-decoration: none; /* Remove underline */ 54 | transition: color 0.3s; /* Smooth color transition */ 55 | } 56 | 57 | nav ul li a:hover { 58 | color: #ff85a1; /* Change color on hover */ 59 | } 60 | /* General Styles */ 61 | * { 62 | margin: 0; 63 | padding: 0; 64 | box-sizing: border-box; 65 | } 66 | 67 | body { 68 | font-family: Arial, sans-serif; 69 | margin: 0; 70 | padding: 0; 71 | background-color: #f9f9f9; 72 | color: #dfe1e5; 73 | background: linear-gradient(135deg, #1c1f24, #2d3b45, #000000); 74 | } 75 | 76 | /* Keyframes for Confetti Animation */ 77 | @keyframes fadeIn { 78 | from { 79 | opacity: 0; 80 | transform: scale(0.95); 81 | } 82 | to { 83 | opacity: 1; 84 | transform: scale(1); 85 | } 86 | } 87 | 88 | @keyframes fadeOut { 89 | from { 90 | opacity: 1; 91 | } 92 | to { 93 | opacity: 0.2; 94 | } 95 | } 96 | 97 | @keyframes fall { 98 | to { 99 | transform: translateY(100vh); 100 | opacity: 1; 101 | } 102 | } 103 | 104 | .confetti { 105 | position: fixed; 106 | width: 12px; 107 | height: 12px; 108 | background-color: rgb(97, 5, 5); 109 | top: -50px; 110 | animation: fall linear forwards, fadeOut ease-out forwards; 111 | } 112 | 113 | body { 114 | background: linear-gradient(135deg, #1c1f24, #2d3b45, #000000); 115 | font-family: "Poppins", sans-serif; 116 | color: #dfe1e5; /* Light text color */ 117 | margin: 0; /* Remove default margin */ 118 | 119 | } 120 | 121 | .badge { 122 | display: flex; 123 | flex-direction: column; 124 | align-items: center; 125 | justify-content: center; 126 | border-radius: 10px; 127 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 128 | height: calc(100vh - 60px); 129 | } 130 | 131 | .badge img { 132 | width: 250px; 133 | height: 210px; /* reduce the height of badge image for better user experience */ 134 | transition: transform 0.3s ease; /* Smooth transition */ 135 | } 136 | 137 | 138 | /* HEADER CSS */ 139 | /* Header container styling */ 140 | header { 141 | display: block; 142 | width: 100%; 143 | padding: 20px; 144 | background-color: #1c1f24; /* Dark background */ 145 | border-bottom: 2px solid #58a6ff; /* Border for separation */ 146 | } 147 | 148 | .header-container { 149 | display: flex; 150 | justify-content: space-between; 151 | align-items: center; 152 | max-width: 1200px; 153 | margin: 0 auto; 154 | 155 | } 156 | 157 | .logo { 158 | display: flex; 159 | align-items: center; 160 | } 161 | 162 | .logo img { 163 | width: 40px; 164 | height: 40px; 165 | margin-right: 10px; 166 | } 167 | 168 | .logo h1 { 169 | font-size: 24px; 170 | color: #dfe1e5; 171 | font-weight: 900; 172 | } 173 | 174 | nav { 175 | font-size: 18px; 176 | display: flex; 177 | align-items: center; 178 | } 179 | 180 | .nav-links ul { 181 | width: 100%; 182 | list-style: none; 183 | display: flex; 184 | justify-content: flex-end; 185 | align-items: center; 186 | } 187 | 188 | .nav-links ul li { 189 | margin-left: 20px; 190 | } 191 | 192 | ul li a { 193 | height: 100%; 194 | padding: 0; 195 | display: flex; 196 | align-items: center; 197 | text-decoration: none; 198 | color: #dfe1e5; 199 | font-size: 18px; 200 | transition: color 0.3s ease; 201 | } 202 | 203 | .nav-links ul li a:hover { 204 | color: #58a6ff; 205 | } 206 | 207 | .sidebar { 208 | position: fixed; 209 | top: 0; 210 | right: 0; 211 | margin-top: 2px; 212 | height: 100vh; 213 | max-width: 250px; 214 | z-index: 999; 215 | background-color: rgba(255, 255, 255, 0.2); 216 | backdrop-filter: blur(10px); 217 | box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1); 218 | display: none; 219 | flex-direction: column; 220 | align-items: flex-start; 221 | justify-content: flex-start; 222 | } 223 | 224 | .sidebar ul { 225 | list-style-type: none; 226 | padding: 0; 227 | margin: 0; 228 | } 229 | 230 | .sidebar li { 231 | width: 100%; 232 | height: 120px !important; 233 | margin: 5px 0; 234 | } 235 | 236 | .sidebar a { 237 | width: 100%; 238 | height: 120px !important; 239 | display: block; 240 | } 241 | 242 | .menu-btn { 243 | display: none; 244 | } 245 | 246 | /* Mobile Responsive Styles */ 247 | @media (max-width: 768px) { 248 | .hideOnMobile { 249 | display: none; 250 | } 251 | 252 | .showOnMobile { 253 | display: flex; 254 | } 255 | 256 | .menu-btn { 257 | display: block; 258 | } 259 | } 260 | 261 | /* For smaller devices */ 262 | @media (max-width: 480px) { 263 | .sidebar { 264 | width: 100% ; 265 | } 266 | } 267 | 268 | .badge-details { 269 | text-align: center; 270 | margin-top: 15px; /* Adjust spacing */ 271 | } 272 | 273 | .badge-details h2 { 274 | font-size: 24px; /* Increase heading size */ 275 | margin-bottom: 5px; /* Add spacing between heading and text */ 276 | color: #fff; /* White heading for better contrast */ 277 | } 278 | 279 | .badge-details p { 280 | font-size: 18px; /* Adjust paragraph size */ 281 | margin: 0; /* Remove default margin for tighter spacing */ 282 | } 283 | 284 | .badge-details strong { 285 | color: #e8d07e; /* Accent color for awardee email */ 286 | } 287 | 288 | .download-card { 289 | margin-top: 20px; /* Adjust margin for spacing */ 290 | } 291 | 292 | .download-button { 293 | display: inline-block; 294 | padding: 10px 20px; 295 | background-color: #58a6ff; 296 | color: white; 297 | border: none; 298 | border-radius: 5px; 299 | text-decoration: none; 300 | font-weight: bold; 301 | transition: background-color 0.3s ease, transform 0.3s ease; 302 | } 303 | .qr-download-card{ 304 | margin-top: 15px; 305 | } 306 | .download-button:hover { 307 | background-color: #4183c4; 308 | transform: scale(1.05); /* Slightly increases the button size */ 309 | 310 | } 311 | 312 | footer { 313 | min-height: 15vh; 314 | text-align: center; 315 | padding: 40px; 316 | background: linear-gradient(135deg, #1c1f24, #2d3b45, #000000); 317 | color: #dfe1e5; 318 | width: 100%; 319 | border-top: 3px solid #58a6ff; 320 | } 321 | 322 | footer p { 323 | font-weight: 900; 324 | } 325 | 326 | footer a { 327 | color: #4183c4; 328 | font-weight: 900; 329 | } 330 | 331 | .share-section { 332 | text-align: center; 333 | margin-top: 20px; 334 | margin-bottom: 34px; /* add margin bottom for proper visibility of share section */ 335 | } 336 | 337 | .share-section p { 338 | font-size: 18px; 339 | color: #fff; 340 | margin-bottom: 8px; 341 | font-weight: bold; 342 | } 343 | 344 | .share-button { 345 | display: inline-block; 346 | margin: 0 10px; 347 | text-decoration: none; 348 | font-size: 20px; 349 | padding: 15px; 350 | border-radius: 50%; 351 | color: #fff; 352 | transition: transform 0.3s ease, box-shadow 0.3s ease; 353 | } 354 | 355 | .share-button i { 356 | transition: color 0.3s ease; 357 | } 358 | 359 | /* Twitter Button */ 360 | .share-button.twitter { 361 | background-color: #1da1f2; 362 | } 363 | 364 | .share-button.twitter:hover { 365 | transform: scale(1.2); 366 | box-shadow: 0 4px 10px rgba(29, 161, 242, 0.5); 367 | } 368 | 369 | /* LinkedIn Button */ 370 | .share-button.linkedin { 371 | background-color: #0077b5; 372 | } 373 | 374 | .share-button.linkedin:hover { 375 | transform: scale(1.2); 376 | box-shadow: 0 4px 10px rgba(0, 119, 181, 0.5); 377 | } 378 | 379 | /* Facebook Button */ 380 | .share-button.facebook { 381 | background-color: #3b5998; 382 | } 383 | 384 | .share-button.facebook:hover { 385 | transform: scale(1.2); 386 | box-shadow: 0 4px 10px rgba(59, 89, 152, 0.5); 387 | } 388 | 389 | /* Icon Colors on Hover */ 390 | .share-button:hover i { 391 | color: #fff; 392 | } 393 | 394 | /* Adding smooth hover effects */ 395 | .share-button:hover { 396 | transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; 397 | } 398 | 399 | /* Confetti Animation */ 400 | @keyframes fadeIn { 401 | from { 402 | opacity: 0; 403 | transform: scale(0.95); 404 | } 405 | to { 406 | opacity: 1; 407 | transform: scale(1); 408 | } 409 | } 410 | 411 | @keyframes fadeOut { 412 | from { 413 | opacity: 1; 414 | } 415 | to { 416 | opacity: 0.2; 417 | } 418 | } 419 | 420 | .confetti { 421 | position: fixed; 422 | width: 12px; 423 | height: 12px; 424 | background-color: rgb(97, 5, 5); 425 | top: -50px; 426 | animation: fall linear forwards, fadeOut ease-out forwards; /* Add fadeOut */ 427 | } 428 | 429 | @keyframes fall { 430 | to { 431 | transform: translateY(100vh); 432 | opacity: 1; 433 | } 434 | } 435 | 436 | .search-bar-container { 437 | margin: 20px auto; 438 | text-align: center; 439 | display: flex; 440 | justify-content: center; 441 | align-items: center; 442 | gap: 10px; 443 | } 444 | 445 | #badge-search { 446 | padding: 10px; 447 | width: 80%; 448 | max-width: 400px; 449 | font-size: 1rem; 450 | border: 2px solid #0d6efd; 451 | border-radius: 5px; 452 | box-sizing: border-box; 453 | outline: none; 454 | } 455 | 456 | #badge-search:focus { 457 | border-color: #007bff; 458 | } 459 | 460 | .search-button { 461 | padding: 10px 20px; 462 | font-size: 1rem; 463 | background-color: #0d6efd; 464 | color: #fff; 465 | border: none; 466 | border-radius: 5px; 467 | cursor: pointer; 468 | transition: background-color 0.3s ease; 469 | } 470 | 471 | .search-button:hover { 472 | background-color: #0a58ca; 473 | } 474 | 475 | .search-button:active { 476 | background-color: #084298; 477 | } 478 | 479 | .badge-slide { 480 | min-width: 100%; 481 | box-sizing: border-box; 482 | padding: 10px; 483 | box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5); 484 | } 485 | 486 | .badge { 487 | display: flex; 488 | flex-direction: column; 489 | align-items: center; 490 | text-align: center; 491 | margin-top: 55px; /* add margin top for badge image proper visibility */ 492 | } 493 | 494 | .badge-details h2 { 495 | font-size: 1.5rem; 496 | margin-top: 10px; 497 | } 498 | 499 | .badge-details p { 500 | margin: 5px 0; 501 | } 502 | 503 | .download-button, .share-button { 504 | background-color: #007bff; 505 | color: white; 506 | padding: 15px; 507 | text-decoration: none; 508 | border-radius: 1000px; 509 | margin-top: 10px; 510 | } 511 | 512 | .download-button:hover, .share-button:hover { 513 | background-color: #0056b3; 514 | } 515 | 516 | .share-section a { 517 | margin-right: 10px; 518 | } 519 | /* Styles for the badge cards */ 520 | .badges-section { 521 | padding: 20px; 522 | background-color: #f9f9f9; 523 | background: linear-gradient(135deg, #1c1f24, #2d3b45, #000000); 524 | } 525 | 526 | .badges-container { 527 | display: grid; 528 | grid-template-columns: repeat(3,1fr); /* Three equal-width columns */ 529 | gap: 30px; /* Space between cards */ 530 | justify-items: center; 531 | align-items: center; 532 | } 533 | 534 | .badge-card { 535 | background-color: white; 536 | border: 1px solid #ddd; 537 | border-radius: 10px; 538 | width: 100%; 539 | display: grid; 540 | place-items: center; 541 | max-width: 300px; 542 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 543 | text-align: center; 544 | padding: 20px; 545 | transition: transform 0.3s ease; 546 | } 547 | 548 | .badge-card img { 549 | max-width: 100px; 550 | margin-bottom: 15px; 551 | } 552 | 553 | .badge-card h3 { 554 | font-size: 1.2em; 555 | color: #3a3a3a; 556 | margin-bottom: 10px; 557 | } 558 | 559 | .badge-card p { 560 | font-size: 0.9em; 561 | color: #2b2b2b; 562 | } 563 | 564 | .badge-card:hover { 565 | transform: scale(1.05); 566 | } 567 | 568 | /* Responsive design for smaller screens */ 569 | @media (max-width: 768px) { 570 | .badges-container { 571 | grid-template-columns: repeat(2, 1fr); /* Two badges per row on smaller screens */ 572 | } 573 | } 574 | 575 | @media (max-width: 500px) { 576 | .badges-container { 577 | grid-template-columns: 1fr; /* One badge per row on very small screens */ 578 | } 579 | 580 | } 581 | @media (min-width:768px) { 582 | .hideOnMobile{ 583 | display: none; 584 | } 585 | 586 | 587 | } --------------------------------------------------------------------------------