*{box-sizing:border-box}
body{
margin:0;
font-family:Arial,"Microsoft YaHei",sans-serif;
color:#fff;
background:
linear-gradient(rgba(5,15,30,.85),rgba(5,15,30,.95)),
url("https://images.unsplash.com/photo-1634017839464-5c339ebe3cb4");
background-size:cover;
background-attachment:fixed;
min-height:100vh;
}
header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 8%;
background:rgba(0,0,0,.25);
backdrop-filter:blur(10px);
}
.logo{
font-size:26px;
font-weight:bold;
}
nav a{
color:white;
text-decoration:none;
margin-left:20px;
}
.hero{
text-align:center;
padding:100px 20px 60px;
}
.hero h1{
font-size:48px;
}
.hero p{
font-size:20px;
}
.button{
display:inline-block;
margin:20px 10px;
padding:12px 25px;
border-radius:10px;
background:rgba(255,255,255,.15);
color:white;
text-decoration:none;
border:1px solid rgba(255,255,255,.3);
}
.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
padding:40px 8%;
}
.card{
background:rgba(255,255,255,.12);
padding:25px;
border-radius:16px;
backdrop-filter:blur(8px);
}
footer{
text-align:center;
padding:30px;
}
@media(max-width:700px){
header{flex-direction:column}
nav{margin-top:15px}
.hero h1{font-size:32px}
}