parent
8a18eb4908
commit
ebc1cda0bb
@ -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> |
||||||
@ -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); |
||||||
|
} |
||||||
|
} |
||||||
Loading…
Reference in new issue