updated the html and css

AlexBMA · Aug 24, 2020 · dbb307d · dbb307d
1 parent 687eb9c
commit dbb307d
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -5,11 +5,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Picture in picture</title>
     <!-- <link rel="icon" type="image/png" href="https://www.google.com/s2/u/0/favicons?domain=css-tricks.com"> -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
-    <h1>Hello, World!</h1>
+    <!-- Video -->
+    <video id="video" controls height="360" width="640" hidden></video>
+    <!-- Button -->
+    <div class="button-container">
+        <button id="button">START</button>
+    </div>
     <!-- Script -->
     <script src="script.js"></script>
 </body>

diff --git a/style.css b/style.css
@@ -1,8 +1,49 @@
+@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
+
 html {
     box-sizing: border-box;
 }
 
 body {
     margin: 0;
-    min-height: 100vh;
-}
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgb(37, 37, 37);
+}
+
+
+.button-container{
+    border:2px solird black;
+    padding: 10px;
+    border-radius: 7px;
+    box-shadow: inset 0 20px 4px -19px rgba(255, 255, 255, 0.7);
+}
+
+button{
+    cursor: pointer;
+    outline: none;
+    width: 120px;
+    height: 75px;
+    font-family: 'Lobster', cursive;
+    font-size-adjust: 25px;
+    color: white;
+    text-shadow: 0 2px 5px black;
+    background: linear-gradient(to top, #696969,#575757);
+    border: 2px solid black;
+    border-radius: 7px;
+    box-shadow: inset 0 20px 4px -19px rgba(255, 255, 255, 0.4), 0 12px 12px 0 rgba(0,0,0,0.3);
+
+}
+
+button:hover{
+    background: linear-gradient(to bottom, #696969,#575757);
+
+}
+
+button:active{
+    transform:translateY(3px);
+    box-shadow: 0 6px 6px 0 rgba(0,0,0,0.3);
+
+}