adding linktree

1 year ago · 6efc835617
parent 31db7e3838
commit 6efc835617
5 changed files with 87 additions and 21 deletions
--- a/css/index.css
+++ b/css/index.css
@ -2,23 +2,20 @@ body, html {
    height: 100%;
    margin: 0;
    font: 400 15px/1.8 "Lato", sans-serif;
-    color: #777;
-  }
+    color: #777;}
  
-  .bgimg-1, .bgimg-2, .bgimg-3 {
+.bgimg-1, .bgimg-2, .bgimg-3 {
    position: relative;
    opacity: 0.65;
    background-position: center;
    background-repeat: no-repeat;
-    background-size: cover;
-  
+    background-size: cover;  
  }
-  .bgimg-1 {
+.bgimg-1 {
    background-image: url("/images/blacklogo.png");
    height: 100%;
  }
-  
-  .caption {
+.caption {
    position: absolute;
    left: 0;
    top: 50%;
@ -26,22 +23,20 @@ body, html {
    text-align: center;
    color: #000;
  }
-  
-  .caption span.border {
+.caption span.border {
    background-color: #111;
    color: #fff;
    padding: 18px;
    font-size: 25px;
    letter-spacing: 10px;
  }
-  
-  h3 {
+h3 {
    letter-spacing: 5px;
    text-transform: uppercase;
    font: 20px "Lato", sans-serif;
    color: #111;
  }
-  .btn {
+.btn {
    border: none;
    background-color: inherit;
    padding: 14px 28px;
@ -49,12 +44,11 @@ body, html {
    cursor: pointer;
    display: inline-block;
  }
+.btn:hover {background: #eee;}
  
-  .btn:hover {background: #eee;}
-  
-  .home {color: green;}
-  .login {color: rgb(233, 87, 238);}
-  .music {color: rgb(255, 190, 70);}
-  .blog {color: rgb(0, 217, 255);}
-  .discord {color: black;}
-  .git {color: rgb(230, 68, 68);}
+.home {color: green;}
+.login {color: rgb(233, 87, 238);}
+.music {color: rgb(255, 190, 70);}
+.blog {color: rgb(0, 217, 255);}
+.discord {color: black;}
+.git {color: rgb(230, 68, 68);}
--- a/css/maxfromwtf.css
+++ b/css/maxfromwtf.css
@ -0,0 +1,45 @@
+body {
+    background: rgb(255, 125, 175);
+    color: #fff;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 15px;
+    letter-spacing: 2px;
+    }
+img {
+    border-radius: 50%;
+    }
+.profile-picture {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 10%;
+    height: auto;
+    max-width: 100px;
+    }
+.links {
+    text-align: center;
+    margin-top: 20px;
+    padding: 20px;
+    border: 1px solid white;
+    border-width: 2px;
+    width: 290px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    border-radius: 40px;
+    }
+a {
+    text-decoration: none;
+    color: white;
+    transition: color 1s;
+    }
+.bottom-text {
+    text-align: center;
+    margin-top: 40px;
+    font-size: 20px;
+    font-weight: bold;
+    }
+a:hover {
+    color: #000;
+    background: #fff;
+    }
--- a/images/favicon.ico
+++ b/images/favicon.ico
--- a/index.html
+++ b/index.html
@ -1,7 +1,12 @@
 <!DOCTYPE html>
 <html>
 <head>
+<title>~WTFxUS~</title>
+<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
 <link rel="stylesheet" href="/css/index.css">
+<meta charset="UTF-8">
+<meta name="description" content="WTFxUS Landing Page">
+<meta name="keywords" content="WTFxUS, Record label, independent, diy">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
--- a/maxfromwtf.html
+++ b/maxfromwtf.html
@ -0,0 +1,22 @@
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link rel="stylesheet" href="/css/maxfromwtf.css">
+<title>Links | WTFxUS</title>
+</head>
+<body>
+<!-- Profile picture-->
+<img src="/images/white logo.png" alt="profile picture" class="profile-picture">
+<!-- Profile name-->
+<div class="profile-name">@maxfromwtf</div>
+<!-- Links-->
+<a href="https://whytheyfight.com" class="links">WTFxUS</a>
+<a href="https://open.spotify.com/playlist/1Eu0OT5741DZAkePkyeFYQ?si=5f9e7f899aab487e" class="links">Music</a>
+<a href="https://discord.whytheyfight.com" class="links">Discord</a>
+<a href="https://max.whytheyfight.com" class="links">Personal Blog (Coming Soon)</a>
+<a href="https://social.whytheyfight.com" class="links">Mastodon (Coming Soon)</a>
+<!-- Logo -->
+<div class="bottom-text">Links | WTFxUS</div>
+</body>
+</html>