diff --git a/index.html b/index.html index 28eae6e..68ca5bc 100644 --- a/index.html +++ b/index.html @@ -40,12 +40,12 @@ position: relative; } header h1 { - font-size: 48px; + font-size: 3rem; margin-bottom: 10px; } header p { margin: 10px 0; - font-size: 18px; + font-size: 1.2rem; } header .contact-links { margin-top: 20px; @@ -53,20 +53,21 @@ header .contact-links a { display: inline-block; margin: 0 10px; - font-size: 16px; + font-size: 1rem; font-weight: bold; } /* Hero Section */ .hero { - background: url('https://source.unsplash.com/1200x600/?technology,programming') no-repeat center center/cover; + background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), + url('https://source.unsplash.com/1200x600/?technology,programming') no-repeat center center/cover; height: 400px; display: flex; align-items: center; justify-content: center; text-align: center; color: white; - font-size: 24px; + font-size: 1.8rem; font-weight: bold; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6); } @@ -89,7 +90,7 @@ border-bottom: none; } section h2 { - font-size: 28px; + font-size: 2rem; color: #087F5B; margin-bottom: 10px; } @@ -101,6 +102,13 @@ margin-bottom: 10px; } + /* Skills Section Grid */ + .skills-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 15px; + } + /* Timeline Section */ .timeline { position: relative; @@ -161,7 +169,7 @@ /* Responsive Design */ @media (max-width: 768px) { header h1 { - font-size: 36px; + font-size: 2.5rem; } .container { width: 95%; @@ -197,12 +205,12 @@