diff --git a/styles.css b/styles.css index bdeeb1b1..877042f1 100644 --- 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); }