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

Commit 25bdeb8

Browse files
Fdom92Fdom92
committed
feat(our work): add styles for mobile
1 parent d2cee69 commit 25bdeb8

File tree

2 files changed

+87
-26
lines changed

2 files changed

+87
-26
lines changed

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

Lines changed: 65 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,12 @@
1414
height: 350px;
1515
}
1616

17+
@include media-breakpoint-down(sm) {
18+
height: initial;
19+
margin-top: calc(3rem + 76px);
20+
background-image: none;
21+
}
22+
1723
h1 {
1824
color: #292a2d;
1925
font-family: 'Muli';
@@ -38,7 +44,6 @@
3844
text-align: center;
3945

4046
@include media-breakpoint-down(md) {
41-
font-size: 14px;
4247
width: 300px;
4348
}
4449
}
@@ -53,6 +58,11 @@
5358
-moz-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.75);
5459
box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.75);
5560

61+
@include media-breakpoint-down(sm) {
62+
grid-template-columns: initial;
63+
grid-template-rows: 1fr 1fr;
64+
}
65+
5666
.card-content {
5767
display: flex;
5868
align-items: center;
@@ -102,6 +112,10 @@
102112
text-align: center;
103113
height: 32px;
104114
margin-top: 70px;
115+
116+
@include media-breakpoint-down(sm) {
117+
margin-top: 30px;
118+
}
105119
}
106120
}
107121

@@ -111,16 +125,32 @@
111125
border-top-left-radius: 20px;
112126
border-bottom-left-radius: 20px;
113127

128+
@include media-breakpoint-down(sm) {
129+
border-bottom-left-radius: 0;
130+
border-top-right-radius: 20px;
131+
padding: 2rem 0 0;
132+
}
133+
114134
.behind-left {
115135
position: relative;
116136
height: 350px;
117137
left: 100px;
118138
top: 30px;
119139

140+
@include media-breakpoint-down(lg) {
141+
height: 300px;
142+
left: 80px;
143+
}
144+
120145
@include media-breakpoint-down(md) {
121146
left: 30px;
122147
height: 220px;
123148
}
149+
150+
@include media-breakpoint-down(sm) {
151+
left: 80px;
152+
height: 220px;
153+
}
124154
}
125155

126156
.behind-right {
@@ -129,13 +159,19 @@
129159
right: 100px;
130160
top: 30px;
131161

162+
@include media-breakpoint-down(lg) {
163+
height: 300px;
164+
right: 80px;
165+
}
166+
132167
@include media-breakpoint-down(md) {
133168
height: 220px;
134169
right: 30px;
135170
}
136171

137-
@include media-breakpoint-down(xs) {
138-
display: none;
172+
@include media-breakpoint-down(sm) {
173+
height: 220px;
174+
right: 80px;
139175
}
140176
}
141177

@@ -145,17 +181,29 @@
145181
margin-right: auto;
146182
z-index: 1;
147183

184+
@include media-breakpoint-down(lg) {
185+
height: 340px;
186+
margin-left: initial;
187+
margin-right: initial;
188+
}
189+
148190
@include media-breakpoint-down(md) {
149191
height: 280px;
150192
margin-left: initial;
151193
margin-right: initial;
152194
}
153195

154-
@include media-breakpoint-down(xs) {
196+
@include media-breakpoint-down(sm) {
155197
position: relative;
198+
margin: auto;
199+
height: 280px;
156200
}
157201
}
158202

203+
.card-image-row {
204+
justify-content: center;
205+
}
206+
159207
.store-buttons {
160208
display: flex;
161209
flex-direction: row;
@@ -165,6 +213,10 @@
165213
a {
166214
margin: 0 10px;
167215
}
216+
217+
@include media-breakpoint-down(sm) {
218+
margin: 2rem 0 2rem;
219+
}
168220
}
169221

170222
&.mobilemeasures {
@@ -187,6 +239,10 @@
187239
.worked-with {
188240
padding: 5rem 0;
189241

242+
@include media-breakpoint-down(sm) {
243+
padding: 3rem 1rem;
244+
}
245+
190246
.header {
191247
margin: 0 auto 3rem;
192248
max-width: 768px;
@@ -210,5 +266,10 @@
210266
justify-content: center;
211267
margin-bottom: 16px;
212268
}
269+
270+
.center-col {
271+
display: flex;
272+
align-items: center;
273+
}
213274
}
214275
}

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

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -15,25 +15,25 @@ export class AppOurWork {
1515
<section class="container">
1616
<div class="card-container">
1717
<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" />
18+
<div class="row card-image-row">
19+
<img src="/assets/apps/mobilemeasures/graphic-example-1.png" class="behind-left" alt="mobile measures app screenshot" />
2020
<img src="/assets/apps/mobilemeasures/graphic-example-2.png" class="front-center" alt="mobile measures app screenshot" />
2121
<img src="/assets/apps/mobilemeasures/graphic-example-3.png" class="behind-right" alt="mobile measures app screenshot" />
2222
</div>
2323
<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">
24+
<a href="https://apps.apple.com/us/app/mobile-measures/id1440639312" target="_blank" rel="noopener" data-cy="mobilemeasures-apple">
2525
<img src="/assets/graphic-apple-appstore.png" alt="download on app store" />
2626
</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">
27+
<a href="https://play.google.com/store/apps/details?id=com.mobilemeasuresllc.mobilemeasures" target="_blank" rel="noopener" data-cy="mobilemeasures-google">
2828
<img src="/assets/graphic-google-googleplaystore.png" alt="download on play store" />
2929
</a>
3030
</div>
3131
</div>
3232
<div class="card-content">
3333
<h2>Mobile Measures</h2>
3434
<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.
35+
A Physical Therapist's brainchild; this app aims to help Physical Therapists keep track of their patients’ progress. Like many founders and entrepreneurs, Ben’s foray into the start-up
36+
world started with a simple idea: "There has to be a better way!"
3737
</p>
3838
<button>View Project</button>
3939
</div>
@@ -42,7 +42,7 @@ export class AppOurWork {
4242
<section class="container">
4343
<div class="card-container">
4444
<div class="card-image loudcloud">
45-
<div class="row">
45+
<div class="row card-image-row">
4646
<img src="/assets/apps/loudcloud/graphic-example-1.png" class="behind-left" alt="loudcloud app screenshot" />
4747
<img src="/assets/apps/loudcloud/graphic-example-2.png" class="front-center" alt="loudcloud app screenshot" />
4848
<img src="/assets/apps/loudcloud/graphic-example-3.png" class="behind-right" alt="loudcloud app screenshot" />
@@ -59,8 +59,8 @@ export class AppOurWork {
5959
<div class="card-content">
6060
<h2>LoudCloud</h2>
6161
<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.
62+
This app was designed with privacy in mind. Users can receive and make calls through a temporary and disposable phone number; in over 40 countries! LoudCloud allows for more secure
63+
business and social interactions.
6464
</p>
6565
<button>View Project</button>
6666
</div>
@@ -69,25 +69,25 @@ export class AppOurWork {
6969
<section class="container">
7070
<div class="card-container">
7171
<div class="card-image voyage">
72-
<div class="row">
72+
<div class="row card-image-row">
7373
<img src="/assets/apps/voyage/graphic-example-1.png" class="behind-left" alt="voyage app screenshot" />
7474
<img src="/assets/apps/voyage/graphic-example-2.png" class="front-center" alt="voyage app screenshot" />
7575
<img src="/assets/apps/voyage/graphic-example-3.png" class="behind-right" alt="voyage app screenshot" />
7676
</div>
7777
<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">
78+
<a href="https://itunes.apple.com/us/app/the-voyage-by-new-ocean-health/id779637437?mt=8" target="_blank" rel="noopener" data-cy="voyage-apple">
7979
<img src="/assets/graphic-apple-appstore.png" alt="download on app store" />
8080
</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">
81+
<a href="https://play.google.com/store/apps/details?id=com.carecaminnovations.mobile" target="_blank" rel="noopener" data-cy="voyage-google">
8282
<img src="/assets/graphic-google-googleplaystore.png" alt="download on play store" />
8383
</a>
8484
</div>
8585
</div>
8686
<div class="card-content">
8787
<h2>The Voyage</h2>
8888
<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.
89+
Employers can now incentivize their employees to develop and commit to healthy habits thanks to New Ocean Health’s unique app. A company-wide social platform where employees can
90+
interact & challenge each other to reap the benefits.
9191
</p>
9292
<button>View Project</button>
9393
</div>
@@ -102,39 +102,39 @@ export class AppOurWork {
102102
</div>
103103

104104
<div class="row img-row">
105-
<div class="col-md-2 col-sm-12">
105+
<div class="col-md-2 col-6 center-col">
106106
<app-img class="img-fluid no-pad" src="/assets/services-logo-bb.png" alt="BB logo" />
107107
</div>
108108

109-
<div class="col-md-2 col-sm-12">
109+
<div class="col-md-2 col-6 center-col">
110110
<app-img class="img-fluid no-pad" src="/assets/services-logo-aeris.png" alt="Aeris logo" />
111111
</div>
112112

113-
<div class="col-md-2 col-sm-12">
113+
<div class="col-md-2 col-6 center-col">
114114
<app-img class="img-fluid no-pad" src="/assets/services-logo-mobilemeasures.png" alt="Mobile Measures logo" />
115115
</div>
116116

117-
<div class="col-md-2 col-sm-12">
117+
<div class="col-md-2 col-6 center-col">
118118
<app-img class="img-fluid no-pad" src="/assets/services-logo-kemin.png" alt="Kemin logo" />
119119
</div>
120120
</div>
121121

122122
<div class="row img-row">
123-
<div class="col-md-2 col-sm-12">
123+
<div class="col-md-2 col-6 center-col">
124124
<app-img class="img-fluid pad" src="/assets/services-logo-newocean.png" alt="New Ocean Health logo" />
125125
</div>
126126

127-
<div class="col-md-2 col-sm-12">
127+
<div class="col-md-2 col-6 center-col">
128128
<app-img class="img-fluid pad" src="/assets/services-logo-wharton.png" alt="Wharton logo" />
129129
</div>
130130
</div>
131131

132132
<div class="row img-row">
133-
<div class="col-md-2 col-sm-12 align-right">
133+
<div class="col-md-2 col-6 center-col">
134134
<app-img class="img-fluid pad" src="/assets/services-logo-redqueen.jpg" alt="RedQueen logo" />
135135
</div>
136136

137-
<div class="col-md-2 col-sm-12 align-left">
137+
<div class="col-md-2 col-6 center-col">
138138
<app-img class="img-fluid pad" src="/assets/services-logo-loudcloud.png" alt="LoudCloud logo" />
139139
</div>
140140
</div>

0 commit comments

Comments
 (0)