Spaces:
Running
Running
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width" /> | |
| <title>My static Space</title> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <header class="container mx-auto py-8"> | |
| <!-- Hero section --> | |
| <div class="flex flex-col items-center justify-center"> | |
| <h1 class="text-4xl font-bold text-gray-900 mb-4">Most Popular Users Leaderboard</h1> | |
| <p class="text-gray-600 text-lg">Discover the top influencers in our community</p> | |
| </div> | |
| </header> | |
| <main class="container mx-auto py-8"> | |
| <!-- Leaderboard section --> | |
| <section class="bg-white rounded-lg shadow-md p-4"> | |
| <h2 class="text-2xl font-bold text-gray-900 mb-4">Leaderboard</h2> | |
| <ul class="divide-y divide-gray-200"> | |
| <li class="py-4"> | |
| <div class="flex items-center"> | |
| <img src="https://via.placeholder.com/50x50" alt="User avatar" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h3 class="text-gray-900 font-semibold">John Doe</h3> | |
| <p class="text-gray-600"> | |
| <a href="#" class="underline">johndoe.com</a> | |
| <span class="mx-2">|</span> | |
| <a href="#" class="underline">@johndoe</a> | |
| <span class="mx-2">|</span> | |
| <a href="#" class="underline">johndoe/github</a> | |
| </p> | |
| </div> | |
| </div> | |
| </li> | |
| <!-- Add more user entries here --> | |
| </ul> | |
| </section> | |
| <!-- Testimonials section --> | |
| <section class="bg-white rounded-lg shadow-md p-4 mt-8"> | |
| <h2 class="text-2xl font-bold text-gray-900 mb-4">Testimonials</h2> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="flex-grow mb-4 md:mb-0"> | |
| <blockquote class="p-4 rounded-lg bg-gray-100"> | |
| <p class="text-gray-800 font-semibold">"I love this leaderboard! It's been a great resource for discovering new influencers."</p> | |
| <cite class="block text-right text-gray-600 mt-2">- Jane Smith</cite> | |
| </blockquote> | |
| </div> | |
| <div class="flex-grow"> | |
| <blockquote class="p-4 rounded-lg bg-gray-100"> | |
| <p class="text-gray-800 font-semibold">"This leaderboard has helped me grow my audience and connect with other creators in the community."</p> | |
| <cite class="block text-right text-gray-600 mt-2">- John Doe</cite> | |
| </blockquote> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact section --> | |
| <section class="bg-white rounded-lg shadow-md p-4 mt-8"> | |
| <h2 class="text-2xl font-bold text-gray-900 mb-4">Get in touch</h2> | |
| <form class="space-y-4"> | |
| <div> | |
| <label for="name" class="block text-gray-700 font-bold mb-2">Name</label> | |
| <input type="text" id="name" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:border-blue-500" required> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-gray-700 font-bold mb-2">Email</label> | |
| <input type="email" id="email" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:border-blue-500" required> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-gray-700 font-bold mb-2">Message</label> | |
| <textarea id="message" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:border-blue-500" rows="4" required></textarea> | |
| </div> | |
| <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:shadow-outline">Send message</button> | |
| </form> | |
| </section> | |
| </main> | |
| </body> | |
| </html> | |