Skip to content

Commit c8bcfd7

Browse files
daichianoopdaichianoop
authored
Merge pull request #1 from daichianoop/daichianoop-patch-1
Add files via upload
2 parents 572632f + 0d6d0e2 commit c8bcfd7

File tree

10 files changed

+3983
-0
lines changed

10 files changed

+3983
-0
lines changed

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

+46
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

+21
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

+90
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

+19
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

+48
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+
}

‎Cards/hover-slide-card (indigo) twcss/index.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
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>Hover slide Card</title>
9+
</head>
10+
<body class="bg-black p-10">
11+
<!-- Component By Anoop2005 -->
12+
<!-- component start's here -->
13+
<div
14+
class="relative overflow-hidden w-60 h-60 shadow-2xl shadow-neutral-600 rounded-lg cursor-not-allowed text-2xl font-bold bg-gradient-to-br from-indigo-400 to-black"
15+
>
16+
<div class="z-10 absolute w-full h-full peer"></div>
17+
<div
18+
class="absolute peer-hover:-top-20 peer-hover:-left-16 peer-hover:w-[140%] peer-hover:h-[140%] -top-32 -left-16 w-32 h-44 rounded-full bg-indigo-400 transition-all duration-500"
19+
></div>
20+
<div
21+
class="absolute flex text-xl text-center items-end justify-end peer-hover:right-0 peer-hover:rounded-b-none peer-hover:bottom-0 peer-hover:items-center peer-hover:justify-center peer-hover:w-full peer-hover:h-full -bottom-32 -right-16 w-36 h-44 rounded-full peer-hover:bg-indigo-400 bg-black transition-all duration-500"
22+
>
23+
Content Here
24+
</div>
25+
<div class="w-full h-full items-center justify-center flex">
26+
Hover Here
27+
</div>
28+
</div>
29+
<!-- component end's here -->
30+
</body>
31+
</html>

‎Cards/multiple-element-card twcss/index.html

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
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+
<script src="https://cdn.tailwindcss.com"></script>
7+
<title>Document</title>
8+
</head>
9+
<body class="bg-black">
10+
<!-- Component By Anoop2005 -->
11+
<!-- Compnent start's here -->
12+
13+
<div class="flex items-center justify-center">
14+
<div class="grid grid-cols-2 gap-5 justify-center items-center">
15+
<div
16+
class="card w-48 hover:shadow-none items-center h-max bg-sky-500 border-4 border-black rounded-lg shadow-[4px_4px_0px_rgb(0,0,1)] dark:shadow-neutral-500 dark:border-white"
17+
>
18+
<div class="px-6 py-5 text-left h-full">
19+
<p class="text-base mb-4">October 5th, 2024</p>
20+
<h1 class="text-[32px] mb-4">Card Title</h1>
21+
<p class="text-xs mb-4 line-clamp-4">
22+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
23+
fuga et aspernatur illum unde eum veritatis debitis ex, aperiam
24+
aliquid neque quaerat quae officiis ut, deserunt saepe? Dolore,
25+
veniam eius!
26+
</p>
27+
<strong class="cursor-pointer">Read More</strong>
28+
</div>
29+
</div>
30+
<div
31+
class="card w-48 hover:shadow-none items-center h-max bg-emerald-500 border-4 border-black rounded-lg shadow-[4px_4px_0px_rgb(0,0,1)] dark:shadow-neutral-500 dark:border-white"
32+
>
33+
<div class="px-6 py-5 text-left h-full">
34+
<p class="text-base mb-4">October 5th, 2024</p>
35+
<h1 class="text-[32px] mb-4">Card Title</h1>
36+
<p class="text-xs mb-4 line-clamp-4">
37+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
38+
fuga et aspernatur illum unde eum veritatis debitis ex, aperiam
39+
aliquid neque quaerat quae officiis ut, deserunt saepe? Dolore,
40+
veniam eius!
41+
</p>
42+
<strong class="cursor-pointer">Read More</strong>
43+
</div>
44+
</div>
45+
<div
46+
class="card w-48 hover:shadow-none items-center h-max bg-amber-500 border-4 border-black rounded-lg shadow-[4px_4px_0px_rgb(0,0,1)] dark:shadow-neutral-500 dark:border-white"
47+
>
48+
<div class="px-6 py-5 text-left h-full">
49+
<p class="text-base mb-4">October 5th, 2024</p>
50+
<h1 class="text-[32px] mb-4">Card Title</h1>
51+
<p class="text-xs mb-4 line-clamp-4">
52+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
53+
fuga et aspernatur illum unde eum veritatis debitis ex, aperiam
54+
aliquid neque quaerat quae officiis ut, deserunt saepe? Dolore,
55+
veniam eius!
56+
</p>
57+
<strong class="cursor-pointer">Read More</strong>
58+
</div>
59+
</div>
60+
<div
61+
class="card w-48 hover:shadow-none items-center h-max bg-pink-500 border-4 border-black rounded-lg shadow-[4px_4px_0px_rgb(0,0,1)] dark:shadow-neutral-500 dark:border-white"
62+
>
63+
<div class="px-6 py-5 text-left h-full">
64+
<p class="text-base mb-4">October 5th, 2024</p>
65+
<h1 class="text-[32px] mb-4">Card Title</h1>
66+
<p class="text-xs mb-4 line-clamp-4">
67+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
68+
fuga et aspernatur illum unde eum veritatis debitis ex, aperiam
69+
aliquid neque quaerat quae officiis ut, deserunt saepe? Dolore,
70+
veniam eius!
71+
</p>
72+
<strong class="cursor-pointer">Read More</strong>
73+
</div>
74+
</div>
75+
</div>
76+
</div>
77+
78+
<!-- Component end's here-->
79+
</body>
80+
</html>

0 commit comments

Comments
 (0)