This commit is contained in:
benike 2023-09-05 22:12:10 +02:00
parent cd1a193803
commit 82bb40dd38
5 changed files with 53 additions and 28 deletions

View File

@ -6,11 +6,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>benike's lair</title>
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/background.css">
</head>
<body>
<video autoplay loop muted poster="path/to/poster.jpg" id="bgvideo">
<source src="static/img/rain.mp4" type="video/mp4">
</video>
<div class="bg"></div>
<div class="container">
<header>
<img class="benike" src="static/img/benike.png" alt="benike">
@ -34,7 +33,6 @@
Heya, I'm a 16 year old IT student from Hungary. Big consumer of energy drinks, and I enjoy doing some programming in my freetime. Check out the links on the navbar for my instances, setup, github, and my contact.
</p>
</div>
<img class="monster" src="static/img/monster.gif" alt="monster energy">
</div>
</article>
</main>

View File

@ -6,11 +6,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>benike's lair</title>
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/background.css">
</head>
<body>
<video autoplay loop muted poster="path/to/poster.jpg" id="bgvideo">
<source src="static/img/rain.mp4" type="video/mp4">
</video>
<div class="bg"></div>
<div class="container">
<header>
<img class="benike" src="static/img/benike.png" alt="benike">
@ -42,7 +41,6 @@
<li>Maybe some pastebin alternative</li>
</ul>
</div>
<img class="monster" src="static/img/monster.png" alt="monster energy">
</div>
</article>
</main>

View File

@ -6,11 +6,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>benike's lair</title>
<link rel="stylesheet" href="styles/style.css">
<link rel="stylesheet" href="styles/background.css">
</head>
<body>
<video autoplay loop muted poster="path/to/poster.jpg" id="bgvideo">
<source src="static/img/rain.mp4" type="video/mp4">
</video>
<div class="bg"></div>
<div class="container">
<header>
<img class="benike" src="static/img/benike.png" alt="benike">

35
styles/background.css Normal file
View File

@ -0,0 +1,35 @@
body {
background-color: #111111;
margin: 0;
overflow-x: hidden;
}
.bg {
position: fixed;
top: -50%;
left: -50%;
right: -50%;
bottom: -50%;
width: 200%;
height: 200vh;
background: transparent url('http://assets.iceable.com/img/noise-transparent.png') repeat 0 0;
background-repeat: repeat;
animation: bg-animation .2s infinite;
opacity: .9;
visibility: visible;
z-index: -1;
}
@keyframes bg-animation {
0% { transform: translate(0,0) }
10% { transform: translate(-5%,-5%) }
20% { transform: translate(-10%,5%) }
30% { transform: translate(5%,-10%) }
40% { transform: translate(-5%,15%) }
50% { transform: translate(-10%,5%) }
60% { transform: translate(15%,0) }
70% { transform: translate(0,10%) }
80% { transform: translate(-15%,0) }
90% { transform: translate(10%,5%) }
100% { transform: translate(5%,0) }
}

View File

@ -10,43 +10,37 @@ body {
text-align: center;
}
#bgvideo {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
z-index: -1;
}
header {
background-color: #b49d89;
background-color: #282828;
padding: 5px;
border: 3px #c7bcbe solid;
border: 3px #1d2021 solid;
}
a {
color: #615b6b;
color: #a89984;
text-decoration: none;
margin: 10px;
text-shadow: 1px 1px #7f86a3;
}
.spotifytext {
color: #fbf1c7;
text-shadow: 2px 2px #7f86a3;
margin-top: 0px;
}
.spotifylink {
color: #b8bb26;
margin: 0;
text-shadow: 1px 1px #7f86a3;
}
.spotifylink:hover {
color: white;
color: #98971a;
}
.title {
color: #fbf1c7;
margin-top: 0px;
margin-bottom: 0px;
text-shadow: 2px 2px #7f86a3;
@ -57,7 +51,7 @@ a:hover {
}
nav {
background-color: #c7bcbe;
background-color: #1d2021;
padding: 10px;
margin-bottom: 20px;
}
@ -67,6 +61,7 @@ nav {
}
p {
color: #fbf1c7;
padding: 20px;
padding-top: 0px;
text-align: left;
@ -85,11 +80,11 @@ ul, li {
hr {
margin-left: 20px;
margin-right: 20px;
border: 1px #615b6b solid;
border: 1px #1d2021 solid;
}
main {
border: 2px solid #b49d89;
border: 4px solid #1d2021;
}
.benike {
@ -124,7 +119,7 @@ main {
article {
color:#615b6b;
background-color: #c7bcbe;
background-color: #282828;
}
footer {