Spaces:
Running
Running
| ```css | |
| /* Base styles (mobile-first) */ | |
| :root { | |
| --primary-color: #3498db; | |
| --hover-color: #2980b9; | |
| --text-color: #333; | |
| --bg-color: #f9f9f9; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| font-size: 14px; | |
| line-height: 1.6; | |
| color: var(--text-color); | |
| background-color: var(--bg-color); | |
| margin: 0; | |
| padding: 0; | |
| } | |
| h1 { | |
| font-size: 24px; | |
| margin-bottom: 16px; | |
| } | |
| h2 { | |
| font-size: 22px; | |
| margin-bottom: 14px; | |
| } | |
| h3 { | |
| font-size: 20px; | |
| margin-bottom: 12px; | |
| } | |
| a { | |
| color: var(--primary-color); | |
| text-decoration: none; | |
| transition: color 300ms ease; | |
| } | |
| a:hover { | |
| color: var(--hover-color); | |
| } | |
| header, footer { | |
| background-color: white; | |
| padding: 20px; | |
| text-align: center; | |
| } | |
| nav ul { | |
| list-style: none; | |
| padding: 0; | |
| } | |
| nav li { | |
| display: block; | |
| margin: 10px 0; | |
| } | |
| .hero { | |
| text-align: center; | |
| padding: 20px; | |
| } | |
| .hero img { | |
| width: 100%; | |
| height: auto; | |
| margin: 20px 0; | |
| } | |
| .features { | |
| padding: 20px; | |
| } | |
| .feature { | |
| margin-bottom: 30px; | |
| text-align: center; | |
| } | |
| .feature i { | |
| font-size: 2em; | |
| color: var(--primary-color); | |
| margin-bottom: 10px; | |
| } | |
| .social { | |
| margin-top: 20px; | |
| } | |
| .social a { | |
| margin: 0 10px; | |
| font-size: 1.5em; | |
| } | |
| /* Media Queries */ | |
| @media (min-width: 640px) { | |
| nav li { | |
| display: inline; | |
| margin: 0 15px; | |
| } | |
| } | |
| @media (min-width: 768px) { | |
| body { | |
| font-size: 16px; | |
| } | |
| .features { | |
| display: flex; | |
| justify-content: space-between; | |
| flex-wrap: wrap; | |
| } | |
| .feature { | |
| width: 48%; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| h1 { | |
| font-size: 28px; | |
| } | |
| h2 { | |
| font-size: 26px; | |
| } | |
| h3 { | |
| font-size: 24px; | |
| } | |
| .feature { | |
| width: 30%; | |
| } | |
| } | |
| @media (min-width: 1200px) { | |
| body { | |
| font-size: 18px; | |
| } | |
| main { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| } | |
| ``` |