2025-08-25 13:59:15 +08:00
|
|
|
@tailwind base;
|
|
|
|
|
@tailwind components;
|
|
|
|
|
@tailwind utilities;
|
2025-08-26 11:25:53 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
body { font-family: 'Roboto', sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; }
|
|
|
|
|
.container { text-align: center; margin: 20px; }
|
|
|
|
|
.header { background: #D32F2F; padding: 10px 0; color: white; font-size: 24px; font-weight: 500; text-align: center; }
|
|
|
|
|
.banner { width: 100%; max-width: 600px; margin: 0 auto 20px; }
|
|
|
|
|
.banner img { width: 100%; height: auto; }
|
|
|
|
|
.content { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 10px 20px; max-width: 600px; margin: 0 auto; justify-content: center; }
|
|
|
|
|
@media (max-width: 600px) { .content { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
|
|
|
|
|
@media (max-width: 400px) { .content { grid-template-columns: repeat(2, 1fr); gap: 8px; } .card { width: auto; max-width: 160px; } }
|
|
|
|
|
.card { width: 100%; max-width: 180px; margin: 0 auto; display: flex; justify-content: center; align-items: center;
|
|
|
|
|
background: linear-gradient(135deg, #FF4081, #FF4081); color: white; border-radius: 10px; text-align: center;
|
|
|
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); overflow: hidden; cursor: pointer; }
|
|
|
|
|
.card:hover { transform: scale(1.05); }
|
|
|
|
|
.card img { width: 100%; height: auto; object-fit: contain; }
|
|
|
|
|
.section { display: none; }
|
|
|
|
|
.section.active { display: block; }
|
|
|
|
|
|
