minor styling adjustments in "how it works" section

inspired-consulting · Jul 16, 2024 · bc8e315 · bc8e315
1 parent 51c8979
commit bc8e315
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/src/css/main.css b/src/css/main.css
@@ -79,9 +79,14 @@ html {
 /* OFFERS */
 
 .ts-card-shadow {
-    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px;
+    box-shadow: rgba(0, 0, 0, 0.12) 0px 10px 36px;
   }
 
+  .ts-img-shadow {
+    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px;
+}
+
+
 /* ABOUT: Button with Icon Animation */
 
 @media (min-width: 768px) { 

diff --git a/src/index.html b/src/index.html
@@ -297,19 +297,19 @@ <h3 class="font-bold text-xl/relaxed text-primary-800 text-left">
                             </p>
                         </div>
                     </div>
-                    <div class="flex justify-end border-primary-700 border-8 rounded bg-primary-700">
+                    <div class="flex justify-end ts-img-shadow">
                         <img src="./img/consultation.webp" alt="Two businessmen having a conversation in a meeting room"
-                            class="object-contain" style="max-height:306px">
+                            class="object-contain rounded" style="max-height:306px">
                     </div>
                 </div>
 
                 <!-- Step 2 -->
 
                 <div class="flex flex-col-reverse md:flex-row items-center justify-between gap-8">
-                    <div class="flex justify-end border-primary-700 border-8 rounded bg-primary-700">
+                    <div class="flex justify-end">
                         <img src="./img/workshop.webp"
                             alt="A team in the office discussing during a threat modeling workshop"
-                            class="object-contain" style="max-height:306px">
+                            class="object-contain ts-img-shadow rounded" style="max-height:306px">
                     </div>
                     <div class="flex flex-col items-center md:items-start gap-6 w-full md:w-1/2">
                         <div class="flex flex-col gap-3">
@@ -380,7 +380,7 @@ <h3 class="font-bold text-xl/relaxed text-primary-800 text-left">
         <!-- OFFERS -->
 
         <section id="offers" class="w-full bg-gray-100">
-            <div class="container flex flex-col gap-10 bg-gray-100 mx-auto py-10 px-4">
+            <div class="container flex flex-col gap-10 bg-gray-100 mx-auto py-12 px-4">
                 <div class="flex flex-col justify-center gap-4">
                     <h3 class="text-center leading-normal text-primary-800 uppercase">Offer</h3>
                     <hr class="border-t-2 border-secondary-300 w-40 mx-auto">