card/index.html at master · imranmiatech/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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!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="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" />
    <link rel="stylesheet" href="/output.css">
    <title>gird card.</title>
</head>
<body class="bg-zinc-600">
    <div class="mx-10 mt-8 md:mx-20 md:mt-12 text-blue-50 grid grid-cols-3 grid-rows-3 gap-3">
<!--part 1-->
        <div class="border-2 col-start-1 col-end-2 row-start-1 row-end-3 rounded-2xl hover:bg-yellow-600">
            <div class="flex items-center justify-center mt-5">
                <img class="w-96 rounded-2xl" src="images.jpeg" alt="">
            </div>
            <div>
                <span class="material-symbols-outlined cursor-vertical-text mt-5 ml-10">
                    vital_signs
                    </span> latest
            </div>
            <div class="ml-8 mb-4">
                <p class="text-4xl mt-5">New CSS color spaces and functions in all major engines</p>
                <p class="text-2xl mt-3">start using HD color bring vibrancy to your designs.</p>
            </div>
        </div>
        <!--part 2-->
        <div class="flex justify-between col-start-2 col-end-4 border-2 bg-teal-500 rounded-2xl hover:bg-lime-600">
            <div class="">
                <span class="material-symbols-outlined cursor-vertical-text mt-3 ml-2">
                    podcasts
                    </span> podcasts
                 <p class="text-5xl mt-4 ml-4">The CSS podcasts</p>
                    <p class="text-2xl mt-3 ml-4">
                        Follow Una kravets and Adam Arggle ,Developer Advocates from google ,
                        Who gleefully breakdwon complex aspects of CSS into digestible episodes
                        covering everything from acessibility to z-index.
                    </p>
            </div>
            <div>
                <img class="w-96 p-5 mt-5" src="css.jpeg" alt="">
            </div>
        </div>
        <!--part 3-->
        <div class="border-2 rounded-2xl hover:bg-sky-400">
            <div>
                <span class="material-symbols-outlined cursor-vertical-text mt-4 ml-3">
                    key_visualizer
                    </span> Blog
            </div>
            <div class="mt-5 ml-7">
               <p class="text-5xl mt-7">Building a toolting component</p>
               <p class="text-2xl mt-3 mb-2">A  fundational overview of how to build a color-adaptive <br> and accessible
                tooltip <br> custom element.
               </p>
            </div>
        </div>
        <!--part 4-->
        <div class="border-2 rounded-2xl col-start-3 col-end-4 row-start-2 row-end-4 hover:bg-orange-800">
           <div class=" flex items-center justify-center mt-7"><img width="w-96" class="rounded-2xl" src="learn.png" alt=""></div>
           <div><span class="material-symbols-outlined cursor-vertical-text ml-10 mt-4">
            school
            </span>learn
        </div>
        <div class="ml-10">
            <p class="text-7xl">Learn CSS</p>
            <p class="text-2xl mt-6 ">Learn modern css in our course covering <br> everything from selectors <br>
                 to gird layout and animation</p>
        </div>
        </div>
        <!--part-5-->
        <div class="border-2 rounded-2xl bg-emerald-500 hover:bg-lime-600">
            <div class="mt-5 ml-5">
                <span class="material-symbols-outlined cursor-vertical-text">
                    pattern
                    </span> Featured pattern
            </div>
            <div class="mt-5 ml-16">
                <p class="text-4xl">Aspect ratio image card.</p>
                <p class="mt-9 text-2xl">With the aspect-ratio property,as you resize the card ,the green visual block maintains this 16*9 aspect ratio.</p>
            </div>
        </div>
        <!--part 6-->
        <div class="border-2 rounded-2xl hover:bg-fuchsia-500">
            <div class="mt-5 ml-5">
                <span class="material-symbols-outlined cursor-vertical-text text-blue-400">
                    spa
                    </span> Newly Interoperable
            </div>
            <div class="mt-7 ml-5 ">
                <p class="text-4xl mb-5">The large, small,and dynamic viewport units</p>
                <p class="text-2xl">New CSS units account for mobile viewports with dynamic toolbars</p>
            </div>
        </div>


    </div>
</body>
</html>