Skip to content

Commit

Permalink
Adjust paddings and margins
Browse files Browse the repository at this point in the history
  • Loading branch information
@akinyiv
akinyiv committed May 6, 2024
1 parent 8f8abfc commit 932bebe
Showing 1 changed file with 47 additions and 45 deletions.
92 changes: 47 additions & 45 deletions challenges/chat_app_css_illustration/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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]"
>
Expand Down Expand Up @@ -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
Expand Down

0 comments on commit 932bebe

Please sign in to comment.