Our Team: The Heroes of the Apocalypse</ประก> <style> body { background-color: #FF00FF; background-image: url('neon-lights.jpg'); background-position: center; background-size: cover; font-family: "Helvetica, sans-serif"; color: #FFFFFF; } h1 { text-shadow: 0 0 5px #000000; border-bottom: 5px solid #FF00FF; font-size: 48px; font-weight: bold; margin-top: 20px; margin-bottom: 20px; } h2 { text-shadow: 0 0 5px #000000; border-bottom: 4px solid #FF00FF; font-size: 24px; font-weight: bold; margin-top: 10px; margin-bottom: 10px; } h3 { text-shadow: 0 0 5px #000000; border-bottom: 3px solid #FF00FF; font-size: 18px; ประก font-weight: bold; margin-top: 5px; margin-bottom: 5px; } a { color: #FF0000; text-decoration: none; border-bottom: 2px solid #FF00FF; text-shadow: 0 1px 0 #000000; transition: color 0.1s; margin: 10px; } a:hover { color: #FF00FF; text-decoration: none; border-bottom: 2px solid #FF00FF; text-shadow: 0 1px 0 #000000; transition: color 0.1s; } #team { width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; padding: 20px; background-color: #000000; border: 4px solid #FFFFFF; border-radius: 10px; box-shadow: 0 0 10px #000000; } .team-member { width: 200px; height: 250px; margin: 10px; background-color: #333333; border: 4px solid #FFFFFF; border-radius: 10px; box-shadow: 0 0 10px #000000; display: inline-block; transition: background-color 0.5s; cursor: pointer; } .team-member:hover { background-color: #FF0000; color: #FFFFFF; border-color: #000000; transition: background-color 0.5s; box-shadow: 0 0 10px #FF00FF; } </style> <body> <div id="team"> <h1>Our Team: The Heroes of the Apocalypse</h1> <h2>We're the ones who saved you from the impending doom</h2> <div class="team-member"> <h3>John "Apocalypse" Smith</h3> <img src="apocalypse.jpg" alt="John Apocalypse Smith" style="width: 150px; height: 150px; border: 4px solid #FFFFFF; border-radius: 10px; background-color: #000000; padding: 10px; display: block; margin: 0 auto;"/> <p>Expert in all things apocalyptic and catastrophic. Can predict the end of the world with 99% accuracy.</p> <a href="/subpages/OurTeam/JohnsApocalypse">Learn more about John</a> </div> <div class="team-member"> <h3>Jane "Firestar" Doe</h3> <img src="firestar.jpg" alt="Jane Firestar" style="width: 150px; height: 150px; border: 4px solid #FFFFFF; border-radius: 10px; background-color: #000000; padding: 10px; display: block; margin: 0 auto;"/> <p>Skilled pyromancer and expert in all things fire-based.</p> <a href="/subpages/OurTeam/JanesFirestar">Learn more about Jane</a> </div> <div class="team-member"> <h3>Bob "Bulldozer" Johnson</h3> <img src="bulldozer.jpg" alt="Bob Bulldozer" style="width: 150px; height: 150px; border: 4px solid #FFFFFF; border-radius: 10px; background-color: #000000; padding: 10px; display: block; margin: 0 auto;"/> <p>Master of the bulldozer, the ultimate vehicle for destruction.</p> <a href="/subpages/OurTeam/BobsBulldozer">Learn more about Bob</a> </div> </div> <a href="/subpages/OurTeam/OurTeamMembersList">See all our heroes</a> </body> </html>