css for card

math-pixel · Sep 5, 2024 · 267c44f · 267c44f
1 parent c21daae
commit 267c44f
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 12 deletions.
diff --git a/public/images/toto.png b/public/images/toto.png
diff --git a/src/components/Card.svelte b/src/components/Card.svelte
@@ -5,7 +5,7 @@ interface PropsComponent {
     description: string;
     href: string;
     thumbnail: string;
-    techno : Array<{img : string, name : string}>;
+    techno : Array<{img : string}>;
 }
 
 export let title: PropsComponent['title'];
@@ -17,14 +17,15 @@ export let techno :PropsComponent['techno'];
 </script>
 
 <a href={href} class="relative w-[40%] h-[40%] bg-[#D6ECFF] overflow-visible rounded-[20px]">
+
     <img src={thumbnail} alt="" class=" absolute bottom-[12px] left-[12px] h-[105%] rounded-[10px]">
-    <h2 class="absolute top-[10%] left-[35%] font-semibold text-4xl">{title}</h2>
-    <p class="absolute top-[20%] left-[35%] font-normal text-lg ">{description}</p>
 
-    <div class=" absolute bottom-0 right-0 bg-slate-500 w-[40%] h-[20%] flex">
+    <h2 class="absolute top-[10%] left-[40%] font-semibold text-4xl">{title}</h2>
+    <p class="absolute top-[20%] left-[40%] font-normal text-lg ">{description}</p>
+
+    <div class=" absolute -bottom-[5%] right-[5%] w-[40%] h-[20%] flex justify-around items-center">
         {#each techno as currentTechno}
-            <p>{currentTechno.img}</p>
-            <h1>{currentTechno.name}</h1>
+            <img alt="" src={currentTechno.img} class="w-[20%]"/>
         {/each}
     </div>
 </a >
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -11,20 +11,22 @@ import Arrow from '../components/Arrow.svelte'
 const cards = [
 	{ title: "3D Printer", body: "yay" ,href: "", thumbnail : "/images/toto.png",
 		techno: [
-			{"img" : "pathlol", "name" : "toto"},
-			{"img" : "path", "name" : "tutu"}
+			{"img" : "/images/profile.png"},
+			{"img" : "/images/profile.png"}
 		]
 	},
 	{ title: "3D Printer", body: "yay" ,href: "", thumbnail : "/images/toto.png",
 		techno: [
-			{"img" : "pathlol", "name" : "toto"},
-			{"img" : "path", "name" : "tutu"}
+			{"img" : "/images/profile.png"},
+			{"img" : "/images/profile.png"},
+			{"img" : "/images/profile.png"}
 		]
 	},
 	{ title: "3D Printer", body: "yay" ,href: "", thumbnail : "/images/toto.png",
 		techno: [
-			{"img" : "pathlol", "name" : "toto"},
-			{"img" : "path", "name" : "tutu"}
+			{"img" : "/images/profile.png"},
+			{"img" : "/images/profile.png"},
+			{"img" : "/images/profile.png"}
 		]
 	},
 	// { title: "2D Printer", body: "yey" ,href: "" },