Add circluar title

canopas · Oct 5, 2023 · b151ea6 · b151ea6
1 parent 9251726
commit b151ea6
Showing 1 changed file with 21 additions and 4 deletions.
diff --git a/vue-frontend/src/components/ios-app-development/CaseStudySection.vue b/vue-frontend/src/components/ios-app-development/CaseStudySection.vue
@@ -70,16 +70,24 @@
     <!-- Mobile UI END-->
     <!-- Desktop UI -->
     <div
-      class="tw-hidden md:tw-flex tw-flex-row tw-justify-center tw-h-[500px] lg:tw-h-[780px] xl:tw-h-[850px] tw-mt-20"
+      class="tw-hidden md:tw-flex tw-flex-row tw-justify-center tw-h-[650px] lg:tw-h-[780px] xl:tw-h-[1060px] tw-mt-20"
       v-for="(portfolio, index) in portfolios"
       :key="index"
     >
       <div
         :class="portfolio.row1Background"
-        class="tw-flex tw-flex-col tw-justify-center tw-basis-[40%] tw-px-8"
+        class="tw-flex tw-flex-col tw-justify-center !tw-basis-[40%] tw-justify-around tw-px-8"
       >
+        <div class="tw-flex tw-justify-end tw-relative">
+          <h2
+            :class="portfolio.row1Background"
+            class="tw-absolute tw-top-[2rem] tw-right-[-30%] lg:tw-right-[-25%] tw-font-opensans-bold tw-text-2xl tw-leading-[1.95rem] lg:tw-text-5xl lg:tw-leading-[3.9rem] tw-text-[#FFFFFF] tw-tracking-[-0.04rem] tw-w-40 tw-h-40 lg:tw-w-[250px] lg:tw-h-[250px] tw-p-8 xl:tw-w-[300px] xl:tw-h-[300px] tw-rounded-full tw-flex tw-justify-center tw-items-center"
+          >
+            {{ portfolio.title }}
+          </h2>
+        </div>
         <div
-          class="tw-w-[17rem] lg:tw-w-[33rem] tw-mx-auto tw-mt-32 lg:tw-mt-12"
+          class="tw-w-[17rem] lg:tw-w-[19rem] xl:tw-w-[33rem] tw-mx-auto tw-mt-32 lg:tw-mt-44 xl:tw-mt-72"
         >
           <h2
             class="tw-font-opensans-bold tw-text-2xl tw-leading-[1.95rem] lg:tw-text-5xl lg:tw-leading-[3.9rem] tw-text-[#FFFFFF] tw-tracking-[-0.04rem]"
@@ -91,10 +99,16 @@
             >{{ portfolio.subDescription }}</span
           >
         </div>
+        <div class="tw-flex tw-justify-end tw-pr-[8%] 2xll:tw-pr-[14%]">
+          <span
+            class="tw-font-inter-medium tw-text-[#FFFFFF]/[0.80] tw-text-base lg:tw-text-xl lg:tw-leading-[1.875rem] tw-mt-6"
+            >SKIP</span
+          >
+        </div>
       </div>
 
       <div
-        class="tw-flex tw-flex-row tw-basis-[60%] tw-p-8 lg:tw-p-12"
+        class="tw-flex tw-flex-row !tw-basis-[60%] tw-p-8 lg:tw-p-12"
         :class="portfolio.row2Background"
       >
         <div class="tw-basis-[50%] tw-flex tw-items-end tw-justify-end">
@@ -220,3 +234,6 @@ export default {
   },
 };
 </script>
+<style lang="postcss">
+@import "swiper/css";
+</style>