fixed images in friends section

src/components/Friendbutton.astro

@@ -0,0 +1,12 @@
+---
+const { website, image, name }=Astro.props
+---
+
+<a href={website}>
+    <img title={name} src={image} class="image">
+</a>
+<style>
+.image{border-radius: 100%;
+ width: 10%;}
+ a{text-decoration: none;}
+</style>

src/components/friends.astro

@@ -1,13 +1,10 @@
 ---
+import FriendButton from "../components/Friendbutton.astro"
 ---
 <section id="Friends">
     <h2>Friends Sites!</h2>
-    <div>
-        <form action="https://google.com">
-        <button class="fbutton">
-                <img class="buttonimg" title="test" src="/public/vee.png">
-        </button>
-</form>
-</a>
-    </div>
+    <span>
+        <FriendButton website="https://elh.gay" image="/public/vee.png" title="vee"/>
+        <FriendButton website=" https://pandaptable.moe" image="/public/nemmy.gif" title="nemmy"/>
+    </span>
 </section>