Skip to content

Commit 829db3d

Browse files
author
Tom Steele
committed
WIP on Update
1 parent 863ccbe commit 829db3d

File tree

5 files changed

+604
-4
lines changed

5 files changed

+604
-4
lines changed

‎css/style.css

Lines changed: 224 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -398,6 +398,203 @@ line-height: 1em;
398398
margin-top: 10px;
399399
margin-bottom: 10px;
400400
}
401+
402+
.index-title h1, .index-title h2 {
403+
text-transform: none;
404+
}
405+
.tabs-faqs {
406+
display: grid;
407+
grid-column: 1/5;
408+
grid-area: tabs;
409+
height: 70px;
410+
grid-template-columns: 1fr 10% 1fr 10% 1fr 10% 1fr;
411+
}
412+
.tabs-stages {
413+
display: grid;
414+
grid-column: 1/5;
415+
grid-area: tabs;
416+
height: 70px;
417+
grid-template-columns: 3fr 10% 3fr 10% 3fr;
418+
}
419+
.tabs-stages .tab-line, .tabs-faqs .tab-line {
420+
height: 32px;
421+
border-bottom: 1px solid rgba(36, 234, 201, 0.3);
422+
}
423+
.tabs-faqs .tab span, .tabs-stages .tab span {
424+
width: 100%;
425+
text-align: center;
426+
font-weight: 500;
427+
font-size: 20px;
428+
text-transform: uppercase;
429+
}
430+
.tabs-stages .tab, .tabs-faqs .tab {
431+
transition: background-color .5s, color: .45s;
432+
cursor: pointer;
433+
display: flex;
434+
align-items: center;
435+
flex-direction: row;
436+
border: 1px rgba(36, 234, 201, 0.3) solid;
437+
color: #00E9C9;
438+
border-radius: 32px;
439+
height: 64px;
440+
}
441+
.tabs-stages .tab:hover, .tabs-faqs .tab:hover {
442+
background-color: #00E9C9;
443+
color: white;
444+
}
445+
.tabs-stages .tab-selected, .tabs-faqs .tab-selected {
446+
background-color: #00E9C9;
447+
color: white;
448+
}
449+
.tabs-stages-content, .tabs-faqs-content {
450+
grid-area: tabContent;
451+
}
452+
.tabs-stages-content > div {
453+
margin-top: 40px;
454+
455+
}
456+
.tabs-stages-content h2 {
457+
text-align: center;
458+
font-size: 48px;
459+
font-weight: 100;
460+
text-transform: none;
461+
letter-spacing: 0;
462+
}
463+
.tabs-stages-content .tabs-stages-content-grid {
464+
display: grid;
465+
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
466+
grid-template-areas:
467+
'. . . intro intro intro intro intro intro . . .'
468+
'. . . table table table table table table . . .'
469+
'. contribute contribute contribute contribute contribute contribute contribute contribute contribute contribute .'
470+
'step1 step1 step1 step1 step2 step2 step2 step2 step3 step3 step3 step3';
471+
}
472+
.tabs-stages-intro {
473+
grid-area: intro;
474+
font-family: Helvetica;
475+
font-size: 26px;
476+
color: #C4DFDA;
477+
letter-spacing: 0;
478+
text-align: center;
479+
line-height: 36px;
480+
}
481+
.tabs-stages-table {
482+
font-family: Helvetica;
483+
grid-area: table;
484+
display: grid;
485+
grid-template-columns: 1fr 1fr 1fr;
486+
margin-top: 60px;
487+
}
488+
.tabs-stages-contribute {
489+
margin-top: 30px;
490+
color: #C5DFDB;
491+
grid-area: contribute;
492+
}
493+
.tabs-stages-step {
494+
/* Rectangle 2: */
495+
background: #001A28;
496+
box-shadow: 0px 5px 30px 5px rgba(154,0,250,0.63);
497+
border-radius: 16px;
498+
padding: 30px;
499+
margin: 20px;
500+
501+
}
502+
.tabs-stages-step1 {
503+
grid-area: step1;
504+
505+
}
506+
.tabs-stages-step2 {
507+
grid-area: step2;
508+
}
509+
.tabs-stages-step3 {
510+
grid-area: step3;
511+
}
512+
.tabs-stages-table-cell-title {
513+
font-size: 14px;
514+
color: #C5DFDB;
515+
letter-spacing: 0;
516+
line-height: 40px;
517+
}
518+
.tabs-stages-table-cell-value {
519+
font-size: 16px;
520+
color: #F2FFFD;
521+
letter-spacing: 0;
522+
line-height: 40px;
523+
}
524+
.step-title {
525+
color: #00FA9A;
526+
font-size: 12px;
527+
}
528+
.step-header {
529+
margin-top: 20px;
530+
color: #C4DFDA;
531+
font-size: 18px;
532+
}
533+
.step-subheader {
534+
margin-top: 18px;
535+
color: #C4DFDA;
536+
font-size: 14px;
537+
}
538+
.step-number {
539+
background-color: #00FA9A;
540+
display: inline-flex;
541+
align-items: center;
542+
justify-content: center;
543+
font-size: 12px;
544+
color: #001A27;
545+
margin-right: 10px;
546+
border-radius: 50%;
547+
height: 32px;
548+
width: 32px;
549+
}
550+
.faq-grid {
551+
margin-top: 50px;
552+
display: grid;
553+
grid-row-gap: 32px;
554+
grid-column-gap: 24px;
555+
grid-template-columns: 1fr 1fr;
556+
}
557+
.faq {
558+
overflow: hidden;
559+
cursor: pointer;
560+
}
561+
.faq-expanded .faq-question {
562+
background: #FFFFFF;
563+
border-radius: 5px;
564+
color: #001A28;
565+
line-height: 26px;
566+
border: 1px solid #001A28;
567+
}
568+
.faq-expanded .faq-question .arrow {
569+
color: #001A28;
570+
transform: rotateX(180deg);
571+
}
572+
.faq .arrow {
573+
transition: color 0.5s, transform 0.5s;
574+
color: #00FA9A;
575+
}
576+
.faq-question {
577+
/* Rectangle Copy: */
578+
background: #001A27;
579+
border: 1px solid rgba(36,234,201,0.30);
580+
border-radius: 5px;
581+
/* Are you guys even re: */
582+
font-family: Montserrat;
583+
padding: 10px 20px;
584+
font-size: 16px;
585+
color: #FFFFFF;
586+
letter-spacing: 0;
587+
z-index: 10;
588+
}
589+
.faq-answer {
590+
position: absolute;
591+
bottom: 0px;
592+
z-index: 9;
593+
padding: 10px 20px;
594+
}
595+
.arrow {
596+
float: right;
597+
}
401598
h2 {
402599
color:#fff;
403600
font-size: 30px;
@@ -742,6 +939,26 @@ grid-template-areas:
742939
'headline headline headline'
743940
'content content goals';
744941
}
942+
.grid-stages-home {
943+
display: grid;
944+
margin: 40px;
945+
grid-template-columns: 1fr 1fr 1fr;
946+
grid-template-rows: auto;
947+
grid-template-areas:
948+
'headline headline headline'
949+
'tabs tabs tabs'
950+
'tabContent tabContent tabContent'
951+
}
952+
.grid-faqs-home {
953+
display: grid;
954+
margin: 40px;
955+
grid-template-columns: 1fr 1fr 1fr;
956+
grid-template-rows: auto;
957+
grid-template-areas:
958+
'headline headline headline'
959+
'tabs tabs tabs'
960+
'tabContent tabContent tabContent'
961+
}
745962
.grid-team-home {
746963
min-height: 87vh;
747964
display: grid;
@@ -1144,6 +1361,13 @@ height: 3px;
11441361
margin-top: 30px;
11451362
margin-bottom: 20px;
11461363
}
1364+
.divider-left {
1365+
width:100px;
1366+
border-bottom:2px solid #00E9C9;
1367+
height: 3px;
1368+
margin-top: 15px;
1369+
margin-bottom: 45px;
1370+
}
11471371
.number-disabled {
11481372
font-family: 'Roboto', sans-serif;
11491373
font-weight: 200;

‎img/arrow_down.svg

Lines changed: 10 additions & 0 deletions
Loading

‎img/arrow_up.svg

Lines changed: 14 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)