Skip to content
This repository was archived by the owner on Feb 5, 2022. It is now read-only.

Commit 0be5c0b

Browse files
PottertheJavaOtterPottertheJavaOtter
committed
style(app-about): updates to marvel
1 parent 46a4e95 commit 0be5c0b

File tree

3 files changed

+188
-254
lines changed

3 files changed

+188
-254
lines changed

‎src/assets/i18n/en.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,9 +57,9 @@ export const translations = {
5757
about: {
5858
header: {
5959
title: 'We Are Passionate About Technology and Design',
60-
titleSmall: 'We Are Passionate About Technology & Design',
60+
titleSmall: 'We Are Passionate About Design & Technology',
6161
text: "We believe that your success is our success. We're here to challenge your assumptions and help you discover your web or mobile applications full potential.",
62-
action: 'LEARN MORE',
62+
action: 'MEET OUR TEAM',
6363
},
6464
mission: {
6565
title: 'Our Mission',

‎src/pages/app-about/app-about.scss‎

Lines changed: 134 additions & 186 deletions
Original file line numberDiff line numberDiff line change
@@ -2,232 +2,180 @@
22
font-family: 'Muli', sans-serif;
33
height: 100%;
44
overflow-x: hidden;
5-
.container {
6-
@include media-breakpoint-down(sm) {
7-
padding: 0 2rem;
8-
}
9-
padding: 0;
10-
}
11-
.hero {
12-
@include media-breakpoint-down(lg) {
13-
background-position: right bottom;
14-
}
5+
padding: 73px 0 0 0;
6+
7+
h1 {
158
@include media-breakpoint-down(md) {
16-
background-size: 80% 80%;
17-
width: calc(100% + 4rem);
9+
font-size: 2.625rem;
10+
letter-spacing: 2.1px;
11+
line-height: 47px;
1812
}
1913
@include media-breakpoint-down(sm) {
20-
background-size: auto;
21-
width: calc(100% + 2rem);
14+
font-size: 1.75rem;
15+
letter-spacing: 1.05px;
16+
line-height: 34px;
17+
margin: 2rem auto;
18+
text-align: center;
2219
}
23-
background: url('/assets/svg/about-graphic-header.svg') right top no-repeat;
24-
background-size: auto;
25-
height: 100%;
26-
27-
.row {
28-
@include media-breakpoint-down(md) {
29-
padding: 0 0 50px;
30-
}
31-
@include media-breakpoint-down(sm) {
32-
padding: 0 0 150px;
33-
}
34-
height: 700px;
35-
36-
p {
37-
@include media-breakpoint-down(md) {
38-
width: 320px;
39-
}
40-
@include media-breakpoint-down(sm) {
41-
letter-spacing: 0.5px;
42-
line-height: 32px;
43-
margin: 0 0 1rem;
44-
text-align: left;
45-
width: 263px;
46-
}
47-
48-
color: $gray-brown;
49-
font-size: 1rem;
50-
font-weight: 400;
51-
letter-spacing: 1px;
52-
line-height: 32px;
53-
margin: 0 0 2rem;
54-
width: 419px;
55-
}
56-
57-
h1 {
58-
@include media-breakpoint-down(md) {
59-
font-size: 2.625rem;
60-
letter-spacing: 2.1px;
61-
line-height: 47px;
62-
width: 421px;
63-
}
64-
@include media-breakpoint-down(sm) {
65-
font-size: 1.75rem;
66-
letter-spacing: 1.05px;
67-
line-height: 34px;
68-
margin: 0 0 1rem;
69-
width: 278px;
70-
}
71-
72-
font-size: 3rem;
73-
font-weight: 600;
74-
letter-spacing: 1.6px;
75-
line-height: 58px;
76-
margin: 0 0 2rem;
77-
max-width: 632px;
78-
}
79-
80-
button {
81-
@include media-breakpoint-down(md) {
82-
display: none;
83-
}
84-
}
85-
86-
.text-container {
87-
@include media-breakpoint-down(sm) {
88-
margin-bottom: 2rem;
89-
}
90-
}
91-
92-
.title {
93-
@include media-breakpoint-down(sm) {
94-
display: none;
95-
}
96-
}
20+
font-size: 3rem;
21+
font-weight: 600;
22+
letter-spacing: 1.6px;
23+
line-height: 58px;
24+
margin: 0 0 1rem;
25+
text-align: left;
26+
}
9727

98-
.title-small {
99-
@include media-breakpoint-down(sm) {
100-
display: block;
101-
}
102-
display: none;
103-
}
28+
h2 {
29+
@include media-breakpoint-down(md) {
30+
font-size: 1.75rem;
31+
line-height: 34px;
10432
}
33+
font-size: 2.63rem;
34+
font-weight: 600;
35+
letter-spacing: 2.1px;
36+
line-height: 45px;
10537
}
10638

107-
.team-photo {
108-
@include media-breakpoint-down(sm) {
109-
margin: 0;
110-
min-height: 240px;
39+
h3 {
40+
@include media-breakpoint-down(md) {
41+
font-size: 1.5rem;
42+
letter-spacing: 1.54px;
43+
line-height: 29px;
11144
}
112-
background-image: url('/assets/about-photo-team.jpg');
113-
background-repeat: no-repeat;
114-
background-size: 100%;
115-
height: 100%;
116-
margin: 0 0 7rem;
117-
min-height: 610px;
45+
font-size: 1.75rem;
46+
font-weight: 600;
47+
line-height: 34px;
48+
}
11849

119-
app-img {
120-
@include media-breakpoint-down(sm) {
121-
display: none;
122-
}
123-
position: absolute;
124-
top: 600px;
125-
transform: translate(-50%, -50%);
126-
width: 100%;
50+
p {
51+
@include media-breakpoint-down(md) {
52+
color: #5d534e;
53+
margin-bottom: 1rem;
54+
}
55+
@include media-breakpoint-down(sm) {
56+
font-size: 1rem;
57+
line-height: 32px;
58+
margin: 0 auto;
12759
}
60+
color: $gray-dark;
61+
font-size: 1.125rem;
62+
font-weight: 400;
63+
line-height: 36px;
12864
}
12965

130-
.mission-statement {
66+
.hero {
67+
@include media-breakpoint-down(md) {
68+
background-size: 80%;
69+
}
13170
@include media-breakpoint-down(sm) {
132-
display: block;
71+
background: none;
72+
height: 100%;
13373
}
134-
background: linear-gradient(-160deg, #f99a2a 0%, #f9902a 100%);
135-
display: none;
136-
height: 100%;
74+
background: url('/assets/svg/about-graphic-header.svg') right top no-repeat;
75+
background-position: calc(100% + 3rem) calc(100% + 3rem);
76+
background-repeat: no-repeat;
77+
background-size: 70%;
78+
height: 600px;
13779

13880
h1 {
139-
font-size: 1rem;
140-
font-weight: 700;
141-
letter-spacing: 1.02px;
142-
line-height: 19px;
143-
margin: 1rem 0;
81+
@include media-breakpoint-down(md) {
82+
max-width: 421px;
83+
}
84+
@include media-breakpoint-down(sm) {
85+
max-width: 278px;
86+
}
87+
max-width: 632px;
14488
}
14589

14690
p {
147-
font-size: 0.8125rem;
148-
font-weight: 400;
149-
line-height: 22px;
150-
margin: 0 0 2rem;
91+
@include media-breakpoint-down(md) {
92+
max-width: 320px;
93+
}
94+
@include media-breakpoint-down(sm) {
95+
max-width: 278px;
96+
text-align: center;
97+
}
98+
color: #5d534e;
99+
max-width: 420px;
100+
text-align: left;
151101
}
152102
}
153103

154-
.values,
155104
.members {
156-
padding: 3rem 0;
157-
.container {
158-
padding: 0 0.5rem;
159-
}
160-
105+
margin-bottom: 8rem;
161106
h2 {
162-
font-size: 2.625rem;
107+
@include media-breakpoint-down(md) {
108+
font-size: 1.75rem;
109+
line-height: 34px;
110+
margin: 3rem 0;
111+
}
112+
@include media-breakpoint-down(sm) {
113+
margin: 3rem 0 2rem;
114+
}
115+
font-size: 2.63rem;
163116
font-weight: 600;
164117
letter-spacing: 2.1px;
165118
line-height: 38px;
166-
margin: 0 0 2rem;
119+
margin: 4rem 0;
167120
text-align: center;
168121
}
122+
}
169123

170-
p {
171-
@include media-breakpoint-down(sm) {
172-
font-size: 1rem;
173-
margin: 0 auto;
174-
text-align: center;
175-
width: 85%;
176-
}
177-
color: $gray-dark;
178-
font-size: 1.125rem;
179-
font-weight: 400;
180-
line-height: 36px;
124+
.values {
125+
margin: 0 0 4rem;
126+
h2 {
127+
margin: 4rem 0 1rem;
181128
text-align: center;
182129
}
183-
184-
.header {
185-
margin: 0 auto 3rem;
186-
max-width: 768px;
187-
}
188-
189-
.integrity {
190-
background: url('assets/svg/about-graphic-integrity.svg') center center no-repeat;
191-
height: 164px;
192-
width: 220px;
193-
}
194-
195-
.honesty {
196-
background: url('assets/svg/about-graphic-honesty.svg') center center no-repeat;
197-
height: 164px;
198-
width: 220px;
130+
p {
131+
margin: auto;
132+
max-width: 681px;
133+
text-align: center;
199134
}
135+
}
200136

201-
.transparency {
202-
background: url('assets/svg/about-graphic-transparency.svg') center center no-repeat;
203-
height: 164px;
204-
width: 220px;
205-
}
137+
.value-badges {
138+
margin: 0 0 4rem;
206139
}
207140

208-
.values {
209-
h2 {
210-
@include media-breakpoint-down(sm) {
211-
font-size: 1.5rem;
212-
margin: 0 0 1rem;
213-
}
214-
}
141+
.integrity {
142+
background: url('assets/svg/about-graphic-integrity.svg') center center no-repeat;
143+
height: 164px;
144+
width: 220px;
215145
}
216146

217-
.members {
218-
h2 {
219-
@include media-breakpoint-down(sm) {
220-
font-size: 2rem;
221-
margin: 0;
222-
}
223-
}
147+
.honesty {
148+
background: url('assets/svg/about-graphic-honesty.svg') center center no-repeat;
149+
height: 164px;
150+
width: 220px;
224151
}
225152

226-
.value-text {
227-
color: $gray-dark;
228-
font-size: 1.5rem;
229-
font-weight: 600;
230-
line-height: 34px;
231-
margin: 2rem 0 0;
153+
.transparency {
154+
background: url('assets/svg/about-graphic-transparency.svg') center center no-repeat;
155+
height: 164px;
156+
width: 220px;
232157
}
158+
159+
// .team-photo {
160+
// @include media-breakpoint-down(sm) {
161+
// margin: 0;
162+
// min-height: 240px;
163+
// }
164+
// background-image: url('/assets/about-photo-team.jpg');
165+
// background-repeat: no-repeat;
166+
// background-size: 100%;
167+
// height: 100%;
168+
// margin: 0 0 7rem;
169+
// min-height: 610px;
170+
171+
// app-img {
172+
// @include media-breakpoint-down(sm) {
173+
// display: none;
174+
// }
175+
// position: absolute;
176+
// top: 600px;
177+
// transform: translate(-50%, -50%);
178+
// width: 100%;
179+
// }
180+
// }
233181
}

0 commit comments

Comments
 (0)