Skip to content

Commit f0b04a9

Browse files
mounikaperimounikaperi
committed
sass files
1 parent 5b72aab commit f0b04a9

11 files changed

+540
-14
lines changed

‎Project-Nexter/sass/_base.scss

+29-7
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,60 @@
1-
//Color Variables
1+
// COLOR VARIABLES
22
$color-primary: #c69963;
33
$color-primary-dark: #B28451;
4+
45
$color-secondary: #101d2c;
6+
57
$color-grey-light-1: #f9f7f6;
68
$color-grey-light-2: #aaa;
9+
710
$color-grey-dark-1: #54483A;
811
$color-grey-dark-2: #6D5D4B;
9-
//Font Variables
12+
13+
// FONT VARIABLES
1014
$font-primary: 'Nunito', sans-serif;
1115
$font-display: 'Josefin Sans', sans-serif;
1216

17+
// RESPONSIVE BREAKPOINTS
18+
$bp-largest: 75em; // 1200px
19+
$bp-large: 62.5em; // 1000px
20+
$bp-medium: 50em; // 800px;
21+
$bp-small: 37.5em; // 600px;
22+
1323
*,
1424
*::before,
1525
*::after {
1626
margin: 0;
1727
padding: 0;
1828
box-sizing: inherit;
1929
}
30+
2031
html {
2132
box-sizing: border-box;
22-
font-size: 62.5%; //(10px /16px = 62.5%) -> 1rem = 10px;
33+
font-size: 62.5%; // 10px/16px = 62.5% -> 1rem = 10px
34+
35+
@media only screen and (max-width: $bp-largest) {
36+
font-size: 50%;
37+
}
2338
}
39+
2440
body {
2541
font-family: $font-primary;
26-
color: $color-grey-dark-1;
42+
color: $color-grey-dark-2;
2743
font-weight: 300;
2844
line-height: 1.6;
2945
}
46+
3047
.container {
3148
display: grid;
3249
grid-template-rows: 80vh min-content 40vw repeat(3, min-content);
3350
grid-template-columns: [sidebar-start] 8rem [sidebar-end full-start] minmax(6rem, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 14rem) [col-end]) [center-end] minmax(6rem, 1fr) [full-end];
34-
& > * {
35-
padding: 40px;
36-
font-size: 3rem;
51+
52+
@media only screen and (max-width: $bp-large) {
53+
grid-template-rows: 6rem 80vh min-content 40vw repeat(3, min-content);
54+
grid-template-columns: [full-start] minmax(6rem, 1fr) [center-start] repeat(8, [col-start] minmax(min-content, 14rem) [col-end]) [center-end] minmax(6rem, 1fr) [full-end];
55+
}
56+
57+
@media only screen and (max-width: $bp-medium) {
58+
grid-template-rows: 6rem calc(100vh - 6rem);
3759
}
3860
}

‎Project-Nexter/sass/_features.scss

+40-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,43 @@
11
.features {
2-
background-color: $color-grey-light-2;
32
grid-column: center-start / center-end;
3+
4+
margin: 15rem 0;
5+
6+
@supports(display: grid) {
7+
display: grid;
8+
//grid-template-columns: repeat(3, 1fr);
9+
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
10+
grid-gap: 6rem;
11+
align-items: start;
12+
}
13+
}
14+
15+
16+
.feature {
17+
18+
float: left;
19+
width: 33.3333%;
20+
margin-bottom: 6rem;
21+
22+
@supports(display: grid) {
23+
width: auto;
24+
margin-bottom: 0;
25+
}
26+
27+
display: grid;
28+
grid-template-columns: min-content 1fr;
29+
grid-row-gap: 1.5rem;
30+
grid-column-gap: 2.5rem;
31+
32+
&__icon {
33+
fill: $color-primary;
34+
width: 4.5rem;
35+
height: 4.5rem;
36+
grid-row: 1 / span 2;
37+
transform: translateY(-1rem);
38+
}
39+
40+
&__text {
41+
font-size: 1.7rem;
42+
}
443
}

‎Project-Nexter/sass/_footer.scss

+40
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,43 @@
11
.footer {
22
background-color: $color-secondary;
3+
grid-column: full-start / full-end;
4+
padding: 8rem;
5+
}
6+
7+
.nav {
8+
list-style: none;
9+
10+
display: grid;
11+
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
12+
grid-gap: 2rem;
13+
align-items: center;
14+
15+
&__link:link,
16+
&__link:visited {
17+
font-size: 1.4rem;
18+
color: #fff;
19+
text-decoration: none;
20+
font-family: $font-display;
21+
text-transform: uppercase;
22+
text-align: center;
23+
padding: 1.5rem;
24+
display: block;
25+
transition: all .2s;
26+
}
27+
28+
&__link:hover,
29+
&__link:active {
30+
background-color: rgba(#fff, .05);
31+
transform: translateY(-3px);
32+
}
33+
}
34+
35+
.copyright {
36+
font-size: 1.4rem;
37+
color: $color-grey-light-2;
38+
margin-top: 6rem;
39+
margin-right: auto;
40+
margin-left: auto;
41+
text-align: center;
42+
width: 70%;
343
}

‎Project-Nexter/sass/_gallery.scss

+89-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,92 @@
11
.gallery {
2-
background-color: $color-grey-dark-1;
2+
background-color: $color-grey-light-1;
33
grid-column: full-start / full-end;
4+
5+
display: grid;
6+
/*grid-template-columns: repeat(8, 1fr);
7+
grid-template-rows: repeat(7, 5vw);*/
8+
grid-template: repeat(7, 5vw) / repeat(8, 1fr);
9+
10+
11+
grid-gap: 1.5rem;
12+
padding: 1.5rem;
13+
14+
&__item {
15+
&--1 {
16+
grid-row: 1 / span 2;
17+
grid-column: 1 / span 2;
18+
}
19+
20+
&--2 {
21+
grid-row: 1 / span 3;
22+
grid-column: 3 / span 3;
23+
}
24+
25+
&--3 {
26+
grid-row: 1 / span 2;
27+
grid-column: 6 / 7;
28+
}
29+
30+
&--4 {
31+
grid-row: 1 / span 2;
32+
grid-column: 7 / -1;
33+
}
34+
35+
&--5 {
36+
grid-row: 3 / span 3;
37+
grid-column: 1 / span 2;
38+
}
39+
40+
&--6 {
41+
grid-row: 4 / span 2;
42+
grid-column: 3 / span 2;
43+
}
44+
45+
&--7 {
46+
grid-row: 4 / 5;
47+
grid-column: 5 / 6;
48+
}
49+
50+
&--8 {
51+
grid-row: 3 / span 2;
52+
grid-column: 6 / span 2;
53+
}
54+
55+
&--9 {
56+
grid-row: 3 / span 3;
57+
grid-column: 8 / -1;
58+
}
59+
60+
&--10 {
61+
grid-row: 6 / span 2;
62+
grid-column: 1 / 2;
63+
}
64+
65+
&--11 {
66+
grid-row: 6 / span 2;
67+
grid-column: 2 / span 2;
68+
}
69+
70+
&--12 {
71+
grid-row: 6 / span 2;
72+
grid-column: 4 / 5;
73+
}
74+
75+
&--13 {
76+
grid-row: 5 / span 3;
77+
grid-column: 5 / span 3;
78+
}
79+
80+
&--14 {
81+
grid-row: 6 / span 2;
82+
grid-column: 8 / -1;
83+
}
84+
}
85+
86+
&__img {
87+
width: 100%;
88+
height: 100%;
89+
object-fit: cover;
90+
display: block;
91+
}
492
}

‎Project-Nexter/sass/_header.scss

+62-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,65 @@
11
.header {
22
background-color: $color-grey-dark-1;
3-
grid-column: full-start / col-end-6;
3+
grid-column: full-start / col-end 6;
4+
background-image: linear-gradient(rgba($color-secondary, .93), rgba($color-secondary, .93)), url(../img/hero.jpeg);
5+
background-size: cover;
6+
background-position: center;
7+
padding: 8rem;
8+
padding-top: 4rem;
9+
10+
display: grid;
11+
grid-template-rows: 1fr min-content minmax(6rem, min-content) 1fr;
12+
grid-template-columns: minmax(min-content, max-content);
13+
grid-row-gap: 1.5rem;
14+
justify-content: center;
15+
16+
@media only screen and (max-width: $bp-medium) {
17+
grid-column: 1 / -1;
18+
}
19+
20+
@media only screen and (max-width: $bp-small) {
21+
padding: 5rem;
22+
}
23+
24+
&__logo {
25+
height: 3rem;
26+
justify-self: center;
27+
}
28+
29+
&__btn {
30+
align-self: start;
31+
justify-self: start;
32+
}
33+
34+
&__seenon-text {
35+
display: grid;
36+
grid-template-columns: 1fr max-content 1fr;
37+
grid-column-gap: 1.5rem;
38+
align-items: center;
39+
40+
font-size: 1.6rem;
41+
color: $color-grey-light-2;
42+
43+
&::before,
44+
&::after {
45+
content: "";
46+
height: 1px;
47+
display: block;
48+
background-color: currentColor;
49+
}
50+
}
51+
52+
&__seenon-logos {
53+
display: grid;
54+
grid-template-columns: repeat(4, 1fr);
55+
grid-column-gap: 3rem;
56+
justify-items: center;
57+
align-items: center;
58+
59+
img {
60+
max-height: 2.5rem;
61+
max-width: 100%;
62+
filter: brightness(70%);
63+
}
64+
}
465
}

0 commit comments

Comments
 (0)