<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Beautiful Landing Page</title> <style> body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; background-color: #f0f0f0; color: #333; } header { background: url('images/career-quiz.png') no-repeat center center/cover; color: #fff; padding: 100px 0; height: 150px; text-align: center; } header h1 { font-size: 3em; margin: 0; } header p { font-size: 1.2em; } nav { background: #333; color: #fff; display: flex; justify-content: space-around; padding: 15px 0; } nav a { color: #fff; text-decoration: none; font-weight: bold; } .container { padding: 20px; } .grid { display: flex; gap: 20px; flex-wrap: wrap; } .card { background: #fff; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); flex: 1; min-width: 280px; max-width: 300px; padding: 15px; } .card img { border-radius: 8px; width: 100%; height: auto; } footer { background: #333; color: #fff; text-align: center; padding: 20px 0; margin-top: 20px; } </style> </head> <body> <header> </header> <nav> <a href="#home">Home</a> <a href="#about">Best Courses</a> <a href="#services">Fun Tutorials</a> <a href="#contact">About TechWorld with Nana</a> </nav> <div class="container"> <h2>TechWorld with Nana Programs</h2> <div class="grid"> <div class="card"> <img src="images/devops.png?crop=entropy&fit=crop&w=400&h=200" alt="Service 1"> <h3>DevOps Bootcamp</h3> <p>Finally learn with structured guided course, all DevOps tools together</p> </div> <div class="card"> <img src="images/it-beginners.png?crop=entropy&fit=crop&w=400&h=200" alt="Service 2"> <h3>Software Development LifeCycle Course</h3> <p>Learn the entire software Development lifecycle, from developing, to testing, to provisioning server and deploying</p> </div> <div class="card"> <img src="images/devsecops.png?crop=entropy&fit=crop&w=400&h=200" alt="Service 3"> <h3>DevSecOps Bootcamp</h3> <p>If you wanna become a DevOps engineer on steroids, you can face this advanced bootcamp</p> </div> </div> </div> <footer> <p>© TechWorld with Nana. All Rights Reserved.</p> <p>Follow us on: <a href="#" style="color: #3b5998;">Linkedin</a> | <a href="#" style="color: #00aced;">Twitter</a> | <a href="#" style="color: #e4405f;">Instagram</a> </p> </footer> </body> </html>