Spaces:
Running
Running
| ```css | |
| /* Mobile-first approach */ | |
| body { | |
| font-size: 14px; | |
| line-height: 1.5; | |
| margin: 0; | |
| padding: 0; | |
| font-family: Arial, sans-serif; | |
| } | |
| .main-heading { | |
| font-size: 24px; | |
| margin-bottom: 1rem; | |
| } | |
| h2 { | |
| font-size: 22px; | |
| } | |
| h3 { | |
| font-size: 20px; | |
| } | |
| h4 { | |
| font-size: 18px; | |
| } | |
| header { | |
| padding: 1rem; | |
| text-align: center; | |
| background-color: #f8f9fa; | |
| } | |
| nav ul { | |
| list-style: none; | |
| padding: 0; | |
| display: flex; | |
| justify-content: center; | |
| gap: 1rem; | |
| } | |
| nav a { | |
| text-decoration: none; | |
| color: #333; | |
| transition: color 300ms ease; | |
| } | |
| nav a:hover { | |
| color: #007bff; | |
| } | |
| .hero { | |
| text-align: center; | |
| padding: 2rem 1rem; | |
| } | |
| .hero-image { | |
| width: 100%; | |
| height: auto; | |
| max-width: 800px; | |
| margin: 1rem auto; | |
| display: block; | |
| } | |
| .features { | |
| padding: 1rem; | |
| display: grid; | |
| gap: 2rem; | |
| } | |
| .feature { | |
| padding: 1rem; | |
| border-radius: 8px; | |
| background-color: #f8f9fa; | |
| } | |
| .feature-icon { | |
| font-size: 2rem; | |
| margin-bottom: 1rem; | |
| color: #007bff; | |
| } | |
| footer { | |
| padding: 2rem 1rem; | |
| text-align: center; | |
| background-color: #f8f9fa; | |
| } | |
| .social { | |
| display: flex; | |
| justify-content: center; | |
| gap: 1rem; | |
| margin-top: 1rem; | |
| } | |
| .social-icon { | |
| font-size: 1.5rem; | |
| } | |
| .social-link { | |
| color: #333; | |
| transition: color 300ms ease; | |
| } | |
| .social-link:hover { | |
| color: #007bff; | |
| } | |
| /* Tablet view */ | |
| @media (min-width: 768px) { | |
| body { | |
| font-size: 16px; | |
| } | |
| .features { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| /* Desktop view */ | |
| @media (min-width: 1024px) { | |
| .main-heading { | |
| font-size: 28px; | |
| } | |
| .features { | |
| grid-template-columns: repeat(3, 1fr); | |
| } | |
| } | |
| /* Large desktop view */ | |
| @media (min-width: 1200px) { | |
| body { | |
| font-size: 18px; | |
| } | |
| } | |
| ``` |