File tree Expand file tree Collapse file tree 2 files changed +50
-0
lines changed
Expand file tree Collapse file tree 2 files changed +50
-0
lines changed Original file line number Diff line number Diff line change 1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+ < meta charset ="UTF-8 " />
5+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 " />
6+ < title > Document</ title >
7+ < link rel ="stylesheet " href ="style.css " />
8+ </ head >
9+ < body >
10+ < main >
11+ < p > HELLO</ p >
12+ </ main >
13+ </ body >
14+ </ html >
Original file line number Diff line number Diff line change 1+ @import url ('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap' );
2+ * {
3+ margin : 0 ;
4+ padding : 0 ;
5+ box-sizing : border-box;
6+ font-family : 'Bebas Neue' , cursive;
7+ }
8+ main {
9+ width : 100% ;
10+ height : 100vh ;
11+ display : flex;
12+ justify-content : center;
13+ align-items : center;
14+ }
15+ p {
16+ font-size : 15em ;
17+ color : rgb (24 , 24 , 24 );
18+ position : relative;
19+ }
20+ p ::before , p ::after {
21+ content : 'HELLO' ;
22+ position : absolute;
23+ top : 0 ;
24+ left : 0 ;
25+ color : # ffffff ;
26+ z-index : -1 ;
27+ transition : all .4s ;
28+ }
29+ p : hover ::before {
30+ transform : translate (-5px , -5px );
31+ text-shadow : 4px 4px 20px # ff0101 ;
32+ }
33+ p : hover ::after {
34+ transform : translate (5px , 5px );
35+ text-shadow : 4px 4px 20px # 351fff ;
36+ }
You can’t perform that action at this time.
0 commit comments