add in website

This commit is contained in:
YouHaveTrouble
2021-03-20 02:16:48 +01:00
parent fcd03c30fe
commit c7efbedb21
6 changed files with 146 additions and 0 deletions
BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 535 KiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

+45
View File
@@ -0,0 +1,45 @@
<!DOCTYPE html>
<head>
<title>YouHaveTrouble</title>
<link rel="stylesheet" href="/style/main.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<div class="linewrapper">
<h1>youhavetrouble.me</h1>
</div>
<div class="linewrapper">
<fieldset class="window">
<legend>About me</legend>
<p>I've been programming for the last 2 years of my life. My main language is Java. I also got pretty good at optimizing minecraft servers. </p>
</fieldset>
<fieldset class="window">
<legend>Socials</legend>
<p><img src="img/github.png"><a href="https://github.com/YouHaveTrouble">GitHub</a><br>
<img src="img/discord.png"><a href="https://discord.gg/j8KK5dGBps">Discord</a>
</p>
</fieldset>
</div>
<div class="linewrapper">
<fieldset class="window">
<legend>My projects</legend>
<p>
<b>Minecraft</b>
<a href="https://github.com/YouHaveTrouble/minecraft-optimization">Server optimization guide</a><br>
<a href="https://www.spigotmc.org/resources/commandwhitelist-spigot-1-8-1-16-bungeecord-waterfall.81326/">CommandWhitelist</a><br>
<a href="https://www.spigotmc.org/resources/togglepvp.89376/">TogglePvP</a><br>
</p>
<p>
<b>Bots</b>
<a href="https://top.gg/bot/747037824049741924">Gamer Bot (Discord)</a><br>
</p>
</fieldset>
<fieldset class="window">
<legend>Support me</legend>
<script type='text/javascript' src='https://ko-fi.com/widgets/widget_2.js'></script><script type='text/javascript'>kofiwidget2.init('Support Me on Ko-fi', '#203a45', 'youhavetrouble');kofiwidget2.draw();</script>
</fieldset>
</div>
</div>
</body>
+101
View File
@@ -0,0 +1,101 @@
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
:root {
margin: 0;
padding: 0;
}
html {
font-family: 'Open Sans', sans-serif;
color: white;
background-image: url("/img/bg.jpg");
background-color: rgba(0, 0, 0, 0.6);
background-blend-mode: color-burn;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
.wrapper {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.linewrapper {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.window {
width: auto;
min-width: 7em;
max-width: 350px;
height: auto;
margin: 1em;
padding: 0.7em;
padding-top: 0.4em;
background: rgba(0, 0, 0, 0.4);
text-align: center;
backdrop-filter: blur(4px);
}
legend {
font-size: 120%;
text-align: center;
}
.window a {
color: rgb(190, 190, 190);
}
.window a:hover {
color: #fff;
}
.window p {
display: block;
margin-top: 0;
}
.window p:last-of-type {
margin-bottom: 0;
}
.window p b {
display: block;
}
.window img {
width: 1.2em;
}
h1 {
background-color: #f3ec78;
background-image: linear-gradient(45deg, #b0f08c, #af2048);
background-size: 100%;
background-clip: text;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
@media only screen
and (max-width: 1000px) {
.wrapper {
height: auto;
flex-direction: column;
}
.linewrapper {
height: auto;
flex-direction: column;
}
.window {
width: 85%;
}
h1 {
font-size: 1.7em;
}
}