From 350376c921fd61e1a6d18e06e4ec6e724563a1a5 Mon Sep 17 00:00:00 2001
From: Noman Bin Morshed <121552708+Been-Noman@users.noreply.github.com>
Date: Sat, 24 Aug 2024 12:28:18 +0600
Subject: [PATCH] Update styles.css

---
 styles.css | 224 +++++++++++++++++++++++------------------------------
 1 file changed, 97 insertions(+), 127 deletions(-)

diff --git a/styles.css b/styles.css
index cc11783..59e812d 100644
--- a/styles.css
+++ b/styles.css
@@ -1,48 +1,37 @@
-/* Global Styles */
-body {
-    font-family: 'Montserrat', sans-serif;
-    margin: 0;
-    padding: 0;
-    background: linear-gradient(135deg, #1c1c1c 0%, #484848 100%);
-    color: #e0e0e0;
-    line-height: 1.6;
+:root {
+    --primary-color: #3498db;
+    --secondary-color: #2c3e50;
+    --text-color: #333;
+    --background-color: #f4f4f4;
+    --accent-color: #e74c3c;
 }
 
-a {
-    color: #ffcc00;
-    text-decoration: none;
-    transition: color 0.3s ease;
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
 }
 
-a:hover {
-    color: #ff9900;
+body {
+    font-family: 'Roboto', sans-serif;
+    line-height: 1.6;
+    color: var(--text-color);
+    background-color: var(--background-color);
 }
 
-/* Header Styles */
 header {
-    background: rgba(0, 0, 0, 0.7);
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
-    padding: 1.5rem;
-    text-align: center;
+    background-color: var(--secondary-color);
+    padding: 1rem 0;
     position: fixed;
     width: 100%;
     top: 0;
-    left: 0;
     z-index: 1000;
 }
 
-header h1 {
-    font-size: 2.5rem;
-    color: #ffcc00;
-    margin: 0;
-}
-
 nav ul {
-    list-style: none;
-    padding: 0;
-    margin: 1rem 0 0;
     display: flex;
     justify-content: center;
+    list-style-type: none;
 }
 
 nav ul li {
@@ -50,156 +39,137 @@ nav ul li {
 }
 
 nav ul li a {
-    color: #e0e0e0;
-    font-weight: 700;
-    text-transform: uppercase;
-    padding: 0.5rem;
-    transition: background-color 0.3s ease, color 0.3s ease;
+    color: #fff;
+    text-decoration: none;
+    font-weight: bold;
+    transition: color 0.3s ease;
 }
 
 nav ul li a:hover {
-    color: #1c1c1c;
-    background-color: #ffcc00;
-    border-radius: 5px;
+    color: var(--primary-color);
 }
 
-/* Section Styles */
-section {
-    padding: 4rem 5%;
+main {
     max-width: 1200px;
     margin: 0 auto;
-    background: rgba(255, 255, 255, 0.1);
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
-    border-radius: 10px;
-    margin-top: 7rem;
-    backdrop-filter: blur(5px);
+    padding: 2rem;
+}
+
+section {
+    margin-bottom: 3rem;
+}
+
+h1, h2, h3 {
+    margin-bottom: 1rem;
 }
 
-section h2 {
-    color: #ffcc00;
+h1 {
+    font-size: 2.5rem;
+    color: var(--primary-color);
+}
+
+h2 {
     font-size: 2rem;
-    margin-bottom: 1.5rem;
-    border-bottom: 2px solid #ffcc00;
+    color: var(--secondary-color);
+    border-bottom: 2px solid var(--primary-color);
     padding-bottom: 0.5rem;
 }
 
-.about-me {
-    background-color: rgba(0, 0, 0, 0.8);
-    padding: 2rem;
-    border-radius: 10px;
+h3 {
+    font-size: 1.5rem;
+    color: var(--secondary-color);
+}
+
+p {
+    margin-bottom: 1rem;
 }
 
-.about-me p {
-    font-size: 1.2rem;
+#hero {
+    text-align: center;
+    padding: 4rem 0;
+    background-color: var(--primary-color);
+    color: #fff;
+    margin-top: 4rem;
+}
+
+#hero h1 {
+    font-size: 3rem;
+    margin-bottom: 0.5rem;
+    color: #fff;
+}
+
+.skill-category {
     margin-bottom: 1.5rem;
-    color: #f0f0f0;
 }
 
-/* Skills Section */
-.skills ul {
-    list-style-type: none;
-    padding: 0;
+.skill-category ul {
     display: flex;
     flex-wrap: wrap;
-    justify-content: center;
+    list-style-type: none;
 }
 
-.skills ul li {
-    background-color: #ffcc00;
-    color: #1c1c1c;
+.skill-category ul li {
+    background-color: var(--primary-color);
+    color: #fff;
     padding: 0.5rem 1rem;
     margin: 0.5rem;
-    border-radius: 5px;
-    font-weight: bold;
-    transition: transform 0.3s ease, background-color 0.3s ease;
+    border-radius: 20px;
 }
 
-.skills ul li:hover {
-    background-color: #ff9900;
-    transform: translateY(-3px);
-}
-
-/* Project and Blog Section Styles */
-.projects ul,
-.blog ul {
-    list-style: none;
-    padding: 0;
-}
-
-.projects ul li,
-.blog ul li {
-    background: rgba(255, 255, 255, 0.15);
-    margin: 0.5rem 0;
-    padding: 1rem;
-    border-radius: 5px;
-    transition: background-color 0.3s ease, transform 0.3s ease;
+#memberships ul {
+    list-style-type: none;
 }
 
-.projects ul li:hover,
-.blog ul li:hover {
-    background-color: rgba(255, 255, 255, 0.25);
-    transform: translateY(-3px);
+#memberships ul li {
+    margin-bottom: 0.5rem;
+    padding-left: 1.5rem;
+    position: relative;
 }
 
-.projects ul li a,
-.blog ul li a {
-    color: #ffcc00;
+#memberships ul li::before {
+    content: "\2022";
+    color: var(--primary-color);
     font-weight: bold;
-    transition: color 0.3s ease;
+    position: absolute;
+    left: 0;
 }
 
-.projects ul li a:hover,
-.blog ul li a:hover {
-    color: #ff9900;
+.social-links {
+    display: flex;
+    justify-content: center;
+    margin-top: 1rem;
 }
 
-/* Contact Section Styles */
-.contact p a {
-    color: #ffcc00;
-    font-weight: bold;
+.social-icon {
+    font-size: 1.5rem;
+    color: var(--secondary-color);
+    margin: 0 0.5rem;
     transition: color 0.3s ease;
 }
 
-.contact p a:hover {
-    color: #ff9900;
+.social-icon:hover {
+    color: var(--primary-color);
 }
 
-/* Footer Styles */
 footer {
-    background-color: rgba(0, 0, 0, 0.7);
-    color: #e0e0e0;
+    background-color: var(--secondary-color);
+    color: #fff;
     text-align: center;
     padding: 1rem 0;
-    position: fixed;
-    bottom: 0;
-    width: 100%;
-    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.7);
-}
-
-footer p {
-    margin: 0;
-    font-size: 1rem;
+    margin-top: 2rem;
 }
 
-/* Media Queries */
-@media (max-width: 768px) {
+@media screen and (max-width: 768px) {
     nav ul {
         flex-direction: column;
+        align-items: center;
     }
 
     nav ul li {
         margin: 0.5rem 0;
     }
 
-    header h1 {
-        font-size: 2rem;
-    }
-
-    section {
-        padding: 2rem;
-    }
-
-    footer {
-        font-size: 0.9rem;
+    #hero {
+        margin-top: 8rem;
     }
 }