From cef76f384dfdabc55d801fb9d0d4cac842316a15 Mon Sep 17 00:00:00 2001
From: Tanvi51204 <tanvibisht2004@gmail.com>
Date: Tue, 11 Jun 2024 00:00:30 +0530
Subject: [PATCH] responsive+about section

---
 index.html        | 30 ++++++++++++++++++++++++++++
 styles-header.css | 51 ++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 80 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index ef23c19..76b74fc 100644
--- a/index.html
+++ b/index.html
@@ -37,6 +37,7 @@
       <img src="paint-palette.svg" class="icon-header" alt="Icon 1">
       <img src="i-icon.svg" class="icon-header" alt="Icon 2">
       <img src="keyboard.svg" class="icon-header" alt="Icon 3">
+      
   </div>
 </div>
     <!--  (Type started (Riya Ahlawat) -->
@@ -56,6 +57,35 @@
         </div>
     </main>
     <!-- Type ended. -->
+
+    <!-- About section -->
+
+    <div class="about-section">
+      <h2>About Our AWS Cloud Club</h2>
+      <ul class="aws-services">
+          <li>
+              <h3>Amazon EC2</h3>
+              <p>Amazon Elastic Compute Cloud (EC2) provides scalable computing capacity in the AWS cloud. Using Amazon EC2 eliminates your need to invest in hardware up front, so you can develop and deploy applications faster.</p>
+          </li>
+          <li>
+              <h3>Amazon S3</h3>
+              <p>Amazon Simple Storage Service (S3) is an object storage service that offers industry-leading scalability, data availability, security, and performance.</p>
+          </li>
+          <li>
+              <h3>AWS Lambda</h3>
+              <p>AWS Lambda lets you run code without provisioning or managing servers. You pay only for the compute time you consume.</p>
+          </li>
+          <li>
+              <h3>Amazon RDS</h3>
+              <p>Amazon Relational Database Service (RDS) makes it easy to set up, operate, and scale a relational database in the cloud. It provides cost-efficient and resizable capacity while automating time-consuming administration tasks.</p>
+          </li>
+          <li>
+              <h3>Amazon DynamoDB</h3>
+              <p>Amazon DynamoDB is a key-value and document database that delivers single-digit millisecond performance at any scale. It’s a fully managed, multi-region, multi-active, durable database with built-in security, backup and restore, and in-memory caching.</p>
+          </li>
+      </ul>
+  </div>
+  <!-- About ended -->
     
     <!-- Footer starts(Samriddhi) -->
     <footer id="footer">
diff --git a/styles-header.css b/styles-header.css
index 6b1324b..3886797 100644
--- a/styles-header.css
+++ b/styles-header.css
@@ -6,11 +6,14 @@
     align-items: center;
     padding: 30px 70px;  
     background-color: var(--bgColor);
+    flex-wrap: wrap;  
+    text-align: center;  
   }
   
   .logo-and-title {
     display: flex;
     align-items: center;
+    flex: 1;
   }
   
   .site-logo {
@@ -27,7 +30,8 @@
   
   .header-icons {
     display: flex;
-    gap: 30px;     
+    gap: 30px;   
+    
   }
   
   .icon-header {
@@ -47,3 +51,48 @@
     box-sizing: border-box;
   }
   
+  @media (max-width: 768px) {
+    .header {
+        flex-direction: column;
+    }
+    .logo-and-title {
+        margin-bottom: 20px;
+        justify-content: center;  
+    }
+}
+
+.about-section {
+  padding: 40px;
+  background-color: var(--bgColor);
+  border-top: 1px solid #e0e0e0;
+}
+
+.about-section h2 {
+  font-size: 32px;
+  color: #333;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.aws-services {
+  list-style: none;
+  padding: 0;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.aws-services li {
+  margin-bottom: 20px;
+}
+
+.aws-services h3 {
+  font-size: 24px;
+  color: var(--textColor);
+  margin-bottom: 10px;
+}
+
+.aws-services p {
+  font-size: 16px;
+  color: #666;
+  line-height: 1.6;
+}