Adding responsiveness

MBAZA-NLP · Jun 3, 2023 · ce3987c · ce3987c
1 parent cc8907c
commit ce3987c
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 57 deletions.
diff --git a/assets/css/connect.css b/assets/css/connect.css
@@ -4,7 +4,7 @@
 }
 body {
   width: 100vw;
-  height: 100vh;
+  height: 100%;
 }
 
 .connect-container {
@@ -34,6 +34,7 @@ body {
   background: rgba(0, 217, 255, 0.3);
   /* margin: auto; */
   transform: translate(30%, 30%);
+  animation: anime alternate 1s;
 }
 .mbaza-hand {
   height: 60%;
@@ -42,6 +43,14 @@ body {
   background: rgb(59, 59, 167);
   /* margin: auto; */
   transform: translate(70%, 30%);
+  text-align: center;
+  color: orange;
+  font-size: 1.5em;
+  font-weight: 700;
+}
+.mbaza-hand h3 {
+  /* background: red; */
+  transform: translateY(150%);
 }
 
 .social-icon {
@@ -63,53 +72,44 @@ body {
   transform: translate(30%, 30%);
 }
 .social-icon1 {
-  transform: translate(40%, 60%);
-  top: 5px;
-  left: 90px;
+  top: 8%;
+  left: 20%;
 }
 .social-icon2 {
-  transform: translate(10%, 30%);
-  top: 120px;
-  left: 80px;
+  top: 35%;
+  left: 12%;
 }
 .social-icon3 {
-  transform: translate(20%, 33%);
-  top: 0px;
-  left: 250px;
+  top: 0%;
+  left: 50%;
 }
 .social-icon4 {
-  transform: translate(22%, 68%);
-  /* top: ; */
-  right: 95px;
+  right: 20%;
 }
 .social-icon5 {
-  transform: translate(23%, 89%);
-  top: 200px;
-  left: 140px;
+  top: 60%;
+  left: 30%;
 }
 .social-icon6 {
-  transform: translate(5%, 50%);
-  bottom: 40px;
-  left: 255px;
+  bottom: 10%;
+  left: 56%;
 }
 .social-icon7 {
-  transform: translate(90%, 40%);
-  top: 40px;
-  right: 120px;
+  top: 8%;
+  right: 17%;
 }
 .social-icon8 {
-  transform: translate(80%, 68%);
-  top: 115px;
-  right: 150px;
+  top: 40%;
+  right: 21%;
 }
 .social-icon9 {
-  transform: translate(5%, 74%);
-  top: 60px;
-  left: 310px;
+  top: 20%;
+  left: 60%;
   /* background: red; */
+  animation: anime alternate 1s reverse;
 }
 .social-icon:hover {
-  /* transform: scaleY(1); */
+  transform: scale(1.025);
   box-shadow: 1px 1px 15px 1px rgb(47, 47, 47);
 }
 .connect-content {
@@ -126,3 +126,24 @@ body {
 .connect-content a {
   margin: 5px;
 }
+@media screen and (max-width: 800px) {
+  .connect-container {
+    display: block;
+  }
+  .connect-icons {
+    width: 100%;
+  }
+  .connect-content {
+    width: 100%;
+  }
+}
+
+@kefyframe anime {
+  from {
+    transform: scale(0.7);
+  }
+
+  to {
+    transform: scale(0.85);
+  }
+}
diff --git a/pages/connect.html b/pages/connect.html
@@ -15,35 +15,44 @@
     <div class="connect-container">
       <div class="connect-icons">
         <div class="square">
-          <div class="mbaza-hand"></div>
-        </div>
-        <div class="social-icon social-icon1">
-          <img src="../assets/img/connect-icons/GitHub-icon.svg" />
-        </div>
-        <div class="social-icon social-icon2">
-          <img src="../assets/img/connect-icons/instagram-icon.svg" />
-        </div>
-        <div class="social-icon social-icon3">
-          <img src="../assets/img/connect-icons/flickr-icon.svg" />
-        </div>
-        <div class="social-icon social-icon4">
-          <img src="../assets/img/connect-icons/linkedin-icon.svg" />
-        </div>
-        <div class="social-icon social-icon5">
-          <img src="../assets/img/connect-icons/youtube-icon.svg" />
-        </div>
-        <div class="social-icon social-icon6">
-          <img src="../assets/img/connect-icons/Blogger-icon.svg" />
-        </div>
-        <div class="social-icon social-icon7">
-          <img src="../assets/img/connect-icons/twitter-icon.svg" />
-        </div>
-        <div class="social-icon social-icon8">
-          <img src="../assets/img/connect-icons/huggingface-icon.svg" />
-        </div>
-        <div class="social-icon social-icon9">
-          <img src="../assets/img/connect-icons/slack-icon.svg" />
+          <div class="mbaza-hand"><h3>MBAZA</h3></div>
         </div>
+        <a href="">
+          <div class="social-icon social-icon1">
+            <img src="../assets/img/connect-icons/GitHub-icon.svg" /></div
+        ></a>
+        <a href=""
+          ><div class="social-icon social-icon2">
+            <img src="../assets/img/connect-icons/instagram-icon.svg" /></div
+        ></a>
+        <a href=""
+          ><div class="social-icon social-icon3">
+            <img src="../assets/img/connect-icons/flickr-icon.svg" /></div
+        ></a>
+        <a href=""
+          ><div class="social-icon social-icon4">
+            <img src="../assets/img/connect-icons/linkedin-icon.svg" /></div
+        ></a>
+        <a href=""
+          ><div class="social-icon social-icon5">
+            <img src="../assets/img/connect-icons/youtube-icon.svg" /></div
+        ></a>
+        <a href=""
+          ><div class="social-icon social-icon6">
+            <img src="../assets/img/connect-icons/Blogger-icon.svg" /></div
+        ></a>
+        <a href=""
+          ><div class="social-icon social-icon7">
+            <img src="../assets/img/connect-icons/twitter-icon.svg" /></div
+        ></a>
+        <a href=""
+          ><div class="social-icon social-icon8">
+            <img src="../assets/img/connect-icons/huggingface-icon.svg" /></div
+        ></a>
+        <a href=""
+          ><div class="social-icon social-icon9">
+            <img src="../assets/img/connect-icons/slack-icon.svg" /></div
+        ></a>
       </div>
       <div class="connect-content">
         <h2>CONNECT WITH US</h2>