diff --git a/home/friends/index.html b/home/friends/index.html
new file mode 100644
index 0000000..dd755f7
--- /dev/null
+++ b/home/friends/index.html
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+
+
+ Friends
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/home/friends/style.css b/home/friends/style.css
new file mode 100644
index 0000000..f5f9f08
--- /dev/null
+++ 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);
+ }
+ }
\ No newline at end of file
+ 
+