Merge pull request #1 from Samriddhi1102022/main

Footer Add
riyaahlawat · Jun 3, 2024 · b89d62e · b89d62e
2 parents 59321ec + 2d23427
commit b89d62e
Show file tree

Hide file tree

Showing 2 changed files with 128 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -18,6 +18,9 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
     <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" crossorigin="anonymous" />
+    <link rel="stylesheet" href="styles-footer.css">
 </head>
 <body>
     <!--  Riya Ahlawat -->
@@ -38,5 +41,61 @@
     </main>
     <!-- Riya Ahlawat -->
     <script src="typing.js"></script>
+
+    <!-- Footer starts(Samriddhi) -->
+    <footer id="footer">
+        <div class="footer-container">
+          <div class="footer-container-left">
+            <div class="footer-item">
+              <a class="footer-icons" href="">
+                <i class="fa fa-envelope"></i>
+                Contact Us
+              </a>
+            </div>
+            <div class="footer-item">
+              <a class="footer-icons" href="https://www.instagram.com/awscloudclubigdtuw" target="_blank">
+                <i class="fab fa-instagram"></i>
+                Instagram
+              </a>
+            </div>
+            <div class="footer-item">
+              <a class="footer-icons" href="https://www.linkedin.com/company/aws-cloud-club-igdtuw/" target="_blank">
+                <i class="fab fa-linkedin"></i>
+                LinkedIn
+              </a>
+            </div>
+            <div class="footer-item">
+              <a class="footer-icons" href="https://x.com/AWSClubIGDTUW?t=Mv5rpAyBkvI8AGfDC6ayoQ&s=09" target="_blank">
+                <i class="fa fa-twitter"></i>
+                X
+              </a>
+            </div>
+            <div class="footer-item">
+                <a class="footer-icons" href="" target="_blank">
+                  <i class="fa fa-user"></i>
+                  Developers
+                </a>
+              </div>
+          </div>
+          <div class="footer-container-right">
+            <div class="footer-icons">
+              <span class="footer-content">
+                Visit: 
+              </span>
+              <a class="footer-icons" href="https://payalnarwal.github.io/AWS-Cloud-Club-IGDTUW-official-website/" target="_blank">
+                <i class="fab fa-aws"></i>
+                 Cloud Club IGDTUW
+              </a>
+            </div>
+            <div>
+              <p class="footer-content">
+                Copyright &copy; 2024, AWS CC IGDTUW.<br/>
+                All rights reserved.
+              </p>
+            </div>
+          </div>
+        </div>
+      </footer>
+    <!-- Footer ends (Samriddhi) -->
 </body>
 </html>
diff --git a/styles-footer.css b/styles-footer.css
@@ -0,0 +1,69 @@
+:root {
+    --bgColor: rgb(253, 246, 227);
+    --textColor: #D91C81;
+    --fadedTextColor: #8f255d;
+    --black: #3A3335;
+}
+
+.footer-container {
+    margin: 1rem 5rem;
+    -webkit-user-select: none;
+    user-select: none;
+    display: grid;
+    grid-template-columns: 1fr max-content;
+    gap: 5rem;
+    bottom: 0;
+}
+.footer-container-left {
+    text-align: left;
+    display: flex;
+    justify-items: start;
+    width: fit-content;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+.footer-container-right {
+    text-align: center;
+    display: flex;
+    justify-self: center;
+    width: max-content;
+    height: max-content;
+    flex-direction: column;
+    align-items: center;
+}
+.footer-item {
+    flex: 1;
+}
+.footer-icons {
+    display: grid;
+    grid-auto-flow: column;
+    gap: 0.25rem;
+    align-items: baseline;
+    width: max-content;
+    text-decoration: none;
+}
+.footer-icons {
+    color: var(--textColor);
+    transition: 0.1s;
+}
+.footer-icons:hover{
+    color: var(--fadedTextColor);
+}
+.footer-content {
+    display: inline;
+    color: var(--black);
+}
+@media screen and (max-width: 768px) {
+    .footer-container{
+        margin: 1rem 2rem;
+        font-size: small;
+    }
+}
+
+.fa.fa-twitter{
+	font-family:sans-serif;
+}
+.fa.fa-twitter::before{
+	content:"𝕏";
+	font-size:1.2em;
+}