<body> <h1 style="text-align:center;">Pick the Correct Door!</h1> <p style="text-align:center;">Choose a door:</p> <div style="text-align:center; margin-top:100px; margin-bottom:100px;"> <!-- Door 1 --> <a href="#door1"> <div style=" width:120px; height:120px; background:linear-gradient(135deg, red, darkred); display:inline-block; margin:80px; border-radius:20px; border:5px solid black; cursor:pointer; font-size:40px; line-height:120px; ">⚔️</div> </a> <!-- Door 2 (correct) --> <a href="#door2"> <div style=" width:120px; height:120px; background:linear-gradient(135deg, blue, darkblue); display:inline-block; margin:80px; border-radius:20px; border:5px solid black; cursor:pointer; font-size:40px; line-height:120px; ">☀️</div> </a> <!-- Door 3 --> <a href="#door3"> <div style=" width:120px; height:120px; background:linear-gradient(135deg, green, darkgreen); display:inline-block; margin:80px; border-radius:20px; border:5px solid black; cursor:pointer; font-size:40px; line-height:120px; ">⚽️</div> </a> </div> <!-- Results spaced far below --> <div id="door1" style="text-align:center; margin-top:2000px; font-size:60px;"> <h2>Door 1</h2> <p>❌ Wrong door! ⚠️</p> </div> <div id="door2" style="text-align:center; margin-top:2000px; font-size:60px;"> <h2>Door 2</h2> <p>✅ You found the treasure! ✨</p> </div> <div id="door3" style="text-align:center; margin-top:2000px; font-size:60px;"> <h2>Door 3</h2> <p>❌ Wrong door! ⚠️</p> </div> </body>
Same as featured no radios as styles dont work can scroll to areas
