File tree Expand file tree Collapse file tree 3 files changed +97
-0
lines changed Expand file tree Collapse file tree 3 files changed +97
-0
lines changed Original file line number Diff line number Diff line change
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 >
Original file line number Diff line number Diff line change
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
+ }
You can’t perform that action at this time.
0 commit comments