html and css

codeblogger · codeblogger · commit 06ae68ee62e8 · 2019-03-14T08:54:12.000+03:00
diff --git a/Only Css Menu/Screenshot_1.png b/Only Css Menu/Screenshot_1.png
diff --git a/Only Css Menu/only css menu.html b/Only Css Menu/only css menu.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>page</title>
+    <link rel="stylesheet" type="text/css" href="only css menu.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
+</head>
+<body>
+
+    <div class="container">
+        <div class="link">
+          <div class="text">Home</div>
+        </div>
+        <div class="link">
+          <div class="text">Projects</div>
+        </div>
+        <div class="link">
+          <div class="text">Art</div>
+        </div>
+        <div class="link">
+          <div class="text">Social</div>
+        </div>
+        <div class="link">
+          <div class="text">Setup</div>
+        </div>
+        <div class="link">
+          <div class="text">Help</div>
+        </div>
+    </div>
+
+    <script>
+
+   
+    </script>
+</body>
+</html>
diff --git a/Only Css Menu/only css menu.scss b/Only Css Menu/only css menu.scss
@@ -0,0 +1,59 @@
+html, body{
+    padding: 0px;
+    margin: 0px;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+    color: #fff;
+    height: 100%;
+
+    .container{
+        max-width: 200px;
+        background: #262626;
+        margin: 40px auto;
+        padding: 10px 0px 20px 0px;
+        border: 1px solid #111;
+        border-radius: 4px;
+        box-shadow: 0px 4px 5px rgba(0,0,0,.75);
+
+        .link{
+            font-size: 16px;
+            font-weight: bold;
+            text-align: center;
+            position: relative;
+            height: 40px;
+            line-height: 40px;
+            margin-top: 10px;
+            overflow: hidden;
+            width: 90%;
+            margin-left: 5%;
+            cursor: pointer;
+
+            &:after{
+                content: "";
+                position: absolute;
+                width: 40%;
+                border-bottom: 1px solid rgba(255,255,255,.5);
+                bottom: 50%;
+                left: -100%;
+                transition-delay: all .5s;
+                transition: all .5s;
+            }
+            &:hover:after,.link.hover:after{
+                left:100%;
+            }
+            .text{
+                text-shadow:0px -40px 0px rgba(255, 255, 255, 1);
+                transition:all 0.75s;
+                transform:translateY(100%);
+                transition-delay:all 0.25s;
+            }
+        }
+        .link:hover .text,
+        .link.hover .text{
+            text-shadow:0px -40px 0px rgba(255, 255, 255, 0);
+            transform:translateY(0%) translateZ(0) scale(1.1);
+            font-weight:600;
+        }
+    }
+
+
+}
