Skip to content

Commit de417c6

Browse files
Zakaria-B16Zakaria-B16
committed
fix landing page
1 parent 58e20f1 commit de417c6

File tree

2 files changed

+113
-115
lines changed

2 files changed

+113
-115
lines changed

‎src/sass/base/base.scss‎

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,51 @@
1-
// // .App {
2-
// // text-align: center;
3-
// // overflow: hidden;
4-
// // }
1+
// .App {
2+
// text-align: center;
3+
// overflow: hidden;
4+
// }
55

66
*,
77
*::after,
88
*::before {
9-
margin: 0;
10-
padding: 0;
11-
box-sizing: inherit;
9+
margin: 0;
10+
padding: 0;
11+
box-sizing: inherit;
1212
}
1313
@font-face {
14-
font-family: "Muli";
15-
src: local("Muli"), url(/assets/fonts/Muli-Regular.ttf) format("truetype");
14+
font-family: 'Muli';
15+
src: local('Muli'), url(/assets/fonts/Muli-Regular.ttf) format('truetype');
1616
}
1717

1818
html,
1919
body {
20-
width: 100%;
21-
font-family: "Muli", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
22-
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
23-
sans-serif;
24-
-webkit-font-smoothing: antialiased;
25-
-moz-osx-font-smoothing: grayscale;
26-
box-sizing: border-box;
20+
width: 100%;
21+
font-family: 'Muli', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
22+
'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
23+
'Helvetica Neue', sans-serif;
24+
-webkit-font-smoothing: antialiased;
25+
-moz-osx-font-smoothing: grayscale;
26+
box-sizing: border-box;
2727
}
2828

2929
html {
30-
font-size: 62.5%; // 1rem = 16px therefore 10px/16px = 62.5%, because i wanna use 10px
30+
font-size: 62.5%; // 1rem = 16px therefore 10px/16px = 62.5%, because i wanna use 10px
3131

32-
@include respond(big-desktop) {
33-
font-size: 130.5%; // 1rem = 12px therefore 18/16 = 75%
34-
}
35-
@include respond(desktop) {
36-
font-size: 100.5%; // 1rem = 12px therefore 18/16 = 75%
37-
}
38-
@include respond(tab-land) {
39-
font-size: 90%; // 1rem = 9px therefore 9/16 = 56.25%
40-
}
32+
@include respond(big-desktop) {
33+
font-size: 130.5%; // 1rem = 12px therefore 18/16 = 75%
34+
}
35+
@include respond(desktop) {
36+
font-size: 100.5%; // 1rem = 12px therefore 18/16 = 75%
37+
}
38+
@include respond(tab-land) {
39+
font-size: 90%; // 1rem = 9px therefore 9/16 = 56.25%
40+
}
4141

42-
@include respond(tab-port) {
43-
font-size: 87%; // 1rem = 8px therefore 8/16 = 50%
44-
}
45-
// @include respond(phone) {
46-
// font-size: 65% // 1rem = 8px therefore 8/16 = 50%
47-
// }
48-
@include respond(smaller-phone) {
49-
font-size: 80%; // 1rem = 8px therefore 8/16 = 50%
50-
}
42+
@include respond(tab-port) {
43+
font-size: 87%; // 1rem = 8px therefore 8/16 = 50%
44+
}
45+
// @include respond(phone) {
46+
// font-size: 65% // 1rem = 8px therefore 8/16 = 50%
47+
// }
48+
@include respond(smaller-phone) {
49+
font-size: 80%; // 1rem = 8px therefore 8/16 = 50%
50+
}
5151
}

‎src/sass/base/typography.scss‎

Lines changed: 78 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,99 @@
1-
.app {
2-
// padding: 27px 35px 0 35px;
3-
//overflow-x: hidden;
4-
}
1+
// .app {
2+
// // padding: 27px 35px 0 35px;
3+
// //overflow-x: hidden;
4+
// }
5+
56
.content {
6-
display: grid;
7-
// grid-template-rows: min-content;
8-
width: 1280px;
9-
grid-template-columns:
10-
[center-start] repeat(
11-
8,
12-
[col-start] minmax(min-content, 14rem) [col-end]
13-
)
14-
[center-end];
7+
display: grid;
8+
// grid-template-rows: min-content;
9+
width: 1280px;
10+
grid-template-columns:
11+
[center-start] repeat(8, [col-start] minmax(min-content, 14rem) [col-end])
12+
[center-end];
1513
}
1614

1715
.section-header {
18-
grid-column: 1 / -1;
16+
grid-column: 1 / -1;
1917
}
2018

2119
.section-pagination {
22-
display: flex;
23-
align-items: center;
24-
justify-content: center;
25-
margin: 2rem 0;
26-
grid-row: 5 / 6;
20+
display: flex;
21+
align-items: center;
22+
justify-content: center;
23+
margin: 2rem 0;
24+
grid-row: 5 / 6;
2725
}
2826

2927
.pagination__icon {
30-
color: $secondary-color;
31-
font-size: 1.6rem;
28+
color: $secondary-color;
29+
font-size: 1.6rem;
3230
}
3331
//LANDING PAGE
3432

3533
.landing {
36-
width: 100vw;
37-
grid-column: 1 / -1;
38-
height: 801px;
39-
margin: 0 0 131px;
40-
padding: 34px 0 0.1px;
41-
background-image: linear-gradient(to bottom, #380885, #554cb8);
34+
width: 100vw;
35+
grid-column: 1 / -1;
36+
height: 801px;
37+
margin: 0 0 131px;
38+
padding: 34px 0 0.1px;
39+
background-image: linear-gradient(to bottom, #380885, #554cb8);
4240

43-
&__logo {
44-
width: 82px;
45-
height: 42px;
46-
margin: 0 50px 50px 44px;
47-
//font-family: Tahoma;
48-
font-size: 19px;
49-
font-weight: 700;
50-
font-stretch: normal;
51-
font-style: normal;
52-
line-height: 1.05;
53-
letter-spacing: normal;
54-
text-align: left;
55-
color: #ffffff;
56-
}
41+
&__logo {
42+
width: 82px;
43+
height: 42px;
44+
margin: 0 50px 50px 44px;
45+
//font-family: Tahoma;
46+
font-size: 19px;
47+
font-weight: 700;
48+
font-stretch: normal;
49+
font-style: normal;
50+
line-height: 1.05;
51+
letter-spacing: normal;
52+
text-align: left;
53+
color: #ffffff;
54+
}
5755

58-
&__text {
59-
height: 100%;
60-
display: flex;
61-
flex-direction: column;
62-
text-align: center;
63-
align-items: center;
64-
justify-content: center;
65-
margin-top: -4rem;
56+
&__text {
57+
height: 100%;
58+
display: flex;
59+
flex-direction: column;
60+
text-align: center;
61+
align-items: center;
62+
justify-content: center;
63+
margin-top: -4rem;
6664

67-
&--content {
68-
margin-top: -20rem;
69-
}
65+
&--content {
66+
margin-top: -20rem;
67+
}
7068

71-
&--heading {
72-
width: 500px;
73-
height: 111px;
74-
margin: 0 0 20px;
75-
font-family: Muli;
76-
font-size: 45px;
77-
font-weight: bold;
78-
font-stretch: normal;
79-
font-style: normal;
80-
line-height: 1.22;
81-
letter-spacing: normal;
82-
text-align: center;
83-
color: #ffffff;
84-
}
69+
&--heading {
70+
width: 500px;
71+
height: 111px;
72+
margin: 0 0 20px;
73+
font-family: Muli;
74+
font-size: 45px;
75+
font-weight: bold;
76+
font-stretch: normal;
77+
font-style: normal;
78+
line-height: 1.22;
79+
letter-spacing: normal;
80+
text-align: center;
81+
color: #ffffff;
82+
}
8583

86-
&--sub {
87-
width: 450px;
88-
//height: 23px;
89-
margin: 20px 53px 0;
90-
font-family: Muli;
91-
font-size: 18px;
92-
font-weight: normal;
93-
font-stretch: normal;
94-
font-style: normal;
95-
line-height: 3.06;
96-
letter-spacing: normal;
97-
text-align: center;
98-
color: #b2a9d5;
99-
}
84+
&--sub {
85+
width: 450px;
86+
//height: 23px;
87+
margin: 20px 53px 0;
88+
font-family: Muli;
89+
font-size: 18px;
90+
font-weight: normal;
91+
font-stretch: normal;
92+
font-style: normal;
93+
line-height: 3.06;
94+
letter-spacing: normal;
95+
text-align: center;
96+
color: #b2a9d5;
10097
}
98+
}
10199
}

0 commit comments

Comments
 (0)