waifu/waifuism
1
0
Fork 0
Code Issues 2 Pull requests Projects 1 Releases Packages Wiki Activity

friends page

Browse source
This commit is contained in:
waifu 2024-04-27 15:09:01 -03:00
parent 8a18eb4908
commit ebc1cda0bb
2 changed files with 136 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
home/friends/index.html Normal file
View file

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../../static/site/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="../../default_style.css">
<link rel="stylesheet" href="style.css">
<title>Friends</title>
</head>
<body>
<audio autoplay="" loop="" src="./1999_wildfire_Justice_Der.mp3"></audio>
<div class="grid-container">
<img class="star2" src="star.png" style="grid-column: 4 / span 1; grid-row: 1 / span 1;">
<img class="star1" src="star.png" style="grid-column: 2 / span 1; grid-row: 2 / span 1;">
<img class="star3" src="star.png" style="grid-column: 8 / span 1; grid-row: 3 / span 1;">
<a href="https://theoryware.net/" class="friend" target="_blank" style="grid-column: 2; grid-row: 6;">
<img src="pfp/theorytoe.png">
<h1 class="caption">Theory Toe</h1>
</a>
<a href="https://theoryware.net/" class="friend" target="_blank" style="grid-column: 3; grid-row: 3;">
<img src="pfp/theorytoe.png">
<h1 class="caption">Theory Toe</h1>
</a>
<a href="https://theoryware.net/" class="friend" target="_blank" style="grid-column: 6; grid-row: 2;">
<img src="pfp/theorytoe.png">
<h1 class="caption">Theory Toe</h1>
</a>
<a href="https://theoryware.net/" class="friend" target="_blank" style="grid-column: 4; grid-row: 7;">
<img src="pfp/theorytoe.png">
<h1 class="caption">Theory Toe</h1>
</a>
<!-- <a href="https://example.com" class="friend" target="_blank" style="grid-column: 3; grid-row: 4;">
<img src="pfp/vertka.png" >
<h1 class="caption">Vertka</h1>
</a> -->
</div>
</body>
</html>

90
home/friends/style.css Normal file
View file

@ -0,0 +1,90 @@
body {
background-color: black;
color: white;
}
.grid-container {
display: grid;
grid-template-columns: repeat(8, 1fr); /* Create 8 columns of equal width */
gap: 10px; /* Adjust the gap between grid items */
width: 100vw; /* Set the width to 100% of the viewport width */
overflow: hidden;
}
.friend img {
transition: transform 0.3s ease;
max-width: 150%;
height: auto;
margin: 0 auto;
}
.friend img:hover {
transform: scale(1.1);
}
.caption {
display: none; /* Initially hide the caption */
text-align: center;
color: white;
text-decoration: none;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black; /* Add a black outline */
}
.friend:hover .caption {
display: block; /* Display the caption when hovering over the image */
}
.friend {
text-align: center;
animation: wiggle 0.5s ease-in-out infinite alternate; /* Make the image wiggle side to side */
}
@keyframes wiggle {
from {
transform: translateX(-5px);
}
to {
transform: translateX(5px);
}
}
/* Stars */
.star1 {
width: 50px; /* Adjust the size of your star image */
height: 50px; /* Adjust the size of your star image */
background-image: url('star.png'); /* Replace 'star.png' with the path to your star image */
background-size: cover;
animation: rotateStar 5s linear infinite; /* Adjust animation duration and timing function as needed */
}
.star2 {
width: 50px; /* Adjust the size of your star image */
height: 50px; /* Adjust the size of your star image */
background-image: url('star.png'); /* Replace 'star.png' with the path to your star image */
background-size: cover;
animation: rotateStar 7s linear infinite; /* Adjust animation duration and timing function as needed */
}
.star3 {
width: 50px; /* Adjust the size of your star image */
height: 50px; /* Adjust the size of your star image */
background-image: url('star.png'); /* Replace 'star.png' with the path to your star image */
background-size: cover;
animation: rotateStar 10s linear infinite; /* Adjust animation duration and timing function as needed */
}
@keyframes rotateStar {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}