Merge pull request #4 from Tanvi51204/main

responsive+about section
riyaahlawat · Jun 11, 2024 · a311cc5 · a311cc5
2 parents 8cc169a + cef76f3
commit a311cc5
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 1 deletion.
diff --git 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
@@ -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;
+}