1.0

2026-05-13 17:11:50 +00:00 · 2021-10-06 21:35:32 +02:00
parent 2110666e1a
commit 959e2b3e62
3 changed files with 109 additions and 0 deletions
@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Title</title>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS v5.0.2 -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <div class="container">
+        <div class="row text-center">
+            <h3 class="turn turn-hacker">Hacker's turn</h3>
+        </div>
+
+
+        <div class="row text-center">
+            <h1 class="title">Question ???</h1>
+        </div>
+        <div class="row text-center bot">
+            <div class=" col-md-6">
+                <div class="choose-btn red">
+                    Hack the NSA
+                </div>
+            </div>
+            <div class="col-md-6">
+                <div class="choose-btn blue">
+                    Hack the bakery
+                </div>
+            </div>
+            <div class="col-md-6">
+                <div class="choose-btn green">
+                    Shop
+                </div>
+            </div>
+            <div class="col-md-6">
+                <div class="choose-btn purple">
+                    Sleep
+                </div>
+            </div>
+        </div>
+    </div>
+        
+
+    <!-- Bootstrap JavaScript Libraries -->
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
+  </body>
+</html>
@@ -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);}