Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Most Popular Users Leaderboard</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Most Popular Users Leaderboard</h1> | |
| <p>Discover the top influencers in our community</p> | |
| </header> | |
| <main> | |
| <div class="tabs"> | |
| <input type="radio" name="tabs" id="tab1" checked> | |
| <label for="tab1">Tab 1</label> | |
| <input type="radio" name="tabs" id="tab2"> | |
| <label for="tab2">Tab 2</label> | |
| <input type="radio" name="tabs" id="tab3"> | |
| <label for="tab3">Tab 3</label> | |
| </div> | |
| <section class="tab-content active"> | |
| <h2>Leaderboard</h2> | |
| <ul> | |
| <li> | |
| <div> | |
| <img src="https://via.placeholder.com/50x50" alt="User avatar"> | |
| <div> | |
| <h3>John Doe</h3> | |
| <p> | |
| <a href="#">jojoohndoe.com</a> | |
| <span class="mx-2">|</span> | |
| <a href="#">@johndoe</a> | |
| <span class="mx-2">|</span> | |
| <a href="#">johndoe/github</a> | |
| </p> | |
| </div> | |
| </div> | |
| </li> | |
| <!-- Add more user entries for Tab 1 here --> | |
| </ul> | |
| </section> | |
| <section class="tab-content"> | |
| <h2>Leaderboard</h2> | |
| <ul> | |
| <li> | |
| <div> | |
| <img src="https://via.placeholder.com/50x50" alt="User avatar"> | |
| <div> | |
| <h3>Jane Smith</h3> | |
| <p> | |
| <a href="#">janesmith.com</a> | |
| <span class="mx-2">|</span> | |
| <a href="#">@janesmith</a> | |
| <span class="mx-2">|</span> | |
| <a href="#">janesmith/github</a> | |
| </p> | |
| </div> | |
| </div> | |
| </li> | |
| <!-- Add more user entries for Tab 2 here --> | |
| </ul> | |
| </section> | |
| <section class="tab-content"> | |
| <h2>Leaderboard</h2> | |
| <ul> | |
| <li> | |
| <div> | |
| <img src="https://via.placeholder.com/50x50" alt="User avatar"> | |
| <div> | |
| <h3>Bob Johnson</h3> | |
| <p> | |
| <a href="#">bobjohnson.com</a> | |
| <span class="mx-2">|</span> | |
| <a href="#">@bobjohnson</a> | |
| <span class="mx-2">|</span> | |
| <a href="#">bobjohnson/github</a> | |
| </p> | |
| </div> | |
| </div> | |
| </li> | |
| <!-- Add more user entries for Tab 3 here --> | |
| </ul> | |
| </section> | |
| <section class="testimonials"> | |
| <h2>Testimonials</h2> | |
| <div> | |
| <blockquote> | |
| <p>"I love this leaderboard! It's been a great resource for discovering new influencers."</p> | |
| <cite>- Jane Smith</cite> | |
| </blockquote> | |
| </div> | |
| <div> | |
| <blockquote> | |
| <p>"This leaderboard has helped me grow my audience and connect with other creators in the community."</p> | |
| <cite>- John Doe</cite> | |
| </blockquote> | |
| </div> | |
| </section> | |
| <section class="contact"> | |
| <h2>Get in touch</h2> | |
| <form> | |
| <label for="name">Name</label> | |
| <input type="text" id="name" required> | |
| <label for="email">Email</label> | |
| <input type="email" id="email" required> | |
| <label for="message">Message</label> | |
| <textarea id="message" required></textarea> | |
| <button type="submit">Send message</button> | |
| </form> | |
| </section> | |
| </main> | |
| <script src="scripts.js"></script> | |
| </body> | |
| </html> |