From 9a0e1b22b3aa0452271a94f75bc2d955f5648862 Mon Sep 17 00:00:00 2001 From: Brandon Dickson Date: Sat, 14 Nov 2020 13:30:05 +0000 Subject: [PATCH] first commit --- index.html | 32 ++++++++++++++ script.js | 1 + style.css | 119 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 152 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..b25c175 --- /dev/null +++ b/index.html @@ -0,0 +1,32 @@ + + + + + + + + Guess My Number! + + +
+

Guess My Number!

+

(Between 1 and 20)

+ +
?
+
+
+
+ + +
+
+

Start guessing...

+

💯 Score: 20

+

+ 🥇 Highscore: 0 +

+
+
+ + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..ad9a93a --- /dev/null +++ b/script.js @@ -0,0 +1 @@ +'use strict'; diff --git a/style.css b/style.css new file mode 100644 index 0000000..dfed55a --- /dev/null +++ b/style.css @@ -0,0 +1,119 @@ +@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: inherit; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Press Start 2P', sans-serif; + color: #eee; + background-color: #222; + /* background-color: #60b347; */ +} + +/* LAYOUT */ +header { + position: relative; + height: 35vh; + border-bottom: 7px solid #eee; +} + +main { + height: 65vh; + color: #eee; + display: flex; + align-items: center; + justify-content: space-around; +} + +.left { + width: 52rem; + display: flex; + flex-direction: column; + align-items: center; +} + +.right { + width: 52rem; + font-size: 2rem; +} + +/* ELEMENTS STYLE */ +h1 { + font-size: 4rem; + text-align: center; + position: absolute; + width: 100%; + top: 52%; + left: 50%; + transform: translate(-50%, -50%); +} + +.number { + background: #eee; + color: #333; + font-size: 6rem; + width: 15rem; + padding: 3rem 0rem; + text-align: center; + position: absolute; + bottom: 0; + left: 50%; + transform: translate(-50%, 50%); +} + +.between { + font-size: 1.4rem; + position: absolute; + top: 2rem; + right: 2rem; +} + +.again { + position: absolute; + top: 2rem; + left: 2rem; +} + +.guess { + background: none; + border: 4px solid #eee; + font-family: inherit; + color: inherit; + font-size: 5rem; + padding: 2.5rem; + width: 25rem; + text-align: center; + display: block; + margin-bottom: 3rem; +} + +.btn { + border: none; + background-color: #eee; + color: #222; + font-size: 2rem; + font-family: inherit; + padding: 2rem 3rem; + cursor: pointer; +} + +.btn:hover { + background-color: #ccc; +} + +.message { + margin-bottom: 8rem; + height: 3rem; +} + +.label-score { + margin-bottom: 2rem; +}