- Home (introduction and call to action)
- About the Olympiad
- Subjects / Topics
- Practice Tests
- Resources
- Contact / Registration
Here’s a clean and simple starter website using HTML, CSS, and a little JavaScript if needed:
Let’s build it step-by-step:
I’ll create a starter project first:
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Olympiad Prep Hub</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>Olympiad Prep Hub</h1> <nav> <a href="#about">About</a> <a href="#subjects">Subjects</a> <a href="#tests">Practice Tests</a> <a href="#resources">Resources</a> <a href="#contact">Contact</a> </nav> </header> <section id="hero"> <h2>Prepare, Practice, and Succeed!</h2> <p>Your ultimate guide to ace Olympiad exams.</p> <a href="#tests" class="btn">Start Practicing</a> </section> <section id="about"> <h2>About the Olympiad</h2> <p>Olympiad exams are competitive exams conducted at national and international levels to test students' knowledge in various subjects.</p> </section> <section id="subjects"> <h2>Subjects Offered</h2> <ul> <li>Mathematics</li> <li>Science</li> <li>English</li> <li>Cyber / Computer Science</li> <li>General Knowledge</li> </ul> </section> <section id="tests"> <h2>Practice Tests</h2> <p>Take timed quizzes and evaluate your preparation level!</p> <button onclick="alert('Coming Soon!')">Take a Test</button> </section> <section id="resources"> <h2>Study Resources</h2> <ul> <li>Previous Year Papers</li> <li>Sample Questions</li> <li>Tips & Tricks</li> </ul> </section> <section id="contact"> <h2>Register or Contact Us</h2> <form> <input type="text" placeholder="Your Name" required><br> <input type="email" placeholder="Your Email" required><br> <textarea placeholder="Your Message" required></textarea><br> <button type="submit">Submit</button> </form> </section> <footer> <p>© 2025 Olympiad Prep Hub. All rights reserved.</p> </footer> </body> </html>
style.css
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Arial', sans-serif; line-height: 1.6; } header { background: #004080; color: #fff; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; } header nav a { color: #fff; margin-left: 15px; text-decoration: none; font-weight: bold; } #hero { background: url('hero-image.jpg') no-repeat center center/cover; color: #fff; text-align: center; padding: 100px 20px; background-color: #0066cc; } #hero .btn { display: inline-block; margin-top: 20px; padding: 10px 25px; background: #ffcc00; color: #000; text-decoration: none; font-weight: bold; border-radius: 5px; } section { padding: 40px 20px; text-align: center; } section h2 { margin-bottom: 20px; color: #004080; } ul { list-style-type: none; } button { padding: 10px 20px; background: #004080; color: #fff; border: none; border-radius: 5px; cursor: pointer; } form input, form textarea { width: 80%; padding: 10px; margin: 10px 0; } footer { background: #004080; color: #fff; text-align: center; padding: 10px; }
Quick Features
- Responsive basic layout.
- Clean section-based structure.
- Modern color scheme (blue, white, yellow highlight).
- Future expansion ready (you can later add login, quiz modules, leaderboard, etc.)
Would you also like me to show you:
- How to add a real online quiz section?
- How to make a backend (registration form actually saves entries)?
- A fancier version with animations and bootstrap?
Let me know!
Leave a Reply