updated the design

csiddu · Oct 21, 2023 · 9c31c5f · 9c31c5f
1 parent a5cba6c
commit 9c31c5f
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 7 deletions.
diff --git a/components.css b/components.css
@@ -214,7 +214,7 @@ header .menu {
 }
 .navbar-brand {
 	color: #2a2a2a;
-	font-size: 200%;
+	font-size: 160%;
 	font-weight: 600;
 	width: 60%;
 }
@@ -232,10 +232,15 @@ header .menu {
 }
 @media only screen and (max-width: 450px) {
 	.navbar-brand {
-		font-size: 150%;
+		font-size: 140%;
 	}
 }
 
+/* footer */
+
+footer{
+	margin-top: 5%;
+}
 
 /* cards css */
 

diff --git a/components.html b/components.html
@@ -11,6 +11,7 @@
         integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
         crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="components.css">
+    <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
@@ -43,7 +44,42 @@
         <!-- components will be fetched here -->
 
     </div>
-
+    <footer>
+        <div class=" bg-black " >
+          <div class="">
+            <div class="pt-2 ps-3 pe-3 d-md-flex text-center justify-content-md-between align-items-center">
+              <h3 class="text-white">Follow Us</h3>
+              <ul class="list-inline text-dark mt-1 ">
+                <li class="list-inline-item m-2">
+                  <a href="https://www.instagram.com/csi_ddu/" class="text-white text-decoration-none">
+                    <i class="fab fa-instagram"></i> Instagram
+                  </a>
+                </li>
+                <li class="list-inline-item m-2">
+                  <a
+                    href="https://www.linkedin.com/company/computer-society-of-india-ddu/mycompany/"
+                    class="text-white  text-decoration-none"
+                  >
+                    <i class="fab fa-linkedin "></i> LinkedIn
+                  </a>
+                </li>
+                <li class="list-inline-item m-2">
+                  <a href="https://medium.com/@csi_ddu" class="text-white  text-decoration-none">
+                    <i class="fab fa-medium"></i> Medium
+                  </a>
+                </li>
+                <li class="list-inline-item m-2">
+                  <a href="https://discord.gg/2aUM8ArA" class="text-white  text-decoration-none">
+                    <i class="fab fa-discord"></i> Discord
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </footer>
+      <!-- JS Section -->
+      <!-- Bootstrap JS -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
         crossorigin="anonymous"></script>

diff --git a/index.html b/index.html
@@ -76,7 +76,7 @@
             stunning websites effortlessly. Explore, customize, and bring your
             ideas to life.
           </p>
-          <form class="d-flex" role="search">
+          <form class="d-flex m-1" role="search">
             <input
               class="form-control me-2"
               type="search"
@@ -90,7 +90,7 @@
       </div>
     </section>
 
-    <a href="http://192.168.137.1:3000">ok</a>
+    <!-- <a href="http://192.168.137.1:3000">ok</a> -->
 
     <footer>
       <div class=" bg-black">

diff --git a/style.css b/style.css
@@ -124,7 +124,7 @@ header .menu {
 }
 .navbar-brand {
   color: #2a2a2a;
-  font-size: 200%;
+  font-size: 170%;
   font-weight: 600;
   width: 60%;
 }
@@ -180,6 +180,11 @@ header .menu {
 }
 @media only screen and (max-width: 450px) {
   .navbar-brand {
-    font-size: 150%;
+    font-size: 140%;
   }
 }
+
+/* Footer */
+footer{
+  margin-bottom: 2%;
+}