From 8a189aab0d34fd607f740652a29af258a6a7320e Mon Sep 17 00:00:00 2001 From: 2222k3060 <144920134+2222k3060@users.noreply.github.com> Date: Sat, 19 Oct 2024 01:25:14 +0530 Subject: [PATCH] Update index.html Here's the updated HTML file with an FAQ section added to enhance user experience. --- index.html | 496 ++++++++++++++++++----------------------------------- 1 file changed, 168 insertions(+), 328 deletions(-) diff --git a/index.html b/index.html index fc49ab1..8e3ec11 100644 --- a/index.html +++ b/index.html @@ -1,369 +1,209 @@ <!DOCTYPE html> <html lang="en"> - <head> +<head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Badge Website</title> <link rel="stylesheet" href="styles.css" /> <link - rel="stylesheet" - href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" + rel="stylesheet" + href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" /> <link - rel="apple-touch-icon" - sizes="180x180" - href="./Favicon/apple-touch-icon.png" + rel="apple-touch-icon" + sizes="180x180" + href="./Favicon/apple-touch-icon.png" /> <link - rel="icon" - type="image/png" - sizes="32x32" - href="./Favicon/favicon-32x32.png" + rel="icon" + type="image/png" + sizes="32x32" + href="./Favicon/favicon-32x32.png" /> <link - rel="icon" - type="image/png" - sizes="16x16" - href="./Favicon/favicon-16x16.png" + rel="icon" + type="image/png" + sizes="16x16" + href="./Favicon/favicon-16x16.png" /> <link rel="manifest" href="/site.webmanifest" /> <link rel="icon" href="Favicon/favicon.ico?v=2" /> - </head> - <body> +</head> +<body> <!-- Header Section --> <header> - <div class="header-container"> - <div class="logo"> - <img src="Favicon/favicon-32x32.png" alt="Logo" /> - <a href="/"><h1>Badge Website</h1></a> + <div class="header-container"> + <div class="logo"> + <img src="Favicon/favicon-32x32.png" alt="Logo" /> + <a href="/"><h1>Badge Website</h1></a> + </div> + <nav class="nav-links"> + <ul> + <li><a href="/">Home</a></li> + <li><a href="./pages/about.html">About</a></li> + <li><a href="./pages/contact.html">Contact</a></li> + <li><a href="./pages/badges.html">Badges</a></li> + <li><a href="./login.html">Login</a></li> + </ul> + </nav> </div> - <nav class="nav-links"> - <ul> - <li><a href="/">Home</a></li> - <li><a href="./pages/about.html">About</a></li> - <li><a href="./pages/contact.html">Contact</a></li> - <li><a href="./pages/badges.html">Badges</a></li> - </ul> - </nav> - </div> </header> + <div class="search-container"> + <input type="text" id="search-input" placeholder="Search for a badge..." /> + <button id="search-btn"><i class="fas fa-search"></i></button> + </div> <div class="badge-grid"> <div class="badge-container"> - <div class="badge"> - <img - src="https://ai.mlsc-amity.tech/dist/imgdb/newcomer.png" - alt="Badge Image" - /> - <div class="badge-details"> - <h2 class="typingeffect">Season of AI | Beginner AI Learner</h2> - <p>Awarded to: <strong>hello.rajat.rajput@gmail.com</strong></p> - <p> - Issued on: <strong>Jul 28, 2024</strong> at - <strong>1:11 AM</strong> - </p> + <div class="badge"> + <img + src="https://ai.mlsc-amity.tech/dist/imgdb/newcomer.png" + alt="Badge Image" + /> + <div class="badge-details"> + <h2 class="typingeffect">Season of AI | Beginner AI Learner</h2> + <p>Awarded to: <strong>hello.rajat.rajput@gmail.com</strong></p> + <p> + Issued on: <strong>Jul 28, 2024</strong> at + <strong>1:11 AM</strong> + </p> + </div> + <div class="download-card"> + <a download href="assets/images/badge.png" class="download-button">Download Badge</a> + </div> + <div class="share-section"> + <p>Share your badge:</p> + <a + href="https://x.com/intent/tweet?text=I%20earned%20the%20Season%20of%20AI%20Beginner%20AI%20Learner%20Badge!%20Check%20it%20out:%20https://ai.mlsc-amity.tech%20&hashtags=AI,Badge" + target="_blank" + class="share-button twitter" + > + <i class="fa-brands fa-square-x-twitter"></i> + </a> + <a + href="https://www.linkedin.com/shareArticle?mini=true&url=https://ai.mlsc-amity.tech&title=Beginner%20AI%20Learner%20Badge&summary=I%20earned%20the%20Season%20of%20AI%20Beginner%20AI%20Learner%20Badge!%20Check%20it%20out:" + target="_blank" + class="share-button linkedin" + > + <i class="fab fa-linkedin"></i> + </a> + <a + href="https://www.facebook.com/sharer/sharer.php?u=https://ai.mlsc-amity.tech" + target="_blank" + class="share-button facebook" + > + <i class="fab fa-facebook-f"></i> + </a> + </div> </div> - <div class="download-card"> - <a download href="assets/images/badge.png" class="download-button" - >Download Badge</a - > - </div> - <div class="share-section"> - <p>Share your badge:</p> - <a - href="https://x.com/intent/tweet?text=I%20earned%20the%20Season%20of%20AI%20Beginner%20AI%20Learner%20Badge!%20Check%20it%20out:%20https://ai.mlsc-amity.tech%20&hashtags=AI,Badge" - target="_blank" - class="share-button twitter" - > - <i class="fa-brands fa-square-x-twitter"></i> - </a> - <a - href="https://www.linkedin.com/shareArticle?mini=true&url=https://ai.mlsc-amity.tech&title=Beginner%20AI%20Learner%20Badge&summary=I%20earned%20the%20Season%20of%20AI%20Beginner%20AI%20Learner%20Badge!%20Check%20it%20out:" - target="_blank" - class="share-button linkedin" - > - <i class="fab fa-linkedin"></i> - </a> - <a - href="https://www.facebook.com/sharer/sharer.php?u=https://ai.mlsc-amity.tech" - target="_blank" - class="share-button facebook" - > - <i class="fab fa-facebook-f"></i> - </a> - </div> - </div> - </div> - - <div class="badge-container"> - <div class="badge"> - <img - src="https://ai.mlsc-amity.tech/dist/imgdb/newcomer.png" - alt="Badge Image" - /> - <div class="badge-details"> - <h2 class="typingeffect">Season of AI | Intermediate AI Learner</h2> - <p>Awarded to: <strong>example.user@example.com</strong></p> - <p> - Issued on: <strong>Sep 17, 2024</strong> at - <strong>3:55 PM</strong> - </p> - </div> - <div class="download-card"> - <a download href="assets/images/badge.png" class="download-button" - >Download Badge</a - > - </div> - <div class="share-section"> - <p>Share your badge:</p> - <a - href="https://x.com/intent/tweet?text=I%20earned%20the%20Season%20of%20AI%20Intermediate%20AI%20Learner%20Badge!%20Check%20it%20out:%20https://ai.mlsc-amity.tech%20&hashtags=AI,Badge" - target="_blank" - class="share-button twitter" - > - <i class="fa-brands fa-square-x-twitter"></i> - </a> - <a - href="https://www.linkedin.com/shareArticle?mini=true&url=https://ai.mlsc-amity.tech&title=Intermediate%20AI%20Learner%20Badge&summary=I%20earned%20the%20Season%20of%20AI%20Intermediate%20AI%20Learner%20Badge!%20Check%20it%20out:" - target="_blank" - class="share-button linkedin" - > - <i class="fab fa-linkedin"></i> - </a> - <a - href="https://www.facebook.com/sharer/sharer.php?u=https://ai.mlsc-amity.tech" - target="_blank" - class="share-button facebook" - > - <i class="fab fa-facebook-f"></i> - </a> - </div> - </div> - </div> - <div class="badge-container"> - <div class="badge"> - <img - src="https://ai.mlsc-amity.tech/dist/imgdb/newcomer.png" - alt="Badge Image" - /> - <div class="badge-details"> - <h2 class="typingeffect">Season of AI | Intermediate AI Learner</h2> - <p>Awarded to: <strong>example.user@example.com</strong></p> - <p> - Issued on: <strong>Sep 17, 2024</strong> at - <strong>3:55 PM</strong> - </p> - </div> - <div class="download-card"> - <a download href="assets/images/badge.png" class="download-button" - >Download Badge</a - > - </div> - <div class="share-section"> - <p>Share your badge:</p> - <a - href="https://x.com/intent/tweet?text=I%20earned%20the%20Season%20of%20AI%20Intermediate%20AI%20Learner%20Badge!%20Check%20it%20out:%20https://ai.mlsc-amity.tech%20&hashtags=AI,Badge" - target="_blank" - class="share-button twitter" - > - <i class="fa-brands fa-square-x-twitter"></i> - </a> - <a - href="https://www.linkedin.com/shareArticle?mini=true&url=https://ai.mlsc-amity.tech&title=Intermediate%20AI%20Learner%20Badge&summary=I%20earned%20the%20Season%20of%20AI%20Intermediate%20AI%20Learner%20Badge!%20Check%20it%20out:" - target="_blank" - class="share-button linkedin" - > - <i class="fab fa-linkedin"></i> - </a> - <a - href="https://www.facebook.com/sharer/sharer.php?u=https://ai.mlsc-amity.tech" - target="_blank" - class="share-button facebook" - > - <i class="fab fa-facebook-f"></i> - </a> - </div> - </div> - </div> - <div class="badge-container"> - <div class="badge"> - <img - src="https://ai.mlsc-amity.tech/dist/imgdb/newcomer.png" - alt="Badge Image" - /> - <div class="badge-details"> - <h2 class="typingeffect">Season of AI | Intermediate AI Learner</h2> - <p>Awarded to: <strong>example.user@example.com</strong></p> - <p> - Issued on: <strong>Sep 17, 2024</strong> at - <strong>3:55 PM</strong> - </p> - </div> - <div class="download-card"> - <a download href="assets/images/badge.png" class="download-button" - >Download Badge</a - > - </div> - <div class="share-section"> - <p>Share your badge:</p> - <a - href="https://x.com/intent/tweet?text=I%20earned%20the%20Season%20of%20AI%20Intermediate%20AI%20Learner%20Badge!%20Check%20it%20out:%20https://ai.mlsc-amity.tech%20&hashtags=AI,Badge" - target="_blank" - class="share-button twitter" - > - <i class="fa-brands fa-square-x-twitter"></i> - </a> - <a - href="https://www.linkedin.com/shareArticle?mini=true&url=https://ai.mlsc-amity.tech&title=Intermediate%20AI%20Learner%20Badge&summary=I%20earned%20the%20Season%20of%20AI%20Intermediate%20AI%20Learner%20Badge!%20Check%20it%20out:" - target="_blank" - class="share-button linkedin" - > - <i class="fab fa-linkedin"></i> - </a> - <a - href="https://www.facebook.com/sharer/sharer.php?u=https://ai.mlsc-amity.tech" - target="_blank" - class="share-button facebook" - > - <i class="fab fa-facebook-f"></i> - </a> - </div> - </div> </div> + + <!-- Additional badge containers can be added here --> + <!-- ... --> + <div class="badge-container"> - <div class="badge"> - <img - src="https://ai.mlsc-amity.tech/dist/imgdb/newcomer.png" - alt="Badge Image" - /> - <div class="badge-details"> - <h2 class="typingeffect">Season of AI | Intermediate AI Learner</h2> - <p>Awarded to: <strong>example.user@example.com</strong></p> - <p> - Issued on: <strong>Sep 17, 2024</strong> at - <strong>3:55 PM</strong> - </p> - </div> - <div class="download-card"> - <a download href="assets/images/badge.png" class="download-button" - >Download Badge</a - > - </div> - <div class="share-section"> - <p>Share your badge:</p> - <a - href="https://x.com/intent/tweet?text=I%20earned%20the%20Season%20of%20AI%20Intermediate%20AI%20Learner%20Badge!%20Check%20it%20out:%20https://ai.mlsc-amity.tech%20&hashtags=AI,Badge" - target="_blank" - class="share-button twitter" - > - <i class="fa-brands fa-square-x-twitter"></i> - </a> - <a - href="https://www.linkedin.com/shareArticle?mini=true&url=https://ai.mlsc-amity.tech&title=Intermediate%20AI%20Learner%20Badge&summary=I%20earned%20the%20Season%20of%20AI%20Intermediate%20AI%20Learner%20Badge!%20Check%20it%20out:" - target="_blank" - class="share-button linkedin" - > - <i class="fab fa-linkedin"></i> - </a> - <a - href="https://www.facebook.com/sharer/sharer.php?u=https://ai.mlsc-amity.tech" - target="_blank" - class="share-button facebook" - > - <i class="fab fa-facebook-f"></i> - </a> - </div> - </div> - </div> - - <div class="badge-container"> - <div class="badge"> - <img - src="https://ai.mlsc-amity.tech/dist/imgdb/newcomer.png" - alt="Badge Image" - /> - <div class="badge-details"> - <h2 class="typingeffect">Season of AI | Advance AI Learner</h2> - <p>Awarded to: <strong>example.user@example.com</strong></p> - <p> - Issued on: <strong>Dec 17, 2024</strong> at - <strong>8:55 PM</strong> - </p> - </div> - <div class="download-card"> - <a download href="assets/images/badge.png" class="download-button" - >Download Badge</a - > - </div> - <div class="share-section"> - <p>Share your badge:</p> - <a - href="https://x.com/intent/tweet?text=I%20earned%20the%20Season%20of%20AI%20Advance%20AI%20Learner%20Badge!%20Check%20it%20out:%20https://ai.mlsc-amity.tech%20&hashtags=AI,Badge" - target="_blank" - class="share-button twitter" - > - <i class="fa-brands fa-square-x-twitter"></i> - </a> - <a - href="https://www.linkedin.com/shareArticle?mini=true&url=https://ai.mlsc-amity.tech&title=Advance%20AI%20Learner%20Badge&summary=I%20earned%20the%20Season%20of%20AI%20Advance%20AI%20Learner%20Badge!%20Check%20it%20out:" - target="_blank" - class="share-button linkedin" - > - <i class="fab fa-linkedin"></i> - </a> - <a - href="https://www.facebook.com/sharer/sharer.php?u=https://ai.mlsc-amity.tech" - target="_blank" - class="share-button facebook" - > - <i class="fab fa-facebook-f"></i> - </a> + <div class="badge"> + <img + src="https://ai.mlsc-amity.tech/dist/imgdb/newcomer.png" + alt="Badge Image" + /> + <div class="badge-details"> + <h2 class="typingeffect">Season of AI | Advance AI Learner</h2> + <p>Awarded to: <strong>example.user@example.com</strong></p> + <p> + Issued on: <strong>Dec 17, 2024</strong> at + <strong>8:55 PM</strong> + </p> + </div> + <div class="download-card"> + <a download href="assets/images/badge.png" class="download-button">Download Badge</a> + </div> + <div class="share-section"> + <p>Share your badge:</p> + <a + href="https://x.com/intent/tweet?text=I%20earned%20the%20Season%20of%20AI%20Advance%20AI%20Learner%20Badge!%20Check%20it%20out:%20https://ai.mlsc-amity.tech%20&hashtags=AI,Badge" + target="_blank" + class="share-button twitter" + > + <i class="fa-brands fa-square-x-twitter"></i> + </a> + <a + href="https://www.linkedin.com/shareArticle?mini=true&url=https://ai.mlsc-amity.tech&title=Advance%20AI%20Learner%20Badge&summary=I%20earned%20the%20Season%20of%20AI%20Advance%20AI%20Learner%20Badge!%20Check%20it%20out:" + target="_blank" + class="share-button linkedin" + > + <i class="fab fa-linkedin"></i> + </a> + <a + href="https://www.facebook.com/sharer/sharer.php?u=https://ai.mlsc-amity.tech" + target="_blank" + class="share-button facebook" + > + <i class="fab fa-facebook-f"></i> + </a> + </div> </div> - </div> </div> - </div> - - <style> + </div> + + <style> .badge-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-template-rows: repeat(2, auto); - gap: 10px; /* Reduced gap between cards */ + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(2, auto); + gap: 10px; /* Reduced gap between cards */ } .badge-container { - background: linear-gradient( - 35deg, - rgba(10, 151, 207, 0.9) 50%, - rgba(15, 61, 214, 0.9) 50% - ); - padding: 5px; - border-radius: 8px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - transform: scale(0.7); /* Further reduce the size of the card */ + background: linear-gradient( + 35deg, + rgba(10, 151, 207, 0.9) 50%, + rgba(15, 61, 214, 0.9) 50% + ); + padding: 5px; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + transform: scale(0.7); /* Further reduce the size of the card */ } - </style> + </style> + + <!-- FAQ Section --> + <section id="faq"> + <h2>Frequently Asked Questions (FAQ)</h2> + <div class="faq-item"> + <h3>What are badges?</h3> + <p>Badges are digital representations of achievements that can be earned for completing specific tasks or challenges.</p> + </div> + <div class="faq-item"> + <h3>How do I earn a badge?</h3> + <p>You can earn badges by participating in events, completing courses, or achieving certain milestones.</p> + </div> + <div class="faq-item"> + <h3>How can I share my badge?</h3> + <p>After earning a badge, you can share it directly to your social media accounts using the provided share buttons.</p> + </div> + <div class="faq-item"> + <h3>Can I download my badge?</h3> + <p>Yes, you can download your badge by clicking the "Download Badge" button next to each badge.</p> + </div> + </section> <footer> - <div class="footer-container"> - <div class="footer-text" style="text-align: center"> - <p> - Follow us on - <a href="https://github.com/rajatuiwebdev/badge-website">Github</a> - | - <a href="https://www.linkedin.com/in/rajatrajput2004/">LinkedIn</a> - </p> - <p>© 2024 Rajat Rajput | All rights reserved</p> + <div class="footer-container"> + <div class="footer-text" style="text-align: center"> + <p> + Follow us on + <a href="https://github.com/rajatuiwebdev/badge-website">Github</a> + | + <a href="https://www.linkedin.com/in/rajatrajput2004/">LinkedIn</a> + </p> + <p>© 2024 Rajat Rajput | All rights reserved</p> + </div> </div> - </div> </footer> <!-- QRious Library --> <script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script> - <!-- Typing effect script --> - <script src="js/typing.js"></script> - - <!-- Typing effect for badge title --> - <script src="js/typing-badge-title.js"></script> - </body> + <script src="script.js"></script> +</body> </html>