friends page

8 months ago · ebc1cda0bb
parent 8a18eb4908
commit ebc1cda0bb
2 changed files with 136 additions and 0 deletions
--- a/home/friends/index.html
+++ b/home/friends/index.html
@ -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>
--- a/home/friends/style.css
+++ b/home/friends/style.css
@ -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);
+    }
+    }