mirror of
https://github.com/PretendoNetwork/website.git
synced 2026-03-22 01:34:44 -05:00
feat: Implement @mrjvs's design
This commit is contained in:
Ash Monty
parent
2481749648
commit
d212e44723
|
|
@ -15,8 +15,7 @@ header {
|
|||
.blog-card {
|
||||
padding: 60px;
|
||||
max-width: 1100px;
|
||||
margin: auto;
|
||||
margin-top: 50px;
|
||||
margin: 50px auto;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
|
|
@ -197,11 +196,6 @@ header {
|
|||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding-top: 40px;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.blog-card {
|
||||
padding: 40px;
|
||||
|
|
|
|||
|
|
@ -26,6 +26,10 @@ body, .main-body {
|
|||
font-family: Poppins, Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.main-body {
|
||||
overflow-y: hidden; /* Fixes the dowuble scrollbars caused by the last background circle */
|
||||
}
|
||||
|
||||
.animateDot {
|
||||
animation: dotAnimation 10s infinite;
|
||||
}
|
||||
|
|
@ -298,6 +302,13 @@ section.progress .right {
|
|||
border-top-left-radius: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
}
|
||||
section.progress .right .title a {
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
}
|
||||
section.progress .right .title a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
section.progress .right:before {
|
||||
content: "";
|
||||
width: 300vw;
|
||||
|
|
@ -349,6 +360,52 @@ section.faq {
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
section.showcase {
|
||||
position: relative;
|
||||
margin-top: 160px;
|
||||
padding: 220px 0;
|
||||
}
|
||||
section.showcase::before {
|
||||
content: "";
|
||||
width: 400vw;
|
||||
margin-left: -50vw;
|
||||
background: linear-gradient(180deg, rgba(19, 22, 36, 0) 0%, #131624 100%);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
section.showcase .text {
|
||||
max-width: 504px;
|
||||
margin-bottom: 132px;
|
||||
}
|
||||
section.showcase .grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-gap: 24px;
|
||||
}
|
||||
section.showcase .grid .item {
|
||||
background: #252A51;
|
||||
border-radius: 10px;
|
||||
padding: 42px 36px;
|
||||
}
|
||||
section.showcase .grid .item.highlight {
|
||||
border: 2px solid #9D6FF3;
|
||||
}
|
||||
section.showcase .grid .item svg {
|
||||
height: 36px;
|
||||
color: #9D6FF3;
|
||||
}
|
||||
section.showcase .grid .item h1 {
|
||||
margin-top: 14px;
|
||||
margin-bottom: 6px;
|
||||
font-weight: 600;
|
||||
}
|
||||
section.showcase .grid .item p {
|
||||
margin: 0;
|
||||
color: var(--text-secondary)
|
||||
}
|
||||
|
||||
section.team {
|
||||
margin-top: 220px;
|
||||
}
|
||||
|
|
@ -425,6 +482,187 @@ section.team {
|
|||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
section.team-helpers {
|
||||
position: relative;
|
||||
margin-top: 160px;
|
||||
margin-bottom: 160px;
|
||||
}
|
||||
section.team-helpers .text {
|
||||
max-width: 504px;
|
||||
margin-bottom: 132px;
|
||||
}
|
||||
section.team-helpers .team-helpers-cards {
|
||||
display: inline-grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
grid-gap: 20px;
|
||||
margin-right: 20px;
|
||||
color: var(--text-secondary);
|
||||
width: max-content;
|
||||
}
|
||||
section.team-helpers .animation-wrapper {
|
||||
transform: rotate(-5deg);
|
||||
overflow-x: hidden;
|
||||
position:relative;
|
||||
top: -90px;
|
||||
padding: 20px; /* Needed for the star not to get cut off */
|
||||
}
|
||||
section.team-helpers .animation-wrapper::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 101%; /* If set to 100% it doesn't cover it completely */
|
||||
left: -0.5%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--background) 0%, rgba(27, 31, 59, 0) 20%, rgba(27, 31, 59, 0) 80%, var(--background) 100%);
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
section.team-helpers .animation-wrapper .row {
|
||||
white-space: nowrap;
|
||||
}
|
||||
section.team-helpers .animation-wrapper .row.second {
|
||||
margin-top: 20px;
|
||||
}
|
||||
section.team-helpers .helper-card {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 14px 24px;
|
||||
background: #16192D;
|
||||
border-radius: 12px;
|
||||
animation: scrollHelpersRTL 25s linear infinite;
|
||||
}
|
||||
section.team-helpers .row.second .helper-card {
|
||||
animation: scrollHelpersLTR 25s linear infinite;
|
||||
}
|
||||
section.team-helpers .helper-card:hover {
|
||||
background: #252A51;
|
||||
transition: 200ms;
|
||||
}
|
||||
@keyframes scrollHelpersRTL {
|
||||
0% {
|
||||
transform: translatex(0%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(calc( ( ( 100% + 20px ) * -5 ) + -7px));
|
||||
}
|
||||
}
|
||||
@keyframes scrollHelpersLTR {
|
||||
0% {
|
||||
transform: translateX(calc( ( ( 100% + 20px ) * -5 ) + -7px));
|
||||
}
|
||||
100% {
|
||||
transform: translatex(0%);
|
||||
}
|
||||
}
|
||||
section.team-helpers .helper-card.special {
|
||||
position: relative;
|
||||
box-shadow: 0px 0px 0px 2px rgba(211, 225, 87, 0.6) inset;
|
||||
}
|
||||
section.team-helpers .helper-card.special::after {
|
||||
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31.571' height='30.218' viewBox='0 0 31.571 30.218'%3E%3Cpath id='Icon_awesome-star' data-name='Icon awesome-star' d='M15.533,1.05,11.68,8.863,3.058,10.12a1.889,1.889,0,0,0-1.044,3.222L8.251,19.42,6.776,28.006A1.887,1.887,0,0,0,9.514,30l7.713-4.054L24.94,30a1.889,1.889,0,0,0,2.738-1.989L26.2,19.42l6.237-6.078A1.889,1.889,0,0,0,31.4,10.12L22.774,8.863,18.92,1.05a1.89,1.89,0,0,0-3.387,0Z' transform='translate(-1.441 0.001)' fill='%23d3e848'/%3E%3C/svg%3E%0A");
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
top: -13px;
|
||||
right: -13px;
|
||||
}
|
||||
section.team-helpers .row.second .helper-card {
|
||||
position:relative;
|
||||
left: calc(-250% - 50px);
|
||||
}
|
||||
section.team-helpers .helper-card .img-wrapper {
|
||||
background: #fff;
|
||||
border-radius: 100%;
|
||||
margin-right: 14px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
section.team-helpers .helper-card .pfp {
|
||||
border-radius: 100%;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
section.team-helpers .helper-card span {
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
margin-right: 0.6ch;
|
||||
}
|
||||
section.team-helpers .helper-card p {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
/* These two fix the spacing being inconsistent on some card, thus "jumping" on repeat. I'm fairly certain it isn't my fault */
|
||||
section.team-helpers .row.first .team-helpers-cards.repeat.first a:nth-child(3){
|
||||
position: relative;
|
||||
left: 5px;
|
||||
}
|
||||
section.team-helpers .row.second .team-helpers-cards.repeat.first a.special,
|
||||
section.team-helpers .row.second .team-helpers-cards.repeat.second a:nth-child(1){
|
||||
left: calc(-250% - 45px);
|
||||
}
|
||||
|
||||
section.update-signup {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding-top: 240px;
|
||||
padding-bottom: 300px;
|
||||
}
|
||||
section.update-signup svg {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
margin-bottom: 42px;
|
||||
}
|
||||
section.update-signup .text {
|
||||
margin-top: 8px;
|
||||
max-width: 423px;
|
||||
}
|
||||
section.update-signup .floating-serverjoin {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, auto);
|
||||
width: 100%;
|
||||
max-width: 576px;
|
||||
|
||||
background: #15182D;
|
||||
border-radius: 6px;
|
||||
padding: 18px;
|
||||
|
||||
overflow-x: hidden;
|
||||
}
|
||||
section.update-signup .floating-serverjoin p {
|
||||
color: var(--text-secondary);
|
||||
margin: auto;
|
||||
margin-left: 0;
|
||||
}
|
||||
section.update-signup .floating-serverjoin a {
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
background: var(--theme);
|
||||
margin: 0;
|
||||
margin-left: auto;
|
||||
padding: 9px 18px;
|
||||
border-radius: 5px;
|
||||
width: fit-content;
|
||||
}
|
||||
section.update-signup div.circle {
|
||||
display: block;
|
||||
background: #202442;
|
||||
/* the next 4 lines make it so the circle is always the same aspect ratio and covers enough of the screen */
|
||||
width: 2591px;
|
||||
height: 1454px;
|
||||
min-width: 135vw;
|
||||
min-height: 76vw; /* yes, this is supposed to be in vw */
|
||||
border-radius: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Progress */
|
||||
.all-progress-lists {
|
||||
margin-top: 50px;
|
||||
|
|
@ -436,6 +674,7 @@ section.team {
|
|||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-gap: 20px;
|
||||
margin-top: 22px;
|
||||
}
|
||||
.feature-progress-chart {
|
||||
max-width: 100px;
|
||||
|
|
@ -548,10 +787,85 @@ section.team {
|
|||
|
||||
/* Footer */
|
||||
footer {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, fit-content(100%)) 1fr;
|
||||
gap: 148px;
|
||||
color: var(--text-secondary);
|
||||
margin-top: 290px;
|
||||
margin-bottom: 40px;
|
||||
margin-top: 120px;
|
||||
position: relative;
|
||||
padding: 60px 0;
|
||||
}
|
||||
footer::after {
|
||||
content: "";
|
||||
width: 400vw;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -50vw;
|
||||
background: #15182D;
|
||||
z-index: -1;
|
||||
}
|
||||
footer div {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
width: fit-content;
|
||||
}
|
||||
footer svg.logotype {
|
||||
height: 56px;
|
||||
width: fit-content;
|
||||
margin: -10px 0 24px -10px;
|
||||
}
|
||||
footer p {
|
||||
margin: 0;
|
||||
}
|
||||
footer h1 {
|
||||
font-size: 20px;
|
||||
margin-top: 0;
|
||||
color: var(--text);
|
||||
}
|
||||
footer a {
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
width: fit-content;
|
||||
}
|
||||
footer a:hover {
|
||||
color: var(--text);
|
||||
text-decoration: underline;
|
||||
}
|
||||
footer div.discord-server-card {
|
||||
background: #222641;
|
||||
border-radius: 12px;
|
||||
padding: 30px 90px 30px 36px;
|
||||
justify-self: end;
|
||||
}
|
||||
footer div.discord-server-card h1 {
|
||||
font-size: 25px;
|
||||
margin: 0;
|
||||
}
|
||||
footer div.discord-server-card h2 {
|
||||
color: var(--text);
|
||||
font-size: 22px;
|
||||
margin: 0;
|
||||
}
|
||||
footer div.discord-server-card a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #CAB1FB;
|
||||
font-size: 22px;
|
||||
text-decoration: none;
|
||||
width: fit-content;
|
||||
margin-left: -2px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
footer div.discord-server-card a:hover {
|
||||
text-decoration: underline;
|
||||
|
||||
}
|
||||
footer div.discord-server-card svg {
|
||||
height: 24px;
|
||||
stroke-width: 3px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 701px) and (max-width: 1500px) {
|
||||
|
|
|
|||
|
|
@ -82,7 +82,9 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="right sect">
|
||||
<h2 class="title">{{ localeHelper locale "progress" "title" }}</h2>
|
||||
<h2 class="title">
|
||||
<a href="/progress">{{ localeHelper locale "progress" "title" }}</a>
|
||||
</h2>
|
||||
{{> progress-list data=featuredFeatureList purple=true boards=boards }}
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -105,6 +107,30 @@
|
|||
{{!-- Tmp! --}}
|
||||
<script>document.querySelector("details").setAttribute("open", true)</script>
|
||||
</section>
|
||||
|
||||
<section class="showcase">
|
||||
<div class="sect-top sect">
|
||||
<h2 class="dot title" id="showcase" {{#if locale.credits.titleSuffix}}data-title-suffix="{{locale.credits.titleSuffix}}"{{/if}}>What we make</h2>
|
||||
<p class="text">An open source project that aims to recreate all Nintendo servers for 3DS and Wiiu. This way the services can persist after officially killed by Nintendo.</p>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="item highlight">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="book" class="svg-inline--fa fa-book fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M448 360V24c0-13.3-10.7-24-24-24H96C43 0 0 43 0 96v320c0 53 43 96 96 96h328c13.3 0 24-10.7 24-24v-16c0-7.5-3.5-14.3-8.9-18.7-4.2-15.4-4.2-59.3 0-74.7 5.4-4.3 8.9-11.1 8.9-18.6zM128 134c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm0 64c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm253.4 250H96c-17.7 0-32-14.3-32-32 0-17.6 14.4-32 32-32h285.4c-1.9 17.1-1.9 46.9 0 64z"></path></svg>
|
||||
<h1>Juxtaposition</h1>
|
||||
<p>A Miiverse replacement</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="book" class="svg-inline--fa fa-book fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M448 360V24c0-13.3-10.7-24-24-24H96C43 0 0 43 0 96v320c0 53 43 96 96 96h328c13.3 0 24-10.7 24-24v-16c0-7.5-3.5-14.3-8.9-18.7-4.2-15.4-4.2-59.3 0-74.7 5.4-4.3 8.9-11.1 8.9-18.6zM128 134c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm0 64c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm253.4 250H96c-17.7 0-32-14.3-32-32 0-17.6 14.4-32 32-32h285.4c-1.9 17.1-1.9 46.9 0 64z"></path></svg>
|
||||
<h1>Juxtaposition</h1>
|
||||
<p>A Miiverse replacement</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="book" class="svg-inline--fa fa-book fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M448 360V24c0-13.3-10.7-24-24-24H96C43 0 0 43 0 96v320c0 53 43 96 96 96h328c13.3 0 24-10.7 24-24v-16c0-7.5-3.5-14.3-8.9-18.7-4.2-15.4-4.2-59.3 0-74.7 5.4-4.3 8.9-11.1 8.9-18.6zM128 134c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm0 64c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm253.4 250H96c-17.7 0-32-14.3-32-32 0-17.6 14.4-32 32-32h285.4c-1.9 17.1-1.9 46.9 0 64z"></path></svg>
|
||||
<h1>Juxtaposition</h1>
|
||||
<p>A Miiverse replacement</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="team">
|
||||
<div class="sect-top sect team-top">
|
||||
|
|
@ -132,32 +158,86 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="team team-helpers">
|
||||
<div class="sect-top sect team-top">
|
||||
<section class="team-helpers">
|
||||
<div class="sect-top sect">
|
||||
<h2 class="dot title" id="special-thanks" {{#if locale.specialThanks.titleSuffix}}data-title-suffix="{{locale.specialThanks.titleSuffix}}"{{/if}}>{{ localeHelper locale "specialThanks" "title" }}</h2>
|
||||
<p class="text">{{ localeHelper locale "specialThanks" "text" }}</p>
|
||||
</div>
|
||||
<div class="team-cards">
|
||||
{{#each locale.specialThanks.people}}
|
||||
<div class="card">
|
||||
<div class="card-left">
|
||||
<img src="{{ picture }}" class="pfp">
|
||||
</div>
|
||||
<div class="card-core">
|
||||
{{#if special}}<span class="sub">{{ special }}</span>{{/if}}
|
||||
<h3 class="title">
|
||||
<div class="animation-wrapper">
|
||||
<div class="row first">
|
||||
<div class="team-helpers-cards">
|
||||
{{#each locale.specialThanks.people}}
|
||||
<a href="{{ github }}" class="helper-card{{#if special}} special{{/if}}">
|
||||
<div class="img-wrapper">
|
||||
<img src="{{ picture }}" class="pfp">
|
||||
</div>
|
||||
<span>{{ name }}</span>
|
||||
<a href="{{ github }}" class="github" target="_blank">
|
||||
<svg data-prefix="fab" data-icon="github" class="svg-inline--fa fa-github fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg>
|
||||
</a>
|
||||
</h3>
|
||||
<p class="text">{{ caption }}</p>
|
||||
<p>{{ caption }}</p>
|
||||
</a>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="team-helpers-cards repeat first">
|
||||
{{#each locale.specialThanks.people}}
|
||||
<a href="{{ github }}" class="helper-card{{#if special}} special{{/if}}">
|
||||
<div class="img-wrapper">
|
||||
<img src="{{ picture }}" class="pfp">
|
||||
</div>
|
||||
<span>{{ name }}</span>
|
||||
<p>{{ caption }}</p>
|
||||
</a>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row second">
|
||||
<div class="team-helpers-cards">
|
||||
{{#each locale.specialThanks.people}}
|
||||
<a href="{{ github }}" class="helper-card{{#if special}} special{{/if}}">
|
||||
<div class="img-wrapper">
|
||||
<img src="{{ picture }}" class="pfp">
|
||||
</div>
|
||||
<span>{{ name }}</span>
|
||||
<p>{{ caption }}</p>
|
||||
</a>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="team-helpers-cards repeat first">
|
||||
{{#each locale.specialThanks.people}}
|
||||
<a href="{{ github }}" class="helper-card{{#if special}} special{{/if}}">
|
||||
<div class="img-wrapper">
|
||||
<img src="{{ picture }}" class="pfp">
|
||||
</div>
|
||||
<span>{{ name }}</span>
|
||||
<p>{{ caption }}</p>
|
||||
</a>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="team-helpers-cards repeat second">
|
||||
{{#each locale.specialThanks.people}}
|
||||
<a href="{{ github }}" class="helper-card{{#if special}} special{{/if}}">
|
||||
<div class="img-wrapper">
|
||||
<img src="{{ picture }}" class="pfp">
|
||||
</div>
|
||||
<span>{{ name }}</span>
|
||||
<p>{{ caption }}</p>
|
||||
</a>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="update-signup">
|
||||
<div class="sect hero-meta reduced-margin">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48.87" height="71.093" viewBox="0 0 48.87 71.093"><g id="XMLID_6_" transform="translate(0)"><path id="XMLID_15_" d="M69.581,29.593c-2.029,1.068-.249,4.129,1.78,3.061,5.162-2.67,11.463-2.6,16.981-1.1,4.735,1.282,9.5,3.845,12.246,8.045,1.246,1.922,4.307.142,3.061-1.78C96.921,27.386,80.3,24.04,69.581,29.593Z" transform="translate(-60.112 -20.086)" fill="#9d6ff3"/><path id="XMLID_14_" d="M103.359,21.045c-3.951-6.159-10.751-10-17.657-11.89C77.763,6.948,68.721,7.019,61.281,10.9c-2.029,1.068-.249,4.129,1.78,3.061,6.586-3.453,14.667-3.311,21.644-1.388,5.981,1.638,12.1,4.913,15.521,10.252C101.507,24.783,104.569,23,103.359,21.045Z" transform="translate(-54.766 -7.693)" fill="#9d6ff3"/><path id="XMLID_9_" d="M65.995,47.8a20.7,20.7,0,0,0-12.958,4.45H47.27a2.579,2.579,0,0,0-2.67,2.456v47.239a2.763,2.763,0,0,0,2.67,2.67h5.838a2.639,2.639,0,0,0,2.528-2.67V87.564A21.228,21.228,0,1,0,65.995,47.8Zm0,33.178a12,12,0,1,1,12-12A12,12,0,0,1,65.995,80.978Z" transform="translate(-44.6 -33.522)" fill="#9d6ff3"/></g></svg>
|
||||
<h1 class="title dot">Stay up to date</h1>
|
||||
<p class="text">Our amazing team has spent countless hours helping out on making Pretendo better.</p>
|
||||
</div>
|
||||
<div class="floating-serverjoin">
|
||||
<p>Get realtime updates to our progress</p>
|
||||
<a href="https://invite.gg/pretendo" target="_blank">Join the server</a>
|
||||
</div>
|
||||
<div class="circle"></div>
|
||||
</section>
|
||||
|
||||
{{> footer }}
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +1,55 @@
|
|||
<footer>Copyright 2021 - Design by mrjvs, development by Jip Fr & monty</footer>
|
||||
<footer>
|
||||
<div>
|
||||
<svg class="logotype" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 39.876" preserveAspectRatio="xMinYMin meet"
|
||||
>
|
||||
<g id="logo_type" data-name="logo type" transform="translate(-553 -467)">
|
||||
<g id="logo" transform="translate(553 467)">
|
||||
<rect id="XMLID_158_" width="39.876" height="39.876" fill="#9d6ff3" opacity="0" />
|
||||
<g id="XMLID_6_" transform="translate(8.222 1.418)">
|
||||
<path id="XMLID_15_"
|
||||
d="M69.149,28.312c-1.051.553-.129,2.139.922,1.585a12.365,12.365,0,0,1,8.794-.571,10.829,10.829,0,0,1,6.342,4.166c.645,1,2.231.074,1.585-.922C83.308,27.169,74.7,25.436,69.149,28.312Z"
|
||||
transform="translate(-64.246 -23.389)" fill="#9d6ff3" />
|
||||
<path id="XMLID_14_"
|
||||
d="M82.64,14.608A15.565,15.565,0,0,0,73.5,8.45a17.535,17.535,0,0,0-12.647.9c-1.051.553-.129,2.139.922,1.585,3.411-1.788,7.6-1.714,11.209-.719,3.1.848,6.268,2.544,8.038,5.309C81.681,16.543,83.267,15.622,82.64,14.608Z"
|
||||
transform="translate(-57.476 -7.693)" fill="#9d6ff3" />
|
||||
<path id="XMLID_9_"
|
||||
d="M55.68,47.8a10.719,10.719,0,0,0-6.71,2.3H45.983A1.336,1.336,0,0,0,44.6,51.376V75.84a1.431,1.431,0,0,0,1.383,1.383h3.023a1.367,1.367,0,0,0,1.309-1.383V68.392A10.993,10.993,0,1,0,55.68,47.8Zm0,17.182a6.213,6.213,0,1,1,6.213-6.213A6.216,6.216,0,0,1,55.68,64.982Z"
|
||||
transform="translate(-44.6 -40.406)" fill="#9d6ff3" />
|
||||
</g>
|
||||
</g>
|
||||
<text id="Pretendo" transform="translate(593 492)" fill="#fff" font-size="17"
|
||||
font-family="Poppins-Bold, Poppins" font-weight="700">
|
||||
<tspan x="0" y="0">Pretendo</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
<p>Copyright 2021</p>
|
||||
<p>Site by <a href="https://mrjvs.com/" target="_blank">mrjvs</a>, <a href="https://jipfr.nl/" target="_blank">jipfr</a> & <a href="https://ashmonty.com/" target="_blank">monty</a></p>
|
||||
</div>
|
||||
<div>
|
||||
<h1>Socials</h1>
|
||||
<a href="https://mrjvs.com/" target="_blank">Twitter</a>
|
||||
<a href="https://patreon.com/PretendoNetwork" target="_blank">Patreon</a>
|
||||
<a href="https://invite.gg/pretendo" target="_blank">Discord</a>
|
||||
<a href="https://github.com/PretendoNetwork" target="_blank">GitHub</a>
|
||||
</div>
|
||||
<div>
|
||||
<h1>Useful links</h1>
|
||||
<a href="/docs">Docs</a>
|
||||
<a href="/faq">FAQ</a>
|
||||
<a href="/progress">Progress</a>
|
||||
<a href="/blog">Blog</a>
|
||||
<a href="/account" style="display: none; /* Hiding for now since it's not ready */">Account</a>
|
||||
</div>
|
||||
<div class="discord-server-card">
|
||||
<h1>Want to keep updated?</h1>
|
||||
<h2>Join our Discord server!</h2>
|
||||
<a href="https://invite.gg/pretendo">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right">
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
<polyline points="12 5 19 12 12 19"></polyline>
|
||||
</svg>
|
||||
Join now!</a>
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
Loading…
Reference in New Issue
Block a user