Untitled
unknown
plain_text
6 months ago
3.1 kB
3
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Taj Mahal Facts</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; color: #333; } .header { background-color: #4CAF50; color: white; padding: 20px; text-align: center; width: 100%; } .content { max-width: 800px; padding: 20px; text-align: center; } h1, h2 { color: #2c3e50; } .fact-button { background-color: #4CAF50; color: white; border: none; padding: 10px 20px; margin: 10px; font-size: 16px; cursor: pointer; border-radius: 5px; } .fact-button:hover { background-color: #45a049; } .fact-list { text-align: left; list-style-type: square; } </style> </head> <body> <div class="header"> <h1>Taj Mahal</h1> <p>A symbol of love and an architectural marvel</p> </div> <div class="content"> <h2>About the Taj Mahal</h2> <p>The Taj Mahal, located in Agra, India, was built between 1632 and 1653 by Emperor Shah Jahan as a memorial to his beloved wife, Mumtaz Mahal. It is made of white marble and is considered one of the Seven Wonders of the Modern World.</p> <h2>Cool Facts</h2> <ul class="fact-list"> <li>It changes color throughout the day, appearing pinkish in the morning, milky white in the evening, and golden at night.</li> <li>Over 20,000 artisans worked on its construction, with materials sourced from Asia.</li> <li>The four minarets are tilted slightly outward to protect the main tomb in case of an earthquake.</li> <li>The central tomb of Mumtaz Mahal is located in the middle, symbolizing her importance.</li> </ul> <button class="fact-button" onclick="showMoreFacts()">Show More Facts</button> <div id="more-facts" style="display: none;"> <ul class="fact-list"> <li>Legend has it that Shah Jahan planned to build a black marble replica of the Taj Mahal on the opposite bank of the Yamuna River.</li> <li>The architecture combines elements from Islamic, Persian, Ottoman Turkish, and Indian styles.</li> <li>The structure is perfectly symmetrical, but the minarets and optical illusions create unique perspectives from every angle.</li> </ul> </div> </div> <script> function showMoreFacts() { const moreFacts = document.getElementById("more-facts"); moreFacts.style.display = moreFacts.style.display === "none" ? "block" : "none"; } </script> </body> </html>
Editor is loading...
Leave a Comment