alex/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added links page

Browse Source
This commit is contained in:
awexxx
2021-12-12 09:50:14 -05:00
parent b5ad82fbd6
commit 285d109ec5
8 changed files with 204 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/tree.css
+116
View File
@@ -0,0 +1,116 @@
html, body {
margin: 0;
height: 100%;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
}
html{
background-color:black;
background-size:cover;
}
a {
color:white;
}
a:hover {
color:gray;
}
body {
background-size: 400% 400%;
padding-top:35px;
padding-bottom:35px;
height:fit-content;
min-height:100%;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
:root {
--accentColor: #E6E6E6;
--delay: .3s;
}
.description, .source{
color:white;
text-align:center;
margin: 27px auto;
margin-top:10px;
width:90%;
max-width: 500px;
}
.source{
font-size:small;
margin-top:50px;
}
.profilePicture, .profilePicture img {
position: relative;
width: 130px;
height: 130px;
display: block;
margin: 35px auto 20px;
border-radius: 50%;
}
.userName {
color: var(--accentColor);
font-size: x-large;
font-weight: bold;
line-height: 1.25;
display: block;
width: 100%;
text-align: center;
text-decoration: none;
}
.links {
max-width: 675px;
width: auto;
display: block;
margin: 27px auto;
}
.link {
position: relative;
background-color: transparent;
color: var(--accentColor);
border: solid var(--accentColor) 2px;
border-radius: 10px;
font-size: 1rem;
text-align: center;
display: block;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
padding: 10px;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
.link:hover {
background-color: var(--accentColor);
color: #000; /* Fallback for older browsers */
color: rgba(0, 0, 0, 0.5);
}
}
.link:active {
background-color: var(--accentColor);
color: #000; /* Fallback for older browsers */
color: rgba(0, 0, 0, 0.5);
}
assets/js/secret.js
+27
View File
@@ -0,0 +1,27 @@
// a key map of allowed keys
var allowedKeys = {
37: 'left',
38: 'up',
39: 'right',
40: 'down',
65: 'a',
66: 'b'
};
var code = ['up', 'up', 'down', 'down', 'left', 'right', 'left', 'right', 'b', 'a'];
var pos = 0;
// add keydown event listener
document.addEventListener('keydown', function(e) {
var key = allowedKeys[e.keyCode];
var requiredKey = code[pos];
if (key == requiredKey) {
pos++;
if (pos == code.length) {
location = `https://www.youtube.com/watch?v=dQw4w9WgXcQ`
pos = 0;
}
} else {
pos = 0;
}
});
demons/assets/css/main.css
-67
View File
@@ -1,67 +0,0 @@
body {
background-color:black;
font-family: 'Gochi Hand', cursive;
}
a {
color:white;
}
a:hover {
color:gray;
}
#landingBack {
margin-top: 25px;
text-align: center;
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
#landingData {
/* Animation Stuff */
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
animation-delay: 1.3s;
animation-fill-mode:both;
text-align:center;
}
/* Animations */
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
demons/assets/img/fighting-demons.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 63 KiB

demons/assets/js/countdown.js
-31
View File
@@ -1,31 +0,0 @@
async function generateCountdown() {
var countDownDate = new Date("12/09/2021 09:00 PM").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
document.getElementById("countdown").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("timeuntil").style.display = "none"
document.getElementById("countdown").innerHTML = `Juice WRLD Day is on!<br>Watch it live on <a href="https://twitch.tv/amazonmusic" target="_blank">Amazon Music's</a> Twitch page.<br><br>
<iframe src="https://player.twitch.tv/?channel=amazonmusic&parent=awexxx.xyz"height="50%"width="50%"allowfullscreen="true"></iframe>`;
}
}, 1000);
}
demons/index.html
-47
View File
@@ -1,47 +0,0 @@
<html>
<head>
<title>👊😈</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gochi+Hand&display=swap" rel="stylesheet">
</head>
<body onload="generateCountdown()">
<div id="landingBack">
<img style="max-width:80%;" src="assets/img/fighting-demons.png">
</div>
<div id="landingData">
<h3 id="timeuntil" style="color:white; font-size:30px;">Time until Juice WRLD Day:</h3>
<p style="color:white; font-size:25px;" id="countdown"></p>
<hr style="width:50%;">
</div>
<div style="color:white; text-align:center; font-size:20px;" id="landingData">
<h3>Important Dates</h3>
<p>December 2nd - Juice's Birthday</p>
<p>December 8th - 2 years without Juice</p>
<p>December 10th - "Fighting Demons" Album Drop</p>
<p>December 16th - "Juice WRLD: Into The Abyss" Premiere on HBO.</p><br>
<h3>What's this site about?</h3>
<p>This site is fan-made by <a href="https://github.com/awexxx" target="_blank">Awex</a> to commemorate Jarad "Juice WRLD" Higgins during the month of December.</p>
<h3>Who is Juice WRLD?</h3>
<p>Jarad Anthony Higgins was a rapper, singer and songwriter from Chicago. He struck stardom with his hit songs "Lucid Dreams" and "All Girls Are The Same" in 2018.<br>
Between 2018 and 2019, he released 2 albums; "Goodbye & Good Riddance" & "Death Race for Love" and recorded thousands of songs.<br>
Unfortunately, on December 8th 2019, Jarad suffered a codeine and oxycodone overdose after landing at Chicago International Airport.</p>
</div>
<div id="footer" style="text-align:center; font-size:70%; font-family:Arial, Helvetica, sans-serif; color:white;">
<p>All content rights go to Grade A Productions.<br>
This website is fan-made and not in any way related to Grade A Productions/Interscope Records.</p>
</div>
<script src="assets/js/countdown.js"></script>
</body>
</html>
index.html
+1
View File
@@ -67,6 +67,7 @@
<div class="c1iframe" style="text-align:center;"></div>
</div>
<script src="/assets/js/secret.js"></script>
<div id="socials" style="background-color:#2e2e2e; padding-top:10px; padding-bottom:10px; text-align:center;">
<h3 style="color:white;">Socials!</h3>
<p style="color:azure;">I am all over! You can find the hub for all of my links <a href="https://linktr.ee/lulawexlive" target="_blank">here.</a></p>
links.html
+60
View File
@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lulawexLIVE >> Links</title>
<link rel="stylesheet" href="assets/css/tree.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<!-- Meta Tags -->
<meta property="og:site_name" content="Awex" />
<meta content="Awex > Links" property="og:title">
<meta content="https://awexxx.xyz/links" property="og:url">
<meta content="#363636" name="theme-color" data-react-helmet="true">
<meta property="og:description" content="See where you can find me around the internet! I'm in a lot of places. Actually, now that I list it, more than I thought i was..">
</head>
<body>
<a class="profilePicture">
<img src="https://pbs.twimg.com/profile_images/1469925836212125696/v8Y_YkJS_400x400.jpg" alt="Profile Picture">
</a>
<div class="userName">
lulawexLIVE
</div>
<div class="description">
probably clipping stuff on Medal
</div>
<div class="links">
<a class="link" href="https://medal.tv/users/215577" target="_blank">
<i class="fas fa-medal">&nbsp;</i>Medal.tv
</a>
<a class="link" href="https://last.fm/user/lulawex" target="_blank">
<i class="fab fa-lastfm">&nbsp;</i>Last.fm
</a>
<a class="link" href="https://github.com/awexxx" target="_blank">
<i class="fab fa-github">&nbsp;</i>Github
</a>
<a class="link" href="discord:///users/288101780074528768" target="_blank">
<i class="fab fa-discord">&nbsp;</i>Discord
</a>
<a class="link" href="https://www.instagram.com/thatoneawex/" target="_blank">
<i class="fab fa-instagram">&nbsp;</i>Instagram
</a>
<a class="link" href="https://www.reddit.com/user/lulawex" target="_blank">
<i class="fab fa-reddit">&nbsp;</i>Reddit
</a>
</div>
<div class="source">
This was built on <a href="https://github.com/RyanLefebvre/TREE">Tree</a>, a linktr.ee alternative.
</div>
</body>
</html>