Skip to content

Commit ee6ca9e

Browse files
epiquerasepiqueras
committed
feat: implement content-width
1 parent 2602862 commit ee6ca9e

File tree

2 files changed

+51
-16
lines changed

2 files changed

+51
-16
lines changed

‎index.html‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@
9393
</div>
9494
</nav>
9595

96-
<div class="Header-banner col-10">
96+
<div class="Header-banner col-12">
9797
<h1 class="Header-title">The Blockchain
9898
<br>Dispute Resolution Layer</h1>
9999
<h4 class="Header-tagline">Kleros provides fast, secure and affordable arbitration for virtually everything.</h4>
@@ -265,15 +265,15 @@ <h4 class="Pinakion-description col-8">Users have an economic interest in servin
265265
receives for their work.</h4>
266266
<div class="col-12">
267267
<div class="Pinakion-features row">
268-
<div class="col-12 col-sm-5">
268+
<div class="col-12 col-md-5">
269269
<img class="Pinakion-featureImage" src="img/pnk-cluster.svg" alt="Pinakion Feature">
270270
<h4>First, they protect the system against sybil attacks.</h4>
271271
<a href="#" target="_blank" class="Pinakion-findOutMore">
272272
Find out more
273273
<img class="rightArrow" src="img/arrow-right.svg" alt="Right Arrow">
274274
</a>
275275
</div>
276-
<div class="col-12 col-sm-5">
276+
<div class="col-12 col-md-5">
277277
<img class="Pinakion-featureImage" src="img/pnk-cluster.svg" alt="Pinakion Feature">
278278
<h4>Second, PNK provides jurors the incentive to vote honestly by making incoherent jurors pay part of their deposit
279279
to coherent ones.</h4>
@@ -300,60 +300,60 @@ <h4 class="Security-description col-8">Bribe and attack resistant whilst offerin
300300
<h2 class="col-12">Team</h2>
301301
<div class="col-12">
302302
<div class="Team-members row">
303-
<div class="Team-member col-12 col-sm-6 col-md-2 offset-md-2">
303+
<div class="Team-member col-12 col-sm-6 col-md-2">
304304
<img class="Team-memberPortrait" src="img/federico-ast.png" alt="Team Member Portrait">
305305
<h5 class="Team-memberName">Federico Ast</h5>
306306
<p class="Team-memberRole">CEO</p>
307307
</div>
308-
<div class="Team-member col-12 col-sm-6 col-md-2 offset-md-1">
308+
<div class="Team-member col-12 col-sm-6 col-md-2">
309309
<img class="Team-memberPortrait" src="img/clesaege.png" alt="Team Member Portrait">
310310
<h5 class="Team-memberName">Clément Lesaege</h5>
311311
<p class="Team-memberRole">CTO</p>
312312
</div>
313-
<div class="Team-member col-12 col-sm-6 col-md-2 offset-md-1">
313+
<div class="Team-member col-12 col-sm-6 col-md-2">
314314
<img class="Team-memberPortrait" src="img/profile.png" alt="Team Member Portrait">
315315
<h5 class="Team-memberName">Nicolas Wagner</h5>
316316
<p class="Team-memberRole">WEB3 DEVELOPER</p>
317317
</div>
318318
<div class="col-12 hidden-md-down"></div>
319-
<div class="Team-member col-12 col-sm-6 col-md-2 offset-md-2">
319+
<div class="Team-member col-12 col-sm-6 col-md-2">
320320
<img class="Team-memberPortrait" src="img/satello.png" alt="Team Member Portrait">
321321
<h5 class="Team-memberName">Sam Vitello</h5>
322322
<p class="Team-memberRole">DAPP DEVELOPER</p>
323323
</div>
324-
<div class="Team-member col-12 col-sm-6 col-md-2 offset-md-1">
324+
<div class="Team-member col-12 col-sm-6 col-md-2">
325325
<img class="Team-memberPortrait" src="img/romina.png" alt="Team Member Portrait">
326326
<h5 class="Team-memberName">Romina Kavcic</h5>
327327
<p class="Team-memberRole">DESIGN LEAD</p>
328328
</div>
329-
<div class="Team-member col-12 col-sm-6 col-md-2 offset-md-1">
329+
<div class="Team-member col-12 col-sm-6 col-md-2">
330330
<img class="Team-memberPortrait" src="img/profile.png" alt="Team Member Portrait">
331331
<h5 class="Team-memberName">Maria T. Vidal</h5>
332332
<p class="Team-memberRole">COMMUNICATIONS LEAD</p>
333333
</div>
334334
<div class="col-12 hidden-md-down"></div>
335-
<div class="Team-member col-12 col-sm-6 col-md-2 offset-md-2">
335+
<div class="Team-member col-12 col-sm-6 col-md-2">
336336
<img class="Team-memberPortrait" src="img/epiqueras.png" alt="Team Member Portrait">
337337
<h5 class="Team-memberName">Enrique Piqueras</h5>
338338
<p class="Team-memberRole">DAPP DEVELOPER</p>
339339
</div>
340-
<div class="Team-member col-12 col-sm-6 col-md-2 offset-md-1">
340+
<div class="Team-member col-12 col-sm-6 col-md-2">
341341
<img class="Team-memberPortrait" src="img/w-george.png" alt="Team Member Portrait">
342342
<h5 class="Team-memberName">William George</h5>
343343
<p class="Team-memberRole">CRYPTO-ECONOMIC RESEARCHER</p>
344344
</div>
345-
<div class="Team-member col-12 col-sm-6 col-md-2 offset-md-1">
345+
<div class="Team-member col-12 col-sm-6 col-md-2">
346346
<img class="Team-memberPortrait" src="img/addison.png" alt="Team Member Portrait">
347347
<h5 class="Team-memberName">Addison Huegel</h5>
348348
<p class="Team-memberRole">PR</p>
349349
</div>
350350
<div class="col-12 hidden-md-down"></div>
351-
<div class="Team-member col-12 col-sm-6 col-md-2 offset-md-2">
351+
<div class="Team-member col-12 col-sm-6 col-md-2">
352352
<img class="Team-memberPortrait" src="img/sjj.png" alt="Team Member Portrait">
353353
<h5 class="Team-memberName">Stuart James</h5>
354354
<p class="Team-memberRole">COMMUNITY MANAGER</p>
355355
</div>
356-
<div class="Team-member col-12 col-sm-6 col-md-2 offset-md-1">
356+
<div class="Team-member Team-member--you col-12 col-sm-6 col-md-2">
357357
<img class="Team-memberPortrait" src="img/profile.png" alt="Team Member Portrait">
358358
<h5 class="Team-memberName">
359359
<a href="#" target="_blank" class="Team-jobsLink">You?</a>
@@ -424,7 +424,7 @@ <h6 class="Media-readMore">
424424
<div class="col-12">
425425
<div class="Footer-callToAction row">
426426
<div class="Footer-signUpMessage col-12">Sign up to Receive Our Latest Updates</div>
427-
<h5 class="Footer-quote col-12">"Whoever controls the courts, controls the state”. Aristotle.</h5>
427+
<h5 class="Footer-quote col-12">"Whoever controls the courts, controls the state". Aristotle.</h5>
428428
<div class="Footer-signUpInput col-10 col-sm-8 col-md-6">
429429
<div class="Footer-inputGroup input-group">
430430
<input type="text" class="Footer-formControl form-control" placeholder="Enter your email.">

‎style.css‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,8 @@ p {
146146
background-size: cover;
147147
justify-content: center;
148148
padding-bottom: 278px;
149+
padding-left: 12.75%;
150+
padding-right: 12.75%;
149151
padding-top: 122px;
150152
}
151153

@@ -171,14 +173,22 @@ p {
171173
flex: 1;
172174
font-size: 13px;
173175
font-weight: 300;
174-
justify-content: center;
176+
justify-content: flex-start;
175177
letter-spacing: 5px;
178+
padding-left: 12.75%;
176179
}
177180

178181
.Header-navbarBrand:hover {
179182
text-decoration: none !important;
180183
}
181184

185+
@media (max-width: 767px) {
186+
.Header-navbarBrand {
187+
justify-content: center;
188+
padding-left: 0;
189+
}
190+
}
191+
182192
.Header-logo {
183193
margin-right: 8px;
184194
}
@@ -245,6 +255,8 @@ p {
245255

246256
.CountDown {
247257
padding-bottom: 92px;
258+
padding-left: 12.75%;
259+
padding-right: 12.75%;
248260
}
249261

250262
.CountDown-title {
@@ -286,6 +298,8 @@ p {
286298

287299
.Video {
288300
justify-content: center;
301+
padding-left: 12.75%;
302+
padding-right: 12.75%;
289303
}
290304

291305
.Video-container {
@@ -314,6 +328,8 @@ p {
314328
background-size: cover;
315329
justify-content: center;
316330
padding-bottom: 223px;
331+
padding-left: 12.75%;
332+
padding-right: 12.75%;
317333
padding-top: 397px;
318334
position: relative;
319335
text-align: center;
@@ -343,6 +359,8 @@ p {
343359
align-content: flex-start;
344360
justify-content: center;
345361
padding-bottom: 205px;
362+
padding-left: 12.75%;
363+
padding-right: 12.75%;
346364
padding-top: 68px;
347365
text-align: center;
348366
}
@@ -366,6 +384,8 @@ p {
366384
background-size: cover;
367385
justify-content: center;
368386
padding-bottom: 175px;
387+
padding-left: 12.75%;
388+
padding-right: 12.75%;
369389
text-align: center;
370390
}
371391

@@ -424,6 +444,8 @@ p {
424444
color: #fff;
425445
justify-content: center;
426446
padding-bottom: 318px;
447+
padding-left: 12.75%;
448+
padding-right: 12.75%;
427449
padding-top: 118px;
428450
text-align: center;
429451
}
@@ -457,6 +479,8 @@ p {
457479
.Pinakion {
458480
justify-content: center;
459481
padding-bottom: 161px;
482+
padding-left: 12.75%;
483+
padding-right: 12.75%;
460484
padding-top: 82px;
461485
text-align: center;
462486
}
@@ -494,6 +518,8 @@ p {
494518
background-size: cover;
495519
justify-content: center;
496520
padding-bottom: 715px;
521+
padding-left: 12.75%;
522+
padding-right: 12.75%;
497523
padding-top: 119px;
498524
text-align: center;
499525
}
@@ -509,16 +535,25 @@ p {
509535
.Team {
510536
justify-content: center;
511537
padding-bottom: 182px;
538+
padding-left: 12.75%;
539+
padding-right: 12.75%;
512540
text-align: center;
513541
}
514542

515543
.Team-members {
544+
justify-content: space-between;
516545
margin-top: 144px;
517546
}
518547

519548
.Team-member {
520549
margin-top: 60px;
521550
min-width: 230px;
551+
position: relative;
552+
}
553+
554+
.Team-member--you {
555+
margin-left: auto;
556+
margin-right: auto;
522557
}
523558

524559
.Team-memberPortrait {

0 commit comments

Comments
 (0)