updates
parent
64d53d4289
commit
cb0381ff4e
@ -1,258 +0,0 @@
|
|||||||
#root {
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section {
|
|
||||||
height: 100vh;
|
|
||||||
text-align: center;
|
|
||||||
/* scroll-snap-align: start; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.sec2Text {
|
|
||||||
width: 75%;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding-bottom: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtext {
|
|
||||||
font-size: .8em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scrollContainer {
|
|
||||||
height: 100vh;
|
|
||||||
/* overflow-y: scroll; */
|
|
||||||
/* scroll-snap-type: y mandatory; */
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.mainPanel {
|
|
||||||
backdrop-filter: blur(3px);
|
|
||||||
background-color: rgba(255,255,255,0.6);
|
|
||||||
height: 60%;
|
|
||||||
width: 60%;
|
|
||||||
border-radius: 10px;
|
|
||||||
margin: 0 auto;
|
|
||||||
margin-top: 10%;
|
|
||||||
padding-top: 5%;
|
|
||||||
padding-bottom: 5%;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
#heroText {
|
|
||||||
padding-top: 20vh;
|
|
||||||
font-size: 4em;
|
|
||||||
width: 80%;
|
|
||||||
text-align: center;
|
|
||||||
margin: 2em auto .5em auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrap {
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.buttons {
|
|
||||||
position: absolute;
|
|
||||||
right: 1em;
|
|
||||||
top: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.aws-btn {
|
|
||||||
--button-default-height: 55px;
|
|
||||||
--button-default-font-size: 14px;
|
|
||||||
--button-default-border-radius: 6px;
|
|
||||||
--button-horizontal-padding: 20px;
|
|
||||||
--button-raise-level: 6px;
|
|
||||||
--button-hover-pressure: 1;
|
|
||||||
--transform-speed: 0.185s;
|
|
||||||
--button-primary-color: #3a3a3a;
|
|
||||||
--button-primary-color-dark: #141414;
|
|
||||||
--button-primary-color-light: #fbfbfb;
|
|
||||||
--button-primary-color-hover: #2d2d2d;
|
|
||||||
--button-primary-color-active: #212121;
|
|
||||||
--button-primary-border: 2px solid #3a3a3a;
|
|
||||||
--button-secondary-color: #fbfbfb;
|
|
||||||
--button-secondary-color-dark: #3a3a3a;
|
|
||||||
--button-secondary-color-light: #3a3a3a;
|
|
||||||
--button-secondary-color-hover: #eeeeee;
|
|
||||||
--button-secondary-color-active: #e2e2e2;
|
|
||||||
--button-secondary-border: 2px solid #3a3a3a;
|
|
||||||
--button-anchor-color: #ffe727;
|
|
||||||
--button-anchor-color-dark: #212121;
|
|
||||||
--button-anchor-color-light: #97735d;
|
|
||||||
--button-anchor-color-hover: #ffe727;
|
|
||||||
--button-anchor-color-active: #ffe727;
|
|
||||||
--button-anchor-border: 2px solid #876753;
|
|
||||||
--button-danger-color: #733086;
|
|
||||||
--button-danger-color-dark: #431c4e;
|
|
||||||
--button-danger-color-light: #77cd38;
|
|
||||||
--button-danger-color-hover: #6d2d7e;
|
|
||||||
--button-danger-color-active: #632973;
|
|
||||||
--button-danger-border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
--black: #000000;
|
|
||||||
--ash-black: #222;
|
|
||||||
--white: #fafafa;
|
|
||||||
--sky: #00ccff;
|
|
||||||
--green: #22dddd;
|
|
||||||
--blue: #1300ff;
|
|
||||||
--dusk: #6600ff;
|
|
||||||
--purple: #9900ff;
|
|
||||||
--pink: #ff0066;
|
|
||||||
--red: #fe0222;
|
|
||||||
--orange: #fd7702;
|
|
||||||
--yellow: #ffbb00;
|
|
||||||
|
|
||||||
--background: var(--white);
|
|
||||||
--accent: var(--black);
|
|
||||||
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
background-color: var(--background);
|
|
||||||
color: var(--accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.particles-bg-canvas-self {
|
|
||||||
height: 90%;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
font-family: input-mono, monospace;
|
|
||||||
font-weight: 400;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 36px;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: -1px;
|
|
||||||
line-height: 1.2;
|
|
||||||
text-align: center;
|
|
||||||
margin: 100px 0 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0 0 30px 0;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
padding: 20px;
|
|
||||||
background-image: radial-gradient(
|
|
||||||
rgba(0, 0, 0, 0) 1px,
|
|
||||||
var(--background) 1px
|
|
||||||
);
|
|
||||||
background-size: 4px 4px;
|
|
||||||
backdrop-filter: blur(3px);
|
|
||||||
-webkit-backdrop-filter: blur(3px);
|
|
||||||
-moz-backdrop-filter: blur(3px);
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer::before {
|
|
||||||
display: block;
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: -1px;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 1px;
|
|
||||||
background: var(--accent);
|
|
||||||
opacity: 0.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer svg {
|
|
||||||
margin-right: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: var(--accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
padding: 40px;
|
|
||||||
background-image: radial-gradient(
|
|
||||||
rgba(0, 0, 0, 0) 1px,
|
|
||||||
var(--background) 1px
|
|
||||||
);
|
|
||||||
background-size: 4px 4px;
|
|
||||||
backdrop-filter: blur(3px);
|
|
||||||
-webkit-backdrop-filter: blur(3px);
|
|
||||||
-moz-backdrop-filter: blur(3px);
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 14px;
|
|
||||||
z-index: 999;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav::before {
|
|
||||||
display: block;
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: -1px;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 1px;
|
|
||||||
background: var(--accent);
|
|
||||||
opacity: 0.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
font-family: input-mono, monospace;
|
|
||||||
font-weight: 400;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
height: 12px;
|
|
||||||
width: 5px;
|
|
||||||
background: var(--background);
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background: var(--accent);
|
|
||||||
-webkit-border-radius: 1ex;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-corner {
|
|
||||||
background: var(--background);
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
canvas {
|
|
||||||
image-rendering: -moz-crisp-edges;
|
|
||||||
image-rendering: -webkit-optimize-contrast;
|
|
||||||
image-rendering: pixelated;
|
|
||||||
image-rendering: optimize-contrast;
|
|
||||||
position: inherit;
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,39 @@
|
|||||||
|
.walletButtons {
|
||||||
|
position: absolute;
|
||||||
|
right: 1em;
|
||||||
|
top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aws-btn {
|
||||||
|
--button-default-height: 55px;
|
||||||
|
--button-default-font-size: 14px;
|
||||||
|
--button-default-border-radius: 6px;
|
||||||
|
--button-horizontal-padding: 20px;
|
||||||
|
--button-raise-level: 6px;
|
||||||
|
--button-hover-pressure: 1;
|
||||||
|
--transform-speed: 0.185s;
|
||||||
|
--button-primary-color: #3a3a3a;
|
||||||
|
--button-primary-color-dark: #141414;
|
||||||
|
--button-primary-color-light: #fbfbfb;
|
||||||
|
--button-primary-color-hover: #2d2d2d;
|
||||||
|
--button-primary-color-active: #212121;
|
||||||
|
--button-primary-border: 2px solid #3a3a3a;
|
||||||
|
--button-secondary-color: #fbfbfb;
|
||||||
|
--button-secondary-color-dark: #3a3a3a;
|
||||||
|
--button-secondary-color-light: #3a3a3a;
|
||||||
|
--button-secondary-color-hover: #eeeeee;
|
||||||
|
--button-secondary-color-active: #e2e2e2;
|
||||||
|
--button-secondary-border: 2px solid #3a3a3a;
|
||||||
|
--button-anchor-color: #ffe727;
|
||||||
|
--button-anchor-color-dark: #212121;
|
||||||
|
--button-anchor-color-light: #97735d;
|
||||||
|
--button-anchor-color-hover: #ffe727;
|
||||||
|
--button-anchor-color-active: #ffe727;
|
||||||
|
--button-anchor-border: 2px solid #876753;
|
||||||
|
--button-danger-color: #733086;
|
||||||
|
--button-danger-color-dark: #431c4e;
|
||||||
|
--button-danger-color-light: #77cd38;
|
||||||
|
--button-danger-color-hover: #6d2d7e;
|
||||||
|
--button-danger-color-active: #632973;
|
||||||
|
--button-danger-border: none;
|
||||||
|
}
|
@ -0,0 +1,99 @@
|
|||||||
|
* {
|
||||||
|
font-family: 'Times New Roman', Times, serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
--black: #000000;
|
||||||
|
--ash-black: #222;
|
||||||
|
--white: #fafafa;
|
||||||
|
--sky: #00ccff;
|
||||||
|
--green: #22dddd;
|
||||||
|
--blue: #1300ff;
|
||||||
|
--dusk: #6600ff;
|
||||||
|
--purple: #9900ff;
|
||||||
|
--pink: #ff0066;
|
||||||
|
--red: #fe0222;
|
||||||
|
--orange: #fd7702;
|
||||||
|
--yellow: #ffbb00;
|
||||||
|
|
||||||
|
--background: var(--white);
|
||||||
|
--accent: var(--black);
|
||||||
|
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background-color: var(--background);
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: -1px;
|
||||||
|
line-height: 1.2;
|
||||||
|
text-align: center;
|
||||||
|
margin: 100px 0 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0 0 30px 0;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
padding: 40px;
|
||||||
|
background-image: radial-gradient(
|
||||||
|
rgba(0, 0, 0, 0) 1px,
|
||||||
|
var(--background) 1px
|
||||||
|
);
|
||||||
|
background-size: 4px 4px;
|
||||||
|
backdrop-filter: blur(3px);
|
||||||
|
-webkit-backdrop-filter: blur(3px);
|
||||||
|
-moz-backdrop-filter: blur(3px);
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 14px;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav::before {
|
||||||
|
display: block;
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: -1px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 1px;
|
||||||
|
background: var(--accent);
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
height: 12px;
|
||||||
|
width: 5px;
|
||||||
|
background: var(--background);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--accent);
|
||||||
|
-webkit-border-radius: 1ex;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-corner {
|
||||||
|
background: var(--background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrap {
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
@ -0,0 +1,14 @@
|
|||||||
|
.mainPanel {
|
||||||
|
backdrop-filter: blur(3px);
|
||||||
|
background-color: rgba(255,255,255,0.6);
|
||||||
|
height: 60%;
|
||||||
|
width: 60%;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 10%;
|
||||||
|
padding-top: 5%;
|
||||||
|
padding-bottom: 5%;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
position: absolute;
|
||||||
|
}
|
@ -0,0 +1,34 @@
|
|||||||
|
/* #root {
|
||||||
|
height: 100vh;
|
||||||
|
} */
|
||||||
|
|
||||||
|
.section {
|
||||||
|
height: 100vh;
|
||||||
|
text-align: center;
|
||||||
|
/* scroll-snap-align: start; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.sec2Text {
|
||||||
|
width: 75%;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtext {
|
||||||
|
font-size: .8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollContainer {
|
||||||
|
height: 100vh;
|
||||||
|
/* overflow-y: scroll; */
|
||||||
|
/* scroll-snap-type: y mandatory; */
|
||||||
|
}
|
||||||
|
|
||||||
|
#heroText {
|
||||||
|
padding-top: 20vh;
|
||||||
|
font-size: 4em;
|
||||||
|
width: 80%;
|
||||||
|
text-align: center;
|
||||||
|
margin: 2em auto .5em auto;
|
||||||
|
}
|
||||||
|
|
@ -1,24 +0,0 @@
|
|||||||
import Typewriter from 'react-ts-typewriter';
|
|
||||||
import { Logo } from "./Logo";
|
|
||||||
|
|
||||||
export function Footer() {
|
|
||||||
return (
|
|
||||||
<footer>
|
|
||||||
<Logo />
|
|
||||||
<code>
|
|
||||||
<Typewriter
|
|
||||||
text={[
|
|
||||||
"world builders, story tellers, and artists",
|
|
||||||
"shaping the future of web3 and metaverse",
|
|
||||||
"we are con artists",
|
|
||||||
"send us your money you gullible loser",
|
|
||||||
"we hate you"
|
|
||||||
]}
|
|
||||||
loop={true}
|
|
||||||
delay={2500}
|
|
||||||
random={0}
|
|
||||||
/>
|
|
||||||
</code>
|
|
||||||
</footer>
|
|
||||||
);
|
|
||||||
}
|
|
@ -1,16 +0,0 @@
|
|||||||
export function Logo() {
|
|
||||||
return (
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="2 8 16 24"
|
|
||||||
width="16"
|
|
||||||
height="24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M 10 32 L 10 24 L 18 24 L 2 8 L 18 8 L 18 16 L 2 16 L 2 24 L 10 32 L 10 24 L 2 24"
|
|
||||||
fill="var(--accent)"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
Loading…
Reference in New Issue