adjusted the width of the card, changed the font and changed the imag…

…es path
optimumBA · Oct 18, 2023 · 8ee6731 · 8ee6731
1 parent c5ac64a
commit 8ee6731
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 13 deletions.
diff --git a/challenges/profile_card_component/index.html b/challenges/profile_card_component/index.html
@@ -30,22 +30,22 @@
   </head>
   <body class="m-0">
     <div
-      class="bg-dark-cyan flex h-screen items-center justify-center overflow-hidden"
+      class="bg-dark-cyan font-kumbh-sans flex h-screen items-center justify-center overflow-hidden"
     >
       <div class="absolute z-40 flex flex-col justify-center">
-        <div class="flex flex-col items-center rounded-lg bg-white">
+        <div class="flex w-[330px] flex-col items-center rounded-2xl bg-white">
           <img
-            src="../profile_card_component/images/bg-pattern-card.svg"
+            src="./images/bg-pattern-card.svg"
             alt="card's parttern"
-            class="rounded-t-lg"
+            class="rounded-t-2xl"
           />
-          <div class="flex flex-col">
+          <div class="flex flex-col items-center">
             <img
-              src="../profile_card_component/images/image-victor.jpg"
+              src="./images/image-victor.jpg"
               alt="victor's image"
-              class="-mt-[65px] rounded-full ring-4 ring-white"
+              class="-mt-[52px] w-24 rounded-full ring-4 ring-white"
             />
-            <div class="my-6 flex flex-col items-center">
+            <div class="my-4 flex flex-col items-center">
               <p class="text-dark-desaturated-blue text-lg font-bold">
                 Victor Crest <span class="text-dark-gray font-normal">26</span>
               </p>
@@ -55,7 +55,7 @@
 
           <div class="flex w-full border-t"></div>
 
-          <div class="my-8 flex gap-12 text-center">
+          <div class="my-5 flex gap-12 text-center">
             <div>
               <p class="text-dark-desaturated-blue text-lg font-bold">80k</p>
               <span class="text-dark-gray text-xs">Followers</span>
@@ -103,14 +103,14 @@
       </div>
 
       <img
-        src="../profile_card_component/images/bg-pattern-top.svg"
+        src="./images/bg-pattern-top.svg"
         alt=""
         class="relative bottom-72 right-16 lg:bottom-96"
       />
       <img
-        src="../profile_card_component/images/bg-pattern-bottom.svg"
+        src="./images/bg-pattern-bottom.svg"
         alt=""
-        class="lg:left-18 relative left-10 top-60 lg:top-96"
+        class="relative left-10 top-60 lg:-left-[180px] lg:top-[500px]"
       />
     </div>
   </body>

diff --git a/challenges/profile_card_component/style.css b/challenges/profile_card_component/style.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Kumbh+Sans:wght@400;700&family=Outfit:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Kumbh+Sans:wght@400;700&family=Manrope:wght@600;800&family=Outfit:wght@400;700&family=Overpass:wght@300;600&family=Ubuntu:ital,wght@0,700;1,400&display=swap');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/challenges/profile_card_component/tailwind.config.js b/challenges/profile_card_component/tailwind.config.js
@@ -10,6 +10,9 @@ module.exports = {
         'dark-grayish-blue': 'hsl(227, 10%, 46%)',
         'dark-gray': 'hsl(0, 0%, 59%)',
       },
+      fontFamily: {
+        'kumbh-sans': ['Kumbh Sans', 'sans-serif'],
+      },
     },
   },
   plugins: [],