diff options
| author | Frederick Yin <fkfd@fkfd.me> | 2022-04-17 17:04:25 +0800 |
|---|---|---|
| committer | Frederick Yin <fkfd@fkfd.me> | 2022-04-17 17:04:25 +0800 |
| commit | c187a1bcea069f3decc93bd65f96fd723b763d94 (patch) | |
| tree | c1ad3650930de931ed49eb83f6229bb9f30336c5 | |
Initial commit, static stuff
| -rw-r--r-- | index.css | 76 | ||||
| -rw-r--r-- | index.html | 50 |
2 files changed, 126 insertions, 0 deletions
diff --git a/index.css b/index.css new file mode 100644 index 0000000..01e8887 --- /dev/null +++ b/index.css @@ -0,0 +1,76 @@ +body { + font-family: "Noto Sans", Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif; + position: relative; + width: 90%; + margin-left: 0; + left: 5%; + text-align: center; +} + +#main { + width: 100%; +} + +h1 { + font-weight: normal; +} + +.block { + background-color: #ccc; + border-radius: 10px; + padding: 20px; + margin-top: 20px; + margin-bottom: 20px; +} + +#word { + font-weight: bolder; + font-size: 2em; +} + +#input { + height: 2em; + width: 90%; + max-width: 900px; + font-size: 1.5em; +} + +#controls { + position: relative; + width: 300px; + left: 50%; + margin-left: -150px; + padding-top: 1em; + padding-bottom: 1em; +} + +#controls button { + width: 100%; + margin-top: 0.5em; + padding: 1em; + border-radius: 5px; + cursor: pointer; + font-weight: bold; + color: #eee; +} + +#ok { + background-color: #6cc0da; +} + +#hint { + background-color: black; +} + +#show-answer { + background-color: #ef4523; +} + +#track { + font-size: 1.5em; + font-weight: bold; +} + +ul { + text-align: left; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..1edf2b2 --- /dev/null +++ b/index.html @@ -0,0 +1,50 @@ +<!doctype html> +<html> + <head> + <title>One tøp song</title> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel="stylesheet" href="index.css"> + </head> + <body> + <div id="main"> + <header> + <h1>This word only appears in one twenty øne piløts song</h1> + </header> + <article> + <div class="block" id="word">cheetah</div> + <div class="block" id="interaction"> + <p>What song is it? (acronym works too)</p> + <input id="input" autocomplete="off" autofocus /> + <div id="controls"> + <button id="ok">OK</button> <br /> + <button id="hint">Hint</button> <br /> + <button id="show-answer">Show answer</button> + </div> + </div> + <div class="block" id="answer"> + <div id="album">Trench</div> + <div id="track">Pet Cheetah</div> + <div id="lines">Pet cheetah, cheetah</div> + </div> + </article> + <footer> + <details> + <summary>List of songs included</summary> + <ul> + <li>All of Self-Titled</li> + <li>All of Regional at Best</li> + <li>All of Vessel</li> + <li>All of Blurryface</li> + <li>All of Trench</li> + <li>All of Scaled And Icy</li> + <li>Time To Say Goodbye</li> + <li>Cancer</li> + <li>Heathens</li> + <li>Level Of Concern</li> + <li>Christmas Saves The Year</li> + </ul> + </details> + </footer> + </div> + </body> +</html> |