Update styles.css

Thunderrock424242 · Aug 14, 2024 · fa9444b · fa9444b
1 parent 9d577fd
commit fa9444b
Showing 1 changed file with 55 additions and 25 deletions.
diff --git a/styles.css b/styles.css
@@ -3,23 +3,23 @@ body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     margin: 0;
     padding: 0;
-    background-color: #e0f7fa; /* Light Aqua */
-    color: #37474f; /* Dark Slate Grey */
+    background-color: #e0f4f1; /* Light Grey-Blue */
+    color: #34495e; /* Dark Slate Grey */
     line-height: 1.6;
 }
 
 a {
-    color: #00796b; /* Teal */
+    color: #2980b9; /* Muted Teal */
     text-decoration: none;
 }
 
 a:hover {
-    color: #004d40; /* Dark Teal */
+    color: #27ae60; /* Muted Green */
 }
 
 /* Header Styling */
 header {
-    background-color: #004d40; /* Dark Teal */
+    background-color: #2c3e50; /* Deep Slate Blue */
     padding: 20px 5%;
     display: flex;
     justify-content: space-between;
@@ -31,7 +31,7 @@ header {
 header h1 {
     font-size: 24px;
     margin: 0;
-    color: #e0f7fa; /* Light Aqua */
+    color: #e0f4f1; /* Light Grey-Blue */
     flex: 1;
 }
 
@@ -51,14 +51,14 @@ nav ul li {
 
 nav ul li a {
     padding: 10px 15px;
-    background-color: #00796b; /* Teal */
+    background-color: #2980b9; /* Muted Teal */
     border-radius: 5px;
     transition: background-color 0.3s ease;
-    color: #e0f7fa; /* Light Aqua */
+    color: #e0f4f1; /* Light Grey-Blue */
 }
 
 nav ul li a:hover {
-    background-color: #004d40; /* Dark Teal */
+    background-color: #27ae60; /* Muted Green */
 }
 
 /* Hero Section */
@@ -78,13 +78,13 @@ nav ul li a:hover {
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(0, 77, 64, 0.5); /* Dark Teal Overlay */
+    background-color: rgba(44, 62, 80, 0.5); /* Deep Slate Blue Overlay */
 }
 
 .hero h2 {
     font-size: 36px;
     margin-bottom: 20px;
-    color: #b2dfdb; /* Soft Teal */
+    color: #e0f4f1; /* Light Grey-Blue */
     position: relative;
     z-index: 1;
 }
@@ -94,12 +94,12 @@ nav ul li a:hover {
     margin-bottom: 30px;
     position: relative;
     z-index: 1;
-    color: #e0f7fa; /* Light Aqua */
+    color: #e0f4f1; /* Light Grey-Blue */
 }
 
 .btn {
-    background-color: #00796b; /* Teal */
-    color: #e0f7fa; /* Light Aqua */
+    background-color: #2980b9; /* Muted Teal */
+    color: #e0f4f1; /* Light Grey-Blue */
     padding: 10px 20px;
     text-decoration: none;
     font-size: 16px;
@@ -110,7 +110,7 @@ nav ul li a:hover {
 }
 
 .btn:hover {
-    background-color: #004d40; /* Dark Teal */
+    background-color: #27ae60; /* Muted Green */
 }
 
 /* About, Features, Gallery, and Blog Sections */
@@ -122,13 +122,13 @@ section {
 h2 {
     font-size: 28px;
     margin-bottom: 20px;
-    color: #00796b; /* Teal */
+    color: #2980b9; /* Muted Teal */
 }
 
 p {
     font-size: 16px;
     margin-bottom: 20px;
-    color: #37474f; /* Dark Slate Grey */
+    color: #34495e; /* Dark Slate Grey */
 }
 
 /* Gallery */
@@ -146,39 +146,69 @@ p {
 
 .gallery-grid img:hover {
     transform: scale(1.05);
-    box-shadow: 0 8px 16px rgba(0, 77, 64, 0.3); /* Dark Teal Shadow */
+    box-shadow: 0 8px 16px rgba(44, 62, 80, 0.3); /* Deep Slate Blue Shadow */
 }
 
 /* Blog */
 .blog-post {
     margin-bottom: 30px;
-    background-color: #b2dfdb; /* Soft Teal */
+    background-color: #ecf0f1; /* Light Grey */
     padding: 20px;
     border-radius: 10px;
     transition: background-color 0.3s ease;
-    color: #37474f; /* Dark Slate Grey */
+    color: #34495e; /* Dark Slate Grey */
 }
 
 .blog-post h3 {
     font-size: 22px;
     margin-bottom: 15px;
+    color: #2980b9; /* Muted Teal */
 }
 
-.blog-post p {
+.blog-post .date {
     font-size: 14px;
+    color: #34495e; /* Dark Slate Grey */
+    margin-bottom: 15px;
+    display: block;
+}
+
+.blog-post img.blog-image {
+    max-width: 100%;
+    height: auto;
+    margin-bottom: 15px;
+    border-radius: 10px;
+}
+
+.blog-post p {
+    font-size: 16px;
+    line-height: 1.6;
+}
+
+.blog-post a {
+    color: #2980b9; /* Muted Teal */
+    text-decoration: underline;
+}
+
+.blog-post a:hover {
+    color: #27ae60; /* Muted Green */
+}
+
+.blog-post ul {
+    list-style: disc inside;
+    margin: 15px 0;
 }
 
-.blog-post:hover {
-    background-color: #80cbc4; /* Lighter Soft Teal */
+.blog-post ul li {
+    margin-bottom: 10px;
 }
 
 /* Footer */
 footer {
-    background-color: #004d40; /* Dark Teal */
+    background-color: #2c3e50; /* Deep Slate Blue */
     padding: 20px 5%;
     text-align: center;
     font-size: 14px;
-    color: #e0f7fa; /* Light Aqua */
+    color: #e0f4f1; /* Light Grey-Blue */
     box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.3);
 }