Skip to content

Commit 06ae68e

Browse files
author
codeblogger
committed
html and css
1 parent 01b7ab6 commit 06ae68e

File tree

3 files changed

+97
-0
lines changed

3 files changed

+97
-0
lines changed

Only Css Menu/Screenshot_1.png

9.59 KB
Loading

Only Css Menu/only css menu.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>page</title>
6+
<link rel="stylesheet" type="text/css" href="only css menu.css">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
9+
</head>
10+
<body>
11+
12+
<div class="container">
13+
<div class="link">
14+
<div class="text">Home</div>
15+
</div>
16+
<div class="link">
17+
<div class="text">Projects</div>
18+
</div>
19+
<div class="link">
20+
<div class="text">Art</div>
21+
</div>
22+
<div class="link">
23+
<div class="text">Social</div>
24+
</div>
25+
<div class="link">
26+
<div class="text">Setup</div>
27+
</div>
28+
<div class="link">
29+
<div class="text">Help</div>
30+
</div>
31+
</div>
32+
33+
<script>
34+
35+
36+
</script>
37+
</body>
38+
</html>

Only Css Menu/only css menu.scss

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
html, body{
2+
padding: 0px;
3+
margin: 0px;
4+
font-family: Verdana, Geneva, Tahoma, sans-serif;
5+
color: #fff;
6+
height: 100%;
7+
8+
.container{
9+
max-width: 200px;
10+
background: #262626;
11+
margin: 40px auto;
12+
padding: 10px 0px 20px 0px;
13+
border: 1px solid #111;
14+
border-radius: 4px;
15+
box-shadow: 0px 4px 5px rgba(0,0,0,.75);
16+
17+
.link{
18+
font-size: 16px;
19+
font-weight: bold;
20+
text-align: center;
21+
position: relative;
22+
height: 40px;
23+
line-height: 40px;
24+
margin-top: 10px;
25+
overflow: hidden;
26+
width: 90%;
27+
margin-left: 5%;
28+
cursor: pointer;
29+
30+
&:after{
31+
content: "";
32+
position: absolute;
33+
width: 40%;
34+
border-bottom: 1px solid rgba(255,255,255,.5);
35+
bottom: 50%;
36+
left: -100%;
37+
transition-delay: all .5s;
38+
transition: all .5s;
39+
}
40+
&:hover:after,.link.hover:after{
41+
left:100%;
42+
}
43+
.text{
44+
text-shadow:0px -40px 0px rgba(255, 255, 255, 1);
45+
transition:all 0.75s;
46+
transform:translateY(100%);
47+
transition-delay:all 0.25s;
48+
}
49+
}
50+
.link:hover .text,
51+
.link.hover .text{
52+
text-shadow:0px -40px 0px rgba(255, 255, 255, 0);
53+
transform:translateY(0%) translateZ(0) scale(1.1);
54+
font-weight:600;
55+
}
56+
}
57+
58+
59+
}

0 commit comments

Comments
 (0)