From a1f975f780f5f782603598f018be4dd96bfa4eba Mon Sep 17 00:00:00 2001 From: Andreas Zweili Date: Wed, 20 Jan 2021 22:29:23 +0100 Subject: [PATCH] add monster slayer game --- prj-monster-01-starting-setup/app.js | 0 prj-monster-01-starting-setup/index.html | 44 +++++++++ prj-monster-01-starting-setup/styles.css | 119 +++++++++++++++++++++++ 3 files changed, 163 insertions(+) create mode 100644 prj-monster-01-starting-setup/app.js create mode 100644 prj-monster-01-starting-setup/index.html create mode 100644 prj-monster-01-starting-setup/styles.css diff --git a/prj-monster-01-starting-setup/app.js b/prj-monster-01-starting-setup/app.js new file mode 100644 index 0000000..e69de29 diff --git a/prj-monster-01-starting-setup/index.html b/prj-monster-01-starting-setup/index.html new file mode 100644 index 0000000..9ed77d3 --- /dev/null +++ b/prj-monster-01-starting-setup/index.html @@ -0,0 +1,44 @@ + + + + + + + Vue Basics + + + + + + + +
+

Monster Slayer

+
+
+
+

Monster Health

+
+
+
+
+
+

Your Health

+
+
+
+
+
+ + + + +
+
+

Battle Log

+
    +
    +
    + + + diff --git a/prj-monster-01-starting-setup/styles.css b/prj-monster-01-starting-setup/styles.css new file mode 100644 index 0000000..b9cb4ce --- /dev/null +++ b/prj-monster-01-starting-setup/styles.css @@ -0,0 +1,119 @@ +* { + box-sizing: border-box; +} + +html { + font-family: "Jost", sans-serif; +} + +body { + margin: 0; +} + +header { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); + padding: 0.5rem; + background-color: #880017; + color: white; + text-align: center; + margin-bottom: 2rem; +} + +section { + width: 90%; + max-width: 40rem; + margin: auto; +} + +.healthbar { + width: 100%; + height: 40px; + border: 1px solid #575757; + margin: 1rem 0; + background: #fde5e5; +} + +.healthbar__value { + background-color: #00a876; + width: 100%; + height: 100%; +} + +.container { + text-align: center; + padding: 0.5rem; + margin: 1rem auto; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); + border-radius: 12px; +} + +#monster h2, +#player h2 { + margin: 0.25rem; +} + +#controls { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: center; +} + +button { + font: inherit; + border: 1px solid #88005b; + background-color: #88005b; + color: white; + padding: 1rem 2rem; + border-radius: 12px; + margin: 1rem; + width: 12rem; + cursor: pointer; + box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26); +} + +button:focus { + outline: none; +} + +button:hover, +button:active { + background-color: #af0a78; + border-color: #af0a78; + box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.26); +} + +button:disabled { + background-color: #ccc; + border-color: #ccc; + box-shadow: none; + color: #3f3f3f; + cursor: not-allowed; +} + +#log ul { + list-style: none; + margin: 0; + padding: 0; +} + +#log li { + margin: 0.5rem 0; +} + +.log--player { + color: #7700ff; +} + +.log--monster { + color: #da8d00; +} + +.log--damage { + color: red; +} + +.log--heal { + color: green; +}