first assignment

2025-09-12 02:18:41 +00:00
commit 0af8e15f44
5 changed files with 245 additions and 0 deletions
@@ -0,0 +1,178 @@
+/* Global Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Georgia', serif;
+    line-height: 1.6;
+    color: #5d4037;
+    background-color: #faf0e6;
+    background-image: linear-gradient(to bottom, #faf0e6 0%, #f5e1c4 100%);
+}
+
+/* Header Styles */
+header {
+    background-color: #8b4513;
+    color: white;
+    padding: 20px 0;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+.logo-container {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.logo {
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    overflow: hidden;
+    object-fit: cover;
+    transition: opacity 0.3s;
+    border: 3px solid #daa520;
+}
+
+.logo:hover {
+    opacity: 0.7;
+}
+
+/* Navigation Styles */
+.main-nav ul {
+    list-style: none;
+    display: flex;
+    justify-content: center;
+    gap: 30px;
+}
+
+.main-nav a {
+    color: #faf0e6;
+    text-decoration: none;
+    font-size: 18px;
+    padding: 10px 15px;
+    border-radius: 5px;
+    transition: background-color 0.3s;
+}
+
+.main-nav a:hover {
+    background-color: #daa520;
+}
+
+/* Main Content Styles */
+main {
+    max-width: 1000px;
+    margin: 0 auto;
+    padding: 40px 20px;
+}
+
+section {
+    margin-bottom: 50px;
+    background-color: #fffaf0;
+    padding: 30px;
+    border-radius: 10px;
+    box-shadow: 0 3px 10px rgba(139, 69, 19, 0.1);
+}
+
+/* Hero Section */
+.banner {
+    text-align: center;
+    background-color: #daa520;
+    color: #5d4037;
+}
+
+.banner h1 {
+    font-size: 48px;
+    margin-bottom: 15px;
+    text-shadow: 2px 2px 4px rgba(255,255,255,0.3);
+}
+
+.tagline {
+    font-size: 24px;
+    font-style: italic;
+}
+
+/* Introduction Section */
+.introduction h2 {
+    color: #8b4513;
+    font-size: 32px;
+    margin-bottom: 20px;
+    border-bottom: 3px solid #daa520;
+    padding-bottom: 10px;
+}
+
+.introduction p {
+    margin-bottom: 15px;
+    font-size: 18px;
+    line-height: 1.8;
+}
+
+/* Services Section */
+.services h2 {
+    color: #8b4513;
+    font-size: 32px;
+    margin-bottom: 25px;
+    border-bottom: 3px solid #daa520;
+    padding-bottom: 10px;
+}
+
+.services-list {
+    list-style: none;
+    padding-left: 0;
+}
+
+.services-list li {
+    background-color: #f5e1c4;
+    margin-bottom: 15px;
+    padding: 15px;
+    border-left: 5px solid #daa520;
+    border-radius: 5px;
+    font-size: 16px;
+}
+
+.services-list strong {
+    color: #8b4513;
+}
+
+/* Footer Styles */
+footer {
+    background-color: #8b4513;
+    color: white;
+    text-align: center;
+    padding: 30px 20px;
+}
+
+footer p {
+    margin-bottom: 10px;
+}
+
+footer a {
+    color: #daa520;
+    text-decoration: none;
+}
+
+footer a:hover {
+    text-decoration: underline;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .main-nav ul {
+        flex-direction: column;
+        gap: 10px;
+    }
+    
+    .hero h1 {
+        font-size: 36px;
+    }
+    
+    .tagline {
+        font-size: 18px;
+    }
+    
+    section {
+        padding: 20px;
+    }
+}