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

Commit d2cee69

Browse files
Fdom92Fdom92
committed
feat(our work): start our work page
1 parent 59fee80 commit d2cee69

File tree

8 files changed

+364
-0
lines changed

8 files changed

+364
-0
lines changed

‎src/assets/apps/mobilemeasures/background-graphic.png‎

6.22 MB
Loading

‎src/assets/apps/mobilemeasures/graphic-example-1.png‎

219 KB
Loading

‎src/assets/apps/mobilemeasures/graphic-example-2.png‎

182 KB
Loading

‎src/assets/apps/mobilemeasures/graphic-example-3.png‎

97.5 KB
Loading

‎src/assets/our-work/our-work-header.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/pages/app-our-work/app-our-work.scss‎

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
.our-work {
2+
margin-top: 76px;
3+
4+
header {
5+
background-image: url(assets/our-work/our-work-header.svg);
6+
background-repeat: no-repeat;
7+
height: 542px;
8+
display: flex;
9+
align-items: center;
10+
justify-content: center;
11+
flex-direction: column;
12+
13+
@include media-breakpoint-down(md) {
14+
height: 350px;
15+
}
16+
17+
h1 {
18+
color: #292a2d;
19+
font-family: 'Muli';
20+
font-size: 52px;
21+
font-weight: 600;
22+
letter-spacing: 1.73px;
23+
line-height: 62px;
24+
text-align: left;
25+
26+
@include media-breakpoint-down(md) {
27+
font-size: 40px;
28+
}
29+
}
30+
p {
31+
margin-top: 15px;
32+
color: #292a2d;
33+
font-family: 'Muli';
34+
font-size: 16px;
35+
font-weight: 400;
36+
line-height: 32px;
37+
width: 427px;
38+
text-align: center;
39+
40+
@include media-breakpoint-down(md) {
41+
font-size: 14px;
42+
width: 300px;
43+
}
44+
}
45+
}
46+
47+
.card-container {
48+
display: grid;
49+
grid-template-columns: 1fr 1fr;
50+
border-radius: 20px;
51+
margin-bottom: 30px;
52+
-webkit-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.75);
53+
-moz-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.75);
54+
box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.75);
55+
56+
.card-content {
57+
display: flex;
58+
align-items: center;
59+
justify-content: center;
60+
flex-direction: column;
61+
62+
h2 {
63+
color: #333333;
64+
font-family: Muli;
65+
font-size: 42px;
66+
font-weight: 600;
67+
letter-spacing: 2.1px;
68+
line-height: 38px;
69+
text-align: center;
70+
71+
@include media-breakpoint-down(md) {
72+
font-size: 28px;
73+
}
74+
}
75+
76+
p {
77+
color: #292a2d;
78+
font-family: Muli;
79+
font-size: 16px;
80+
font-weight: 400;
81+
line-height: 32px;
82+
text-align: center;
83+
margin-bottom: 0;
84+
width: 80%;
85+
86+
@include media-breakpoint-down(md) {
87+
font-size: 14px;
88+
}
89+
}
90+
91+
button {
92+
background-color: #292a2d;
93+
border-radius: 16px;
94+
box-shadow: 0 2px 4px 0 rgba(128, 128, 128, 0.5);
95+
width: 188px;
96+
color: #ffffff;
97+
font-family: Muli;
98+
font-size: 11px;
99+
font-weight: 700;
100+
letter-spacing: 1.25px;
101+
line-height: 20px;
102+
text-align: center;
103+
height: 32px;
104+
margin-top: 70px;
105+
}
106+
}
107+
108+
.card-image {
109+
position: relative;
110+
padding: 4rem 0 2rem;
111+
border-top-left-radius: 20px;
112+
border-bottom-left-radius: 20px;
113+
114+
.behind-left {
115+
position: relative;
116+
height: 350px;
117+
left: 100px;
118+
top: 30px;
119+
120+
@include media-breakpoint-down(md) {
121+
left: 30px;
122+
height: 220px;
123+
}
124+
}
125+
126+
.behind-right {
127+
position: relative;
128+
height: 350px;
129+
right: 100px;
130+
top: 30px;
131+
132+
@include media-breakpoint-down(md) {
133+
height: 220px;
134+
right: 30px;
135+
}
136+
137+
@include media-breakpoint-down(xs) {
138+
display: none;
139+
}
140+
}
141+
142+
.front-center {
143+
height: 400px;
144+
margin-left: auto;
145+
margin-right: auto;
146+
z-index: 1;
147+
148+
@include media-breakpoint-down(md) {
149+
height: 280px;
150+
margin-left: initial;
151+
margin-right: initial;
152+
}
153+
154+
@include media-breakpoint-down(xs) {
155+
position: relative;
156+
}
157+
}
158+
159+
.store-buttons {
160+
display: flex;
161+
flex-direction: row;
162+
justify-content: center;
163+
margin: 4rem 0 2rem;
164+
165+
a {
166+
margin: 0 10px;
167+
}
168+
}
169+
170+
&.mobilemeasures {
171+
background-image: url('/assets/apps/mobilemeasures/background-graphic.png');
172+
background-size: cover;
173+
}
174+
175+
&.loudcloud {
176+
background-image: url('/assets/home-graphic-loudcloud-pattern.jpg');
177+
background-size: cover;
178+
}
179+
180+
&.voyage {
181+
background-image: url('/assets/home-graphic-voyage-pattern.jpg');
182+
background-size: cover;
183+
}
184+
}
185+
}
186+
187+
.worked-with {
188+
padding: 5rem 0;
189+
190+
.header {
191+
margin: 0 auto 3rem;
192+
max-width: 768px;
193+
194+
h2 {
195+
color: #292a2d;
196+
font-family: 'Muli';
197+
font-size: 52px;
198+
font-weight: 600;
199+
letter-spacing: 1.73px;
200+
line-height: 62px;
201+
text-align: center;
202+
203+
@include media-breakpoint-down(md) {
204+
font-size: 40px;
205+
}
206+
}
207+
}
208+
209+
.img-row {
210+
justify-content: center;
211+
margin-bottom: 16px;
212+
}
213+
}
214+
}

‎src/pages/app-our-work/app-our-work.tsx‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
import { Component, h } from '@stencil/core';
2+
3+
@Component({
4+
tag: 'app-our-work',
5+
styleUrl: 'app-our-work.scss',
6+
})
7+
export class AppOurWork {
8+
render() {
9+
return (
10+
<div class="our-work">
11+
<header class="container">
12+
<h1>Our Work</h1>
13+
<p>Each day we work to make our world better by design. Below you will find examples of projects that we've had the pleasure of working on.</p>
14+
</header>
15+
<section class="container">
16+
<div class="card-container">
17+
<div class="card-image mobilemeasures">
18+
<div class="row">
19+
<img src="/assets/apps/mobilemeasures/graphic-example-1.png" class="behind-left" alt="mobil emeasures app screenshot" />
20+
<img src="/assets/apps/mobilemeasures/graphic-example-2.png" class="front-center" alt="mobile measures app screenshot" />
21+
<img src="/assets/apps/mobilemeasures/graphic-example-3.png" class="behind-right" alt="mobile measures app screenshot" />
22+
</div>
23+
<div class="store-buttons">
24+
<a href="https://itunes.apple.com/us/app/loudcloud-disposable-numbers/id723331666?mt=8" target="_blank" rel="noopener" data-cy="loudcloud-apple">
25+
<img src="/assets/graphic-apple-appstore.png" alt="download on app store" />
26+
</a>
27+
<a href="https://play.google.com/store/apps/details?id=com.ignitras.loudcloud&hl=en" target="_blank" rel="noopener" data-cy="loudcloud-google">
28+
<img src="/assets/graphic-google-googleplaystore.png" alt="download on play store" />
29+
</a>
30+
</div>
31+
</div>
32+
<div class="card-content">
33+
<h2>Mobile Measures</h2>
34+
<p>
35+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
36+
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
37+
</p>
38+
<button>View Project</button>
39+
</div>
40+
</div>
41+
</section>
42+
<section class="container">
43+
<div class="card-container">
44+
<div class="card-image loudcloud">
45+
<div class="row">
46+
<img src="/assets/apps/loudcloud/graphic-example-1.png" class="behind-left" alt="loudcloud app screenshot" />
47+
<img src="/assets/apps/loudcloud/graphic-example-2.png" class="front-center" alt="loudcloud app screenshot" />
48+
<img src="/assets/apps/loudcloud/graphic-example-3.png" class="behind-right" alt="loudcloud app screenshot" />
49+
</div>
50+
<div class="store-buttons">
51+
<a href="https://itunes.apple.com/us/app/loudcloud-disposable-numbers/id723331666?mt=8" target="_blank" rel="noopener" data-cy="loudcloud-apple">
52+
<img src="/assets/graphic-apple-appstore.png" alt="download on app store" />
53+
</a>
54+
<a href="https://play.google.com/store/apps/details?id=com.ignitras.loudcloud&hl=en" target="_blank" rel="noopener" data-cy="loudcloud-google">
55+
<img src="/assets/graphic-google-googleplaystore.png" alt="download on play store" />
56+
</a>
57+
</div>
58+
</div>
59+
<div class="card-content">
60+
<h2>LoudCloud</h2>
61+
<p>
62+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
63+
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
64+
</p>
65+
<button>View Project</button>
66+
</div>
67+
</div>
68+
</section>
69+
<section class="container">
70+
<div class="card-container">
71+
<div class="card-image voyage">
72+
<div class="row">
73+
<img src="/assets/apps/voyage/graphic-example-1.png" class="behind-left" alt="voyage app screenshot" />
74+
<img src="/assets/apps/voyage/graphic-example-2.png" class="front-center" alt="voyage app screenshot" />
75+
<img src="/assets/apps/voyage/graphic-example-3.png" class="behind-right" alt="voyage app screenshot" />
76+
</div>
77+
<div class="store-buttons">
78+
<a href="https://itunes.apple.com/us/app/loudcloud-disposable-numbers/id723331666?mt=8" target="_blank" rel="noopener" data-cy="loudcloud-apple">
79+
<img src="/assets/graphic-apple-appstore.png" alt="download on app store" />
80+
</a>
81+
<a href="https://play.google.com/store/apps/details?id=com.ignitras.loudcloud&hl=en" target="_blank" rel="noopener" data-cy="loudcloud-google">
82+
<img src="/assets/graphic-google-googleplaystore.png" alt="download on play store" />
83+
</a>
84+
</div>
85+
</div>
86+
<div class="card-content">
87+
<h2>The Voyage</h2>
88+
<p>
89+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
90+
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
91+
</p>
92+
<button>View Project</button>
93+
</div>
94+
</div>
95+
</section>
96+
<section id="worked-with" class="worked-with">
97+
<div class="container text-center">
98+
<div class="row header">
99+
<div class="col-12">
100+
<h2>Who We've Worked With</h2>
101+
</div>
102+
</div>
103+
104+
<div class="row img-row">
105+
<div class="col-md-2 col-sm-12">
106+
<app-img class="img-fluid no-pad" src="/assets/services-logo-bb.png" alt="BB logo" />
107+
</div>
108+
109+
<div class="col-md-2 col-sm-12">
110+
<app-img class="img-fluid no-pad" src="/assets/services-logo-aeris.png" alt="Aeris logo" />
111+
</div>
112+
113+
<div class="col-md-2 col-sm-12">
114+
<app-img class="img-fluid no-pad" src="/assets/services-logo-mobilemeasures.png" alt="Mobile Measures logo" />
115+
</div>
116+
117+
<div class="col-md-2 col-sm-12">
118+
<app-img class="img-fluid no-pad" src="/assets/services-logo-kemin.png" alt="Kemin logo" />
119+
</div>
120+
</div>
121+
122+
<div class="row img-row">
123+
<div class="col-md-2 col-sm-12">
124+
<app-img class="img-fluid pad" src="/assets/services-logo-newocean.png" alt="New Ocean Health logo" />
125+
</div>
126+
127+
<div class="col-md-2 col-sm-12">
128+
<app-img class="img-fluid pad" src="/assets/services-logo-wharton.png" alt="Wharton logo" />
129+
</div>
130+
</div>
131+
132+
<div class="row img-row">
133+
<div class="col-md-2 col-sm-12 align-right">
134+
<app-img class="img-fluid pad" src="/assets/services-logo-redqueen.jpg" alt="RedQueen logo" />
135+
</div>
136+
137+
<div class="col-md-2 col-sm-12 align-left">
138+
<app-img class="img-fluid pad" src="/assets/services-logo-loudcloud.png" alt="LoudCloud logo" />
139+
</div>
140+
</div>
141+
</div>
142+
</section>
143+
<app-cta />
144+
<app-footer />
145+
</div>
146+
);
147+
}
148+
}

‎src/pages/open-forge-app/open-forge-app.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ export class OpenForgeApp {
5151
<stencil-route url="/about/:member" component="app-team-landing" />
5252
<stencil-route url="/juntoscope" component="app-case-study" />
5353
<stencil-route url="/terms-of-service" component="app-tos" />
54+
<stencil-route url="/our-work" component="app-our-work" />
5455
<stencil-route url="/service-level-agreement" component="app-service-level-agreement" />
5556
<stencil-route url="/blog" component="app-blog" exact={true} />
5657
<stencil-route url="/blog/" component="app-blog" exact={true} />

0 commit comments

Comments
 (0)