Merge branch 'main' into bella

The-Shivam-garg · Oct 26, 2022 · 505784d · 505784d
2 parents d049f8a + 4cb5a50
commit 505784d
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 59 deletions.
diff --git a/Course/css/style.css b/Course/css/style.css
diff --git a/index.html b/index.html
@@ -492,7 +492,7 @@ <h1>Why our members love us</h1><br>
     </section>
 
  <footer>
-     <div class="row">
+     <div class="footer-container">
         <div class="bigb">
             <img src="https://github.com/The-Shivam-garg/BigB-E-learn-Websit-e/blob/main/img/v.png?raw=true" alt="Big B logo" loading="lazy">
                 <p class="text">“BigB will truly help to democratize education.We believe instead of focusing on education

diff --git a/style.css b/style.css
@@ -656,15 +656,6 @@ header .nav h2 a:hover {
     border-radius: 50px;
 }
 
-/* Footer social links */
-
-.social-links a:hover {
-    color: #64bcf4;
-}
-
-/* Footer social links */
-
-
 @media screen and (min-width: 992px) {
     .d-lg {
         display: flex;
@@ -747,25 +738,20 @@ header .nav h2 a:hover {
         border-radius: 15px;
     }
 }
-/*footer*/
+/* ********* Footer starts ********** */
 footer {
     background: black;
     color: #fff;
     padding: 4rem 0;
 }
 
-.row {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-}
-
-footer .row>div {
-    /* border: 2px solid red; */
-    padding: 0 1rem;
+.footer-container {
+    display:flex;
+    justify-content:space-between;
+    padding:0 40px;
 }
-
-.bigb {
-    margin-left: 85px;
+.bigb{
+    flex:1;
 }
 
 .bigb>.text {
@@ -784,6 +770,7 @@ footer .row>div {
     justify-content: flex-start;
     font-size: 0.9rem;
     line-height: 2;
+    flex:1;
 }
 
 .details>h3 {
@@ -795,6 +782,7 @@ footer .row>div {
 .footer-links {
     display: flex;
     flex-direction: column;
+    align-items: center;
 }
 
 .footer-links a {
@@ -816,7 +804,7 @@ footer .row>div {
 .footer-social-links li {
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content:center;
     border: 2px solid #fff;
     width: 40px;
     height: 40px;
@@ -849,61 +837,77 @@ footer .row>div {
 .footer-text span {
     color: cyan;
 }
+.footer-contact-info> div{
+    margin-top:8px;
+}
 
-.footer-contact-info i {
-    margin-right: 1rem;
+.i{
+    vertical-align:middle;
+    margin-right:5px;
+    width:22px;
+    height:22px;
 }
 
-.map i {
+.map .i {
     color: #FF0000;
 }
 
-.phone i {
+.phone .i {
     color: #5CDD5B;
 }
 
-.email i {
+.email .i {
     color: #04A9FF;
 }
 
-.mail i {
+.mail .i {
     color: #FFFF00;
 }
 
-@media (max-width: 600px) {
-    .row {
-        display: block;
-        /* grid-template-columns: repeat(4, 1fr); */
+@media (max-width: 1100px) {
+    .bigb>.text {
+        font-size: 0.65rem;
     }
-
-    .bigb {
-        display: flex;
-        flex-direction: column;
-        /* align-items: center; */
-        justify-content: center;
-        /* margin-left: 100px; */
+    .footer-container{
+        flex-wrap: wrap
     }
-
-    .details {
-        margin: 2rem 0;
-        /* align-items: center; */
+   .details{
+    font-size: 0.65rem;
+   }
+
+}
+@media (max-width:845px) {
+   .bigb{
+        display:flex;
+        flex-direction:column;
+        justify-content:center;
+        align-items:center;
+        width:100%;
+        flex: none;
+        text-align:center;
     }
-
-    .footer-contact-info {
-        display: flex;
-        flex-direction: column;
-        text-align: justify;
-        margin-left: 80px;
-        justify-content: center;
+    .details{
+           flex: none;
     }
-
-    .footer-text {
-        margin-left: 80px;
-        text-align: center;
+    .footer-links a {
+        line-height: 0.3;
     }
+}
+ @media (max-width: 600px) {
+    .details{
+        align-items: center;
+ }
+ .details:last-child{
+    width: 100%;
+ }
 
-    /* .footer-links{
-        margin-right: 70px;
-    } */
+ }
+ @media (max-width:360px) {
+
+   .details{
+    width: 100%;
+  }
 
-}
+ }
+
+/* ********** Footer ends ********** */