From 742d9495200249ef4e9667353ca6d049a20a2ff5 Mon Sep 17 00:00:00 2001 From: Francesco Luzzana Date: Fri, 18 Mar 2022 02:31:42 +0100 Subject: [PATCH] loot box landing page --- css/global.css | 27 +++++++++++++++++++++------ index.html | 4 +++- js/box.js | 9 +++++++++ js/color.js | 8 ++++---- 4 files changed, 37 insertions(+), 11 deletions(-) create mode 100644 js/box.js diff --git a/css/global.css b/css/global.css index a20a60f..7e0af81 100644 --- a/css/global.css +++ b/css/global.css @@ -3,20 +3,24 @@ } :root { - --color: #8f00ff; - --light-color: #e8cdfe; + --color: #7D50FF; + --light-color: #CEC6FF; } html, body { margin: 0; + overflow: hidden; + cursor: none; } body { - background-color: var(--light-color); + background-color: white; } header { + position: relative; + z-index: 100; width: 100%; height: 100vh; text-align: center; @@ -32,11 +36,12 @@ header { h1 { font-family: "SI17"; font-size: 64px; + line-height: 0.85; text-transform: uppercase; - color: var(--color); /* Fallback color */ - -webkit-text-fill-color: var(--light-color); /* Will override color (regardless of order) */ + color: var(--light-color); /* Fallback color */ + -webkit-text-fill-color: white; /* Will override color (regardless of order) */ -webkit-text-stroke-width: 1.5px; - -webkit-text-stroke-color: var(--color); + -webkit-text-stroke-color: white; } .date { @@ -46,3 +51,13 @@ h1 { a { color: currentColor; } + +.box { + position: absolute; + top: 0; + left: 0; + width: 20vw; + height: 20vw; + background-color: var(--color); + border-radius: 4px; +} \ No newline at end of file diff --git a/index.html b/index.html index 710fc2a..ea143b7 100644 --- a/index.html +++ b/index.html @@ -37,10 +37,12 @@ + +
-

This box
found you
for a reason

+

This
box
found
you
for a
reason

launch event 25 mar 2022 18:00
@page not found, the hague diff --git a/js/box.js b/js/box.js new file mode 100644 index 0000000..599e8c1 --- /dev/null +++ b/js/box.js @@ -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%)` +}) \ No newline at end of file diff --git a/js/color.js b/js/color.js index e239625..39206bc 100644 --- a/js/color.js +++ b/js/color.js @@ -1,12 +1,12 @@ let palettes = { purple: { - color: "#8f00ff", - lightColor: "#E8CDFE", + color: "#7D50FF", + lightColor: "#CEC6FF", }, orange: { - color: "#FFF", - lightColor: "#FF6100", + color: "#FF5416", + lightColor: "#FFB58D", }, };