Dungeons By Entry
For The Dragon Write Jam: https://itch.io/jam/dragon-write-jam ,Dungeon By Entry is Eliterature that uses HTML to Build a Realm of Dragons and Mermaids through buttons
Eliterature:
https://illestpreacha.itch.io/dungeonbyentry
HTML Code
<!DOCTYPE html>
<html>
<head>
<style>
.button {
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
}
.button1 {font-size: 40px;background: linear-gradient(to right,red,orange,crimson,crimson,orange,brown,red,yellow);} /* Red */
.button2 {font-size: 30px;background: linear-gradient(to bottom,yellow,red,#fb3943,#f8aa5a,green); color: yellow;} /* Blue */
.button3 {font-size: 40px;background: linear-gradient(to bottom,#416bdf,#99c0e3,#5d97e7);color: black} /* Black */
.button4 {font-size: 46px;background: linear-gradient(to right,navy, aqua,navy,aqua,blue,aqua, teal,navy);color: aqua} /* Black */
.button5 {font-size: 46px;background: linear-gradient(to right,navy, black,navy,white,black,blue, teal,navy);color: white} /* Black */
.custom-text1 {
font-size: 25px;
color: white;
background: linear-gradient(to right,navy, aqua,navy,aqua,blue,aqua, teal,navy);
}
.custom-text2 {
font-size: 25px;
color: black;
background: linear-gradient(to right,#e5e5e5, #dcdcdc,#c9c9c9,#8a7f8d);
}
.custom-text3 {
background: linear-gradient(to right,black,white,black);
text-align: center;
}
}
</style>
</head>
<body>
<h1 class="custom-text3"> <span style="color: red;">Dungeons</span> by <span style="color: blue;">Entry </span></h1>
<h2 class="custom-text2">Enter the Dungeon, Which Dungeon, Terrain You Want to Enter?</h2>
<button class="button button1"popovertarget="example-dialog">The Fire Biome</button>
<dialog id="example-dialog" popover>
<p>🌶️🌶️🧑🚒🧑🚒🌶️🧑🚒🌶️🌋🌋🌋🌶️♨️🌋🌶️🌶️🧑🚒🌶️🌶️🌋♨️♨️🌶️♨️🧑🚒</p>
<p>Breathing Fire, Flying above</p>
<p>🌶️🔥🧑🚒🔥🌶️🌶️♨️🧑🚒🔥🔥🌋🔥</p>
<p>Wings Majestically Open as they forge their next chapter</p>
<p>🌋🌋🔥🔥🔥♨️♨️🔥🌋♨️🔥🔥🌶️🌋🌶️🧑🚒</p>
<button popovertarget="example-dialog" popovertargetaction="hide">Close</button>
</dialog>
<button class="button button2"popovertarget="example-dialog1">Volcano Biome</button>
<dialog id="example-dialog1" popover>
<p>Not all dragons call the sky home</p>
<p>some roam the grounds as guardians of the flora and fauna around</p>
<button popovertarget="example-dialog1" popovertargetaction="hide">Close</button>
</dialog>
<button class="button button3"popovertarget="example-dialog2">The Aqua Biome</button>
<dialog id="example-dialog2" popover>
<p>The ocean floor is unknown to us</p>
<p>But for them, they are a trove of knowledge</p>
<p>Beyond just a location of treasure</p>
<p>☔⛈️☔🛶⛈️🛳️🛶🛟⚓🧑🏾🔧🌊⚓⚓🏊🏻♀️⛈️⚓🛟🏊🏻♀️🚣♀️🛶🚣♀️🛳️⚓🛶</p>
<p>🛶🛶⛈️☔⛈️🚣♀️🧑🏾🔧🌊⚓⚓⚓🚣♀️</p>
<p>⛈️🏊🏻♀️🛟⛈️🛟🛟🛳️🌊🛟🧑🏾🔧🏊🏻♀️🛳️🛶🏊🏻♀️🛳️🛟⛈️☔🌊🛳️🚣♀️⚓⚓⚓</p>
<button popovertarget="example-dialog2" popovertargetaction="hide">Close</button>
</dialog>
<button class="button button5"popovertarget="example-dialog3">The Ice Dome </button>
<dialog id="example-dialog3" popover>
<p>Icy Elements Plague this Terrain</p>
<p>⛄🌨️🎿🌨️🌨️🏔️🧊🎿🏔️⛸️🍨🏂🌨️🌨️🧊🍨🏂⛄🧊🍨🏂🏔️🍨</p>
<p>Slipping is part of the experience, not the exception</p>
<p>🏂🧊🏔️🎿🧊🌨️⛄🌨️⛸️🌨️⛸️⛄</p>
<p>Balance, Friction and Winds are forces that you gather against</p>
<button popovertarget="example-dialog3" popovertargetaction="hide">close</button>
</dialog>
<p class="custom-text2"> <b> Ecosytem of the Alter: Moon Edition </b></p>
<h2>Sea Dragons and Mermaids inhabit this space, click the button to understand their part in this place</h2>
<>
<button class="button button4"popovertarget="example-dialog4">The UnderSea Biome</button>
<dialog id="example-dialog4" popover>
<p>🐳🦑🐟🧜♀️ 🧜♀️🧜🏽♀️🦑🐟🦑🤿🧜🏽♀️🦈🧜♀️🐙🐙🐙🧜🏽♀️🤿🧜♀️🦈🐳🦑</p>
<p>The ocean floor is unknown to us</p>
<p>But for them, they are a trove of knowledge</p>
<p>Beyond just a location of treasure</p>
<p>🦑🦑🦑🧜🏽♀️ 🧜🏽♀️🧜🏽♀️🧜🏽♀️🐙🧜🏽♀️ 🧜♀️🦈🐙🦈🧜🏽♀️🤿🐟🦑</p>
<p class="custom-text1"> <b>Though the Mermaids and Dragons live in this community, it isn't neccesarily harmony </b> </p>
<button popovertarget="example-dialog4" popovertargetaction="hide">Close</button>
</dialog>
</body>
</html>
