From 857a8386078c6f5dfd7e41a8e69f19928df141c3 Mon Sep 17 00:00:00 2001
From: Bastola <messiniki@outlook.com>
Date: Mon, 26 Jun 2023 10:01:57 +0545
Subject: [PATCH] Homepage Responsive for Tablet and Mobile

---
 index.html |   6 +--
 style.css  | 112 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 115 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index b928fe9..341efec 100644
--- a/index.html
+++ b/index.html
@@ -93,7 +93,7 @@ <h1 class="innerHeroTopLeftHeading">WE BELIEVE IN CREATING <br>A NURTURING ENVIR
     </div>
 
     <div class="alternateHeroContainer">
-        <span>
+        <span class="measuresContent">
             <i class="fa fa-info-circle" aria-hidden="true"></i>
             Our school has implemented all necessary safety measures for the COVID-19 virus, ensuring the safety of all students.
         </span>
@@ -137,7 +137,7 @@ <h3 class="rightTopHeading">School Counseling</h3>
             <div class="principalInnerContainer">
                 <div class="innerLeft">
                     <div class="innerLeftImageContainer">
-                        <img src="./images/principalQuality.jpg" alt="" class=innerLeftImage">
+                        <img src="./images/principalQuality.jpg" alt="" class="innerLeftImage">
                     </div>
                     <div class="innerLeftContent">
                         <span class="infoPara">Message from Principal</span>
@@ -150,7 +150,7 @@ <h2 class="infoheading">Govinda Bahadur Khadka</h3>
                 </div>
                 <div class="innerLeft">
                     <div class="innerLeftImageContainer">
-                        <img src="./images/directorQuality.jpg" alt="" class=innerLeftImage">
+                        <img src="./images/directorQuality.jpg" alt="" class="innerLeftImage">
                     </div>
                     <div class="innerLeftContent">
                         <span class="infoPara">Message from Director</span>
diff --git a/style.css b/style.css
index d8007fb..776ca65 100644
--- a/style.css
+++ b/style.css
@@ -66,6 +66,21 @@ body {
     }
 }
 
+@media screen and (max-width: 992px) {
+    #toggleButton {
+        display: none;
+    }
+
+    .navContainer {
+        display: none;
+    }
+
+    .innerHeaderContainer {
+        width: 84% !important;
+        justify-content: space-between   !important;
+    }
+}
+
 @media only screen and (max-width: 600px)  {
     .navContainer {
         display: none;
@@ -440,6 +455,26 @@ body {
     }
 }
 
+@media screen and (max-width: 992px) {
+    .innerHeroTop {
+        height: fit-content;
+        flex-direction: column;
+        padding: 0 1.8em;
+    }
+
+    .innerHeroTop > div {
+        width: fit-content;
+        padding: 0 45px;
+    }
+
+    .measuresContent {
+        margin: 0 2em !important;
+    }
+
+    .innerHeroContainer {
+        width: 100% !important;
+    }
+}
 
 
 
@@ -592,6 +627,39 @@ body {
     }
 }
 
+@media screen and (max-width: 1150px) {
+    .mainInfoSection {
+        width: 100%;
+        flex-direction: column;
+        height: fit-content;
+        margin: 2em 0;
+
+        align-items: center;
+    }
+
+    .infoLeft {
+        padding: 0;
+        width: 85%;
+        display: flex;
+        justify-content: center;
+        align-items: start;
+    }
+
+    .infoRight {
+        width: 100%;
+    }
+
+
+    .rightTop,
+    .rightBottom {
+        width: 77%;
+        padding: 2em 3em;
+    }
+    
+    .infoVideo {
+        width: 100%;
+    }
+}
 
 
 
@@ -681,7 +749,29 @@ body {
     }
 }
 
+@media screen and (max-width: 980px) {
+    .principalInfoSection {
+        height: fit-content;
+    }
 
+    .principalInnerContainer {
+        flex-direction: column;
+    }
+
+    .principalInnerContainer > div {
+        width: 100%;
+        margin-bottom: 4em;
+    }
+
+    .principalInnerContainer > div:nth-child(1) {
+        margin-top: 4em;
+    }
+
+    .innerLeftImage {
+        width: 100% !important;
+        height: auto !important;
+    }
+}
 
 
 
@@ -858,6 +948,28 @@ body {
 
 }
 
+@media screen and (max-width: 980px) {
+    .footerContainer {
+
+    }
+
+    .footerInnerContainer {
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .footerInnerContainer > div {
+        width: 100%;
+    }
+
+    .footerSocial {
+        justify-content: center;
+        align-items: center;
+        padding-bottom: 3em;
+    }
+}
+
 
 /* about page css */