Skip to content

Commit 712d581

Browse files
avincodesavincodes
authored
Merge pull request #55 from yasminzy/main
Add card css snippet
2 parents f90fc48 + 9e731b0 commit 712d581

File tree

4 files changed

+219
-0
lines changed

4 files changed

+219
-0
lines changed

‎css-card-with-button/README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# CSS Card with Button
2+
3+
![Screenshot](./screenshot.png)

‎css-card-with-button/index.html

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>CSS Card with Button</title>
8+
<link rel="stylesheet" href="style.css" />
9+
</head>
10+
11+
<body>
12+
<div
13+
class="p-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md"
14+
>
15+
<a href="#">
16+
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900">
17+
Noteworthy technology acquisitions 2022
18+
</h5>
19+
</a>
20+
<p class="mb-3 font-normal text-gray-700">
21+
Here are the biggest enterprise technology acquisitions of 2022 so far,
22+
in reverse chronological order.
23+
</p>
24+
<a
25+
href="#"
26+
class="inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none"
27+
>
28+
Read more
29+
<svg
30+
aria-hidden="true"
31+
class="ml-2 -mr-1 w-4 h-4"
32+
fill="currentColor"
33+
viewBox="0 0 20 20"
34+
xmlns="http://www.w3.org/2000/svg"
35+
>
36+
<path
37+
fill-rule="evenodd"
38+
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
39+
clip-rule="evenodd"
40+
></path>
41+
</svg>
42+
</a>
43+
</div>
44+
</body>
45+
</html>

‎css-card-with-button/screenshot.png

45.7 KB
Loading

‎css-card-with-button/style.css

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
*,
2+
::before,
3+
::after {
4+
box-sizing: border-box;
5+
border-width: 0;
6+
border-style: solid;
7+
}
8+
9+
html {
10+
line-height: 1.5;
11+
-webkit-text-size-adjust: 100%;
12+
-moz-tab-size: 4;
13+
tab-size: 4;
14+
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
15+
"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
16+
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
17+
}
18+
19+
body {
20+
margin: 0;
21+
line-height: inherit;
22+
}
23+
24+
h5 {
25+
font-size: inherit;
26+
font-weight: inherit;
27+
}
28+
29+
a {
30+
color: inherit;
31+
text-decoration: inherit;
32+
}
33+
34+
h5,
35+
p {
36+
margin: 0;
37+
}
38+
39+
.p-6 {
40+
padding: 1.5rem;
41+
}
42+
43+
.max-w-sm {
44+
max-width: 24rem;
45+
}
46+
47+
.bg-white {
48+
background-color: rgb(255 255 255);
49+
}
50+
51+
.rounded-lg {
52+
border-radius: 0.5rem;
53+
}
54+
55+
.border {
56+
border-width: 1px;
57+
border-top-width: 1px;
58+
border-right-width: 1px;
59+
border-bottom-width: 1px;
60+
border-left-width: 1px;
61+
}
62+
63+
.border-gray-200 {
64+
border-color: rgb(229 231 235);
65+
}
66+
67+
.shadow-md {
68+
box-shadow: 0 0 #0000, 0 0 #0000, 0 4px 6px -1px rgb(0 0 0 / 0.1),
69+
0 2px 4px -2px rgb(0 0 0 / 0.1);
70+
}
71+
72+
.mb-2 {
73+
margin-bottom: 0.5rem;
74+
}
75+
76+
.text-2xl {
77+
font-size: 1.5rem;
78+
line-height: 2rem;
79+
}
80+
81+
.font-bold {
82+
font-weight: 700;
83+
}
84+
85+
.tracking-tight {
86+
letter-spacing: -0.025em;
87+
}
88+
89+
.text-gray-900 {
90+
color: rgb(17 24 39);
91+
}
92+
93+
.mb-3 {
94+
margin-bottom: 0.75rem;
95+
}
96+
97+
.font-normal {
98+
font-weight: 400;
99+
}
100+
101+
.text-gray-700 {
102+
color: rgb(55 65 81);
103+
}
104+
105+
.inline-flex {
106+
display: inline-flex;
107+
}
108+
109+
.items-center {
110+
align-items: center;
111+
}
112+
113+
.py-2 {
114+
padding-top: 0.5rem;
115+
padding-bottom: 0.5rem;
116+
}
117+
118+
.px-3 {
119+
padding-left: 0.75rem;
120+
padding-right: 0.75rem;
121+
}
122+
123+
.text-sm {
124+
font-size: 0.875rem;
125+
line-height: 1.25rem;
126+
}
127+
128+
.font-medium {
129+
font-weight: 500;
130+
}
131+
132+
.text-center {
133+
text-align: center;
134+
}
135+
136+
.text-white {
137+
color: rgb(255 255 255);
138+
}
139+
140+
.bg-blue-700 {
141+
background-color: rgb(29 78 216);
142+
}
143+
144+
.hover\:bg-blue-800:hover {
145+
background-color: rgb(30 64 175);
146+
}
147+
148+
.focus\:ring-4:focus {
149+
box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000;
150+
}
151+
152+
.focus\:outline-none:focus {
153+
outline: 2px solid transparent;
154+
outline-offset: 2px;
155+
}
156+
157+
.ml-2 {
158+
margin-left: 0.5rem;
159+
}
160+
161+
.-mr-1 {
162+
margin-right: -0.25rem;
163+
}
164+
165+
.w-4 {
166+
width: 1rem;
167+
}
168+
169+
.h-4 {
170+
height: 1rem;
171+
}

0 commit comments

Comments
 (0)