commit 8c89bcee227a88bccf2c01d6b500884d6f015cc1 Author: Davigamer987 Date: Wed Mar 20 00:06:33 2024 -0300 porter web: initial website diff --git a/index.html b/index.html new file mode 100644 index 0000000..23ddb7d --- /dev/null +++ b/index.html @@ -0,0 +1,21 @@ + + + + + + Porter Robinson Archive + + + + +
+
+

Porter Robinson.xyz Services

+
+ + +
+
+ + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..d45518f --- /dev/null +++ b/script.js @@ -0,0 +1,59 @@ +document.addEventListener("DOMContentLoaded", function() { + const button1 = document.getElementById('button1'); + const button2 = document.getElementById('button2'); + const background = document.querySelector('.background'); + const buttons = [button1, button2]; + + // Change background blur based on mouse movement + document.addEventListener('mousemove', function(e) { + const xPos = -e.clientX / 30; + const yPos = -e.clientY / 30; + background.style.transform = `translate(${xPos}px, ${yPos}px)`; + }); + + // Add event listeners to button 1 + button1.addEventListener('click', function() { + button1.classList.add('selected'); + button1.style.filter = 'blur(0px)'; + button2.classList.remove('selected'); + }); + + // Add event listeners to button 2 + button2.addEventListener('click', function() { + button2.classList.add('selected'); + button2.style.filter = 'blur(0px)'; + button1.classList.remove('selected'); + }); + + // Blur button 2 when button 1 is hovered + button1.addEventListener('mouseenter', function() { + button2.style.filter = 'blur(5px)'; + }); + + button1.addEventListener('mouseleave', function() { + if (!button2.classList.contains('selected')) { + button2.style.filter = 'blur(0px)'; + } + }); + + // Blur button 1 when button 2 is hovered + button2.addEventListener('mouseenter', function() { + button1.style.filter = 'blur(5px)'; + }); + + button2.addEventListener('mouseleave', function() { + if (!button1.classList.contains('selected')) { + button1.style.filter = 'blur(0px)'; + } + }); + + // Add event listeners to buttons + button1.addEventListener('click', function() { + window.location.href = 'https://gitea.porterrobinson.xyz/davi/archive'; // Replace 'https://example.com' with the desired URL for button 1 + }); + + button2.addEventListener('click', function() { + window.location.href = 'https://player.porterrobinson.xyz/'; // Replace 'https://example.org' with the desired URL for button 2 + }); + +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..720199a --- /dev/null +++ b/styles.css @@ -0,0 +1,65 @@ +body, html { + margin: 0; + padding: 0; + width: 100%; + height: 100%; + overflow: hidden; +} + +.container { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 1; +} + +.button { + padding: 20px 50px; + font-size: 20px; + border: none; + background-color: rgba(255, 255, 255, 0.5); + border-radius: 10px; + margin: 15px; + cursor: pointer; + transition: filter 0.3s ease; +} + + +.background { + position: absolute; + top: -20%; + left: -20%; + width: 140%; + height: 140%; + background-image: url('wallp.jpg'); /* Updated image path */ + background-size: cover; + background-position: center center; /* Center the background */ + filter: blur(10px); + z-index: 0; +} + +.selected { + filter: blur(0px); +} + +.header { + text-align: center; + margin-bottom: 20px; +} + +.header h2 { + font-family: 'Baloo 2', sans-serif; + font-size: 35px; + color: #333; /* Adjust color as needed */ + margin: 0; +} + +/* Media query for small screens (e.g., mobile devices) */ +@media (max-width: 600px) { + .button { + width: calc(100% - 10px); /* Adjust button width to fit two buttons side by side with spacing */ + font-size: 20px; /* Adjust font size */ + white-space: nowrap; + } +} diff --git a/wallp.jpg b/wallp.jpg new file mode 100644 index 0000000..5c27421 Binary files /dev/null and b/wallp.jpg differ