diff options
| -rw-r--r-- | index.html | 40 | ||||
| -rw-r--r-- | script.js | 0 | ||||
| -rw-r--r-- | style.css | 67 |
3 files changed, 107 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..35f18ef --- /dev/null +++ b/index.html @@ -0,0 +1,40 @@ +<html> + +<head> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta charset="utf-8" /> + <title>Wednesdayle</title> + <link rel="stylesheet" href="style.css" /> + <script src="script.js"></script> +</head> + +<body> + <main> + <section id="game-area"> + <div id="box0"> </div> + <div id="box1"> </div> + <div id="box2"> </div> + <div id="box3"> </div> + <div id="box4"> </div> + <div id="box5"> </div> + <div id="box6"> </div> + <div id="box7"> </div> + <div id="box8"> </div> + </section> + <section id="keyboard"> + <div id="row0"> + <button id="key00">W</button> + <button id="key01">E</button> + <button id="key02">Y</button> + </div> + <div id="row1"> + <button id="key10">A</button> + <button id="key11">S</button> + <button id="key12">D</button> + <button id="key13">N</button> + </div> + </section> + </main> +</body> + +</html> \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/script.js diff --git a/style.css b/style.css new file mode 100644 index 0000000..78686f8 --- /dev/null +++ b/style.css @@ -0,0 +1,67 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + width: 100vw; + height: 100vh; +} + +main { + display: flex; + flex-direction: column; + justify-content: space-between; +} + +#game-area { + margin: 0 auto; + padding: 2rem; + width: 32rem; + aspect-ratio: 1 / 1; + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1rem; +} + +#game-area div { + border: 2px solid black; +} + +/* +wey +asdn + +*/ +#keyboard { + padding-bottom: 2rem; +} + +#row0, +#row1 { + display: flex; + flex-direction: row; + justify-content: center; + gap: 0.5rem; + margin: 0.5rem 0; +} + +button { + border: 1px solid salmon; + border-radius: 0.2rem; + width: 10vw; + height: 10vw; +} + +@media (max-width: 40rem) { + + /* Modile target */ + #game-area { + width: 75vw; + } +} + +@media (min-width: 40rem) { + /* Desktop target */ +} \ No newline at end of file |