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>