XPUB
/
SI17
57
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

loot box landing page

Browse Source
main
km0 3 years ago
parent 075dea23d3
commit 742d949520
4 changed files with 37 additions and 11 deletions
Show Stats Download Patch File Download Diff File

27
css/global.css
Unescape Escape View File

@ -3,20 +3,24 @@
} }
:root { :root {
--color: #8f00ff; --color: #7D50FF;
--light-color: #e8cdfe; --light-color: #CEC6FF;
} }
html, html,
body { body {
margin: 0; margin: 0;
overflow: hidden;
cursor: none;
} }
body { body {
background-color: var(--light-color); background-color: white;
} }
header { header {
position: relative;
z-index: 100;
width: 100%; width: 100%;
height: 100vh; height: 100vh;
text-align: center; text-align: center;
@ -32,11 +36,12 @@ header {
h1 { h1 {
font-family: "SI17"; font-family: "SI17";
font-size: 64px; font-size: 64px;
line-height: 0.85;
text-transform: uppercase; text-transform: uppercase;
color: var(--color); /* Fallback color */ color: var(--light-color); /* Fallback color */
-webkit-text-fill-color: var(--light-color); /* Will override color (regardless of order) */ -webkit-text-fill-color: white; /* Will override color (regardless of order) */
-webkit-text-stroke-width: 1.5px; -webkit-text-stroke-width: 1.5px;
-webkit-text-stroke-color: var(--color); -webkit-text-stroke-color: white;
} }
.date { .date {
@ -46,3 +51,13 @@ h1 {
a { a {
color: currentColor; color: currentColor;
} }
.box {
position: absolute;
top: 0;
left: 0;
width: 20vw;
height: 20vw;
background-color: var(--color);
border-radius: 4px;
}

4
index.html
Unescape Escape View File

@ -37,10 +37,12 @@
<link rel="stylesheet" href="font/font.css" /> <link rel="stylesheet" href="font/font.css" />
<link rel="stylesheet" href="css/global.css" /> <link rel="stylesheet" href="css/global.css" />
<script src="js/color.js" defer></script> <script src="js/color.js" defer></script>
<script src="js/box.js" defer></script>
</head> </head>
<body> <body>
<div id="container"></div>
<header> <header>
<h1>This box <br />found you <br />for a reason</h1> <h1>This <br />box <br />found <br />you <br />for a<br /> reason</h1>
<div class="date"> <div class="date">
launch event 25 mar 2022 18:00 <br /> launch event 25 mar 2022 18:00 <br />
@<a href="https://page-not-found.nl">page not found</a>, the hague @<a href="https://page-not-found.nl">page not found</a>, the hague

9
js/box.js
Unescape Escape View File

@ -0,0 +1,9 @@
const container = document.getElementById('container')
const box = document.createElement('div')
box.classList.add('box')
container.appendChild(box)
window.addEventListener('mousemove', (e)=>{
box.style.transform = `translate(${e.clientX}px, ${e.clientY}px) translate(-50%, -50%)`
})

8
js/color.js
Unescape Escape View File

@ -1,12 +1,12 @@
let palettes = { let palettes = {
purple: { purple: {
color: "#8f00ff", color: "#7D50FF",
lightColor: "#E8CDFE", lightColor: "#CEC6FF",
}, },
orange: { orange: {
color: "#FFF", color: "#FF5416",
lightColor: "#FF6100", lightColor: "#FFB58D",
}, },
}; };

Write Preview
Loading…
Cancel
Save