responsive_footer

beherabikram · May 20, 2023 · 61aabdd · 61aabdd
1 parent 757ce10
commit 61aabdd
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 19 deletions.
diff --git a/branch/cs.html b/branch/cs.html
@@ -85,7 +85,7 @@ <h3>Links</h3>
                     <li><a href="https://www.chaibasaengg.edu.in/Contact/admission_cell">Contact</a></li>
                 </ul>
             </div>
-            <div class="col col4">
+            <div class="col col4 footer-link">
                 <h3>News<span>letter</span></h3>
                 <form class="form-news">
                     <i class="far fa-envelope"></i>

diff --git a/branch/ece.html b/branch/ece.html
@@ -83,7 +83,7 @@ <h3>Links</h3>
                     <li><a href="https://www.chaibasaengg.edu.in/Contact/admission_cell">Contact</a></li>
                 </ul>
             </div>
-            <div class="col col4">
+            <div class="col col4 footer-link">
                 <h3>News<span>letter</span></h3>
                 <form class="form-news">
                     <i class="far fa-envelope"></i>

diff --git a/branch/ee.html b/branch/ee.html
@@ -82,7 +82,7 @@ <h3>Links</h3>
                     <li><a href="https://www.chaibasaengg.edu.in/Contact/admission_cell">Contact</a></li>
                 </ul>
             </div>
-            <div class="col col4">
+            <div class="col col4 footer-link">
                 <h3>News<span>letter</span></h3>
                 <form class="form-news">
                     <i class="far fa-envelope"></i>

diff --git a/branch/style.css b/branch/style.css
@@ -453,8 +453,6 @@ form input {
     max-width: 40%;
     padding-left: 0rem;
   }
-
-
   .col2{
     /* min-width: 21rem; */
     margin: 1rem auto;
@@ -506,9 +504,6 @@ form input {
   #pic h5{
     margin-right: 20px;
   }
-  /* .col{
-    margin-left:5%;
-  } */
   .contact{
     padding-right:5px;
   }

diff --git a/branch/subjects/style.css b/branch/subjects/style.css
@@ -177,7 +177,10 @@ footer {
 }
 .row {
   width: 100%;
-  align-items:center;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
 }
 .col {
   flex-basis: 25px;
@@ -189,6 +192,7 @@ footer {
   color: #ff523b;
   font-size: 20px;
   font-weight: bolder;
+  margin-top: 1rem;
 }
 .dev{
   font-size: 16px;
@@ -198,6 +202,7 @@ footer {
   width: fit-content;
   margin-bottom: 40px;
   position: relative;
+  line-height: 2rem;
 }
 .email-id {
   width: fit-content;
@@ -212,7 +217,7 @@ footer {
 }
 .col2{
   width: 40%;
-  margin-left: -80px;
+  min-width: 240px;
 }
 .col h3{
   color: #ff523b;
@@ -222,14 +227,14 @@ footer {
   margin-bottom: 20px;
 }
 .col3{
-  margin-left: -120px;
+  min-width: 12rem;
 }
 .col3 ul li a{
   font-size: 20px;
   color:  white;
 }
 .col3 ul li a:hover{
-  color: black;
+  color: #ff523b;
   font-size: 25px;
 }
 .col4{
@@ -341,7 +346,8 @@ form input {
   justify-content: space-between;
   align-items: center;
   text-align: center;
-  max-width: 200px;
+  min-width: 210px;
+  margin-right: 1rem;
 }
 #pic>.dev{
   padding: 10px 0;
@@ -413,10 +419,40 @@ form input {
   background: #1c2020;
   color: #f5f5f5;
 }
+@media screen and (max-width: 1166px){
+  .col4{
+    margin: 0 auto;
+  }
+}
+@media screen and (max-width: 820px){
+  .col4{
+   /* margin-left: 9rem; */
+   margin-top: 2rem;
+  }
+  .col-2 img {
+    max-width: 70%;
+    padding: 45px 14px;
+}
+}
 @media screen and (max-width: 640px){
   .row{
     display: inline;
   }
+  .col3{
+    margin: 1rem auto;
+     max-width: 40%;
+     padding-left: 0rem;
+   }
+   .col2{
+     /* min-width: 21rem; */
+     margin: 1rem auto;
+   }
+   .footer-link{
+     display: flex;
+     align-items: center;
+     justify-content: center;
+     margin: 0 auto;
+   }
   nav{
     text-align: center;
   }

diff --git a/index.html b/index.html
@@ -217,7 +217,7 @@ <h3>Links</h3>
                         <li><a href="">Contact</a></li>
                     </ul>
                 </div>
-                <div class="col col4">
+                <div class="col col4 footer-link">
                     <h3>News<span>letter</span></h3>
                     <form class="form-news">
                         <i class="far fa-envelope"></i>

diff --git a/style.css b/style.css
@@ -120,6 +120,7 @@ p {
   margin-top: 20px;
   border-radius: 30px;
   transition: 0.5s;
+  margin-bottom: 1rem;
 }
 .col-2 .btn{
   margin-top: 70px;
@@ -212,6 +213,7 @@ footer {
   color: #ff523b;
   font-size: 20px;
   font-weight: bolder;
+  margin-top: 1rem;
 }
 .dev{
   font-size: 16px;
@@ -221,6 +223,7 @@ footer {
   width: fit-content;
   margin-bottom: 40px;
   position: relative;
+  line-height: 2rem;
 }
 .email-id {
   width: fit-content;
@@ -235,7 +238,8 @@ footer {
 }
 .col2{
   width: 40%;
-  margin-left: -80px;
+  /* margin-left: -80px; */
+  min-width: 240px;
 }
 .col h3{
   color: #ff523b;
@@ -245,15 +249,14 @@ footer {
   margin-bottom: 20px;
 }
 .col3{
-  margin-left: -120px;
+  min-width: 12rem;
 }
 .col3 ul li a{
   font-size: 20px;
   color:  white;
 }
 .col3 ul li a:hover{
-  color: black;
-  font-size: 25px;
+  color: #ff523b;
 }
 .col4{
   margin-left: -50px;
@@ -364,7 +367,8 @@ form input {
   justify-content: space-between;
   align-items: center;
   text-align: center;
-  max-width: 200px;
+  min-width: 210px;
+  margin-right: 1rem;
 }
 #pic>.dev{
   padding: 10px 0;
@@ -436,10 +440,40 @@ form input {
   background: #1c2020;
   color: #f5f5f5;
 }
+@media screen and (max-width: 1166px){
+  .col4{
+    margin: 0 auto;
+  }
+}
+@media screen and (max-width: 820px){
+  .col4{
+   /* margin-left: 9rem; */
+   margin-top: 2rem;
+  }
+  .col-2 img {
+    max-width: 70%;
+    padding: 45px 14px;
+}
+}
 @media screen and (max-width: 640px){
   .row{
     display: inline;
   }
+  .col3{
+    margin: 1rem auto;
+     max-width: 40%;
+     padding-left: 0rem;
+   }
+   .col2{
+     /* min-width: 21rem; */
+     margin: 1rem auto;
+   }
+   .footer-link{
+     display: flex;
+     align-items: center;
+     justify-content: center;
+     margin: 0 auto;
+   }
   nav{
     text-align: center;
   }