dd new font and fix

This commit is contained in:
karimaldeen 2024-09-26 11:58:49 +03:00
parent 296d5f78aa
commit 8305cf9ff6
11 changed files with 59 additions and 28 deletions

View File

@ -1,4 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;700&display=swap');
html, html,
@ -18,8 +19,12 @@ body {
padding: 0; padding: 0;
margin: 0; margin: 0;
font-weight: 600; font-weight: 600;
// line-height: normal;
// font-size: 16px; // font-size: 16px;
} }
p{
font-weight: normal;
}
h1, h1,
h2, h2,
h3, h3,

View File

@ -85,7 +85,7 @@
} }
@media screen and (max-width:750px) { @media screen and (max-width:900px) {
.Footer{ .Footer{
background: var(--primary); background: var(--primary);
@ -128,7 +128,8 @@
top: -40%; top: -40%;
background-image: var(--gradient); background-image: var(--gradient);
width: 60%; width: 60%;
min-height: 200px; height: fit-content;
padding-block: 20px;
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 30px; gap: 30px;

View File

@ -59,7 +59,7 @@
@media screen and (max-width:750px) { @media screen and (max-width:900px) {
.NavBar{ .NavBar{
.NavBarLinks{ .NavBarLinks{

View File

@ -83,7 +83,7 @@
} }
@media screen and (max-width:750px) { @media screen and (max-width:900px) {
.ContactPage{ .ContactPage{
background: var(--bg); background: var(--bg);
display: flex; display: flex;

View File

@ -16,7 +16,7 @@
gap: max(2vh,25px); gap: max(2vh,25px);
text-align: center; text-align: center;
z-index: 99; z-index: 99;
padding-top: 140px ; padding-top: 0px ;
>h1{ >h1{
display: flex; display: flex;
align-items: center; align-items: center;
@ -44,16 +44,20 @@
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;
transition: .5s ease-in-out; transition: .5s ease-in-out;
padding-block: 10px;
&:hover{ &:hover{
background: var(--gradient); background: var(--gradient);
scale: 1.1; scale: 1.1;
} }
h6{ h6{
font-size: max(12px,1vw); font-size: max(10px,1vw);
font-weight: normal;
line-height: 21px;
} }
h5{ h5{
font-weight: bold; font-weight: bold;
font-size: max(14px,1vw); font-size: max(12px,1vw);
line-height: 21px;
} }
svg{ svg{
font-size: max(20px,1.3vw); font-size: max(20px,1.3vw);
@ -94,7 +98,7 @@
} }
@media screen and (max-width:750px) { @media screen and (max-width:900px) {
.DownloadPage{ .DownloadPage{
background: var(--bg); background: var(--bg);
display: flex; display: flex;
@ -113,7 +117,7 @@
gap: max(2vh,25px); gap: max(2vh,25px);
text-align: center; text-align: center;
z-index: 99; z-index: 99;
padding-top: 20px ; padding-top: 0px ;
>h1{ >h1{
display: flex; display: flex;
align-items: center; align-items: center;

View File

@ -58,7 +58,7 @@
} }
} }
@media screen and (max-width:750px) { @media screen and (max-width:900px) {
.FeaturesPage{ .FeaturesPage{
background: var(--bg); background: var(--bg);
display: flex; display: flex;

View File

@ -11,8 +11,8 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-top: max(15vh,150px); margin-top: max(12vh,120px);
gap: max(2vh,25px); gap:0px;
z-index: 99; z-index: 99;
>h1{ >h1{
@ -20,15 +20,16 @@
align-items: center; align-items: center;
gap: 20px; gap: 20px;
color: var(--white); color: var(--white);
font-size: max(4vw,50px); font-size: max(3vw,40px);
h2{ h2{
color: var(--secondary); color: var(--secondary);
font-size: max(4vw,50px); font-size: max(3vw,40px);
} }
} }
p{ p{
color: var(--white); color: var(--white);
font-size: max(1.5vw,15px); font-size: max(1.5vw,15px);
margin-bottom: 10px;
} }
>div{ >div{
display: flex; display: flex;
@ -44,16 +45,20 @@
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;
transition: .5s ease-in-out; transition: .5s ease-in-out;
padding-block: 10px;
&:hover{ &:hover{
background: var(--gradient); background: var(--gradient);
scale: 1.1; scale: 1.1;
} }
h6{ h6{
font-size: max(12px,1vw); font-size: max(10px,1vw);
font-weight: normal;
line-height: 21px;
} }
h5{ h5{
font-weight: bold; font-weight: bold;
font-size: max(14px,1vw); font-size: max(12px,1vw);
line-height: 21px;
} }
svg{ svg{
font-size: max(20px,1.3vw); font-size: max(20px,1.3vw);
@ -97,7 +102,7 @@
@media screen and (max-width:750px) { @media screen and (max-width:900px) {
.HomePage{ .HomePage{
min-height: 100vh; min-height: 100vh;
background: var(--primary); background: var(--primary);
@ -111,8 +116,8 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-top: max(15vh,150px); margin-top: max(11vh,100px);
gap: max(2vh,25px); gap: 0px;
z-index: 99; z-index: 99;
>h1{ >h1{
@ -122,10 +127,10 @@
justify-content: center; justify-content: center;
gap: 20px; gap: 20px;
color: var(--white); color: var(--white);
font-size: max(5vw,25px); font-size: max(4vw,20px);
h2{ h2{
color: var(--secondary); color: var(--secondary);
font-size: max(5vw,25px); font-size: max(4vw,20px);
} }
} }
p{ p{
@ -147,15 +152,30 @@
border: 1px solid var(--white); border: 1px solid var(--white);
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;
transition: .5s ease-in-out;
padding-block: 8px;
&:hover{
background: var(--gradient);
scale: 1.1;
}
h6{ h6{
font-size: max(12px,1vw); font-size: max(10px,1vw);
font-weight: normal;
line-height: 15px;
} }
h5{ h5{
font-weight: bold; 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{ svg{
font-size: max(20px,1.3vw); font-size: max(20px,1.3vw);
} }
} }
} }

View File

@ -65,7 +65,7 @@
} }
@media screen and (max-width:750px) { @media screen and (max-width:900px) {
.HowItWork{ .HowItWork{
background: var(--bg); background: var(--bg);
@ -140,5 +140,6 @@
} }
} }
} }
} }

View File

@ -52,7 +52,7 @@
} }
} }
@media screen and (max-width:750px) { @media screen and (max-width:900px) {
.NotePage{ .NotePage{
background: var(--bg2); background: var(--bg2);

View File

@ -44,7 +44,7 @@
@media screen and (max-width:750px) { @media screen and (max-width:900px) {
.ScreenShoot{ .ScreenShoot{
background: var(--bg); background: var(--bg);

View File

@ -63,7 +63,7 @@
} }
@media screen and (max-width:750px) { @media screen and (max-width:900px) {
.VideoPage{ .VideoPage{
background: var(--bg); background: var(--bg);
@ -123,7 +123,7 @@
z-index: 99; z-index: 99;
min-height: 200px; min-height: 200px;
padding: 40px 20px; padding: 40px 20px;
gap: 30px; gap: 0px;
article{ article{
display: flex; display: flex;
flex-direction: column; flex-direction: column;