box-shadow

imdhruvgupta · imdhruvgupta · commit 56c59103c575 · 2019-06-18T15:20:04.000+05:30
diff --git a/Lecture04/box-shadow/index.html b/Lecture04/box-shadow/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div id="box">
+    Click Me!
+  </div>
+</body>
+</html>
diff --git a/Lecture04/box-shadow/style.css b/Lecture04/box-shadow/style.css
@@ -0,0 +1,22 @@
+#box {
+    margin: 50px;
+    padding: 10px;
+    height: 100px;
+    width: 300px;
+    background-color: darkcyan;
+    color: white;
+    box-shadow: -5px -5px 5px darkslategray;
+    font-size: 25pt;
+}
+
+#box:hover {
+    transform: translate(-10px, -10px);
+    box-shadow: 15px 15px 8px darkslategray;
+    transition: 0.5s;
+}
+
+#box:active {
+    transform: translate(3px, 3px);
+    box-shadow: 2px 2px 3px darkslategray;
+    transition: 0.2s;
+}
