Upload link in bio template

ThatOnePers0n · Oct 11, 2024 · 4196d6a · 4196d6a
1 parent 418bfca
commit 4196d6a
Show file tree

Hide file tree

Showing 5 changed files with 253 additions and 0 deletions.
diff --git a/img/bg.jpg b/img/bg.jpg
diff --git a/img/favicon.png b/img/favicon.png
diff --git a/img/pfp.png b/img/pfp.png
diff --git a/index.html b/index.html
@@ -0,0 +1,42 @@
+<!-- Template by github.com/ThatOnePers0n -->
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <title>Name Nameson | Links</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <meta name="description" content="" />
+    <link rel="stylesheet" type="text/css" href="styles.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
+    <link rel="icon" href="img/favicon.png">
+</head>
+<body>
+<div id="loader-wrapper">
+    <div class="loader"></div>
+</div>
+<div class="container animate__animated animate__zoomInUp">
+<img alt="pfp" class="pfp" src="img/pfp.png">
+<h1 class="poppins-regular">Name Nameson</h1>
+<p class="poppins-light">bio here...</p>
+<button class="animate__animated animate__fadeInUp"></button>
+<button class="animate__animated animate__fadeInUp"></button>
+<footer>
+<p class="poppins-light">
+    <script>
+        document.write(' &#169; ' + new Date().getFullYear() + ' Name Nameson');
+    </script>
+    <br>
+    Template by <a href="https://github.com/ThatOnePers0n">ThatOnePers0n</a>
+</p>
+</footer>
+</div>
+<script src="https://code.jquery.com/jquery-3.7.1
+.min.js" crossorigin="anonymous"></script>
+<script type="text/javascript">
+    $(window).on('load', function() {
+        $("#loader-wrapper").fadeOut(700);
+    });
+</script>
+</body>
+</html>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,211 @@
+/* Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+.poppins-thin {
+    font-family: "Poppins", sans-serif;
+    font-weight: 100;
+    font-style: normal;
+}
+
+.poppins-extralight {
+    font-family: "Poppins", sans-serif;
+    font-weight: 200;
+    font-style: normal;
+}
+
+.poppins-light {
+    font-family: "Poppins", sans-serif;
+    font-weight: 300;
+    font-style: normal;
+}
+
+.poppins-regular {
+    font-family: "Poppins", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+}
+
+.poppins-medium {
+    font-family: "Poppins", sans-serif;
+    font-weight: 500;
+    font-style: normal;
+}
+
+.poppins-semibold {
+    font-family: "Poppins", sans-serif;
+    font-weight: 600;
+    font-style: normal;
+}
+
+.poppins-bold {
+    font-family: "Poppins", sans-serif;
+    font-weight: 700;
+    font-style: normal;
+}
+
+.poppins-extrabold {
+    font-family: "Poppins", sans-serif;
+    font-weight: 800;
+    font-style: normal;
+}
+
+.poppins-black {
+    font-family: "Poppins", sans-serif;
+    font-weight: 900;
+    font-style: normal;
+}
+
+.poppins-thin-italic {
+    font-family: "Poppins", sans-serif;
+    font-weight: 100;
+    font-style: italic;
+}
+
+.poppins-extralight-italic {
+    font-family: "Poppins", sans-serif;
+    font-weight: 200;
+    font-style: italic;
+}
+
+.poppins-light-italic {
+    font-family: "Poppins", sans-serif;
+    font-weight: 300;
+    font-style: italic;
+}
+
+.poppins-regular-italic {
+    font-family: "Poppins", sans-serif;
+    font-weight: 400;
+    font-style: italic;
+}
+
+.poppins-medium-italic {
+    font-family: "Poppins", sans-serif;
+    font-weight: 500;
+    font-style: italic;
+}
+
+.poppins-semibold-italic {
+    font-family: "Poppins", sans-serif;
+    font-weight: 600;
+    font-style: italic;
+}
+
+.poppins-bold-italic {
+    font-family: "Poppins", sans-serif;
+    font-weight: 700;
+    font-style: italic;
+}
+
+.poppins-extrabold-italic {
+    font-family: "Poppins", sans-serif;
+    font-weight: 800;
+    font-style: italic;
+}
+
+.poppins-black-italic {
+    font-family: "Poppins", sans-serif;
+    font-weight: 900;
+    font-style: italic;
+}
+
+
+/* Loader */
+
+@keyframes rotation {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg); }
+
+}
+#loader-wrapper {
+    background-color: #212121;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 999;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+}
+
+.loader {
+    width: 40px;
+    height: 40px;
+    border: 5px solid #FFFFFF;
+    border-bottom-color: transparent;
+    border-radius: 50%;
+    margin-top:calc(50vh - 20px);
+    display: inline-block;
+    box-sizing: border-box;
+    -webkit-animation: rotation 1s linear infinite;
+    animation: rotation 1s linear infinite;
+}
+
+/* Actual Site */
+
+body {
+    /* BG Image */
+    background-image: url("img/bg.jpg");
+    text-align: center;
+    color: white;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+.container {
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 16px;
+    position: static;
+    margin: auto;
+    width: 85%;
+    min-height: 95vh;
+    max-height: min-content;
+    padding: 25px;
+}
+
+h1 {
+    font-size: 24px;
+}
+p{
+    font-size: 12px;
+}
+
+.pfp {
+    border-radius: 50%;
+    height: 128px;
+    width: 128px;
+}
+
+button {
+    width: 95%;
+    height: 50px;
+    border: 2px solid white;
+    border-radius: 16px;
+    background-color: rgba(0, 0, 0, 0.2);
+    margin: 12px;
+    transition: 0.5s;
+}
+
+button:hover {
+    background-color: rgba(0, 0, 0, 0.5);
+    scale: 1.05;
+}
+
+footer {
+    background-color: transparent;
+    margin-top: -0.5em;
+    padding: 2em;
+    position: fixed;
+    left: 50%;
+    transform:translateX(-50%);
+    bottom: 0;
+}
+
+a{
+    text-decoration: none;
+    color: white;
+}