-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #510 from daichianoop/master
Cards Components Added by Anoop Kumar
- Loading branch information
Showing
15 changed files
with
3,983 additions
and
0 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,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="styles.css" /> | ||
| <script src="https://cdn.tailwindcss.com"></script> | ||
| <title>bg blur gradient card</title> | ||
| </head> | ||
| <body class="bg-black"> | ||
| <!-- Component By Anoop2005 --> | ||
| <!-- component start's here --> | ||
| <div | ||
| 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" | ||
| > | ||
| <div> | ||
| <h1 class="text-[2em] font-medium">Heading</h1> | ||
| <p class="text-[0.85em]"> | ||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero dolorum | ||
| blanditiis pariatur sequi magni. | ||
| </p> | ||
| </div> | ||
|
|
||
| <button | ||
| 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]" | ||
| > | ||
| <p>Button</p> | ||
| <svg | ||
| class="w-6 h-6 group-hover:translate-x-[10%] duration-300" | ||
| stroke="currentColor" | ||
| stroke-width="1" | ||
| viewBox="0 0 24 24" | ||
| fill="white" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" | ||
| stroke-linejoin="round" | ||
| stroke-linecap="round" | ||
| ></path> | ||
| </svg> | ||
| </button> | ||
| </div> | ||
| <!-- component end's here --> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| <!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="styles.css"> | ||
| <title>Background Changing Card</title> | ||
| </head> | ||
| <body style="background-color: black;"> | ||
| <!-- Component by Anoop2005 --> | ||
| <!-- Component start's here --> | ||
|
|
||
| <div class="divBackground"> | ||
| <div class="contentDiv"> | ||
| Your Content Here | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Component end's here --> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| .divBackground { | ||
| 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"); | ||
| background-position: center; | ||
| background-size: cover; | ||
| background-repeat: no-repeat; | ||
| animation: changingFunction 60s infinite; | ||
| border-radius: 20px; | ||
| } | ||
| .contentDiv { | ||
| color: rgb(76, 238, 114); | ||
| font-size: xx-large; | ||
| font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; | ||
| height: 50vh; | ||
| width: 50wv; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| animation: textColorchangingFunction 60s infinite; | ||
| } | ||
| @keyframes textColorchangingFunction { | ||
| 0% { | ||
| color: rgb(0, 255, 72); | ||
| } | ||
| 4% { | ||
| color: goldenrod; | ||
| } | ||
| 20% { | ||
| color: goldenrod; | ||
| } | ||
| 24% { | ||
| color: black; | ||
| } | ||
| 40% { | ||
| color: black; | ||
| } | ||
| 44% { | ||
| color: rgb(197, 168, 0); | ||
| } | ||
| 60% { | ||
| color: rgb(197, 168, 0); | ||
| } | ||
| 64% { | ||
| color: black; | ||
| } | ||
| 80% { | ||
| color: black; | ||
| } | ||
| 84% { | ||
| color: rgb(0, 255, 72); | ||
| } | ||
| 100% { | ||
| color: rgb(0, 255, 72); | ||
| } | ||
| } | ||
|
|
||
| @keyframes changingFunction { | ||
| 0% { | ||
| 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); | ||
| } | ||
| 4% { | ||
| background-image: url(https://wallpapercave.com/wp/wp8172870.jpg); | ||
| } | ||
| 20% { | ||
| background-image: url(https://wallpapercave.com/wp/wp8172870.jpg); | ||
| } | ||
| 24% { | ||
| background-image: url(https://wallpapercave.com/wp/wp8172872.jpg); | ||
| } | ||
| 40% { | ||
| background-image: url(https://wallpapercave.com/wp/wp8172872.jpg); | ||
| } | ||
| 44% { | ||
| background-image: url(https://wallpapercave.com/wp/wp8172899.jpg); | ||
| } | ||
| 60% { | ||
| background-image: url(https://wallpapercave.com/wp/wp8172899.jpg); | ||
| } | ||
| 64% { | ||
| background-image: url(https://wallpapercave.com/wp/wp8172872.jpg); | ||
| } | ||
| 80% { | ||
| background-image: url(https://wallpapercave.com/wp/wp8172872.jpg); | ||
| } | ||
| 84% { | ||
| 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); | ||
| } | ||
| 100% { | ||
| 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); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| <!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="styles.css"> | ||
| <title>Color Changing Background Card</title> | ||
| </head> | ||
| <body style="background-color: black;"> | ||
| <!-- Component by Anoop2005 --> | ||
| <!-- Component start's here --> | ||
| <div class="outer-container"> | ||
| <div class="container"> | ||
| Your Content Goes here | ||
| </div> | ||
| </div> | ||
| <!-- Component end's here --> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| .container { | ||
| background-color: black; | ||
| animation: colorChange 20s infinite; | ||
| height: 50vh; | ||
| width: 50vw; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| border: solid; | ||
| border-color: aliceblue; | ||
| border-width: 4px; | ||
| border-radius: 5px; | ||
| font-weight: 600; | ||
| font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; | ||
| font-size: large; | ||
| } | ||
| .outer-container { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| margin: 20px; | ||
| } | ||
|
|
||
| @keyframes colorChange { | ||
| 0% { | ||
| background-color: lightseagreen; | ||
| } | ||
|
|
||
| 20% { | ||
| background-color: lightgoldenrodyellow; | ||
| } | ||
|
|
||
| 40% { | ||
| background-color: lightsalmon; | ||
| } | ||
|
|
||
| 60% { | ||
| background-color: lightgray; | ||
| } | ||
|
|
||
| 80% { | ||
| background-color: lightskyblue; | ||
| } | ||
|
|
||
| 100% { | ||
| background-color: tomato; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| <!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="styles.css" /> | ||
| <script src="https://cdn.tailwindcss.com"></script> | ||
| <title>Hover slide Card</title> | ||
| </head> | ||
| <body class="bg-black p-10"> | ||
| <!-- Component By Anoop2005 --> | ||
| <!-- component start's here --> | ||
| <div | ||
| 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" | ||
| > | ||
| <div class="z-10 absolute w-full h-full peer"></div> | ||
| <div | ||
| 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" | ||
| ></div> | ||
| <div | ||
| 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" | ||
| > | ||
| Content Here | ||
| </div> | ||
| <div class="w-full h-full items-center justify-center flex"> | ||
| Hover Here | ||
| </div> | ||
| </div> | ||
| <!-- component end's here --> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <script src="https://cdn.tailwindcss.com"></script> | ||
| <title>Document</title> | ||
| </head> | ||
| <body class="bg-black"> | ||
| <!-- Component By Anoop2005 --> | ||
| <!-- Compnent start's here --> | ||
|
|
||
| <div class="flex items-center justify-center"> | ||
| <div class="grid grid-cols-2 gap-5 justify-center items-center"> | ||
| <div | ||
| 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" | ||
| > | ||
| <div class="px-6 py-5 text-left h-full"> | ||
| <p class="text-base mb-4">October 5th, 2024</p> | ||
| <h1 class="text-[32px] mb-4">Card Title</h1> | ||
| <p class="text-xs mb-4 line-clamp-4"> | ||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta | ||
| fuga et aspernatur illum unde eum veritatis debitis ex, aperiam | ||
| aliquid neque quaerat quae officiis ut, deserunt saepe? Dolore, | ||
| veniam eius! | ||
| </p> | ||
| <strong class="cursor-pointer">Read More</strong> | ||
| </div> | ||
| </div> | ||
| <div | ||
| 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" | ||
| > | ||
| <div class="px-6 py-5 text-left h-full"> | ||
| <p class="text-base mb-4">October 5th, 2024</p> | ||
| <h1 class="text-[32px] mb-4">Card Title</h1> | ||
| <p class="text-xs mb-4 line-clamp-4"> | ||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta | ||
| fuga et aspernatur illum unde eum veritatis debitis ex, aperiam | ||
| aliquid neque quaerat quae officiis ut, deserunt saepe? Dolore, | ||
| veniam eius! | ||
| </p> | ||
| <strong class="cursor-pointer">Read More</strong> | ||
| </div> | ||
| </div> | ||
| <div | ||
| 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" | ||
| > | ||
| <div class="px-6 py-5 text-left h-full"> | ||
| <p class="text-base mb-4">October 5th, 2024</p> | ||
| <h1 class="text-[32px] mb-4">Card Title</h1> | ||
| <p class="text-xs mb-4 line-clamp-4"> | ||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta | ||
| fuga et aspernatur illum unde eum veritatis debitis ex, aperiam | ||
| aliquid neque quaerat quae officiis ut, deserunt saepe? Dolore, | ||
| veniam eius! | ||
| </p> | ||
| <strong class="cursor-pointer">Read More</strong> | ||
| </div> | ||
| </div> | ||
| <div | ||
| 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" | ||
| > | ||
| <div class="px-6 py-5 text-left h-full"> | ||
| <p class="text-base mb-4">October 5th, 2024</p> | ||
| <h1 class="text-[32px] mb-4">Card Title</h1> | ||
| <p class="text-xs mb-4 line-clamp-4"> | ||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta | ||
| fuga et aspernatur illum unde eum veritatis debitis ex, aperiam | ||
| aliquid neque quaerat quae officiis ut, deserunt saepe? Dolore, | ||
| veniam eius! | ||
| </p> | ||
| <strong class="cursor-pointer">Read More</strong> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Component end's here--> | ||
| </body> | ||
| </html> |
Oops, something went wrong.