fixed main page banner styles

ita-social-projects · Nov 27, 2024 · d426cb6 · d426cb6
1 parent 6bb57d9
commit d426cb6
Showing 1 changed file with 42 additions and 31 deletions.
diff --git a/FrontEnd/src/pages/LandingPage/Banner/Banner.module.css b/FrontEnd/src/pages/LandingPage/Banner/Banner.module.css
@@ -5,49 +5,51 @@
     width: 100vw;
 }
 
-.main-container{
-    display:flex;
+.main-container {
+    display: flex;
     justify-content: center;
-    flex-direction:row;
+    flex-direction: row;
+    width: 1512px;
     padding: 32px 104px 32px 104px;
+    box-sizing: border-box;
 }
 
-.main-baner-text{
+.main-baner-text {
     display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items:flex-start;
+    align-items: flex-start;
     font-family: Geologica;
     font-weight: 900;
     line-height: 57.6px;
     letter-spacing: 0.01em;
 }
 
-.main-baner-text__logo{
+.main-baner-text__logo {
     margin-bottom: 10px;
     font-size: 48px;
 }
 
-.main-banner-link__container{
+.main-banner-link__container {
     display: flex;
     max-width: 194px;
     max-height: 46px;
-    justify-content:center;
+    justify-content: center;
     align-items: center;
     border-radius: 4px;
     border: 1px solid black;
     padding: 13px 16px 13px 16px;
     margin-top: 30px;
     background: #000000;
-    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04); 
+    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04);
 }
 
-.main-baner-text__explanation{
-        font-size: 40px;
-        max-width: 557px;
+.main-baner-text__explanation {
+    font-size: 40px;
+    max-width: 557px;
 }
 
-.main-banner-link{
+.main-banner-link {
     font-family: Geologica;
     font-size: 15px;
     font-weight: 500;
@@ -56,56 +58,63 @@
     color: #FFFFFF;
 }
 
-.main-banner__img{
+.main-banner__img {
     max-width: 100vw;
     height: auto;
 }
 
-@media (min-width: 768px) and (max-width: 1511px) { 
-    .main-container{
-        flex-direction:column-reverse;
+@media (min-width: 768px) and (max-width: 1511px) {
+    .main-container {
+        flex-direction: column-reverse;
+        max-width: 768px;
 
     }
-    .main-baner-text{
+
+    .main-baner-text {
         display: flex;
         flex-direction: column;
         align-items: center;
         padding-top: 5vh;
 
     }
-    .main-baner-text__explanation{
+
+    .main-baner-text__explanation {
         display: flex;
         align-items: center;
         justify-content: center;
         max-width: 714px;
         text-align: center;
         font-size: 30px;
     }
-    .main-banner__img{
+
+    .main-banner__img {
         max-width: 100%;
     }
 }
 
 @media (max-width: 767px) {
-    .main-baner__container{
-        display:flex;
-        justify-content:space-around;
+    .main-baner__container {
+        display: flex;
+        justify-content: space-around;
         align-items: center;
         padding: 0px;
-    
+
     }
-    .main-container{
-        display:flex;
+
+    .main-container {
+        display: flex;
         justify-content: center;
-        flex-direction:column-reverse;
+        flex-direction: column-reverse;
         background-color: #B4D27A;
         max-width: 375px;
         padding: 16px 32px 16px 32px;
     }
-    .main-baner-text__logo{
+
+    .main-baner-text__logo {
         font-size: 34px;
     }
-    .main-baner-text{
+
+    .main-baner-text {
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -114,7 +123,8 @@
         text-align: center;
         margin: 0px;
     }
-    .main-baner-text__explanation{
+
+    .main-baner-text__explanation {
         display: flex;
         align-items: center;
         justify-content: center;
@@ -126,7 +136,8 @@
         line-height: 28.8px;
         letter-spacing: 0.01em;
     }
-    .main-banner__img{
+
+    .main-banner__img {
         max-width: 314px;
     }
 }