loot box landing page

2 years ago · 742d949520
parent 075dea23d3
commit 742d949520
4 changed files with 37 additions and 11 deletions
--- 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;
+}
--- a/index.html
+++ b/index.html
@ -37,10 +37,12 @@
 		<link rel="stylesheet" href="font/font.css" />
 		<link rel="stylesheet" href="css/global.css" />
 		<script src="js/color.js" defer></script>
+		<script src="js/box.js" defer></script>
 	</head>
 	<body>
+		<div id="container"></div>
 		<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">
 				launch event 25 mar 2022 18:00 <br />
 				@<a href="https://page-not-found.nl">page not found</a>, the hague
--- a/js/box.js
+++ 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%)`
+})
--- 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",
 	},
 };