optimumBA · mbashia · Aug 20, 2024 · Aug 23, 2024 · Aug 23, 2024 · Aug 27, 2024
diff --git a/.github/workflows/cicd.yml b/.github/workflows/cicd.yml
@@ -31,7 +31,7 @@ jobs:
           npm run test
 
       - name: Save screenshots
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         if: ${{ always() }}
         with:
           name: screenshots

diff --git a/challenges/profile_card_component/images/bg-pattern-bottom.svg b/challenges/profile_card_component/images/bg-pattern-bottom.svg
diff --git a/challenges/profile_card_component/images/bg-pattern-card.svg b/challenges/profile_card_component/images/bg-pattern-card.svg
diff --git a/challenges/profile_card_component/images/bg-pattern-top.svg b/challenges/profile_card_component/images/bg-pattern-top.svg
diff --git a/challenges/profile_card_component/images/favicon-32x32.png b/challenges/profile_card_component/images/favicon-32x32.png
diff --git a/challenges/profile_card_component/images/image-victor.jpg b/challenges/profile_card_component/images/image-victor.jpg
diff --git a/challenges/profile_card_component/index.html b/challenges/profile_card_component/index.html
@@ -27,37 +27,115 @@
     />
     <link rel="manifest" href="../site.webmanifest" />
     <link rel="stylesheet" href="style.css" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:[email protected]&display=swap"
+      rel="stylesheet"
+    />
   </head>
-  <body class="m-0">
+  <body
+    class="bg-pattern-top-bottom bg-custom-top-bottom bg-[#339fb0] bg-no-repeat"
+  >
+    <div
+      class="flex h-[100vh] w-screen items-center justify-evenly p-0 md:w-full md:justify-center md:p-3"
+    >
+      <div
+        class="card-div flex max-h-[80%] min-h-[40%] min-w-[330px] flex-col rounded-lg shadow-2xl md:max-h-[85%] md:min-h-[40%] md:min-w-[360px]"
+      >
+        <div
+          class="bg-card-pattern h-36 rounded-t-2xl bg-cover bg-no-repeat"
+        ></div>
+        <div class="flex h-auto w-[100%] flex-col rounded-b-2xl bg-white">
+          <div class="flex w-[100%] flex-col items-center gap-4">
+            <img
+              src="images/image-victor.jpg"
+              class="-mt-12 h-24 w-24 rounded-full border-4 border-[white] object-scale-down outline-none md:border-[5px]"
+              alt="victor"
+            />
+            <div class="font-kumbh flex flex-col gap-1 text-center">
+              <div class="flex gap-2">
+                <span class="text-dark-desaturated-blue text-[18px] font-bold"
+                  >Victor Crest</span
+                ><span
+                  class="text-dark-grayish-blue font-kumbh text-[18px] font-normal"
+                >
+                  26</span
+                >
+              </div>
+              <span class="font-regular text-dark-grayish-blue">London</span>
+            </div>
+
+            <div
+              class="flex w-[100%] flex-row items-center justify-evenly border-t py-6"
+            >
+              <div class="flex flex-col items-center gap-[2px]">
+                <div
+                  class="font-kumbh text-dark-desaturated-blue text-[18px] font-bold"
+                >
+                  80K
+                </div>
+                <div
+                  class="font-kumbh font-regular text-dark-grayish-blue text-center text-[10px] tracking-widest md:text-[12px]"
+                >
+                  Followers
+                </div>
+              </div>
+              <div class="flex flex-col items-center gap-[2px]">
+                <div
+                  class="font-kumbh text-dark-desaturated-blue text-[18px] font-bold"
+                >
+                  803K
+                </div>
+                <div
+                  class="font-kumbh font-regular text-dark-grayish-blue text-center text-[10px] tracking-widest md:text-[12px]"
+                >
+                  Likes
+                </div>
+              </div>
+              <div class="flex flex-col items-center gap-[2px]">
+                <div
+                  class="font-kumbh text-dark-desaturated-blue text-[18px] font-bold"
+                >
+                  1.4K
+                </div>
+                <div
+                  class="font-kumbh font-regular text-dark-grayish-blue text-center text-[10px] tracking-widest md:text-[12px]"
+                >
+                  Photos
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <div
-      class="flex h-[100vh] w-full flex-col place-content-center text-center"
+      class="font-kumbh ml-8 flex flex-col items-center justify-center py-3 text-xs"
     >
-      <div>
+      <p>
         <a
-          class="text-optimum-blue hover:text-optimum-darkblue"
-          href="https://www.frontendmentor.io/challenges/profile-card-component-cfArpWshJ"
-          target="_blank"
+          class="font-bold text-blue-500"
+          rel="noopener"
+          href=" https://www.frontendmentor.io/challenges/profile-card-component-cfArpWshJ"
           >Frontend Mentor challenge</a
         >
-      </div>
-      <div>
         for
-        <a
-          class="text-optimum-blue hover:text-optimum-darkblue"
-          href="https://github.com/optimumBA"
-          target="_blank"
+        <a class="font-bold text-blue-500" href="https://github.com/optimumBA"
           >Optimum BH</a
         >
-        Internship.
-      </div>
-
-      <div class="mt-3">
+        Internship
+      </p>
+      <p class="text-center underline">
         <a
-          class="text-optimum-blue hover:text-optimum-darkblue"
-          href="https://github.com/optimumBA/frontend_mentor_challenges/tree/profile_card_component/challenges/profile_card_component"
+          class="font-bold text-blue-500"
+          rel="noopener"
+          href="https://github.com/mbashia/frontend_mentor_challenges/tree/profile_card_component/challenges/profile_card_component"
           >Source code</a
         >
-      </div>
+      </p>
     </div>
   </body>
 </html>
diff --git a/challenges/profile_card_component/tailwind.config.js b/challenges/profile_card_component/tailwind.config.js
@@ -5,6 +5,29 @@ module.exports = {
       colors: {
         'optimum-blue': '#009efc',
         'optimum-darkblue': '#0389e1',
+        'optimum-blue': '#009efc',
+        'optimum-darkblue': '#0389e1',
+        'dark-cyan': 'hsl(185, 75%, 39%)',
+        'dark-desaturated-blue': 'hsl(229, 23%, 23%)',
+        'dark-grayish-blue': 'hsl(227, 10%, 46%)',
+        'dark-gray': 'hsl(0, 0%, 59%)',
+      },
+      fontFamily: {
+        kumbh: ['Kumbh Sans', 'sans-serif'],
+      },
+      fontWeight: {
+        regular: 400,
+        normal: 500,
+        bold: 700,
+      },
+      backgroundImage: {
+        'pattern-top-bottom':
+          "url('images/bg-pattern-top.svg'), url('images/bg-pattern-bottom.svg')",
+        'card-pattern': "url('images/bg-pattern-card.svg')",
+        'top-pattern': "url('images/bg-pattern-top.svg')",
+      },
+      backgroundPosition: {
+        'custom-top-bottom': 'right 48vw bottom 40vh, left 53vw top 40vh',
       },
     },
   },