some animation style changes

souravsaha5703 · Dec 9, 2023 · b4395cd · b4395cd
1 parent 6092d31
commit b4395cd
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 50 deletions.
diff --git a/css/aboutstyle.css b/css/aboutstyle.css
@@ -297,10 +297,10 @@ footer{
         right: -150%;
     }
     .text-container{
-        width: 500px;
+        width: 100%;
     }
     .text-container h1{
-        font-size: 3rem;
+        font-size: 3.5rem;
     }
     footer{
         flex-direction: column;
@@ -311,18 +311,20 @@ footer{
         justify-content: center;
     }
 }
+@media (max-width:580px){
+    .text-container h1{
+        font-size: 3rem;
+    }
+}
 @media (max-width:526px){
     .menu-section{
         width: 450px;
     }
     #heading-text{
-        height: 75vh;
-    }
-    .text-container{
-        width: 100%;
+        height: 100vh;
     }
     .text-container h1{
-        font-size: 2.5rem;
+        font-size: 3rem;
     }
     .text-container #bannerimg{
         width: 60px;
@@ -343,17 +345,14 @@ footer{
         width: 325px;
     }
     #heading-text{
-        height: 65vh;
-    }
-    .text-container{
-        width: 100%;
+        height: 100vh;
     }
     .text-container h1{
-        font-size: 2rem;
+        font-size: 2.8rem;
     }
     .text-container #bannerimg{
-        width: 40px;
-        height: 40px;
+        width: 100px;
+        height: 80px;
     }
     .text-intro h1{
         font-size: 1.5rem;
@@ -371,8 +370,17 @@ footer{
         font-size: 1rem;
     }
 }
+@media (max-width:375px){
+    .text-container h1{
+        font-size: 2.5rem;
+    }
+}
 @media (max-width:325px){
     .text-container h1{
-        font-size: 1.5rem;
+        font-size: 2rem;
+    }
+    .text-container #bannerimg{
+        width: 60px;
+        height: 60px;
     }
 }
diff --git a/css/contactstyle.css b/css/contactstyle.css
@@ -331,19 +331,19 @@ footer{
         right: -150%;
     }
     .text-container{
-        width: 500px;
+        width: 100%;
     }
     .text-container h1{
-        font-size: 4rem;
+        font-size: 3.5rem;
     }
     .text-container-2{
-        width: 500px;
+        width: 100%;
     }
     .text-container-2 h1{
         font-size: 5rem;
     }
     .contact-form-section{
-        width: 500px;
+        width: 100%;
     }
     .contact-form-section h1{
         font-size: 1.5rem;
@@ -371,51 +371,56 @@ footer{
         justify-content: center;
     }
 }
+@media (max-width:580px){
+    .text-container h1{
+        font-size: 3rem;
+    }
+}
 @media (max-width:526px){
     .menu-section{
         width: 450px;
     }
     #heading-text{
-        height: 75vh;
-    }
-    .text-container{
-        width: 100%;
+        height: 100vh;
     }
     .text-container h1{
-        font-size: 2.5rem;
+        font-size: 3rem;
     }
     .text-container #bannerimg{
         width: 60px;
         height: 60px;
     }
-    .text-container-2{
-        width: 100%;
-    }
     .text-container-2 h1{
         font-size: 3rem;
     }
-    .contact-form-section{
-        width: 100%;
-    }
 }
 @media (max-width:425px){
     .menu-section{
         width: 325px;
     }
     #heading-text{
-        height: 60vh;
+        height: 100vh;
     }
     .text-container h1{
-        font-size: 2rem;
+        font-size: 2.8rem;
     }
     .text-container #bannerimg{
-        width: 40px;
-        height: 40px;
+        width: 100px;
+        height: 80px;
+    }
+}
+@media (max-width:375px){
+    .text-container h1{
+        font-size: 2.5rem;
     }
 }
 @media (max-width:325px){
     .text-container h1{
-        font-size: 1.5rem;
+        font-size: 2rem;
+    }
+    .text-container #bannerimg{
+        width: 60px;
+        height: 60px;
     }
     .text-container-2 h1{
         font-size: 2rem;

diff --git a/css/style.css b/css/style.css
@@ -469,10 +469,10 @@ footer{
         right: -150%;
     }
     .text-container{
-        width: 500px;
+        width: 100%;
     }
     .text-container h1{
-        font-size: 3rem;
+        font-size: 3.5rem;
     }
     .intro{
         height: 80vh;
@@ -501,18 +501,20 @@ footer{
         justify-content: center;
     }
 }
+@media (max-width:580px){
+    .text-container h1{
+        font-size: 3rem;
+    }
+}
 @media (max-width:526px){
     .menu-section{
         width: 450px;
     }
     #heading-text{
-        height: 75vh;
-    }
-    .text-container{
-        width: 100%;
+        height: 100vh;
     }
     .text-container h1{
-        font-size: 2.5rem;
+        font-size: 3rem;
     }
     .text-container #bannerimg{
         width: 60px;
@@ -539,17 +541,14 @@ footer{
         width: 325px;
     }
     #heading-text{
-        height: 65vh;
-    }
-    .text-container{
-        width: 100%;
+        height: 100vh;
     }
     .text-container h1{
-        font-size: 2rem;
+        font-size: 2.8rem;
     }
     .text-container #bannerimg{
-        width: 40px;
-        height: 40px;
+        width: 100px;
+        height: 80px;
     }
     .text-intro h1{
         font-size: 1.5rem;
@@ -582,9 +581,18 @@ footer{
         width: 100%;
     }
 }
+@media (max-width:375px){
+    .text-container h1{
+        font-size: 2.5rem;
+    }
+}
 @media (max-width:325px){
     .text-container h1{
-        font-size: 1.5rem;
+        font-size: 2rem;
+    }
+    .text-container #bannerimg{
+        width: 60px;
+        height: 60px;
     }
     .images img{
         width: 100px;