Blog-Preview-Card/index.html at main · VIKRAMANR7/Blog-Preview-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
35
36
37
38
39
40
41
42
43
44
45
46
<!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="./css/main.css" />
    <title>Blog Preview Card</title>
  </head>
  <body>
    <div class="flex justify-center items-center min-h-svh bg-yellow">
      <div
        class="w-[342px] border-[1px] px-[20px] py-[15px] bg-white rounded-lg shadow-[8px_8px_0px_0px_hsl(0,0%,7%)] mobile:w-[305px] mobile:px-[15px]"
      >
        <div class="pb-4">
          <img
            src="./assets/images/illustration-article.svg"
            class="w-[300px] h-[179px] rounded-lg mobile:w-[270px] mobile:h-[161px]"
          />
        </div>
        <button class="font-bold px-3 py-1 bg-yellow text-[14px] rounded-[4px]">
          Learning
        </button>
        <div class="text-[14px] pt-2 pb-3 font-[600]">
          Published 21 Dec 2023
        </div>
        <h1 class="text-[18px] font-bold hover:text-yellow cursor-pointer">
          HTML & CSS foundations
        </h1>
        <p class="pt-4 pb-5 text-[15px] text-gray">
          These languages are the backbone of every website, defining structure,
          content and presentation.
        </p>
        <div class="flex items-center">
          <span
            ><img
              src="./assets/images/image-avatar.webp"
              alt="image of person"
              width="32px"
              height="32px"
          /></span>
          <span class="text-[14px] pl-3 font-bold">Greg Hooper</span>
        </div>
      </div>
    </div>
  </body>
</html>