devchallenges-business-blog-card/index.html at main · FShinoda/devchallenges-business-blog-card · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./public/css/styles.css">
    <title>Business Blog Card</title>
</head>

<body>
    <div class="flex justify-center items-center h-screen">
        <div class="bg-pure-white rounded-2xl w-[418px] font-['Lato'] shadow-[0_30px_100px_0_rgba(17,23,41,0.05)]">
            <div class="relative">
                <img src="./public/assets/images/hero-image-business-card.png" alt="business coffee representation" class="h-[280px] relative rounded-2xl">
                <img src="./public/assets/images/white-overlay.svg" class="absolute bottom-[-1px]">
            </div>
            <div class="mx-[32px]">
                <h1 class="font-semibold font-['Poppins'] text-[24px] text-almost-black mb-[12px]">Perfect solution for small business</h1>
                <p class="text-dark-grey font-[16px]">Small businesses need to generate leads to grow. You can use tools like Ringy.</p>
                <hr class="my-[24px]">
                <div class="flex h-[48px] gap-[12px] mb-[24px]">
                    <img src="./public/assets/images/avatar-image-business-card.png" alt="user avatar" class="rounded-full border-solid border-light-grey border-4">
                    <div class="text-[16px]">
                        <h2 class="font-bold text-almost-black">Amy Burgess</h2>
                        <p class="text-dark-grey">Customer Manger, Solution Oy</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>