Skip to content

Commit efd178b

Browse files
hariket-sheth1hariket-sheth1
committed
Added Error CSS
1 parent 64377ba commit efd178b

1 file changed

Lines changed: 132 additions & 0 deletions

File tree

‎error/style.css‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
2+
*{
3+
margin: 0;
4+
padding: 0;
5+
outline: none;
6+
box-sizing: border-box;
7+
font-family: 'Poppins', sans-serif;
8+
}
9+
body{
10+
height: 100vh;
11+
background: #0f0c29;
12+
background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29);
13+
background: linear-gradient(to right, #24243e, #302b63, #0f0c29);
14+
background-size: 400%;
15+
}
16+
#error-page{
17+
position: absolute;
18+
top: 10%;
19+
left: 15%;
20+
right: 15%;
21+
bottom: 10%;
22+
display: flex;
23+
align-items: center;
24+
justify-content: center;
25+
background: #fff;
26+
box-shadow: 0px 5px 10px rgba(0,0,0,0.1);
27+
}
28+
#error-page .content{
29+
max-width: 600px;
30+
text-align: center;
31+
}
32+
.content h1{
33+
font-size: 18vw;
34+
line-height: 1em;
35+
position: relative;
36+
}
37+
.content h1:after{
38+
position: absolute;
39+
content: attr(data-text);
40+
top: 0;
41+
left: 0;
42+
right: 0;
43+
background: #283c86;
44+
background: -webkit-linear-gradient(to right, #54c256, #283c86);
45+
background: linear-gradient(to right, #54c256, #283c86);
46+
background-size: 400%;
47+
-webkit-background-clip: text;
48+
-webkit-text-fill-color: transparent;
49+
text-shadow: 1px 1px 2px rgba(255,255,255,0.25);
50+
animation: animate 10s ease-in-out infinite;
51+
}
52+
@keyframes animate {
53+
0%{
54+
background-position: 0 0;
55+
}
56+
25%{
57+
background-position: 100% 0;
58+
}
59+
50%{
60+
background-position: 100% 100%;
61+
}
62+
75%{
63+
background-position: 0% 100%;
64+
}
65+
100%{
66+
background-position: 0% 0%;
67+
}
68+
}
69+
.content h4{
70+
font-size: 1.5em;
71+
margin-bottom: 20px;
72+
text-transform: uppercase;
73+
color: #000;
74+
font-size: 2em;
75+
max-width: 600px;
76+
position: relative;
77+
}
78+
.content h4:after{
79+
position: absolute;
80+
content: attr(data-text);
81+
top: 0;
82+
left: 0;
83+
right: 0;
84+
text-shadow: 1px 1px 2px rgba(255,255,255,0.4);
85+
-webkit-background-clip: text;
86+
-webkit-text-fill-color: transparent;
87+
}
88+
.content p{
89+
font-size: 1.2em;
90+
color: #0d0d0d;
91+
}
92+
.content .btns{
93+
margin: 25px 0;
94+
display: inline-flex;
95+
}
96+
.content .btns a{
97+
display: inline-block;
98+
margin: 0 10px;
99+
text-decoration: none;
100+
border: 2px solid #283c86;
101+
color: #283c86;
102+
font-weight: 500;
103+
padding: 10px 25px;
104+
border-radius: 25px;
105+
text-transform: uppercase;
106+
transition: all 0.3s ease;
107+
}
108+
.content .btns a:hover{
109+
background: #283c86;
110+
color: #fff;
111+
}
112+
.content .btns1{
113+
margin: 25px 0;
114+
display: inline-flex;
115+
}
116+
.content .btns1 a{
117+
display: inline-block;
118+
margin: 0 10px;
119+
text-decoration: none;
120+
border: 2px solid #283c86;
121+
background: #283c86;
122+
color: #fff;
123+
font-weight: 500;
124+
padding: 10px 25px;
125+
border-radius: 25px;
126+
text-transform: uppercase;
127+
transition: all 0.3s ease;
128+
}
129+
.content .btns1 a:hover{
130+
background: #fff;
131+
color: #283c86;
132+
}

0 commit comments

Comments
 (0)