diff --git a/src/styles/App/App.scss b/src/styles/App/App.scss index 7dd3803..5b78a14 100644 --- a/src/styles/App/App.scss +++ b/src/styles/App/App.scss @@ -1,4 +1,5 @@ +@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;700&display=swap'); html, @@ -18,8 +19,12 @@ body { padding: 0; margin: 0; font-weight: 600; + // line-height: normal; // font-size: 16px; } +p{ + font-weight: normal; +} h1, h2, h3, diff --git a/src/styles/components/Footer.scss b/src/styles/components/Footer.scss index 3c9356b..c35f6eb 100644 --- a/src/styles/components/Footer.scss +++ b/src/styles/components/Footer.scss @@ -85,7 +85,7 @@ } -@media screen and (max-width:750px) { +@media screen and (max-width:900px) { .Footer{ background: var(--primary); @@ -128,7 +128,8 @@ top: -40%; background-image: var(--gradient); width: 60%; - min-height: 200px; + height: fit-content; + padding-block: 20px; display: flex; justify-content: center; gap: 30px; diff --git a/src/styles/components/NavBar.scss b/src/styles/components/NavBar.scss index 1d80f95..2b3575e 100644 --- a/src/styles/components/NavBar.scss +++ b/src/styles/components/NavBar.scss @@ -59,7 +59,7 @@ -@media screen and (max-width:750px) { +@media screen and (max-width:900px) { .NavBar{ .NavBarLinks{ diff --git a/src/styles/pages/ContactPage.scss b/src/styles/pages/ContactPage.scss index dc031bf..ae9e04d 100644 --- a/src/styles/pages/ContactPage.scss +++ b/src/styles/pages/ContactPage.scss @@ -83,7 +83,7 @@ } -@media screen and (max-width:750px) { +@media screen and (max-width:900px) { .ContactPage{ background: var(--bg); display: flex; diff --git a/src/styles/pages/DownloadPage.scss b/src/styles/pages/DownloadPage.scss index a55fb06..cfe4dd7 100644 --- a/src/styles/pages/DownloadPage.scss +++ b/src/styles/pages/DownloadPage.scss @@ -16,7 +16,7 @@ gap: max(2vh,25px); text-align: center; z-index: 99; - padding-top: 140px ; + padding-top: 0px ; >h1{ display: flex; align-items: center; @@ -44,16 +44,20 @@ border-radius: 10px; cursor: pointer; transition: .5s ease-in-out; + padding-block: 10px; &:hover{ background: var(--gradient); scale: 1.1; } h6{ - font-size: max(12px,1vw); + font-size: max(10px,1vw); + font-weight: normal; + line-height: 21px; } h5{ font-weight: bold; - font-size: max(14px,1vw); + font-size: max(12px,1vw); + line-height: 21px; } svg{ font-size: max(20px,1.3vw); @@ -94,7 +98,7 @@ } -@media screen and (max-width:750px) { +@media screen and (max-width:900px) { .DownloadPage{ background: var(--bg); display: flex; @@ -113,7 +117,7 @@ gap: max(2vh,25px); text-align: center; z-index: 99; - padding-top: 20px ; + padding-top: 0px ; >h1{ display: flex; align-items: center; diff --git a/src/styles/pages/FeaturesPage.scss b/src/styles/pages/FeaturesPage.scss index 6d103ef..6b722fa 100644 --- a/src/styles/pages/FeaturesPage.scss +++ b/src/styles/pages/FeaturesPage.scss @@ -58,7 +58,7 @@ } } -@media screen and (max-width:750px) { +@media screen and (max-width:900px) { .FeaturesPage{ background: var(--bg); display: flex; diff --git a/src/styles/pages/HomePage.scss b/src/styles/pages/HomePage.scss index dd00ad4..88e5505 100644 --- a/src/styles/pages/HomePage.scss +++ b/src/styles/pages/HomePage.scss @@ -11,8 +11,8 @@ flex-direction: column; align-items: center; justify-content: center; - margin-top: max(15vh,150px); - gap: max(2vh,25px); + margin-top: max(12vh,120px); + gap:0px; z-index: 99; >h1{ @@ -20,15 +20,16 @@ align-items: center; gap: 20px; color: var(--white); - font-size: max(4vw,50px); + font-size: max(3vw,40px); h2{ color: var(--secondary); - font-size: max(4vw,50px); + font-size: max(3vw,40px); } } p{ color: var(--white); font-size: max(1.5vw,15px); + margin-bottom: 10px; } >div{ display: flex; @@ -44,16 +45,20 @@ border-radius: 10px; cursor: pointer; transition: .5s ease-in-out; + padding-block: 10px; &:hover{ background: var(--gradient); scale: 1.1; } h6{ - font-size: max(12px,1vw); + font-size: max(10px,1vw); + font-weight: normal; + line-height: 21px; } h5{ font-weight: bold; - font-size: max(14px,1vw); + font-size: max(12px,1vw); + line-height: 21px; } svg{ font-size: max(20px,1.3vw); @@ -97,7 +102,7 @@ -@media screen and (max-width:750px) { +@media screen and (max-width:900px) { .HomePage{ min-height: 100vh; background: var(--primary); @@ -111,8 +116,8 @@ flex-direction: column; align-items: center; justify-content: center; - margin-top: max(15vh,150px); - gap: max(2vh,25px); + margin-top: max(11vh,100px); + gap: 0px; z-index: 99; >h1{ @@ -122,10 +127,10 @@ justify-content: center; gap: 20px; color: var(--white); - font-size: max(5vw,25px); + font-size: max(4vw,20px); h2{ color: var(--secondary); - font-size: max(5vw,25px); + font-size: max(4vw,20px); } } p{ @@ -147,15 +152,30 @@ border: 1px solid var(--white); border-radius: 10px; cursor: pointer; + transition: .5s ease-in-out; + padding-block: 8px; + &:hover{ + background: var(--gradient); + scale: 1.1; + } h6{ - font-size: max(12px,1vw); + font-size: max(10px,1vw); + font-weight: normal; + line-height: 15px; } h5{ font-weight: bold; - font-size: max(14px,1vw); + font-size: max(12px,1vw); + line-height: 15px; + } + div:has(svg){ + display: flex; + justify-content: center; + align-items: center; } svg{ font-size: max(20px,1.3vw); + } } } diff --git a/src/styles/pages/HowItWork.scss b/src/styles/pages/HowItWork.scss index db1add0..76302ec 100644 --- a/src/styles/pages/HowItWork.scss +++ b/src/styles/pages/HowItWork.scss @@ -65,7 +65,7 @@ } -@media screen and (max-width:750px) { +@media screen and (max-width:900px) { .HowItWork{ background: var(--bg); @@ -140,5 +140,6 @@ } } + } } \ No newline at end of file diff --git a/src/styles/pages/NotePage.scss b/src/styles/pages/NotePage.scss index a3f5299..a9cc465 100644 --- a/src/styles/pages/NotePage.scss +++ b/src/styles/pages/NotePage.scss @@ -52,7 +52,7 @@ } } -@media screen and (max-width:750px) { +@media screen and (max-width:900px) { .NotePage{ background: var(--bg2); diff --git a/src/styles/pages/ScreenShoot.scss b/src/styles/pages/ScreenShoot.scss index 35bb05d..d2f64f6 100644 --- a/src/styles/pages/ScreenShoot.scss +++ b/src/styles/pages/ScreenShoot.scss @@ -44,7 +44,7 @@ -@media screen and (max-width:750px) { +@media screen and (max-width:900px) { .ScreenShoot{ background: var(--bg); diff --git a/src/styles/pages/VideoPage.scss b/src/styles/pages/VideoPage.scss index 14e2754..2cb4b0f 100644 --- a/src/styles/pages/VideoPage.scss +++ b/src/styles/pages/VideoPage.scss @@ -63,7 +63,7 @@ } -@media screen and (max-width:750px) { +@media screen and (max-width:900px) { .VideoPage{ background: var(--bg); @@ -123,7 +123,7 @@ z-index: 99; min-height: 200px; padding: 40px 20px; - gap: 30px; + gap: 0px; article{ display: flex; flex-direction: column;