142 lines
2.2 KiB
CSS
142 lines
2.2 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');
|
|
|
|
*{
|
|
margin:0;
|
|
padding:0;
|
|
box-sizing:border-box;
|
|
font-family:Inter,sans-serif;
|
|
}
|
|
|
|
body{
|
|
min-height:100vh;
|
|
background:#050816;
|
|
overflow:hidden;
|
|
color:white;
|
|
}
|
|
|
|
.bg{
|
|
position:fixed;
|
|
inset:0;
|
|
background:
|
|
radial-gradient(circle at 20% 20%,#3b82f660,transparent 30%),
|
|
radial-gradient(circle at 80% 80%,#8b5cf660,transparent 30%),
|
|
radial-gradient(circle at 50% 50%,#06b6d460,transparent 40%);
|
|
filter:blur(80px);
|
|
z-index:-1;
|
|
}
|
|
|
|
.container{
|
|
min-height:100vh;
|
|
display:flex;
|
|
justify-content:center;
|
|
align-items:center;
|
|
padding:30px;
|
|
}
|
|
|
|
.card{
|
|
width:900px;
|
|
max-width:100%;
|
|
padding:50px;
|
|
border-radius:30px;
|
|
background:rgba(255,255,255,.05);
|
|
backdrop-filter:blur(25px);
|
|
border:1px solid rgba(255,255,255,.1);
|
|
box-shadow:0 30px 80px rgba(0,0,0,.5);
|
|
text-align:center;
|
|
}
|
|
|
|
.status{
|
|
display:inline-flex;
|
|
gap:10px;
|
|
align-items:center;
|
|
padding:10px 20px;
|
|
border-radius:999px;
|
|
background:#22c55e20;
|
|
color:#4ade80;
|
|
font-weight:bold;
|
|
margin-bottom:30px;
|
|
}
|
|
|
|
.status span{
|
|
width:12px;
|
|
height:12px;
|
|
border-radius:50%;
|
|
background:#4ade80;
|
|
animation:blink 1s infinite;
|
|
}
|
|
|
|
@keyframes blink{
|
|
50%{
|
|
opacity:.3;
|
|
}
|
|
}
|
|
|
|
h1{
|
|
font-size:65px;
|
|
margin-bottom:20px;
|
|
font-weight:800;
|
|
}
|
|
|
|
.gradient{
|
|
background:linear-gradient(
|
|
90deg,
|
|
#38bdf8,
|
|
#818cf8,
|
|
#a855f7
|
|
);
|
|
-webkit-background-clip:text;
|
|
-webkit-text-fill-color:transparent;
|
|
}
|
|
|
|
p{
|
|
color:#cbd5e1;
|
|
line-height:1.8;
|
|
font-size:20px;
|
|
margin-bottom:40px;
|
|
}
|
|
|
|
.boxes{
|
|
display:grid;
|
|
grid-template-columns:repeat(3,1fr);
|
|
gap:20px;
|
|
}
|
|
|
|
.box{
|
|
padding:25px;
|
|
border-radius:20px;
|
|
background:rgba(255,255,255,.05);
|
|
border:1px solid rgba(255,255,255,.08);
|
|
}
|
|
|
|
.box h2{
|
|
font-size:35px;
|
|
color:#38bdf8;
|
|
margin-bottom:10px;
|
|
}
|
|
|
|
.box p{
|
|
font-size:15px;
|
|
margin:0;
|
|
}
|
|
|
|
.footer{
|
|
margin-top:40px;
|
|
color:#94a3b8;
|
|
font-size:15px;
|
|
}
|
|
|
|
@media(max-width:768px){
|
|
|
|
h1{
|
|
font-size:45px;
|
|
}
|
|
|
|
.boxes{
|
|
grid-template-columns:1fr;
|
|
}
|
|
|
|
.card{
|
|
padding:30px;
|
|
}
|
|
|
|
} |