Skip to content

Commit 80e3068

Browse files
aayush105aayush105
authored
Merge pull request #510 from daichianoop/master
Cards Components Added by Anoop Kumar
2 parents 69c76f6 + d15c9fb commit 80e3068

File tree

15 files changed

+3983
-0
lines changed

15 files changed

+3983
-0
lines changed

‎Cards/Previews/bg-blur-card green.png

133 KB
Loading

‎Cards/Previews/bg-color-changing card.mp4

1.24 MB
Binary file not shown.

‎Cards/Previews/bg-image-changing-card.mp4

4.43 MB
Binary file not shown.

‎Cards/Previews/hover-card indigo.mp4

617 KB
Binary file not shown.

‎Cards/Previews/multiple element card.png

68.3 KB
Loading

‎Cards/bg-blur-card (green) twcss/index.html

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="styles.css" />
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
<title>bg blur gradient card</title>
9+
</head>
10+
<body class="bg-black">
11+
<!-- Component By Anoop2005 -->
12+
<!-- component start's here -->
13+
<div
14+
class="h-[16em] w-[18em] border-2 border-[rgba(30,133,76,0.5)] rounded-[1.5em] bg-gradient-to-br from-[#1e854b] to-[rgba(75,30,133,0.01)] text-white font-nunito p-[1em] flex justify-center items-left flex-col gap-[0.75em] backdrop-blur-[12px] m-5"
15+
>
16+
<div>
17+
<h1 class="text-[2em] font-medium">Heading</h1>
18+
<p class="text-[0.85em]">
19+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero dolorum
20+
blanditiis pariatur sequi magni.
21+
</p>
22+
</div>
23+
24+
<button
25+
class="h-fit w-fit px-[1em] py-[0.25em] border-[1px] rounded-full flex justify-center items-center gap-[0.5em] overflow-hidden group hover:translate-y-[0.125em] duration-200 backdrop-blur-[12px]"
26+
>
27+
<p>Button</p>
28+
<svg
29+
class="w-6 h-6 group-hover:translate-x-[10%] duration-300"
30+
stroke="currentColor"
31+
stroke-width="1"
32+
viewBox="0 0 24 24"
33+
fill="white"
34+
xmlns="http://www.w3.org/2000/svg"
35+
>
36+
<path
37+
d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"
38+
stroke-linejoin="round"
39+
stroke-linecap="round"
40+
></path>
41+
</svg>
42+
</button>
43+
</div>
44+
<!-- component end's here -->
45+
</body>
46+
</html>

‎Cards/changing-bg-card css/index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="styles.css">
7+
<title>Background Changing Card</title>
8+
</head>
9+
<body style="background-color: black;">
10+
<!-- Component by Anoop2005 -->
11+
<!-- Component start's here -->
12+
13+
<div class="divBackground">
14+
<div class="contentDiv">
15+
Your Content Here
16+
</div>
17+
</div>
18+
19+
<!-- Component end's here -->
20+
</body>
21+
</html>

‎Cards/changing-bg-card css/styles.css

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
.divBackground {
2+
background-image: url("https://preview.redd.it/hogwarts-legacy-dark-edition-official-pc-wallpaper-v0-potn7vwaxyj91.png?width=1080&crop=smart&auto=webp&s=06c43132256143ee78313b2b576c8ab41b41b086");
3+
background-position: center;
4+
background-size: cover;
5+
background-repeat: no-repeat;
6+
animation: changingFunction 60s infinite;
7+
border-radius: 20px;
8+
}
9+
.contentDiv {
10+
color: rgb(76, 238, 114);
11+
font-size: xx-large;
12+
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
13+
height: 50vh;
14+
width: 50wv;
15+
display: flex;
16+
align-items: center;
17+
justify-content: center;
18+
animation: textColorchangingFunction 60s infinite;
19+
}
20+
@keyframes textColorchangingFunction {
21+
0% {
22+
color: rgb(0, 255, 72);
23+
}
24+
4% {
25+
color: goldenrod;
26+
}
27+
20% {
28+
color: goldenrod;
29+
}
30+
24% {
31+
color: black;
32+
}
33+
40% {
34+
color: black;
35+
}
36+
44% {
37+
color: rgb(197, 168, 0);
38+
}
39+
60% {
40+
color: rgb(197, 168, 0);
41+
}
42+
64% {
43+
color: black;
44+
}
45+
80% {
46+
color: black;
47+
}
48+
84% {
49+
color: rgb(0, 255, 72);
50+
}
51+
100% {
52+
color: rgb(0, 255, 72);
53+
}
54+
}
55+
56+
@keyframes changingFunction {
57+
0% {
58+
background-image: url(https://preview.redd.it/hogwarts-legacy-dark-edition-official-pc-wallpaper-v0-potn7vwaxyj91.png?width=1080&crop=smart&auto=webp&s=06c43132256143ee78313b2b576c8ab41b41b086);
59+
}
60+
4% {
61+
background-image: url(https://wallpapercave.com/wp/wp8172870.jpg);
62+
}
63+
20% {
64+
background-image: url(https://wallpapercave.com/wp/wp8172870.jpg);
65+
}
66+
24% {
67+
background-image: url(https://wallpapercave.com/wp/wp8172872.jpg);
68+
}
69+
40% {
70+
background-image: url(https://wallpapercave.com/wp/wp8172872.jpg);
71+
}
72+
44% {
73+
background-image: url(https://wallpapercave.com/wp/wp8172899.jpg);
74+
}
75+
60% {
76+
background-image: url(https://wallpapercave.com/wp/wp8172899.jpg);
77+
}
78+
64% {
79+
background-image: url(https://wallpapercave.com/wp/wp8172872.jpg);
80+
}
81+
80% {
82+
background-image: url(https://wallpapercave.com/wp/wp8172872.jpg);
83+
}
84+
84% {
85+
background-image: url(https://preview.redd.it/hogwarts-legacy-dark-edition-official-pc-wallpaper-v0-potn7vwaxyj91.png?width=1080&crop=smart&auto=webp&s=06c43132256143ee78313b2b576c8ab41b41b086);
86+
}
87+
100% {
88+
background-image: url(https://preview.redd.it/hogwarts-legacy-dark-edition-official-pc-wallpaper-v0-potn7vwaxyj91.png?width=1080&crop=smart&auto=webp&s=06c43132256143ee78313b2b576c8ab41b41b086);
89+
}
90+
}

‎Cards/color-changing-card/index.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="styles.css">
7+
<title>Color Changing Background Card</title>
8+
</head>
9+
<body style="background-color: black;">
10+
<!-- Component by Anoop2005 -->
11+
<!-- Component start's here -->
12+
<div class="outer-container">
13+
<div class="container">
14+
Your Content Goes here
15+
</div>
16+
</div>
17+
<!-- Component end's here -->
18+
</body>
19+
</html>

‎Cards/color-changing-card/styles.css

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
.container {
2+
background-color: black;
3+
animation: colorChange 20s infinite;
4+
height: 50vh;
5+
width: 50vw;
6+
display: flex;
7+
align-items: center;
8+
justify-content: center;
9+
border: solid;
10+
border-color: aliceblue;
11+
border-width: 4px;
12+
border-radius: 5px;
13+
font-weight: 600;
14+
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
15+
font-size: large;
16+
}
17+
.outer-container {
18+
display: flex;
19+
align-items: center;
20+
justify-content: center;
21+
margin: 20px;
22+
}
23+
24+
@keyframes colorChange {
25+
0% {
26+
background-color: lightseagreen;
27+
}
28+
29+
20% {
30+
background-color: lightgoldenrodyellow;
31+
}
32+
33+
40% {
34+
background-color: lightsalmon;
35+
}
36+
37+
60% {
38+
background-color: lightgray;
39+
}
40+
41+
80% {
42+
background-color: lightskyblue;
43+
}
44+
45+
100% {
46+
background-color: tomato;
47+
}
48+
}

0 commit comments

Comments
 (0)