Adjust paddings and margins

challenges/chat_app_css_illustration/index.html

@@ -39,17 +39,17 @@
  class="flex flex-col items-center justify-center overflow-hidden py-4 lg:h-screen lg:flex-row"
  >
  <div
- class="from-light-violet to-light-magenta relative -top-10 right-40 h-[630px] w-72 rounded-b-full bg-gradient-to-t lg:-top-28 lg:right-96 lg:h-[900px] lg:w-[550px]"
+ class="from-light-violet to-light-magenta relative -top-10 right-40 h-[630px] w-72 rounded-b-full bg-gradient-to-t lg:-top-28 lg:right-80 lg:h-[800px] lg:w-[450px]"
  ></div>
  <div
- class="bg-light-grayish-violet relative left-40 top-0 h-[550px] w-72 rounded-t-full lg:left-[300px] lg:top-28 lg:h-[750px] lg:w-[500px]"
+ class="bg-light-grayish-violet relative left-40 top-0 h-[550px] w-72 rounded-t-full lg:left-[290px] lg:top-28 lg:h-[750px] lg:w-[500px]"
  ></div>
 
  <div
  class="absolute flex flex-col items-center justify-center lg:flex-row"
  >
  <div
- class="drop-shadow-light-violet w-[250px] rounded-3xl bg-white p-2 drop-shadow-2xl"
+ class="drop-shadow-light-violet w-[255px] rounded-3xl bg-white p-2 drop-shadow-2xl"
  >
  <div
  class="bg-light-grayish-violet drop-shadow-pale-violet flex w-full flex-col justify-center rounded-2xl"
@@ -65,7 +65,7 @@
  <div
  class="from-light-violet to-light-magenta flex w-full items-center rounded-t-3xl bg-gradient-to-r py-2"
  >
- <div class="mt-3 flex w-full items-center pl-2">
+ <div class="flex w-full items-center pl-2 pt-4">
  <svg
  xmlns="http://www.w3.org/2000/svg"
  fill="none"
@@ -99,60 +99,62 @@
  alt="Samuel Green's Avatar"
  class="mx-1 h-8 w-8 rounded-full border-2"
  />
- <div class="py-2">
+ <div class="">
  <h2 class="text-xs font-extrabold text-white">
  Samuel Green
  </h2>
- <span class="text-pale-violet text-[0.5rem]"
- >Available to Walk</span
- >
+ <p class="text-pale-violet text-[0.5rem]">
+ Available to Walk
+ </p>
  </div>
  </div>
  </div>
- <div class="text-moderate-violet p-2 text-xs font-extralight">
+ <div class="text-moderate-violet px-2 text-xs font-extralight">
  <p
- class="w-32 rounded-lg rounded-bl-sm bg-gray-200 p-2 text-[0.5rem]"
+ class="my-2 w-32 rounded-lg rounded-bl-sm bg-gray-200 px-2 text-[0.5rem]"
  >
- That sounds great. I’d be happy with that.
+ That sounds great. I’d be happy to discuss more.
  </p>
  <p
- class="mt-2 w-32 rounded-lg rounded-bl-sm bg-gray-200 p-2 text-[0.5rem]"
+ class="w-32 rounded-lg rounded-bl-sm bg-gray-200 p-1 text-[0.5rem]"
  >
  Could you send over some pictures of your dog, please?
  </p>
  </div>
- <div class="flex justify-end gap-2 px-2">
- <img
- src="images/dog-image-1.jpg"
- alt="dog's image 1"
- class="h-12 w-12 rounded-xl"
- />
- <img
- src="images/dog-image-2.jpg"
- alt="dog's image 2"
- class="h-12 w-12 rounded-xl"
- />
- <img
- src="images/dog-image-3.jpg"
- alt="dog's image 3"
- class="h-12 w-12 rounded-xl"
- />
- </div>
- <div
- class="text-very-dark-desaturated-violet flex flex-col items-end px-2 pb-2 text-xs font-extralight"
- >
- <p
- class="mt-2 w-36 rounded-lg rounded-br-sm bg-gray-50 p-1 text-[0.5rem]"
- >
- Here are a few pictures. She’s a happy girl!
- </p>
- <p
- class="mt-2 w-24 rounded-lg rounded-br-sm bg-gray-50 px-1 py-2 text-[0.5rem]"
+ <div class="mt-4 flex flex-col items-end">
+ <div class="flex gap-2 pr-2">
+ <img
+ src="images/dog-image-1.jpg"
+ alt="dog's image 1"
+ class="h-11 w-11 rounded-xl"
+ />
+ <img
+ src="images/dog-image-2.jpg"
+ alt="dog's image 2"
+ class="h-11 w-11 rounded-xl"
+ />
+ <img
+ src="images/dog-image-3.jpg"
+ alt="dog's image 3"
+ class="h-11 w-11 rounded-xl"
+ />
+ </div>
+ <div
+ class="text-very-dark-desaturated-violet flex flex-col items-end px-2 pb-2 text-xs font-extralight"
  >
- Can you make it?
- </p>
+ <p
+ class="mt-2 w-36 rounded-lg rounded-br-sm bg-gray-50 px-1 py-1 text-[0.5rem]"
+ >
+ Here are a few pictures. She’s a happy girl!
+ </p>
+ <p
+ class="mt-2 w-24 rounded-lg rounded-br-sm bg-gray-50 px-1 py-1 text-[0.5rem]"
+ >
+ Can you make it?
+ </p>
+ </div>
  </div>
- <div class="px-2 py-2 text-xs font-extralight">
+ <div class="px-2 text-xs font-extralight">
  <p
  class="text-moderate-violet w-32 rounded-lg rounded-bl-sm bg-gray-200 p-1 text-[0.5rem]"
  >
@@ -212,12 +214,12 @@ <h4 class="px-2 text-sm font-extrabold text-white">$49</h4>
  </div>
  </div>
  <div
- class="mt-12 flex flex-col px-6 py-2 pb-12 text-center lg:w-[570px] lg:px-20 lg:text-left"
+ class="mt-12 flex flex-col px-6 py-2 text-center lg:w-[570px] lg:px-28 lg:pr-24 lg:text-left"
  >
- <h1 class="text-very-dark-desaturated-violet py-2 text-4xl font-bold">
+ <h1 class="text-very-dark-desaturated-violet text-2xl font-semibold">
  Simple booking
  </h1>
- <p class="text-dark-grayish-violet text-m pt-6 leading-relaxed">
+ <p class="text-dark-grayish-violet py-4 text-xs leading-relaxed">
  Stay in touch with our dog walkers through the chat interface. This
  makes it easy to discuss arrangements and make bookings. Once the
  walk has been completed you can rate your walker and book again all