diff --git a/index.html b/index.html new file mode 100644 index 0000000..f30a6f8 --- /dev/null +++ b/index.html @@ -0,0 +1,53 @@ + + + + Title + + + + + + + + + + +
+
+

Hacker's turn

+
+ + +
+

Question ???

+
+
+
+
+ Hack the NSA +
+
+
+
+ Hack the bakery +
+
+
+
+ Shop +
+
+
+
+ Sleep +
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/script.ts b/script.ts new file mode 100644 index 0000000..e69de29 diff --git a/style.css b/style.css new file mode 100644 index 0000000..c40b32c --- /dev/null +++ b/style.css @@ -0,0 +1,56 @@ +:root { + --border-radius : 15px; + + --white: #ecf0f1; + --black: #2c3e50; + + --red: #e74c3c; + --blue: #3498db; + --green: #2ecc71; + --purple: #9b59b6; + + --dark-red: #c0392b; + --dark-blue: #2980b9; + --dark-green: #27ae60; + --dark-purple: #8e44ad; +} + +.container { + min-height: 100vh; +} + +.turn { + text-align: center; + border-radius: 0 0 var(--border-radius) var(--border-radius); + padding: 15px 0; +} + +.turn-hacker {background-color: var(--red);} +.turn-cyber {color:var(--blue);} + +.title {margin: 100px 0;} + +.choose-btn { + font-size: 2em; + margin: 5px; + padding: 50px; + border-radius: var(--border-radius); + color: var(--white); + transition: all 0.1s ease-out; +} + +.red {background-color: var(--red);} +.red:hover {box-shadow: 0 0 10px var(--red);} +.red:active {background-color: var(--dark-red);} + +.blue {background-color: var(--blue);} +.blue:hover {box-shadow: 0 0 10px var(--blue);} +.blue:active {background-color: var(--dark-blue);} + +.green {background-color: var(--green);} +.green:hover {box-shadow: 0 0 10px var(--green);} +.green:active {background-color: var(--dark-green);} + +.purple {background-color: var(--purple);} +.purple:hover {box-shadow: 0 0 10px var(--purple);} +.purple:active {background-color: var(--dark-purple);}