├── Accordions └── 01 │ ├── assets │ ├── 01.webp │ ├── 02.jpg │ ├── 03.jpg │ ├── 04.jpg │ └── 05.jpg │ ├── index.html │ ├── script.js │ └── styles.css ├── Buttons ├── 01 │ ├── index.html │ └── style.css ├── 02 │ ├── index.html │ ├── script.js │ └── styles.css ├── 03 │ ├── index.html │ └── styles.css ├── 04 │ ├── index.html │ └── styles.css └── 05 │ ├── index.html │ └── styles.css ├── Cards ├── 01 │ ├── index.html │ ├── script.js │ └── styles.css ├── 02 │ ├── cover.jpg │ ├── index.html │ └── styles.css └── 03 │ ├── assets │ ├── amsterdam.jpg │ ├── barcelona.jpg │ ├── dubai.jpg │ ├── jaipur.jpg │ ├── macau.jpg │ └── rome.jpg │ ├── index.html │ ├── script.js │ └── styles.css ├── Carousels ├── 01 │ ├── index.html │ ├── script.js │ └── style.css └── 02 │ ├── imgs │ ├── 01.jpg │ ├── 02.jpg │ ├── 03.jpg │ ├── 04.jpg │ ├── 05.jpg │ └── 06.jpg │ ├── index.html │ ├── script.js │ └── styles.css ├── Dropdowns ├── 01 │ ├── index.html │ └── styles.css └── 02 │ ├── index.html │ ├── script.js │ └── styles.css ├── Footer └── 01 │ ├── index.html │ └── styles.css ├── Gallery ├── 01 │ ├── imgs │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ ├── image1.jpg │ │ ├── image2.jpg │ │ ├── image3.jpg │ │ ├── image4.jpg │ │ └── image5.jpg │ ├── index.html │ └── styles.css └── 02 │ ├── imgs │ ├── 01.jpg │ ├── 02.jpg │ ├── 03.jpg │ ├── 04.jpg │ ├── 05.jpg │ └── 06.jpg │ ├── index.html │ └── styles.css ├── Inputs ├── 01 │ ├── index.html │ └── styles.css ├── 02 │ ├── index.html │ └── styles.css └── 03 │ ├── index.html │ └── styles.css ├── Log in ├── 01 │ ├── apple.svg │ ├── google.svg │ ├── index.html │ └── styles.css └── 02 │ ├── google.svg │ ├── index.html │ ├── logo.png │ ├── mesh-gradient.png │ └── styles.css ├── Media ├── 01 │ ├── images │ │ ├── img1.jpg │ │ ├── img2.jpg │ │ ├── img3.jpg │ │ ├── img4.jpg │ │ ├── img5.jpg │ │ └── img6.jpg │ ├── index.html │ └── styles.css └── 02 │ ├── index.html │ ├── script.js │ └── styles.css ├── Menus ├── 01 │ ├── assets │ │ ├── close.svg │ │ ├── hero-image.webp │ │ └── menu.svg │ ├── index.html │ ├── script.js │ └── styles.css ├── 02 │ ├── index.html │ ├── script.js │ └── styles.css ├── 03 │ ├── background.jpg │ ├── index.html │ ├── script.js │ └── styles.css ├── 04 │ ├── index.html │ └── styles.css └── 05 │ ├── index.html │ ├── script.js │ └── styles.css ├── Modals └── 01 │ ├── index.html │ ├── script.js │ └── styles.css ├── Navbars ├── 01 │ ├── index.html │ └── styles.css ├── 02 │ ├── index.html │ ├── script.js │ └── styles.css ├── 03 │ ├── index.html │ ├── script.js │ └── styles.css └── 04 │ ├── assets │ ├── logo-1.png │ ├── menu.svg │ └── profile-pic.jpg │ ├── index.html │ └── styles.css ├── Parallax └── 01 │ ├── images.js │ ├── imgs │ ├── 01.jpg │ ├── 02.jpg │ ├── 03.jpg │ ├── 04.jpg │ ├── 05.jpg │ ├── 06.jpg │ ├── 07.jpg │ ├── 08.jpg │ └── 09.jpg │ ├── index.html │ ├── script.js │ └── styles.css ├── Scroll └── 01 │ ├── index.html │ ├── script.js │ └── style.css ├── Sidebars ├── 01 │ ├── index.html │ ├── script.js │ ├── styles.css │ └── svg │ │ ├── history.svg │ │ ├── home.svg │ │ ├── library.svg │ │ ├── liked.svg │ │ ├── menu.svg │ │ ├── shorts.svg │ │ ├── subscription.svg │ │ ├── videos.svg │ │ ├── watch-later.svg │ │ └── youtube.svg └── 02 │ ├── assets │ ├── dashboard.svg │ ├── expand.svg │ ├── home.svg │ ├── logo.svg │ ├── profile-pic.jpg │ ├── projects.svg │ ├── settings.svg │ └── tasks.svg │ ├── index.html │ ├── script.js │ └── styles.css ├── Socials ├── 01 │ ├── index.html │ └── styles.css ├── 02 │ ├── index.html │ └── styles.css ├── 03 │ ├── index.html │ └── styles.css └── 04 │ ├── index.html │ └── styles.css ├── Tabs ├── 01 │ ├── index.html │ └── styles.css └── 02 │ ├── index.html │ ├── script.js │ └── styles.css ├── Text ├── 01 │ ├── index.html │ └── styles.css ├── 02 │ ├── index.html │ └── styles.css └── 03 │ ├── index.html │ └── styles.css └── z_Archive └── Cards ├── 01 ├── image-2.png ├── image.webp ├── index.html └── styles.css └── 02 ├── back.jpg ├── index.html └── styles.css /Accordions/01/assets/01.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Accordions/01/assets/01.webp -------------------------------------------------------------------------------- /Accordions/01/assets/02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Accordions/01/assets/02.jpg -------------------------------------------------------------------------------- /Accordions/01/assets/03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Accordions/01/assets/03.jpg -------------------------------------------------------------------------------- /Accordions/01/assets/04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Accordions/01/assets/04.jpg -------------------------------------------------------------------------------- /Accordions/01/assets/05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Accordions/01/assets/05.jpg -------------------------------------------------------------------------------- /Accordions/01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Accordions 01 7 | 8 | 9 | 10 | 11 |
12 |
13 | 14 | 15 |
16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 |

GTA 6

27 |
28 |
29 |
30 | 31 |
32 | 33 | 34 |
35 |
36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 |
44 | 45 |

Spider-Man PS5

46 |
47 |
48 |
49 | 50 |
51 | 52 | 53 |
54 |
55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 |
63 | 64 |

God Of War

65 |
66 |
67 |
68 | 69 |
70 | 71 | 72 |
73 |
74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 |
82 | 83 |

The Last of Us

84 |
85 |
86 |
87 | 88 |
89 | 90 | 91 |
92 |
93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 |
101 | 102 |

Elden Ring

103 |
104 |
105 |
106 |
107 | 108 | -------------------------------------------------------------------------------- /Accordions/01/script.js: -------------------------------------------------------------------------------- 1 | const cardsContainer = document.querySelector(".container"); 2 | 3 | cardsContainer.addEventListener("click", (e) => { 4 | const target = e.target.closest(".card"); 5 | 6 | if (!target) return; 7 | 8 | cardsContainer.querySelectorAll(".card").forEach((card) => { 9 | card.classList.remove("active"); 10 | }); 11 | 12 | target.classList.add("active"); 13 | }); 14 | -------------------------------------------------------------------------------- /Accordions/01/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap"); 2 | 3 | *, 4 | *::before, 5 | *::after { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | font-family: Inter, sans-serif; 13 | height: 100vh; 14 | color: white; 15 | background-color: #e9e9f0; 16 | display: flex; 17 | justify-content: center; 18 | align-items: center; 19 | } 20 | 21 | img { 22 | width: 100%; 23 | height: 100%; 24 | display: block; 25 | } 26 | 27 | .container { 28 | width: 100%; 29 | width: 820px; 30 | height: 340px; 31 | display: flex; 32 | gap: 10px; 33 | margin-inline: 50px; 34 | } 35 | 36 | .card { 37 | min-width: 70px; 38 | height: 100%; 39 | border-radius: 30px; 40 | overflow: hidden; 41 | 42 | display: flex; 43 | align-items: flex-end; 44 | flex-grow: 1; 45 | cursor: pointer; 46 | position: relative; 47 | transition: flex-grow 0.5s cubic-bezier(0.16, 1, 0.3, 1); 48 | 49 | --transition-timing: 0.35s; 50 | } 51 | /* .card.active { 52 | flex-grow: 100; 53 | } */ 54 | .card:hover { 55 | flex-grow: 7; 56 | } 57 | 58 | .card > .background { 59 | position: absolute; 60 | inset: 0; 61 | object-fit: cover; 62 | object-position: center; 63 | filter: brightness(0.4); 64 | z-index: -1; 65 | transition: var(--transition-timing) ease; 66 | } 67 | .card:hover > .background { 68 | filter: brightness(1); 69 | } 70 | 71 | .card > .card-content { 72 | display: flex; 73 | align-items: center; 74 | position: absolute; 75 | left: 10px; 76 | right: 10px; 77 | bottom: 20px; 78 | overflow: hidden; 79 | transition: var(--transition-timing); 80 | z-index: 10; 81 | } 82 | .card:hover > .card-content { 83 | inset: 20px; 84 | top: auto; 85 | } 86 | 87 | .card-content > * { 88 | transition: var(--transition-timing); 89 | } 90 | 91 | .card-content > .profile-image { 92 | min-width: 50px; 93 | max-width: 50px; 94 | height: 50px; 95 | border: 1px solid white; 96 | display: flex; 97 | justify-content: center; 98 | align-items: center; 99 | border-radius: 50%; 100 | overflow: hidden; 101 | } 102 | .card:hover .profile-image { 103 | border: 1px solid rgb(110, 252, 205); 104 | } 105 | .profile-image > svg { 106 | stroke: #fefefe; 107 | } 108 | .card:hover .profile-image > svg { 109 | stroke: rgb(110, 252, 205); 110 | } 111 | 112 | .card-content > .title { 113 | white-space: pre; 114 | margin-left: 10px; 115 | translate: 0 100%; 116 | opacity: 0; 117 | } 118 | .card:hover .title { 119 | opacity: 1; 120 | translate: 0 0; 121 | } 122 | 123 | .card > .backdrop { 124 | position: absolute; 125 | left: 0; 126 | right: 0; 127 | bottom: 0; 128 | height: 100px; 129 | z-index: 0; 130 | background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7)); 131 | } 132 | -------------------------------------------------------------------------------- /Buttons/01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Buttons 02 9 | 10 | 11 | 12 | 13 | 14 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Buttons/01/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: "Roboto"; 11 | background-color: #090909; 12 | height: 100vh; 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | } 17 | 18 | button { 19 | border: 0; 20 | cursor: pointer; 21 | position: relative; 22 | } 23 | button div { 24 | background-color: rgb(255, 70, 85); 25 | padding: 1.2rem 5.5rem; 26 | position: relative; 27 | overflow: hidden; 28 | } 29 | button a { 30 | position: relative; 31 | text-decoration: none; 32 | font-size: 1.5rem; 33 | font-weight: 700; 34 | color: #ece8e1; 35 | text-transform: uppercase; 36 | z-index: 2; 37 | } 38 | 39 | button::before, 40 | button::after { 41 | content: ""; 42 | position: absolute; 43 | width: 105%; 44 | height: 50%; 45 | background-color: transparent; 46 | border: 1px solid rgb(134, 129, 124); 47 | left: -2.5%; 48 | z-index: -1; 49 | } 50 | 51 | button::before { 52 | border-bottom: 0; 53 | top: -10%; 54 | } 55 | button::after { 56 | border-top: 0; 57 | bottom: -10%; 58 | } 59 | 60 | button span { 61 | position: absolute; 62 | top: 0; 63 | left: 0; 64 | width: 120%; 65 | height: 110%; 66 | background-color: rgb(15, 25, 35); 67 | transform: translateX(-105%) skew(-10deg); 68 | transition: 0.4s ease; 69 | } 70 | 71 | button:hover span { 72 | transform: translateX(-5%) skew(-10deg); 73 | } 74 | -------------------------------------------------------------------------------- /Buttons/02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Buttons 03 7 | 8 | 9 | 10 | 11 | 15 | 16 | -------------------------------------------------------------------------------- /Buttons/02/script.js: -------------------------------------------------------------------------------- 1 | const button = document.querySelector(".btn"); 2 | const inner = document.querySelector(".inner"); 3 | 4 | button.addEventListener("mousemove", (e) => { 5 | const rect = button.getBoundingClientRect(); 6 | 7 | const x = e.clientX - rect.left; 8 | const y = e.clientY - rect.top; 9 | 10 | button.style.setProperty("--mouseX", `${x}px`); 11 | button.style.setProperty("--mouseY", `${y}px`); 12 | }); 13 | -------------------------------------------------------------------------------- /Buttons/02/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap"); 2 | 3 | *, 4 | *::before, 5 | *::after { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | font-family: "Roboto", system-ui; 13 | height: 100vh; 14 | background-color: hsl(240, 4%, 7%); 15 | display: flex; 16 | justify-content: center; 17 | align-items: center; 18 | font-family: system-ui; 19 | } 20 | 21 | :root { 22 | --primary: 250 66% 61%; 23 | } 24 | 25 | .btn { 26 | all: unset; 27 | font-size: 24px; 28 | padding: 14px 52px; 29 | background: hsl(0, 0%, 0%); 30 | color: white; 31 | text-transform: uppercase; 32 | position: relative; 33 | border-radius: 100px; 34 | cursor: pointer; 35 | } 36 | 37 | .btn > span { 38 | font-family: "Roboto"; 39 | letter-spacing: 1px; 40 | position: relative; 41 | z-index: 10; 42 | transition: 0.25s ease; 43 | } 44 | .btn:hover > span { 45 | color: hsl(var(--primary) / 1); 46 | } 47 | 48 | @property --angle { 49 | syntax: ""; 50 | initial-value: 0deg; 51 | inherits: false; 52 | } 53 | 54 | .btn::before, 55 | .btn::after { 56 | content: ""; 57 | position: absolute; 58 | inset: -2px; 59 | background-color: inherit; 60 | border-radius: inherit; 61 | background-image: conic-gradient( 62 | from var(--angle) at 50% 50%, 63 | transparent 0%, 64 | transparent 33%, 65 | hsl(var(--primary)) 50%, 66 | transparent 66%, 67 | transparent 100% 68 | ); 69 | animation: rotate 2s infinite linear; 70 | z-index: -1; 71 | } 72 | 73 | .btn::before { 74 | filter: blur(15px); 75 | } 76 | 77 | .inner { 78 | position: absolute; 79 | inset: 0; 80 | background: radial-gradient( 81 | 100px circle at var(--mouseX) var(--mouseY), 82 | hsl(var(--primary) / 0.3), 83 | transparent 50% 84 | ); 85 | border-radius: inherit; 86 | z-index: 0; 87 | opacity: 0; 88 | } 89 | .btn:hover .inner { 90 | opacity: 1; 91 | } 92 | 93 | @keyframes rotate { 94 | 0% { 95 | --angle: 0deg; 96 | } 97 | 100% { 98 | --angle: 360deg; 99 | } 100 | } 101 | -------------------------------------------------------------------------------- /Buttons/03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Buttons 04 7 | 8 | 9 | 10 | 13 | 14 | -------------------------------------------------------------------------------- /Buttons/03/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | background-color: #212121; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | } 16 | 17 | button { 18 | all: unset; 19 | } 20 | 21 | .btn { 22 | font-family: "Clash Grotesk"; 23 | font-size: 1.2rem; 24 | letter-spacing: 2px; 25 | padding: 1rem 2.5rem; 26 | border-radius: 0.4rem; 27 | cursor: pointer; 28 | text-transform: uppercase; 29 | background-color: rgb(14, 14, 26); 30 | color: rgb(234, 234, 234); 31 | font-weight: 600; 32 | transition: 0.6s; 33 | box-shadow: 0px 0px 60px hsl(232 85% 69% / 0.6); 34 | -webkit-box-reflect: below 10px 35 | linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); 36 | } 37 | 38 | .btn:active { 39 | scale: 0.92; 40 | } 41 | 42 | .btn:hover { 43 | color: rgb(4, 4, 38); 44 | background: linear-gradient(to right, #9cecfb, #65c7f7, #0052d4); 45 | } 46 | -------------------------------------------------------------------------------- /Buttons/04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Buttons 04 - Toggle Switch 7 | 8 | 9 | 10 |
11 | 15 |
16 | 17 | -------------------------------------------------------------------------------- /Buttons/04/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | background-color: hsl(240, 10%, 4%); 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | } 16 | 17 | button { 18 | all: unset; 19 | } 20 | 21 | .toggle-switch { 22 | position: relative; 23 | width: 100px; 24 | height: 50px; 25 | } 26 | 27 | .slider { 28 | position: absolute; 29 | width: 100%; 30 | height: 100%; 31 | background-color: #183153; 32 | border-radius: 25px; 33 | cursor: pointer; 34 | transition: 0.3s; 35 | } 36 | 37 | .checkbox { 38 | position: absolute; 39 | display: none; 40 | } 41 | 42 | .slider:has(.checkbox:checked) { 43 | background-color: #69b0e7; 44 | } 45 | 46 | .icon { 47 | content: ""; 48 | position: absolute; 49 | top: 10px; 50 | left: 10px; 51 | width: 30px; 52 | height: 30px; 53 | border-radius: 50%; 54 | background-color: #183153; 55 | box-shadow: inset 12px -4px 0px 0px #d8dbe0; 56 | transition: 0.4s ease; 57 | } 58 | 59 | .checkbox:checked + .icon { 60 | transform: translateX(50px); 61 | background-color: #ffd43b; 62 | box-shadow: none; 63 | } 64 | -------------------------------------------------------------------------------- /Buttons/05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Buttons 04 7 | 8 | 9 | 10 | 16 | 17 | -------------------------------------------------------------------------------- /Buttons/05/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap"); 2 | 3 | *, 4 | *::after, 5 | *::before { 6 | box-sizing: border-box; 7 | margin: 0; 8 | padding: 0; 9 | } 10 | 11 | body { 12 | font-family: "Poppins", sans-serif; 13 | min-height: 100vh; 14 | background-color: #051215; 15 | display: grid; 16 | place-items: center; 17 | color: white; 18 | } 19 | 20 | .btn { 21 | all: unset; 22 | font-size: 18px; 23 | padding: 0.8rem 3rem; 24 | background-color: #fefefe; 25 | color: black; 26 | line-height: 1.5; 27 | font-weight: 600; 28 | border: 2px solid white; 29 | border-radius: 1000px; 30 | position: relative; 31 | overflow: hidden; 32 | z-index: 0; 33 | cursor: pointer; 34 | } 35 | 36 | .btn::before, 37 | .btn::after { 38 | content: ""; 39 | position: absolute; 40 | background: #000; 41 | background: hsl(191, 80%, 43%); 42 | width: 100%; 43 | height: 102%; 44 | pointer-events: none; 45 | transform: skew(30deg) translateY(0); 46 | transition: transform 0.3s ease; 47 | z-index: -1; 48 | } 49 | .btn::before { 50 | --direction: 1; 51 | top: -103%; 52 | left: -70%; 53 | } 54 | .btn::after { 55 | --direction: -1; 56 | top: 102%; 57 | left: 69%; 58 | } 59 | 60 | .btn:hover::before, 61 | .btn:hover::after { 62 | transform: skew(30deg) translateY(calc(var(--direction) * 100%)); 63 | } 64 | 65 | .text-container { 66 | display: block; 67 | overflow: hidden; 68 | position: relative; 69 | } 70 | .text { 71 | display: block; 72 | transition: 0.3s; 73 | } 74 | .btn:hover .text:nth-child(1) { 75 | color: white; 76 | translate: 0 80%; 77 | } 78 | 79 | .text:nth-child(2) { 80 | color: white; 81 | position: absolute; 82 | inset: 0; 83 | translate: 0 -80%; 84 | } 85 | .btn:hover .text:nth-child(2) { 86 | transition-delay: 0.1s; 87 | translate: 0 0; 88 | } 89 | -------------------------------------------------------------------------------- /Cards/01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Cards 05 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 | 16 |

Instagram

17 | 18 |

Followers: 33K

19 | 20 | 21 | 22 | Follow me 23 | 24 |
25 |
26 |
27 |
28 | 29 |

GitHub

30 | 31 |

Followers: 330

32 | 33 | 34 | 35 | Follow me 36 | 37 |
38 |
39 |
40 |
41 | 42 |

Linkedin

43 | 44 |

Followers: 550

45 | 46 | 47 | 48 | Follow me 49 | 50 |
51 |
52 |
53 | 54 | -------------------------------------------------------------------------------- /Cards/01/script.js: -------------------------------------------------------------------------------- 1 | const cards = Array.from(document.querySelectorAll(".card")); 2 | const cardsContainer = document.querySelector("#cards"); 3 | 4 | cardsContainer.addEventListener("mousemove", (e) => { 5 | for (const card of cards) { 6 | const rect = card.getBoundingClientRect(); 7 | x = e.clientX - rect.left; 8 | y = e.clientY - rect.top; 9 | 10 | card.style.setProperty("--mouse-x", `${x}px`); 11 | card.style.setProperty("--mouse-y", `${y}px`); 12 | } 13 | }); 14 | -------------------------------------------------------------------------------- /Cards/01/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap"); 2 | 3 | *, 4 | *::after, 5 | *::before { 6 | box-sizing: border-box; 7 | margin: 0; 8 | padding: 0; 9 | } 10 | 11 | body { 12 | font-family: "Poppins", sans-serif; 13 | min-height: 100vh; 14 | background-color: #060606; 15 | display: grid; 16 | place-items: center; 17 | color: white; 18 | } 19 | 20 | #cards { 21 | width: 70%; 22 | padding-inline: 20px; 23 | display: flex; 24 | flex-wrap: wrap; 25 | gap: 30px; 26 | } 27 | 28 | .card { 29 | min-width: 200px; 30 | height: 350px; 31 | flex: 1 1 250px; 32 | background-color: rgba(255, 255, 255, 0.12); 33 | border-radius: 12px; 34 | position: relative; 35 | } 36 | 37 | #cards:hover > .card { 38 | background: radial-gradient( 39 | 400px circle at var(--mouse-x) var(--mouse-y), 40 | hsl(var(--color) / 1), 41 | rgba(255, 255, 255, 0.12) 40% 42 | ); 43 | } 44 | 45 | .card-content { 46 | position: absolute; 47 | inset: 1px; 48 | background-color: #131315; 49 | border-radius: inherit; 50 | } 51 | 52 | .card:nth-child(1) { 53 | --color: 348 80% 60%; 54 | } 55 | .card:nth-child(2) { 56 | --color: 0 0% 100%; 57 | } 58 | .card:nth-child(3) { 59 | --color: 220 100% 35%; 60 | } 61 | 62 | .card::before { 63 | content: ""; 64 | position: absolute; 65 | width: 100%; 66 | height: 100%; 67 | top: 0; 68 | left: 0; 69 | background: radial-gradient( 70 | 500px circle at var(--mouse-x) var(--mouse-y), 71 | hsl(var(--color) / 0.35), 72 | transparent 40% 73 | ); 74 | border-radius: inherit; 75 | opacity: 0; 76 | z-index: 2; 77 | } 78 | 79 | #cards:hover > .card::before { 80 | opacity: 1; 81 | } 82 | 83 | a { 84 | all: unset; 85 | cursor: pointer; 86 | } 87 | 88 | .card-content { 89 | display: flex; 90 | justify-content: center; 91 | align-items: center; 92 | flex-direction: column; 93 | gap: 18px; 94 | align-items: center; 95 | } 96 | 97 | .card-content > i { 98 | font-size: 10rem; 99 | color: rgba(255, 255, 255, 0.5); 100 | } 101 | 102 | .card-content > p { 103 | color: rgba(255, 255, 255, 0.5); 104 | } 105 | 106 | .card-content > a { 107 | width: 90%; 108 | padding-block: 0.8rem; 109 | background-color: rgba(255, 255, 255, 0.05); 110 | border: 1px solid rgba(255, 255, 255, 0.1); 111 | border-radius: 6px; 112 | 113 | display: flex; 114 | justify-content: center; 115 | align-items: center; 116 | gap: 8px; 117 | z-index: 10; 118 | } 119 | .card-content > a:hover { 120 | background-color: rgba(255, 255, 255, 0.1); 121 | border: 1px solid rgba(255, 255, 255, 0.2); 122 | } 123 | -------------------------------------------------------------------------------- /Cards/02/cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Cards/02/cover.jpg -------------------------------------------------------------------------------- /Cards/02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Book 7 | 8 | 9 | 10 |
11 |
12 |

Hover to open

13 |

CSS Only
Book

14 |

@parth.webdev

15 |
16 |
17 |

Source code on
my GitHub!

18 |

Link in comments ↓

19 |
20 |
21 | 22 | -------------------------------------------------------------------------------- /Cards/02/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap"); 2 | 3 | *, 4 | *::after, 5 | *::before { 6 | box-sizing: border-box; 7 | margin: 0; 8 | padding: 0; 9 | } 10 | 11 | body { 12 | font-family: "Poppins", sans-serif; 13 | min-height: 100vh; 14 | background-color: #212121; 15 | display: grid; 16 | place-items: center; 17 | color: white; 18 | } 19 | 20 | .cover { 21 | top: 0; 22 | position: absolute; 23 | width: 100%; 24 | height: 100%; 25 | background-image: url(./cover.jpg); 26 | background-size: cover; 27 | transform-origin: 0; 28 | box-shadow: 1px 1px 12px #000; 29 | border-radius: 10px; 30 | display: flex; 31 | flex-direction: column; 32 | align-items: center; 33 | justify-content: space-around; 34 | transition: all 0.5s; 35 | cursor: pointer; 36 | } 37 | 38 | .book { 39 | position: relative; 40 | width: 260px; 41 | height: 350px; 42 | border-radius: 10px; 43 | background-color: #effffe; 44 | box-shadow: 1px 1px 12px #000; 45 | transform: preserve-3d; 46 | perspective: 2000px; 47 | display: flex; 48 | align-items: center; 49 | justify-content: center; 50 | color: #000; 51 | text-align: center; 52 | } 53 | 54 | .book:hover .cover { 55 | transition: all 0.5s; 56 | transform: rotatey(-80deg); 57 | } 58 | 59 | .cover > p { 60 | text-transform: uppercase; 61 | font-size: 13px; 62 | letter-spacing: 1px; 63 | } 64 | .cover > h2 > span { 65 | color: #1076c9; 66 | font-size: 28px; 67 | font-weight: bolder; 68 | } 69 | 70 | .content > p { 71 | margin-bottom: 10px; 72 | } 73 | -------------------------------------------------------------------------------- /Cards/03/assets/amsterdam.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Cards/03/assets/amsterdam.jpg -------------------------------------------------------------------------------- /Cards/03/assets/barcelona.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Cards/03/assets/barcelona.jpg -------------------------------------------------------------------------------- /Cards/03/assets/dubai.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Cards/03/assets/dubai.jpg -------------------------------------------------------------------------------- /Cards/03/assets/jaipur.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Cards/03/assets/jaipur.jpg -------------------------------------------------------------------------------- /Cards/03/assets/macau.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Cards/03/assets/macau.jpg -------------------------------------------------------------------------------- /Cards/03/assets/rome.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Cards/03/assets/rome.jpg -------------------------------------------------------------------------------- /Cards/03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Cards 03 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 | 18 |
19 |
20 |

Macau

21 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt numquam ea aperiam esse quia deserunt beatae ratione minus iusto eligendi.

22 |
23 |
24 |
25 |
26 | 27 |
28 |
29 |

Rome

30 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt numquam ea aperiam esse quia deserunt beatae ratione minus iusto eligendi.

31 |
32 |
33 |
34 |
35 | 36 |
37 |
38 |

Jaipur

39 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt numquam ea aperiam esse quia deserunt beatae ratione minus iusto eligendi.

40 |
41 |
42 |
43 |
44 | 45 |
46 |
47 |

Dubai

48 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt numquam ea aperiam esse quia deserunt beatae ratione minus iusto eligendi.

49 |
50 |
51 |
52 |
53 | 54 |
55 |
56 |

Barcelona

57 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt numquam ea aperiam esse quia deserunt beatae ratione minus iusto eligendi.

58 |
59 |
60 |
61 |
62 | 63 |
64 |
65 |

Amsterdam

66 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt numquam ea aperiam esse quia deserunt beatae ratione minus iusto eligendi.

67 |
68 |
69 |
70 | 71 |
72 |
73 | 74 | -------------------------------------------------------------------------------- /Cards/03/script.js: -------------------------------------------------------------------------------- 1 | const swiper = new Swiper(".swiper", { 2 | direction: "horizontal", 3 | slidesPerView: 1, 4 | effect: "fade", 5 | loop: true, 6 | speed: 300, 7 | 8 | pagination: { 9 | el: ".swiper-pagination", 10 | clickable: true, 11 | }, 12 | }); 13 | -------------------------------------------------------------------------------- /Cards/03/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap"); 2 | 3 | *, 4 | *::after, 5 | *::before { 6 | box-sizing: border-box; 7 | margin: 0; 8 | padding: 0; 9 | } 10 | 11 | body { 12 | font-family: "Montserrat", sans-serif; 13 | min-height: 100vh; 14 | background-image: linear-gradient( 15 | 45deg, 16 | rgba(255, 166, 0, 1) 14.7%, 17 | rgba(255, 99, 97, 1) 73% 18 | ); 19 | color: #212121; 20 | display: grid; 21 | place-items: center; 22 | } 23 | 24 | .swiper { 25 | width: 100%; 26 | max-width: 420px; 27 | height: 100%; 28 | max-height: 360px; 29 | background-color: #f3f6ff; 30 | border-radius: 10px; 31 | position: relative; 32 | cursor: grab; 33 | } 34 | 35 | .slide-image-wrapper { 36 | width: 100%; 37 | height: 190px; 38 | overflow: hidden; 39 | } 40 | .slide-image-wrapper > img { 41 | width: 100%; 42 | height: 100%; 43 | display: block; 44 | object-fit: cover; 45 | } 46 | 47 | .slide-content { 48 | padding: 20px; 49 | display: flex; 50 | flex-direction: column; 51 | gap: 0.6rem; 52 | } 53 | 54 | .slide-content > h2 { 55 | font-size: 22px; 56 | color: #26384e; 57 | } 58 | .slide-content > p { 59 | font-size: 15px; 60 | line-height: 22px; 61 | color: #6080a9; 62 | } 63 | 64 | .slide-content > * { 65 | opacity: 0; 66 | translate: 0 20px; 67 | } 68 | 69 | .swiper-slide-active > .slide-content > h2 { 70 | transition-delay: 0.1s; 71 | } 72 | .swiper-slide-active > .slide-content > p { 73 | transition-delay: 0.3s; 74 | } 75 | .swiper-slide-active > .slide-content > * { 76 | opacity: 1; 77 | translate: 0 0; 78 | transition: all 0.3s; 79 | } 80 | 81 | .swiper-pagination { 82 | position: absolute; 83 | bottom: 8px; 84 | left: 50% !important; 85 | transform: translatex(-50%); 86 | cursor: default; 87 | } 88 | 89 | .swiper-pagination-bullet { 90 | width: 8px; 91 | height: 8px; 92 | border-radius: 50%; 93 | opacity: 1; 94 | background: rgba(255, 185, 0, 0.3); 95 | display: inline-block; 96 | margin-right: 8px; 97 | cursor: pointer; 98 | transition: all 0.2s; 99 | } 100 | 101 | .swiper-pagination-bullet-active { 102 | background: #ffb200; 103 | width: 20px; 104 | border-radius: 10px; 105 | } 106 | -------------------------------------------------------------------------------- /Carousels/01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Carousel 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 |
18 | 19 |
20 |
21 | Image 22 |
23 |
24 | Image 25 |
26 |
27 | Image 28 |
29 |
30 | Image 31 |
32 | 33 | 34 | 37 | 40 |
41 | 42 | 43 | -------------------------------------------------------------------------------- /Carousels/01/script.js: -------------------------------------------------------------------------------- 1 | const slides = document.querySelectorAll("[data-slide]"); 2 | const buttons = document.querySelectorAll("[data-button]"); 3 | 4 | let currSlide = 0; 5 | let maxSlide = slides.length - 1; 6 | 7 | const updateCarousel = (number = 0) => { 8 | slides.forEach((slide, index) => { 9 | slide.style.transform = `translateX(${(index - number) * 100}%)`; 10 | }); 11 | }; 12 | 13 | buttons.forEach((button) => { 14 | button.addEventListener("click", () => { 15 | button.dataset.button == "next" ? ++currSlide : --currSlide; 16 | 17 | if (currSlide > maxSlide) { 18 | currSlide = 0; 19 | } else if (currSlide < 0) { 20 | currSlide = maxSlide; 21 | } 22 | 23 | updateCarousel(currSlide); 24 | }); 25 | }); 26 | 27 | updateCarousel(); 28 | -------------------------------------------------------------------------------- /Carousels/01/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | height: 100vh; 9 | background-color: #090909; 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | } 14 | 15 | .carousel-wrapper { 16 | width: 100%; 17 | max-width: 900px; 18 | aspect-ratio: 16/9; 19 | overflow: hidden; 20 | margin: 0 2rem; 21 | position: relative; 22 | } 23 | 24 | .slide { 25 | width: 100%; 26 | height: 100%; 27 | border-radius: 12px; 28 | position: absolute; 29 | transition: transform 300ms ease-out; 30 | } 31 | 32 | .slide img { 33 | width: 100%; 34 | height: 100%; 35 | object-fit: cover; 36 | border-radius: inherit; 37 | } 38 | 39 | .carousel-wrapper .btn { 40 | font-size: 2rem; 41 | background: rgba(0, 0, 0, 0.7); 42 | color: #00c2d8; 43 | padding: 8px 10px; 44 | border-radius: 50%; 45 | border: none; 46 | margin: 10px; 47 | position: absolute; 48 | transform: translateY(-50%); 49 | cursor: pointer; 50 | } 51 | .carousel-wrapper .btn:hover { 52 | background: rgba(0, 0, 0, 1); 53 | } 54 | 55 | .btn.previous { 56 | top: 50%; 57 | left: 0; 58 | } 59 | .btn.next { 60 | top: 50%; 61 | right: 0; 62 | } 63 | -------------------------------------------------------------------------------- /Carousels/02/imgs/01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Carousels/02/imgs/01.jpg -------------------------------------------------------------------------------- /Carousels/02/imgs/02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Carousels/02/imgs/02.jpg -------------------------------------------------------------------------------- /Carousels/02/imgs/03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Carousels/02/imgs/03.jpg -------------------------------------------------------------------------------- /Carousels/02/imgs/04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Carousels/02/imgs/04.jpg -------------------------------------------------------------------------------- /Carousels/02/imgs/05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Carousels/02/imgs/05.jpg -------------------------------------------------------------------------------- /Carousels/02/imgs/06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Carousels/02/imgs/06.jpg -------------------------------------------------------------------------------- /Carousels/02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Carousel 02 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 | -------------------------------------------------------------------------------- /Carousels/02/script.js: -------------------------------------------------------------------------------- 1 | const swiper = new Swiper(".swiper", { 2 | direction: "horizontal", 3 | loop: "infinite", 4 | 5 | // Pagination 6 | pagination: { 7 | el: ".swiper-pagination", 8 | clickable: true, 9 | }, 10 | 11 | // Navigation arrows 12 | navigation: { 13 | nextEl: ".swiper-button-next", 14 | prevEl: ".swiper-button-prev", 15 | }, 16 | }); 17 | -------------------------------------------------------------------------------- /Carousels/02/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: #222; 9 | height: 100vh; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | } 14 | 15 | .swiper { 16 | max-width: 800px; 17 | aspect-ratio: 16/9; 18 | } 19 | 20 | .swiper-slide { 21 | display: flex; 22 | justify-content: center; 23 | align-items: center; 24 | } 25 | 26 | .swiper-slide img { 27 | display: block; 28 | width: 100%; 29 | max-width: 660px; 30 | aspect-ratio: 16/9; 31 | object-fit: cover; 32 | } 33 | 34 | .swiper { 35 | --swiper-theme-color: cyan; 36 | --swiper-pagination-bullet-size: 10px; 37 | --swiper-pagination-bullet-inactive-color: #fff; 38 | --swiper-pagination-bullet-inactive-opacity: 0.4; 39 | } 40 | -------------------------------------------------------------------------------- /Dropdowns/01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Dropdowns 01 7 | 8 | 9 | 10 | 11 | 53 | 54 | -------------------------------------------------------------------------------- /Dropdowns/01/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"); 2 | 3 | *, 4 | *::before, 5 | *::after { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | font-family: Poppins, Arial, sans-serif; 13 | background-color: hsl(225, 6%, 9%); 14 | color: #d4dbe4; 15 | } 16 | 17 | a { 18 | text-decoration: none; 19 | } 20 | 21 | button { 22 | border: 0; 23 | background: none; 24 | font-family: inherit; 25 | color: inherit; 26 | cursor: pointer; 27 | } 28 | 29 | nav { 30 | display: flex; 31 | justify-content: space-between; 32 | align-items: center; 33 | background-color: #202124; 34 | padding: 0 40px; 35 | height: 4.8rem; 36 | } 37 | 38 | nav > .logo { 39 | font-size: 26px; 40 | font-weight: 600; 41 | color: #528fe0; 42 | } 43 | 44 | .dropdowns { 45 | display: flex; 46 | align-self: stretch; 47 | } 48 | .dropdown { 49 | position: relative; 50 | padding: 26px; 51 | } 52 | 53 | .dropdown-button { 54 | display: flex; 55 | align-items: center; 56 | height: 100%; 57 | gap: 8px; 58 | } 59 | .dropdown:hover { 60 | background-color: hsl(225, 30%, 12%); 61 | cursor: pointer; 62 | } 63 | .dropdown-button span { 64 | font-size: 16px; 65 | font-weight: 500; 66 | } 67 | .dropdown-button i { 68 | font-size: 14px; 69 | } 70 | 71 | .dropdown:hover > .dropdown-menu { 72 | display: flex; 73 | flex-direction: column; 74 | } 75 | 76 | .dropdown-menu { 77 | position: absolute; 78 | top: 100%; 79 | left: 0; 80 | 81 | min-width: 100%; 82 | background-color: #202124; 83 | display: none; 84 | } 85 | 86 | .dropdown-menu button { 87 | padding: 12px 24px; 88 | } 89 | 90 | .dropdown-menu button:hover { 91 | background-color: hsl(225, 6%, 20%); 92 | } 93 | -------------------------------------------------------------------------------- /Dropdowns/02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Dropdowns Part 02 7 | 8 | 9 | 10 | 11 | 12 | 46 | 47 | -------------------------------------------------------------------------------- /Dropdowns/02/script.js: -------------------------------------------------------------------------------- 1 | const dropdownToggle = document.querySelector(".dropdown-toggle"); 2 | 3 | dropdownToggle.addEventListener("click", () => { 4 | const dropdownMenu = document.querySelector("#dropdown > .menu"); 5 | 6 | dropdownMenu.classList.toggle("open"); 7 | dropdownToggle.classList.toggle("open"); 8 | }); 9 | -------------------------------------------------------------------------------- /Dropdowns/02/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"); 2 | 3 | *, 4 | *::before, 5 | *::after { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | font-family: "Roboto", sans-serif; 13 | height: 100vh; 14 | background-color: #fcfcf7; 15 | color: #1f1f09; 16 | display: flex; 17 | justify-content: center; 18 | align-items: center; 19 | } 20 | 21 | button, 22 | li, 23 | a { 24 | all: unset; 25 | box-sizing: border-box; 26 | } 27 | 28 | #dropdown { 29 | --border-radius: 6px; 30 | --shadow-color: 60deg 13% 61%; 31 | 32 | max-width: 220px; 33 | width: 100%; 34 | background-color: #fff; 35 | border-radius: var(--border-radius); 36 | position: relative; 37 | box-shadow: 0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.3), 38 | 2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.3), 39 | 5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.3); 40 | } 41 | 42 | /* DROPDOWN/SUBMENU ITEMS AND TOGGLES */ 43 | .dropdown-toggle, 44 | .menu-item, 45 | .submenu-item { 46 | width: 100%; 47 | padding: 12px 20px; 48 | cursor: pointer; 49 | } 50 | :is(.menu-item, .submenu-item):first-child { 51 | border-top-right-radius: inherit; 52 | border-top-left-radius: inherit; 53 | } 54 | :is(.menu-item, .submenu-item):last-child { 55 | border-bottom-right-radius: inherit; 56 | border-bottom-left-radius: inherit; 57 | } 58 | :is(.menu-item, .submenu-item):hover { 59 | background-color: #faf6ea; 60 | } 61 | 62 | .dropdown-toggle, 63 | .submenu-toggle { 64 | display: flex; 65 | justify-content: space-between; 66 | align-items: center; 67 | } 68 | 69 | .dropdown-toggle > span { 70 | color: #7b7b6e; 71 | } 72 | i { 73 | color: #db8400; 74 | transition: 0.25s ease; 75 | } 76 | .dropdown-toggle.open > i { 77 | rotate: 180deg; 78 | } 79 | 80 | /* MENU and SUBMENU */ 81 | .dropdown { 82 | position: relative; 83 | } 84 | 85 | .menu, 86 | .submenu { 87 | display: flex; 88 | flex-direction: column; 89 | background-color: #fff; 90 | border-radius: var(--border-radius); 91 | position: absolute; 92 | left: 0; 93 | opacity: 0; 94 | visibility: hidden; 95 | transition: all 0.3s ease; 96 | } 97 | .menu { 98 | width: 100%; 99 | translate: 0 -12px; 100 | } 101 | .menu.open { 102 | visibility: visible; 103 | opacity: 1; 104 | translate: 0 12px; 105 | } 106 | 107 | .submenu { 108 | width: max-content; 109 | visibility: hidden; 110 | opacity: 0; 111 | position: absolute; 112 | top: 0; 113 | left: 100%; 114 | translate: -12px 0; 115 | } 116 | 117 | .menu-item:hover > .submenu-toggle + .submenu { 118 | visibility: visible; 119 | opacity: 1; 120 | translate: 8px 0; 121 | } 122 | -------------------------------------------------------------------------------- /Footer/01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Footer - gsap.com 7 | 8 | 9 | 10 | 63 | 64 | -------------------------------------------------------------------------------- /Footer/01/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Gothic+A1:wght@300;400;500;600;700;800&display=swap"); 2 | 3 | *, 4 | *::before, 5 | *::after { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | font-family: "Gothic A1", sans-serif; 13 | height: 100vh; 14 | color: #0e100f; 15 | display: flex; 16 | justify-content: center; 17 | align-items: flex-end; 18 | } 19 | 20 | footer { 21 | width: 100%; 22 | background-color: #fffce1; 23 | } 24 | 25 | input, 26 | a, 27 | button, 28 | li { 29 | all: unset; 30 | font: inherit; 31 | } 32 | a, 33 | button { 34 | cursor: pointer; 35 | } 36 | 37 | footer { 38 | padding: 3.5rem clamp(3rem, 6vw, 14rem); 39 | } 40 | .footer-wrapper { 41 | max-width: 90rem; 42 | margin: 0 auto; 43 | } 44 | 45 | .footer-section { 46 | display: flex; 47 | justify-content: space-between; 48 | flex-wrap: wrap; 49 | gap: 3rem; 50 | } 51 | 52 | .footer-subscribe { 53 | max-width: clamp(20rem, 33vw, 33rem); 54 | } 55 | .footer-subscribe > h2 { 56 | font-size: clamp(1.5rem, 2.3vw, 2.25rem); 57 | } 58 | .input-box { 59 | display: flex; 60 | max-width: 100%; 61 | padding-block: 1rem; 62 | border-bottom: 1px solid black; 63 | margin-top: 3rem; 64 | } 65 | .input-box > input { 66 | flex-grow: 1; 67 | } 68 | 69 | .footer-nav { 70 | display: flex; 71 | flex-wrap: wrap; 72 | gap: clamp(3rem, 4vw, 7rem); 73 | } 74 | .footer-nav > div > h3 { 75 | font-size: 1rem; 76 | } 77 | .footer-nav > div > ul { 78 | display: flex; 79 | flex-direction: column; 80 | gap: 0.5rem; 81 | margin-top: 2rem; 82 | } 83 | .footer-nav > div li { 84 | font-size: 1.125rem; 85 | font-weight: 700; 86 | transition: opacity 200ms ease; 87 | } 88 | .footer-nav > div li:hover { 89 | opacity: 0.5; 90 | } 91 | 92 | .footer-copyright { 93 | display: flex; 94 | flex-wrap: wrap; 95 | font-size: 0.875rem; 96 | margin-top: 5rem; 97 | } 98 | 99 | @media (width <= 53rem) { 100 | .footer-subscribe { 101 | max-width: 100%; 102 | } 103 | } 104 | -------------------------------------------------------------------------------- /Gallery/01/imgs/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Gallery/01/imgs/1.jpg -------------------------------------------------------------------------------- /Gallery/01/imgs/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Gallery/01/imgs/2.jpg -------------------------------------------------------------------------------- /Gallery/01/imgs/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Gallery/01/imgs/3.jpg -------------------------------------------------------------------------------- /Gallery/01/imgs/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Gallery/01/imgs/4.jpg -------------------------------------------------------------------------------- /Gallery/01/imgs/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Gallery/01/imgs/5.jpg -------------------------------------------------------------------------------- /Gallery/01/imgs/image1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Gallery/01/imgs/image1.jpg -------------------------------------------------------------------------------- /Gallery/01/imgs/image2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Gallery/01/imgs/image2.jpg -------------------------------------------------------------------------------- /Gallery/01/imgs/image3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Gallery/01/imgs/image3.jpg -------------------------------------------------------------------------------- /Gallery/01/imgs/image4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Gallery/01/imgs/image4.jpg -------------------------------------------------------------------------------- /Gallery/01/imgs/image5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Gallery/01/imgs/image5.jpg -------------------------------------------------------------------------------- /Gallery/01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Gallery 02 7 | 8 | 9 | 10 |
11 |
12 | 13 |
14 |
15 | 16 |
17 |
18 | 19 |
20 |
21 | 22 |
23 |
24 | 25 |
26 |
27 | 28 | -------------------------------------------------------------------------------- /Gallery/01/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | background-color: #051215; 15 | } 16 | 17 | .container { 18 | width: 100%; 19 | max-width: 800px; 20 | height: 500px; 21 | display: flex; 22 | justify-content: center; 23 | align-items: stretch; 24 | gap: 1.25rem; 25 | transition: all 400ms; 26 | } 27 | 28 | .card { 29 | flex: 1; 30 | height: 100%; 31 | transition: all 400ms; 32 | cursor: pointer; 33 | } 34 | .card > img { 35 | display: block; 36 | width: 100%; 37 | height: 100%; 38 | object-fit: cover; 39 | } 40 | 41 | .card:nth-child(odd) { 42 | translate: 0 -20px; 43 | } 44 | .card:nth-child(even) { 45 | translate: 0 20px; 46 | } 47 | 48 | .container:hover .card:not(:hover) { 49 | filter: grayscale(100%); 50 | } 51 | .card:hover { 52 | flex: 3; 53 | } 54 | -------------------------------------------------------------------------------- /Gallery/02/imgs/01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Gallery/02/imgs/01.jpg -------------------------------------------------------------------------------- /Gallery/02/imgs/02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Gallery/02/imgs/02.jpg -------------------------------------------------------------------------------- /Gallery/02/imgs/03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Gallery/02/imgs/03.jpg -------------------------------------------------------------------------------- /Gallery/02/imgs/04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Gallery/02/imgs/04.jpg -------------------------------------------------------------------------------- /Gallery/02/imgs/05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Gallery/02/imgs/05.jpg -------------------------------------------------------------------------------- /Gallery/02/imgs/06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Gallery/02/imgs/06.jpg -------------------------------------------------------------------------------- /Gallery/02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bento Gallery Layout 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 | -------------------------------------------------------------------------------- /Gallery/02/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | background-color: #051115; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | } 16 | 17 | img { 18 | width: 100%; 19 | height: 100%; 20 | display: block; 21 | object-fit: cover; 22 | } 23 | 24 | .gallery { 25 | width: 100%; 26 | max-width: 900px; 27 | display: grid; 28 | grid-template-columns: repeat(5, 1fr); 29 | grid-template-rows: repeat(2, 180px); 30 | gap: 10px; 31 | margin-inline: 30px; 32 | } 33 | 34 | .gallery > .card { 35 | border-radius: 10px; 36 | overflow: hidden; 37 | border: 1px solid rgb(77, 77, 77); 38 | } 39 | 40 | .card:nth-child(1) { 41 | grid-area: 1 / 1 / 2 / 2; 42 | } 43 | 44 | .card:nth-child(2) { 45 | grid-area: 2 / 1 / span 1 / span 1; 46 | } 47 | 48 | .card:nth-child(3) { 49 | grid-area: 1 / 2 / span 2 / span 2; 50 | } 51 | 52 | .card:nth-child(4) { 53 | grid-area: 1 / 4 / span 1 / span 1; 54 | } 55 | 56 | .card:nth-child(5) { 57 | grid-area: 1 / 5 / span 1 / span 1; 58 | } 59 | 60 | .card:nth-child(6) { 61 | grid-area: 2 / 4 / span 1 / span 2; 62 | } 63 | 64 | @media screen and (max-width: 800px) { 65 | .gallery { 66 | grid-template-columns: repeat(3, 1fr); 67 | grid-template-rows: repeat(2, 220px); 68 | } 69 | 70 | .card:nth-child(1) { 71 | grid-area: 1 / 1 / span 1 / span 1; 72 | } 73 | 74 | .card:nth-child(2) { 75 | grid-area: 2 / 1 / span 1 / span 1; 76 | } 77 | 78 | .card:nth-child(3) { 79 | display: none; 80 | } 81 | 82 | .card:nth-child(4) { 83 | grid-area: 1 / 2 / span 1 / span 1; 84 | } 85 | 86 | .card:nth-child(5) { 87 | grid-area: 1 / 3 / span 1 / span 1; 88 | } 89 | 90 | .card:nth-child(6) { 91 | grid-area: 2 / 2 / span 1 / span 2; 92 | } 93 | } 94 | 95 | @media screen and (max-width: 500px) { 96 | .gallery { 97 | grid-template-columns: repeat(2, 1fr); 98 | grid-template-rows: repeat(2, 150px); 99 | } 100 | 101 | .card:nth-child(1) { 102 | grid-area: 1 / 1 / span 1 / span 1; 103 | } 104 | 105 | .card:nth-child(2) { 106 | grid-area: 2 / 1 / span 1 / span 1; 107 | } 108 | 109 | .card:nth-child(3) { 110 | display: none; 111 | } 112 | 113 | .card:nth-child(4) { 114 | grid-area: 1 / 2 / span 1 / span 1; 115 | } 116 | 117 | .card:nth-child(5) { 118 | display: none; 119 | } 120 | 121 | .card:nth-child(6) { 122 | grid-area: 2 / 2 / span 1 / span 1; 123 | } 124 | } 125 | -------------------------------------------------------------------------------- /Inputs/01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Input Label Animation 7 | 8 | 9 | 10 |
11 | 12 | 13 |
14 | 15 | -------------------------------------------------------------------------------- /Inputs/01/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap"); 2 | 3 | *, 4 | *::before, 5 | *::after { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | font-family: Inter, sans-serif; 13 | height: 100vh; 14 | background-color: #1a1a1a; 15 | display: flex; 16 | justify-content: center; 17 | align-items: center; 18 | } 19 | 20 | .input-group { 21 | font-size: 1.25rem; 22 | position: relative; 23 | --primary: #2196f3; 24 | } 25 | 26 | .input { 27 | all: unset; 28 | color: #fefefe; 29 | padding: 1rem; 30 | border: 1px solid #9e9e9e; 31 | border-radius: 10px; 32 | transition: 150ms cubic-bezier(0.4, 0, 0.2, 1); 33 | } 34 | 35 | .label { 36 | position: absolute; 37 | top: 1rem; 38 | left: 1rem; 39 | color: #d4d4d4; 40 | pointer-events: none; 41 | transition: 150ms cubic-bezier(0.4, 0, 0.2, 1); 42 | } 43 | 44 | .input:focus { 45 | border: 1px solid var(--primary); 46 | } 47 | 48 | .input:is(:focus, :valid) ~ label { 49 | transform: translateY(-120%) scale(0.7); 50 | background-color: #1a1a1a; 51 | padding-inline: 0.3rem; 52 | color: var(--primary); 53 | } 54 | -------------------------------------------------------------------------------- /Inputs/02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Inputs Part 02 7 | 8 | 9 | 10 |
11 | 12 | 13 |
14 |
15 | 16 | -------------------------------------------------------------------------------- /Inputs/02/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap"); 2 | 3 | *, 4 | *::before, 5 | *::after { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | font-family: Inter, sans-serif; 13 | height: 100vh; 14 | background-color: #1a1a1a; 15 | color: #dedede; 16 | display: flex; 17 | justify-content: center; 18 | align-items: center; 19 | } 20 | 21 | .input-wrapper { 22 | position: relative; 23 | font-size: 20px; 24 | } 25 | 26 | .input-wrapper input { 27 | all: unset; 28 | width: 100%; 29 | padding: 10px 0; 30 | border-bottom: 2px solid #dedede; 31 | } 32 | 33 | .input-wrapper label { 34 | position: absolute; 35 | bottom: 10px; 36 | left: 0; 37 | color: #999999; 38 | pointer-events: none; 39 | transition: all 0.3s ease; 40 | } 41 | 42 | .input-wrapper input:is(:focus, :valid) ~ label { 43 | bottom: 100%; 44 | font-size: 16px; 45 | color: #666; 46 | } 47 | 48 | .input-wrapper > .underline { 49 | position: absolute; 50 | bottom: 0; 51 | left: 0; 52 | width: 100%; 53 | height: 2px; 54 | background-color: #2196f3; 55 | scale: 0 1; 56 | transition: 0.3s; 57 | } 58 | 59 | .input-wrapper input:focus ~ .underline { 60 | scale: 1 1; 61 | } 62 | -------------------------------------------------------------------------------- /Inputs/03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Inputs 03 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | -------------------------------------------------------------------------------- /Inputs/03/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap"); 2 | 3 | *, 4 | *::before, 5 | *::after { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | font-family: Inter, sans-serif; 13 | height: 100vh; 14 | background-color: hsl(262, 30%, 8%); 15 | color: #fbfcfd; 16 | display: flex; 17 | justify-content: center; 18 | align-items: center; 19 | } 20 | 21 | input { 22 | all: unset; 23 | } 24 | 25 | .input-wrapper { 26 | width: 100%; 27 | max-width: 400px; 28 | display: flex; 29 | align-items: center; 30 | background: hsl(231, 14%, 10%); 31 | border: 2px solid #2b2c37; 32 | border-radius: 10px; 33 | 34 | box-shadow: hsla(0, 0%, 0%, 0.1) 0px 20px 25px -5px, 35 | #0000000a 0px 10px 10px -5px; 36 | transition: all 0.35s ease-out; 37 | position: relative; 38 | } 39 | 40 | .input { 41 | width: calc(100% - 70px); 42 | font: inherit; 43 | font-size: 18px; 44 | padding: 1rem; 45 | } 46 | .input::placeholder { 47 | color: #727884; 48 | } 49 | 50 | .input-wrapper:has(input:focus) { 51 | border: 2px solid #de55de; 52 | box-shadow: 0 0 120px hsl(300 67% 60% / 0.5); 53 | } 54 | 55 | .input-wrapper > svg { 56 | position: absolute; 57 | right: 1rem; 58 | width: 28px; 59 | flex-shrink: 0; 60 | transition: 0.25s; 61 | } 62 | 63 | svg > path { 64 | fill: none; 65 | stroke: #727884; 66 | } 67 | 68 | .input:focus + svg > path { 69 | stroke: none; 70 | fill: hsl(328, 73%, 72%); 71 | } 72 | .input:focus + svg { 73 | scale: 1.2; 74 | } 75 | -------------------------------------------------------------------------------- /Log in/01/apple.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Log in/01/google.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Log in/01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Log in - Part 01 7 | 8 | 9 | 10 | 11 |
12 |
13 | 16 | 19 |
20 | 21 |
22 |

Log in to Twitter

23 | 24 |
25 | 29 | 33 |
34 | 35 |
36 |

or

37 |
38 | 39 | 43 | 44 |
45 | 46 | 47 |
48 |
49 | 52 |
53 | 54 | -------------------------------------------------------------------------------- /Log in/01/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"); 2 | 3 | *, 4 | *::before, 5 | *::after { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | font-family: Roboto, system-ui, sans-serif; 13 | background-color: #242d34; 14 | color: #e7e9ea; 15 | height: 100vh; 16 | display: flex; 17 | justify-content: center; 18 | align-items: center; 19 | } 20 | 21 | button { 22 | font-family: inherit; 23 | border: 0; 24 | color: inherit; 25 | background: none; 26 | cursor: pointer; 27 | } 28 | a { 29 | text-decoration: none; 30 | color: inherit; 31 | } 32 | 33 | .container { 34 | max-width: 600px; 35 | width: 100%; 36 | background-color: #000; 37 | padding: 24px 20px; 38 | border-radius: 16px; 39 | margin-inline: 2rem; 40 | 41 | display: flex; 42 | flex-direction: column; 43 | justify-content: space-between; 44 | } 45 | 46 | .header { 47 | color: #d6d9db; 48 | width: 100%; 49 | display: flex; 50 | justify-content: center; 51 | align-items: center; 52 | position: relative; 53 | } 54 | .close-button { 55 | position: absolute; 56 | top: 0; 57 | left: 0; 58 | font-size: 20px; 59 | padding: 7px 11px; 60 | border-radius: 50%; 61 | } 62 | .close-button:hover { 63 | background-color: #212222; 64 | } 65 | .logo { 66 | font-size: 30px; 67 | } 68 | 69 | .content { 70 | width: 300px; 71 | text-align: center; 72 | margin-inline: auto; 73 | } 74 | .content h1 { 75 | margin-block: 28px; 76 | } 77 | 78 | .action-buttons { 79 | display: flex; 80 | flex-direction: column; 81 | gap: 24px; 82 | margin-top: 36px; 83 | } 84 | .primary-button, 85 | .secondary-button { 86 | width: 100%; 87 | border-radius: 20px; 88 | padding: 8px 0; 89 | font-size: 15px; 90 | font-weight: 500; 91 | } 92 | .primary-button { 93 | background-color: #fff; 94 | color: #0f1419; 95 | } 96 | .primary-button:hover { 97 | background-color: #e6e6e6; 98 | } 99 | .secondary-button { 100 | background-color: transparent; 101 | color: #fff; 102 | border: 1px solid #536471; 103 | } 104 | .secondary-button:hover { 105 | background-color: #181919; 106 | } 107 | .sign-in-button { 108 | display: flex; 109 | justify-content: center; 110 | align-items: center; 111 | gap: 8px; 112 | } 113 | .sign-in-button object { 114 | width: 24px; 115 | height: 24px; 116 | } 117 | 118 | .divider { 119 | width: 100%; 120 | margin-block: 20px; 121 | position: relative; 122 | } 123 | .divider p::before, 124 | .divider p::after { 125 | content: ""; 126 | position: absolute; 127 | top: 50%; 128 | transform: translateY(-50%); 129 | width: 45%; 130 | height: 1px; 131 | background-color: #333639; 132 | } 133 | .divider p::before { 134 | left: 0; 135 | } 136 | .divider p::after { 137 | right: 0; 138 | } 139 | 140 | .email-log-in { 141 | width: 100%; 142 | position: relative; 143 | } 144 | .email-log-in input { 145 | width: 100%; 146 | border-radius: 6px; 147 | background-color: transparent; 148 | border: 1px solid #333639; 149 | outline: none; 150 | padding: 20px 10px; 151 | color: white; 152 | font-size: 18px; 153 | font-family: "Roboto"; 154 | } 155 | input::placeholder { 156 | opacity: 0; 157 | } 158 | input + label { 159 | position: absolute; 160 | top: 20px; 161 | left: 10px; 162 | color: #71767b; 163 | font-size: 18px; 164 | pointer-events: none; 165 | transition: 200ms ease; 166 | } 167 | input:focus { 168 | outline: 1px solid #1d9bf0; 169 | } 170 | input:focus + label { 171 | color: #1d9bf0; 172 | } 173 | input:not(:placeholder-shown) + label, 174 | input:focus + label { 175 | top: 6px; 176 | left: 10px; 177 | font-size: 12px; 178 | } 179 | 180 | .sign-up { 181 | margin-top: 32px; 182 | font-weight: 300; 183 | text-align: center; 184 | } 185 | .sign-up a { 186 | color: #1d9bf0; 187 | } 188 | .sign-up a:hover { 189 | text-decoration: underline; 190 | text-decoration-color: #1d9bf0; 191 | } 192 | -------------------------------------------------------------------------------- /Log in/02/google.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Log in/02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
11 | 12 |
13 |
14 | 15 |
16 | 17 |
18 |

Empowering Minds Through Digital Education.

19 |

Every step forward is a step towards knowledge. Embrace the journey.

20 |
21 |
22 | 23 |
24 |
25 |
26 | 27 | Logo 28 | 29 |
30 | 31 |

Welcome Back! 👋🏻

32 |

Enter your credentials to access your account.

33 | 34 |
35 |
36 | 37 | 38 |
39 |
40 | 41 | 42 |
43 |
44 | 45 |
46 |
47 | 48 | 49 |
50 | 51 | Forgot password? 52 |
53 | 54 | 55 | 56 |
or
57 | 58 | 62 |
63 |
64 |
65 | 66 | -------------------------------------------------------------------------------- /Log in/02/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Log in/02/logo.png -------------------------------------------------------------------------------- /Log in/02/mesh-gradient.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Log in/02/mesh-gradient.png -------------------------------------------------------------------------------- /Media/01/images/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Media/01/images/img1.jpg -------------------------------------------------------------------------------- /Media/01/images/img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Media/01/images/img2.jpg -------------------------------------------------------------------------------- /Media/01/images/img3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Media/01/images/img3.jpg -------------------------------------------------------------------------------- /Media/01/images/img4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Media/01/images/img4.jpg -------------------------------------------------------------------------------- /Media/01/images/img5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Media/01/images/img5.jpg -------------------------------------------------------------------------------- /Media/01/images/img6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Media/01/images/img6.jpg -------------------------------------------------------------------------------- /Media/01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Image Gallery 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | -------------------------------------------------------------------------------- /Media/01/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | background-color: #ecf4fb; 11 | min-height: 100vh; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | } 16 | 17 | .img-gallery { 18 | width: 80%; 19 | margin: 5rem; 20 | display: grid; 21 | grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 22 | grid-auto-rows: minmax(300px, 1fr); 23 | gap: 30px; 24 | } 25 | 26 | .img-gallery > img { 27 | display: block; 28 | max-width: 100%; 29 | height: 100%; 30 | object-fit: cover; 31 | border-radius: 8px; 32 | transition: 0.6s ease; 33 | } 34 | 35 | .img-gallery img:hover { 36 | scale: 0.85; 37 | box-shadow: 10px 26px 60px rgba(68, 77, 136, 0.3); 38 | } 39 | -------------------------------------------------------------------------------- /Media/02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Staggered Effect with Anime.js 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |

Staggered Animation with Anime.js

17 | 18 | 19 | -------------------------------------------------------------------------------- /Media/02/script.js: -------------------------------------------------------------------------------- 1 | const tiles = document.querySelector(".tiles"); 2 | let toggled = false; 3 | 4 | const createTile = (index) => { 5 | const tileEl = document.createElement("div"); 6 | tileEl.classList.add("tile"); 7 | 8 | tileEl.addEventListener("click", () => effect(index)); 9 | 10 | return tileEl; 11 | }; 12 | 13 | const createGrid = () => { 14 | window.innerHTML = ""; 15 | 16 | const size = document.body.clientWidth > 800 ? 100 : 50; 17 | columns = Math.floor(document.body.clientWidth / size); 18 | rows = Math.floor(document.body.clientHeight / size); 19 | 20 | const numberOfTiles = columns * rows; 21 | 22 | Array.from(Array(numberOfTiles)).map((tile, index) => { 23 | tiles.style.setProperty("--columns", columns); 24 | tiles.style.setProperty("--rows", rows); 25 | 26 | tiles.appendChild(createTile(index)); 27 | }); 28 | }; 29 | 30 | const effect = (index) => { 31 | toggled = !toggled; 32 | 33 | const grid = anime({ 34 | duration: 1000, 35 | targets: ".tile", 36 | opacity: toggled ? 0 : 1, 37 | delay: anime.stagger(50, { 38 | grid: [columns, rows], 39 | from: index, 40 | }), 41 | }); 42 | 43 | const title = anime({ 44 | duration: 5000, 45 | targets: ".title", 46 | opacity: toggled ? 0 : 1, 47 | }); 48 | }; 49 | 50 | createGrid(); 51 | window.addEventListener("resize", createGrid); 52 | -------------------------------------------------------------------------------- /Media/02/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | width: 100vw; 12 | background: linear-gradient(to bottom right, #fbda74, #f69e83); 13 | overflow: hidden; 14 | } 15 | 16 | .tiles { 17 | width: calc(100% - 1px); 18 | height: calc(100% - 1px); 19 | display: grid; 20 | grid-template-columns: repeat(var(--columns), 1fr); 21 | grid-template-rows: repeat(var(--rows), 1fr); 22 | 23 | position: relative; 24 | z-index: 2; 25 | } 26 | 27 | .tile { 28 | position: relative; 29 | cursor: pointer; 30 | } 31 | .tile::before { 32 | content: ""; 33 | position: absolute; 34 | inset: 1px; 35 | background-color: #0f0f0f; 36 | } 37 | 38 | .tile:hover::before { 39 | opacity: 0.8; 40 | } 41 | 42 | .title { 43 | font-family: "Clash Display"; 44 | font-size: 6.5vw; 45 | text-align: center; 46 | color: white; 47 | position: absolute; 48 | top: 50%; 49 | left: 50%; 50 | transform: translate(-50%, -50%); 51 | z-index: 3; 52 | pointer-events: none; 53 | } 54 | 55 | .title span { 56 | color: #ad1deb; 57 | } 58 | -------------------------------------------------------------------------------- /Menus/01/assets/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /Menus/01/assets/hero-image.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Menus/01/assets/hero-image.webp -------------------------------------------------------------------------------- /Menus/01/assets/menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /Menus/01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Menus 01 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | 23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /Menus/01/script.js: -------------------------------------------------------------------------------- 1 | const menuBtn = document.querySelector(".menu-btn"); 2 | 3 | menuBtn.addEventListener("click", () => { 4 | document.body.classList.toggle("open"); 5 | }); 6 | -------------------------------------------------------------------------------- /Menus/01/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: Ubuntu; 11 | display: grid; 12 | place-items: center; 13 | } 14 | 15 | button { 16 | border: 0; 17 | outline: none; 18 | background: none; 19 | } 20 | 21 | section { 22 | width: 100vw; 23 | height: 100vh; 24 | background-image: url("./assets/hero-image.webp"); 25 | background-size: cover; 26 | overflow: hidden; 27 | } 28 | 29 | .menu-btn { 30 | position: fixed; 31 | top: 20px; 32 | left: 20px; 33 | width: 40px; 34 | height: 40px; 35 | background-image: url("./assets/menu.svg"); 36 | background-size: cover; 37 | cursor: pointer; 38 | z-index: 3; 39 | } 40 | body.open .menu-btn { 41 | background-image: url("./assets/close.svg"); 42 | } 43 | .menu { 44 | position: fixed; 45 | inset: 0; 46 | display: grid; 47 | place-items: center; 48 | z-index: 2; 49 | } 50 | 51 | .menu nav { 52 | display: flex; 53 | flex-direction: column; 54 | justify-content: center; 55 | align-items: center; 56 | gap: 24px; 57 | visibility: hidden; 58 | } 59 | body.open .menu nav { 60 | visibility: visible; 61 | } 62 | 63 | .menu nav a { 64 | text-decoration: none; 65 | font-size: 28px; 66 | font-weight: 700; 67 | color: white; 68 | padding: 10px 20px; 69 | text-align: center; 70 | opacity: 1; 71 | transition: 0.25s; 72 | } 73 | body.open .menu a { 74 | animation: show 0.3s backwards; 75 | } 76 | .menu nav:hover a:not(:hover) { 77 | opacity: 0.5; 78 | } 79 | 80 | @keyframes show { 81 | 0% { 82 | opacity: 0; 83 | translate: 0 -30px; 84 | } 85 | 100% { 86 | opacity: 1; 87 | translate: 0 0; 88 | } 89 | } 90 | 91 | .backdrop { 92 | position: fixed; 93 | top: 20px; 94 | left: 20px; 95 | height: 100vh; 96 | aspect-ratio: 1 / 1; 97 | translate: -50% -50%; 98 | scale: 0; 99 | opacity: 0; 100 | background-color: rgba(0, 0, 0, 0.8); 101 | border-radius: 50%; 102 | z-index: 1; 103 | transition: all 0.6s; 104 | } 105 | body.open .backdrop { 106 | opacity: 1; 107 | scale: 5; 108 | } 109 | -------------------------------------------------------------------------------- /Menus/02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSS Menus 01 8 | 9 | 10 | 11 | 12 | 24 | 27 | 28 |
29 | 40 | 41 |
42 |

Menus Part 02

43 |

Menu pop up on scroll using GSAP.

44 |
45 |
46 | 47 |
48 |

Section 2

49 |

Menu icon will Pop up in the top-right

50 |
51 | 52 |
53 |

Section 3

54 |
55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /Menus/02/script.js: -------------------------------------------------------------------------------- 1 | const menuBtn = document.querySelector(".menu-btn"); 2 | const menu = document.querySelector(".menu"); 3 | const menuItems = document.querySelectorAll(".menu-item"); 4 | 5 | gsap.registerPlugin(ScrollTrigger); 6 | 7 | const tl = gsap.timeline({ duration: 0.8, ease: "power3.out" }); 8 | 9 | function openMenu() { 10 | menu.classList.toggle("active"); 11 | document.body.classList.toggle("sidebar-open"); 12 | 13 | tl.to(menu, { 14 | x: menu.classList.contains("active") ? "0" : "100%", 15 | }); 16 | 17 | gsap.fromTo( 18 | menuItems, 19 | { 20 | x: 150, 21 | }, 22 | { 23 | x: 0, 24 | duration: 0.2, 25 | stagger: 0.05, 26 | ease: "power4.out", 27 | } 28 | ); 29 | } 30 | 31 | gsap.to(menuBtn, { 32 | scrollTrigger: { 33 | trigger: document.documentElement, 34 | start: 0, 35 | end: window.innerHeight, 36 | onLeave: () => { 37 | gsap.to(menuBtn, { scale: 1 }); 38 | }, 39 | onEnterBack: () => { 40 | gsap.to(menuBtn, { scale: 0 }); 41 | }, 42 | }, 43 | duration: 0.25, 44 | ease: "power3.out", 45 | }); 46 | 47 | menuBtn.addEventListener("click", openMenu); 48 | -------------------------------------------------------------------------------- /Menus/02/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: Inter; 11 | color: black; 12 | } 13 | ::-webkit-scrollbar { 14 | display: none; 15 | } 16 | 17 | button { 18 | border: 0; 19 | outline: none; 20 | background: none; 21 | color: inherit; 22 | } 23 | 24 | a { 25 | text-decoration: none; 26 | color: inherit; 27 | } 28 | 29 | .container { 30 | height: 100vh; 31 | background-color: #101010; 32 | display: flex; 33 | flex-direction: column; 34 | } 35 | 36 | .landing { 37 | flex: 1; 38 | display: flex; 39 | flex-direction: column; 40 | gap: 24px; 41 | justify-content: center; 42 | align-items: center; 43 | } 44 | section h1 { 45 | color: #d7d7d7; 46 | font-size: 64px; 47 | font-weight: 700; 48 | } 49 | section p { 50 | font-size: 18px; 51 | color: #949494; 52 | } 53 | .section { 54 | height: 100vh; 55 | display: flex; 56 | flex-direction: column; 57 | justify-content: center; 58 | align-items: center; 59 | text-align: center; 60 | } 61 | .section h1 { 62 | color: black; 63 | } 64 | 65 | .navbar { 66 | display: flex; 67 | justify-content: space-between; 68 | align-items: center; 69 | padding: 35px; 70 | color: white; 71 | } 72 | .navbar .nav-logo { 73 | font-size: 22px; 74 | } 75 | .nav-items { 76 | display: flex; 77 | gap: 40px; 78 | } 79 | .nav-item:hover { 80 | color: #949494; 81 | } 82 | 83 | .menu-btn { 84 | position: fixed; 85 | top: 24px; 86 | right: 24px; 87 | 88 | width: 68px; 89 | height: 68px; 90 | display: flex; 91 | justify-content: center; 92 | align-items: center; 93 | background-color: #191b1d; 94 | border-radius: 50%; 95 | color: white; 96 | cursor: pointer; 97 | scale: 0; 98 | transition: background-color 0.3s ease; 99 | z-index: 3; 100 | } 101 | .menu-btn i { 102 | font-size: 24px; 103 | } 104 | 105 | .menu { 106 | position: fixed; 107 | top: 0; 108 | right: 0; 109 | height: 100vh; 110 | background-color: #1c1d20; 111 | color: white; 112 | padding: 20vh 11vw 8vh 11vw; 113 | display: flex; 114 | flex-direction: column; 115 | font-size: 48px; 116 | transform: translateX(100%); 117 | z-index: 2; 118 | } 119 | .menu-header { 120 | font-size: 12px; 121 | color: #7f7f81; 122 | padding: 16px 0; 123 | border-bottom: 1px solid #7f7f81; 124 | margin-bottom: 56px; 125 | text-transform: uppercase; 126 | letter-spacing: 1px; 127 | } 128 | .menu-items { 129 | display: flex; 130 | flex-direction: column; 131 | gap: 28px; 132 | } 133 | .menu-item { 134 | transition: transform 0.3s ease; 135 | } 136 | .menu-item:hover { 137 | transform: translateY(-10px); 138 | } 139 | 140 | .menu.active + .menu-btn { 141 | background-color: #455ce9; 142 | } 143 | -------------------------------------------------------------------------------- /Menus/03/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Menus/03/background.jpg -------------------------------------------------------------------------------- /Menus/03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Menus Part 03 7 | 8 | 9 | 10 | 11 | 12 | 13 | 16 | 17 |
18 | 25 |
26 | 27 |
28 |

Fullscreen Overlay Navigation
with Neon Menu Buttons

29 |
30 | 31 | -------------------------------------------------------------------------------- /Menus/03/script.js: -------------------------------------------------------------------------------- 1 | const menuBtn = document.querySelector(".menu-btn"); 2 | const wrapper = document.querySelector(".wrapper"); 3 | 4 | menuBtn.addEventListener("click", function () { 5 | menuBtn.querySelector("i").classList.toggle("fa-xmark"); 6 | 7 | wrapper.classList.toggle("open"); 8 | }); 9 | -------------------------------------------------------------------------------- /Menus/03/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap"); 2 | 3 | *, 4 | *::before, 5 | *::after { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | button, 12 | a { 13 | all: unset; 14 | cursor: pointer; 15 | } 16 | 17 | body { 18 | font-family: Oswald, sans-serif; 19 | height: 100vh; 20 | } 21 | 22 | .wrapper { 23 | position: fixed; 24 | top: 0; 25 | left: 0; 26 | height: 100%; 27 | width: 100%; 28 | background: black; 29 | clip-path: circle(25px at calc(100% - 45px) 45px); 30 | transition: all 0.3s ease-in-out; 31 | z-index: 2; 32 | } 33 | 34 | .wrapper.open { 35 | clip-path: circle(75%); 36 | } 37 | 38 | .wrapper ul { 39 | position: absolute; 40 | z-index: 100; 41 | width: 100%; 42 | height: 100%; 43 | color: black; 44 | list-style: none; 45 | 46 | display: flex; 47 | flex-direction: column; 48 | justify-content: center; 49 | align-items: center; 50 | gap: 24px; 51 | } 52 | 53 | .link { 54 | font-size: 30px; 55 | font-weight: 500; 56 | padding: 5px 30px; 57 | color: #fff; 58 | background: rgba(0, 0, 0, 0.8); 59 | border-radius: 50px; 60 | position: relative; 61 | } 62 | 63 | .link::after { 64 | position: absolute; 65 | content: ""; 66 | background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0); 67 | width: 104%; 68 | height: 110%; 69 | left: -2%; 70 | top: -5%; 71 | border-radius: 50px; 72 | transform: scaleY(0); 73 | z-index: -1; 74 | animation: rotate 1.5s linear infinite; 75 | transition: transform 0.3s ease; 76 | } 77 | .link:hover::after { 78 | transform: scaleY(1); 79 | } 80 | 81 | .menu-btn { 82 | position: absolute; 83 | right: 20px; 84 | top: 20px; 85 | height: 50px; 86 | width: 50px; 87 | color: #000; 88 | background: #fff; 89 | border-radius: 50%; 90 | font-size: 20px; 91 | z-index: 10; 92 | 93 | display: flex; 94 | justify-content: center; 95 | align-items: center; 96 | } 97 | 98 | @keyframes rotate { 99 | 0% { 100 | filter: hue-rotate(0deg); 101 | } 102 | 100% { 103 | filter: hue-rotate(360deg); 104 | } 105 | } 106 | 107 | section { 108 | height: 100vh; 109 | background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), 110 | url("./background.jpg"); 111 | background-size: cover; 112 | display: flex; 113 | justify-content: center; 114 | align-items: center; 115 | color: white; 116 | text-align: center; 117 | } 118 | 119 | section h1 { 120 | font-size: 52px; 121 | font-weight: 500; 122 | } 123 | -------------------------------------------------------------------------------- /Menus/04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Menus 04 7 | 8 | 9 | 10 | 29 | 30 | -------------------------------------------------------------------------------- /Menus/04/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap"); 2 | 3 | *, 4 | *::before, 5 | *::after { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | font-family: "Space Grotesk", sans-serif; 13 | height: 100vh; 14 | background-color: #0a050b; 15 | color: #fff; 16 | overflow: hidden; 17 | } 18 | 19 | a { 20 | text-decoration: none; 21 | color: inherit; 22 | } 23 | 24 | #menu { 25 | height: 100vh; 26 | display: flex; 27 | flex-direction: column; 28 | justify-content: center; 29 | align-items: center; 30 | } 31 | 32 | .menu-list { 33 | list-style: none; 34 | text-align: center; 35 | display: flex; 36 | flex-direction: column; 37 | gap: 1.5rem; 38 | position: relative; 39 | } 40 | 41 | .menu-list li a { 42 | font-size: 3rem; 43 | font-weight: 600; 44 | transition: 250ms; 45 | z-index: 2; 46 | } 47 | .menu-list:hover li a:not(:hover) { 48 | opacity: 0.3; 49 | } 50 | 51 | .menu-list li a::before { 52 | content: attr(data-text); 53 | position: absolute; 54 | top: 50%; 55 | left: 50%; 56 | transform: translate(-50%, -50%); 57 | font-size: clamp(4.6875rem, 1.9737rem + 10.8553vw, 15rem); 58 | font-weight: 700; 59 | text-transform: uppercase; 60 | letter-spacing: 500px; 61 | z-index: -1; 62 | color: hsl(0 0% 100% / 0.1); 63 | opacity: 0; 64 | transition: 0.5s ease; 65 | pointer-events: none; 66 | } 67 | 68 | .menu-list li a:hover::before { 69 | opacity: 1; 70 | letter-spacing: 10px; 71 | } 72 | 73 | .menu-list li:nth-child(1) a::before { 74 | color: hsl(267 60% 76% / 0.4); 75 | } 76 | .menu-list li:nth-child(2) a::before { 77 | color: hsl(174 60% 43% / 0.4); 78 | } 79 | .menu-list li:nth-child(3) a::before { 80 | color: hsl(258 60% 35% / 0.4); 81 | } 82 | .menu-list li:nth-child(4) a::before { 83 | color: hsl(349 52% 61% / 0.4); 84 | } 85 | .menu-list li:nth-child(5) a::before { 86 | color: hsl(29 60% 70% / 0.5); 87 | } 88 | -------------------------------------------------------------------------------- /Menus/05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Creative Hover Menu 7 | 8 | 9 | 10 | 11 |
12 | 13 | 32 | 33 | -------------------------------------------------------------------------------- /Menus/05/script.js: -------------------------------------------------------------------------------- 1 | const cursor = document.querySelector(".cursor"); 2 | const links = document.querySelectorAll(".link"); 3 | 4 | window.addEventListener("mousemove", (e) => { 5 | cursor.animate( 6 | { 7 | left: `${e.clientX}px`, 8 | top: `${e.clientY}px`, 9 | }, 10 | { 11 | duration: 500, 12 | fill: "forwards", 13 | easing: "ease", 14 | } 15 | ); 16 | }); 17 | 18 | links.forEach((link) => { 19 | link.addEventListener("mouseenter", () => { 20 | cursor.classList.add("expand"); 21 | }); 22 | 23 | link.addEventListener("mouseleave", () => { 24 | cursor.classList.remove("expand"); 25 | }); 26 | }); 27 | -------------------------------------------------------------------------------- /Menus/05/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@800;900&display=swap"); 2 | 3 | *, 4 | *::before, 5 | *::after { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | font-family: Poppins, sans-serif; 13 | height: 100vh; 14 | background-color: #1f2029; 15 | 16 | display: flex; 17 | justify-content: center; 18 | align-items: center; 19 | } 20 | 21 | .cursor { 22 | position: fixed; 23 | width: 40px; 24 | height: 40px; 25 | border: 2px solid white; 26 | border-radius: 50%; 27 | transform: translate(-50%, -50%); 28 | pointer-events: none; 29 | mix-blend-mode: difference; 30 | z-index: 100; 31 | transition: all 300ms linear; 32 | } 33 | .expand { 34 | transform: scale(2) translate(-25%, -25%); 35 | background-color: white; 36 | border: none; 37 | } 38 | 39 | .nav ul { 40 | display: flex; 41 | flex-direction: column; 42 | justify-content: center; 43 | align-items: center; 44 | gap: 2rem; 45 | list-style: none; 46 | } 47 | 48 | .link { 49 | display: inline-block; 50 | font-size: 80px; 51 | font-weight: 900; 52 | line-height: 1; 53 | text-transform: uppercase; 54 | text-decoration: none; 55 | -webkit-text-stroke: 2px hsl(0 0% 100% / 0.4); 56 | text-stroke: 2px hsl(0 0% 100% / 0.4); 57 | -webkit-text-fill-color: transparent; 58 | text-fill-color: transparent; 59 | color: transparent; 60 | position: relative; 61 | overflow: hidden; 62 | } 63 | 64 | .link::before { 65 | content: attr(data-text); 66 | position: absolute; 67 | top: 0; 68 | left: 0; 69 | height: 0; 70 | -webkit-text-fill-color: white; 71 | text-fill-color: white; 72 | color: white; 73 | transition: 300ms linear; 74 | overflow: hidden; 75 | } 76 | 77 | .link:hover { 78 | -webkit-text-stroke: 0; 79 | text-stroke: 0; 80 | } 81 | 82 | .link:hover::before { 83 | height: 100%; 84 | } 85 | -------------------------------------------------------------------------------- /Modals/01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Modals 8 | 9 | 10 | 11 | 12 |
13 |

Easily build Modals with the HTML Dialog Element

14 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, veritatis, nemo nulla dolorum sint ad accusantium praesentium iste hic doloremque sequi enim fugit facere atque! Fugit quae molestiae porro amet rem! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, ut?

15 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos eligendi, ducimus neque fuga aliquid excepturi cum. Minima neque odit accusantium.

16 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos eligendi, ducimus neque fuga aliquid excepturi cum. Minima neque odit accusantium.

17 |

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut esse officia aut adipisci assumenda repellat laboriosam voluptate voluptates provident sapiente dignissimos maxime deleniti est eos distinctio dolore doloremque, ex reprehenderit.

18 | 19 |
20 | 21 | 22 |

Welcome to Our Newsletter

23 |

Stay up to date with the latest news and updates by subscribing to our newsletter.

24 |

We respect your privacy. Your information will not be shared with third parties.

25 |
26 | 27 | 28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /Modals/01/script.js: -------------------------------------------------------------------------------- 1 | const openBtn = document.querySelector("[data-open]"); 2 | const closeBtn = document.querySelector("[data-close]"); 3 | const modal = document.querySelector("#modal"); 4 | 5 | // Open the modal when the button is clicked 6 | openBtn.addEventListener("click", () => { 7 | modal.showModal(); 8 | }); 9 | 10 | // Close the modal when the close button is clicked 11 | closeBtn.addEventListener("click", () => { 12 | modal.close(); 13 | }); 14 | -------------------------------------------------------------------------------- /Modals/01/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Pathway+Extreme:wght@400;500;600;700&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: "Pathway Extreme", sans-serif; 11 | background-color: #161616; 12 | color: #9c9c9c; 13 | min-height: 100vh; 14 | margin: 3rem; 15 | display: flex; 16 | justify-content: center; 17 | } 18 | 19 | #modal { 20 | position: absolute; 21 | top: 50%; 22 | left: 50%; 23 | transform: translate(-50%, -50%); 24 | } 25 | 26 | #modal { 27 | max-width: 600px; 28 | padding: 1.5rem; 29 | border: 0; 30 | } 31 | 32 | #modal .modal-btn { 33 | padding: 10px 18px; 34 | margin-top: 10px; 35 | } 36 | #modal .modal-btn:first-child { 37 | /* Subscribe Button */ 38 | background-color: #00ce79; 39 | } 40 | #modal .modal-btn:last-child { 41 | /* Close Button */ 42 | border: 1px solid black; 43 | background-color: #fff; 44 | margin-left: 16px; 45 | } 46 | #modal .modal-btn:last-child:hover { 47 | color: white; 48 | background-color: #000; 49 | } 50 | 51 | #modal::backdrop { 52 | background: rgb(0 0 0 / 0.5); 53 | } 54 | 55 | #modal h2 { 56 | margin-bottom: 20px; 57 | } 58 | #modal p { 59 | font-weight: 500; 60 | margin-bottom: 10px; 61 | } 62 | 63 | button { 64 | border: none; 65 | font-family: inherit; 66 | cursor: pointer; 67 | } 68 | 69 | .content { 70 | max-width: 900px; 71 | } 72 | 73 | .content h1 { 74 | font-size: 40px; 75 | font-weight: 700; 76 | color: #fff; 77 | margin-bottom: 32px; 78 | } 79 | .content h1 span { 80 | color: #00ce79; 81 | } 82 | 83 | .content p { 84 | font-size: 18px; 85 | font-weight: 500; 86 | line-height: 1.5; 87 | margin-bottom: 20px; 88 | } 89 | 90 | .content .btn { 91 | font-weight: 600; 92 | font-size: 16px; 93 | padding: 16px 32px; 94 | background-color: #00ce79; 95 | margin-top: 20px; 96 | } 97 | -------------------------------------------------------------------------------- /Navbars/01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Navbars 01 8 | 9 | 10 | 11 | 12 | 30 | 31 | -------------------------------------------------------------------------------- /Navbars/01/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap"); 2 | 3 | *, 4 | *::before, 5 | *::after { 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | margin: 0; 11 | padding: 0; 12 | background-color: #010101; 13 | font-family: "Ubuntu", sans-serif; 14 | } 15 | 16 | a { 17 | text-decoration: none; 18 | } 19 | 20 | button { 21 | border: 0; 22 | outline: none; 23 | font-family: inherit; 24 | font-size: inherit; 25 | cursor: pointer; 26 | } 27 | 28 | .navbar { 29 | height: 90px; 30 | background-color: hsl(0, 0%, 10%); 31 | padding: 20px 40px; 32 | display: flex; 33 | justify-content: space-between; 34 | align-items: center; 35 | } 36 | 37 | .navbar .logo i { 38 | color: #0aa5ff; 39 | font-size: 22px; 40 | } 41 | 42 | .navbar .logo a { 43 | font-size: 24px; 44 | font-weight: 700; 45 | color: white; 46 | margin-left: 12px; 47 | } 48 | 49 | .menu { 50 | display: flex; 51 | align-items: center; 52 | gap: 32px; 53 | } 54 | 55 | .menu-links { 56 | display: flex; 57 | gap: 24px; 58 | border-right: 1px solid #999999; 59 | padding-inline: 24px; 60 | } 61 | 62 | .menu-links a { 63 | font-weight: 500; 64 | color: #999999; 65 | padding: 8px 16px; 66 | } 67 | .menu-links a:hover { 68 | color: white; 69 | } 70 | .log-in { 71 | font-weight: 500; 72 | padding: 12px 22px; 73 | background-color: transparent; 74 | color: #999999; 75 | border-radius: 10px; 76 | border: 2px solid #0aa5ff; 77 | transition: 0.2s; 78 | } 79 | .log-in:hover { 80 | background-color: #0aa5ff; 81 | color: white; 82 | } 83 | 84 | .menu-btn { 85 | font-size: 32px; 86 | color: white; 87 | display: none; 88 | cursor: pointer; 89 | } 90 | 91 | @media (max-width: 53rem) { 92 | .menu { 93 | display: none; 94 | } 95 | 96 | .menu-btn { 97 | display: block; 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /Navbars/02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Navbars - Part 02 7 | 8 | 9 | 10 | 11 | 22 | 23 |
24 |
25 |

HTML

26 |

Learn about HTML

27 |
28 |
29 |

CSS

30 |

Learn about CSS

31 |
32 |
33 |

JavaScript

34 |

Learn about JavaScript

35 |
36 |
37 |

React

38 |

Learn about React

39 |
40 |
41 |

Svelte

42 |

Learn about Svelte

43 |
44 |
45 | 46 | -------------------------------------------------------------------------------- /Navbars/02/script.js: -------------------------------------------------------------------------------- 1 | const nav = document.querySelector(".tabs-container"); 2 | 3 | const offset = nav.offsetTop; 4 | 5 | window.addEventListener("scroll", function () { 6 | if (window.scrollY >= offset) { 7 | nav.classList.add("sticky"); 8 | } else { 9 | nav.classList.remove("sticky"); 10 | } 11 | }); 12 | -------------------------------------------------------------------------------- /Navbars/02/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap"); 2 | 3 | *, 4 | *::before, 5 | *::after { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | font-family: Lato, sans-serif; 13 | background-color: #080a0d; 14 | color: #d4dbe4; 15 | } 16 | 17 | #header { 18 | height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | justify-content: center; 22 | align-items: center; 23 | padding-inline: 20px; 24 | position: relative; 25 | text-align: center; 26 | } 27 | 28 | h1 { 29 | font-size: 40px; 30 | letter-spacing: 10px; 31 | text-transform: uppercase; 32 | margin-bottom: 20px; 33 | } 34 | 35 | p { 36 | font-size: 18px; 37 | letter-spacing: 5px; 38 | } 39 | 40 | .tabs-container { 41 | position: absolute; 42 | bottom: 0; 43 | display: flex; 44 | width: 100%; 45 | height: 70px; 46 | background-color: #121922; 47 | box-shadow: 0 0 20px rgba(111, 111, 111, 0.2); 48 | } 49 | .sticky { 50 | position: fixed; 51 | top: 0; 52 | } 53 | 54 | .tabs-container a { 55 | text-decoration: none; 56 | color: #e8e8e8; 57 | display: flex; 58 | justify-content: center; 59 | align-items: center; 60 | flex: 1; 61 | letter-spacing: 2px; 62 | transition: all 0.3s ease; 63 | } 64 | 65 | .tabs-container a:hover { 66 | background-color: #4c79bd; 67 | } 68 | 69 | .section { 70 | height: 100vh; 71 | display: flex; 72 | flex-direction: column; 73 | justify-content: center; 74 | align-items: center; 75 | } 76 | -------------------------------------------------------------------------------- /Navbars/03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Navbars 03 8 | 9 | 10 | 11 | 12 | 13 | 31 | 32 |
33 |

Scroll Down to
hide Navigation

34 |
35 | 36 |
37 |

Scroll Up to
show Navigation

38 |
39 | 40 | -------------------------------------------------------------------------------- /Navbars/03/script.js: -------------------------------------------------------------------------------- 1 | const navBar = document.querySelector(".navbar"); 2 | let prevScrollPos = window.scrollY; 3 | 4 | window.addEventListener("scroll", function () { 5 | let currScrollPos = window.scrollY; 6 | 7 | if (currScrollPos > prevScrollPos) { 8 | navBar.style.transform = `translateY(-105%)`; 9 | } else { 10 | navBar.style.transform = `translateY(0%)`; 11 | } 12 | 13 | prevScrollPos = currScrollPos; 14 | }); 15 | -------------------------------------------------------------------------------- /Navbars/03/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap"); 2 | 3 | *, 4 | *::before, 5 | *::after { 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | margin: 0; 11 | padding: 0; 12 | background-color: #010101; 13 | font-family: "Ubuntu", sans-serif; 14 | } 15 | 16 | a, 17 | button { 18 | all: unset; 19 | cursor: pointer; 20 | } 21 | 22 | .navbar { 23 | position: fixed; 24 | top: 0; 25 | left: 0; 26 | width: 100%; 27 | height: 90px; 28 | background-color: hsl(0, 0%, 12%); 29 | padding: 20px 40px; 30 | display: flex; 31 | justify-content: space-between; 32 | align-items: center; 33 | transition: transform 0.5s ease; 34 | } 35 | 36 | .navbar .logo i { 37 | color: #0aa5ff; 38 | font-size: 22px; 39 | } 40 | 41 | .navbar .logo a { 42 | font-size: 24px; 43 | font-weight: 700; 44 | color: white; 45 | margin-left: 12px; 46 | } 47 | 48 | .menu { 49 | display: flex; 50 | align-items: center; 51 | gap: 32px; 52 | } 53 | 54 | .menu-links { 55 | display: flex; 56 | gap: 24px; 57 | border-right: 1px solid #999999; 58 | padding-inline: 24px; 59 | } 60 | 61 | .menu-links a { 62 | font-weight: 500; 63 | color: #999999; 64 | padding: 8px 16px; 65 | } 66 | .menu-links a:hover { 67 | color: white; 68 | } 69 | .log-in { 70 | font-weight: 500; 71 | padding: 12px 22px; 72 | background-color: transparent; 73 | color: #999999; 74 | border-radius: 10px; 75 | border: 2px solid #0aa5ff; 76 | transition: 0.2s; 77 | } 78 | .log-in:hover { 79 | background-color: #0aa5ff; 80 | color: white; 81 | } 82 | 83 | .menu-btn { 84 | font-size: 32px; 85 | color: white; 86 | display: none; 87 | cursor: pointer; 88 | } 89 | 90 | section { 91 | height: 100vh; 92 | display: flex; 93 | justify-content: center; 94 | align-items: center; 95 | color: rgb(169, 169, 169); 96 | } 97 | 98 | section > h1 { 99 | font-size: 4rem; 100 | font-weight: 500; 101 | text-align: center; 102 | text-wrap: balance; 103 | } 104 | 105 | @media (max-width: 53rem) { 106 | .menu { 107 | display: none; 108 | } 109 | 110 | .menu-btn { 111 | display: block; 112 | } 113 | } 114 | -------------------------------------------------------------------------------- /Navbars/04/assets/logo-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Navbars/04/assets/logo-1.png -------------------------------------------------------------------------------- /Navbars/04/assets/menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Navbars/04/assets/profile-pic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Navbars/04/assets/profile-pic.jpg -------------------------------------------------------------------------------- /Navbars/04/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"); 2 | 3 | *, 4 | *::before, 5 | *::after { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | padding: 0; 14 | background-color: #171717; 15 | color: #f2f2f2; 16 | font-family: "Montserrat", sans-serif; 17 | } 18 | 19 | a, 20 | button { 21 | all: unset; 22 | cursor: pointer; 23 | } 24 | 25 | ul { 26 | list-style: none; 27 | } 28 | 29 | .nav { 30 | padding: 0.8rem 1.5rem; 31 | display: flex; 32 | justify-content: space-between; 33 | align-items: center; 34 | } 35 | .nav-left, 36 | .nav-right { 37 | display: flex; 38 | justify-content: center; 39 | align-items: center; 40 | gap: 0.8rem; 41 | } 42 | .nav-brand { 43 | display: flex; 44 | justify-content: center; 45 | align-items: center; 46 | margin-right: 0.5rem; 47 | translate: 0 0.25rem; 48 | } 49 | .nav-brand > img { 50 | width: 5.3rem; 51 | } 52 | 53 | .nav-menu { 54 | display: flex; 55 | gap: 0.75rem; 56 | } 57 | 58 | .nav-link { 59 | font-size: 0.875rem; 60 | font-weight: 600; 61 | padding: 0.6rem 0.625rem; 62 | border-radius: 0.5rem; 63 | display: flex; 64 | justify-content: center; 65 | align-items: center; 66 | transition: all 0.15s; 67 | } 68 | .nav-link > svg { 69 | font-weight: 600; 70 | width: 14px; 71 | height: 14px; 72 | margin-left: 4px; 73 | } 74 | .nav-link:hover { 75 | background-color: #212121; 76 | } 77 | 78 | .btn-primary { 79 | font-size: 1rem; 80 | font-weight: 600; 81 | padding: 0.625rem 1rem; 82 | gap: 8px; 83 | background-image: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb); 84 | } 85 | .btn-primary > svg, 86 | .btn-icon > svg { 87 | width: 20px; 88 | height: 20px; 89 | margin-left: 0; 90 | } 91 | 92 | .btn-profile { 93 | font-size: 16px; 94 | padding: 0.25rem 0.25rem 0.25rem 0.5rem; 95 | } 96 | .btn-profile > svg { 97 | width: 24px; 98 | height: 24px; 99 | margin-left: 0; 100 | } 101 | .profile-pic { 102 | width: 2.25rem; 103 | margin-left: 1rem; 104 | aspect-ratio: 1; 105 | } 106 | .profile-pic > img { 107 | width: 100%; 108 | height: 100%; 109 | display: block; 110 | border-radius: 0.375rem; 111 | } 112 | 113 | /* DROPDOWN MENU */ 114 | .dropdown-container { 115 | position: relative; 116 | overflow: visible; 117 | } 118 | 119 | .dropdown-menu { 120 | position: absolute; 121 | left: 0; 122 | display: block; 123 | visibility: hidden; 124 | opacity: 0; 125 | top: calc(100% + 8px); 126 | background-color: #212121; 127 | padding: 1rem; 128 | gap: 0.5rem; 129 | border-radius: 0.75rem; 130 | z-index: 9999; 131 | transition: 0.3s; 132 | } 133 | .dropdown-container:hover > .dropdown-menu { 134 | opacity: 1; 135 | visibility: visible; 136 | } 137 | .dropdown-menu.grid { 138 | display: grid; 139 | grid-template-columns: repeat(2, 240px); 140 | } 141 | .dropdown-menu > a { 142 | font-weight: 600; 143 | padding: 1rem; 144 | background-color: #292929; 145 | padding: 1rem; 146 | border-radius: 0.5rem; 147 | display: flex; 148 | align-items: center; 149 | justify-content: space-between; 150 | } 151 | .dropdown-menu > a:hover { 152 | background-color: #353535; 153 | } 154 | .dropdown-menu > a > span:nth-of-type(2) { 155 | color: #9ca3af; 156 | } 157 | 158 | /* Profile Dropdown */ 159 | .profile-dropdown { 160 | width: 100%; 161 | padding: 5px; 162 | translate: 0 -20px; 163 | opacity: 0; 164 | transition: 0.3s ease; 165 | } 166 | .dropdown-container:hover:has(.profile-dropdown) > .profile-dropdown { 167 | translate: 0 0; 168 | opacity: 1; 169 | } 170 | .profile-dropdown > a { 171 | display: flex; 172 | justify-content: flex-start; 173 | align-items: center; 174 | gap: 8px; 175 | background-color: transparent; 176 | color: #d1d5db; 177 | transition: 0.15s ease; 178 | } 179 | .profile-dropdown > a:hover { 180 | background-color: #171717; 181 | color: #f0f3f5; 182 | } 183 | 184 | .profile-dropdown > a:nth-child(3) { 185 | background-color: #5966f3; 186 | color: white; 187 | } 188 | .profile-dropdown > a:nth-child(3):hover { 189 | background-color: #4150f1; 190 | } 191 | 192 | /* Menu Icon */ 193 | .menu-icon { 194 | display: none; 195 | cursor: pointer; 196 | padding: 4px; 197 | border-radius: 6px; 198 | } 199 | .menu-icon:hover { 200 | background-color: #212121; 201 | } 202 | 203 | @media (width <= 900px) { 204 | .nav-left > .nav-menu { 205 | display: none; 206 | } 207 | .nav-right > * { 208 | display: none; 209 | } 210 | 211 | .menu-icon { 212 | display: block; 213 | } 214 | } 215 | -------------------------------------------------------------------------------- /Parallax/01/images.js: -------------------------------------------------------------------------------- 1 | export const images = [ 2 | { 3 | path: "./imgs/01.jpg", 4 | position: { top: "-5%", left: "5%" }, 5 | speed: 0.08, 6 | }, 7 | { 8 | path: "./imgs/02.jpg", 9 | position: { top: "25%", left: "20%" }, 10 | speed: 0.03, 11 | }, 12 | { 13 | path: "./imgs/03.jpg", 14 | position: { top: "60%", left: "40%" }, 15 | speed: 0.065, 16 | }, 17 | { 18 | path: "./imgs/04.jpg", 19 | position: { top: "70%", left: "10%" }, 20 | speed: 0.04, 21 | }, 22 | { 23 | path: "./imgs/05.jpg", 24 | position: { top: "-10%", left: "65%" }, 25 | speed: 0.025, 26 | }, 27 | { 28 | path: "./imgs/06.jpg", 29 | position: { top: "10%", left: "85%" }, 30 | speed: 0.05, 31 | }, 32 | { 33 | path: "./imgs/07.jpg", 34 | position: { top: "40%", left: "60%" }, 35 | speed: 0.025, 36 | }, 37 | { 38 | path: "./imgs/08.jpg", 39 | position: { top: "80%", left: "70%" }, 40 | speed: 0.1, 41 | }, 42 | { 43 | path: "./imgs/09.jpg", 44 | position: { top: "40%", left: "-5%" }, 45 | speed: 0.065, 46 | }, 47 | ]; 48 | -------------------------------------------------------------------------------- /Parallax/01/imgs/01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Parallax/01/imgs/01.jpg -------------------------------------------------------------------------------- /Parallax/01/imgs/02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Parallax/01/imgs/02.jpg -------------------------------------------------------------------------------- /Parallax/01/imgs/03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Parallax/01/imgs/03.jpg -------------------------------------------------------------------------------- /Parallax/01/imgs/04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Parallax/01/imgs/04.jpg -------------------------------------------------------------------------------- /Parallax/01/imgs/05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Parallax/01/imgs/05.jpg -------------------------------------------------------------------------------- /Parallax/01/imgs/06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Parallax/01/imgs/06.jpg -------------------------------------------------------------------------------- /Parallax/01/imgs/07.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Parallax/01/imgs/07.jpg -------------------------------------------------------------------------------- /Parallax/01/imgs/08.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Parallax/01/imgs/08.jpg -------------------------------------------------------------------------------- /Parallax/01/imgs/09.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Parallax/01/imgs/09.jpg -------------------------------------------------------------------------------- /Parallax/01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Parallax Image Gallery on Mouse Move 7 | 8 | 9 | 10 | 11 | 12 |
13 |

The Marketplace for the
Best 3D AI Art

14 | 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /Parallax/01/script.js: -------------------------------------------------------------------------------- 1 | import { images } from "./images.js"; 2 | 3 | const gallery = document.querySelector("#gallery"); 4 | const hero = document.querySelector(".hero-section"); 5 | 6 | images.forEach((item) => { 7 | const imageWrapper = document.createElement("div"); 8 | imageWrapper.classList.add("image-wrapper"); 9 | 10 | imageWrapper.style.top = item.position.top; 11 | imageWrapper.style.left = item.position.left; 12 | 13 | const img = document.createElement("img"); 14 | img.src = item.path; 15 | imageWrapper.appendChild(img); 16 | 17 | gallery.appendChild(imageWrapper); 18 | }); 19 | 20 | hero.addEventListener("mousemove", (e) => { 21 | gallery.querySelectorAll(".image-wrapper").forEach((image, index) => { 22 | const x = (e.clientX - window.innerWidth / 2) * images[index].speed; 23 | const y = (e.clientY - window.innerHeight / 2) * images[index].speed; 24 | 25 | gsap.to(image, { x, y, duration: 0.75 }); 26 | }); 27 | }); 28 | -------------------------------------------------------------------------------- /Parallax/01/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | color: #fefefe; 12 | background-color: #151515; 13 | font-family: "Clash Grotesk", sans-serif; 14 | overflow: hidden; 15 | } 16 | 17 | .hero-section { 18 | width: 100%; 19 | height: 100%; 20 | display: flex; 21 | flex-direction: column; 22 | justify-content: center; 23 | align-items: center; 24 | gap: 2.5rem; 25 | } 26 | 27 | #gallery { 28 | width: 100%; 29 | height: 100%; 30 | position: absolute; 31 | top: 0; 32 | left: 0; 33 | z-index: -1; 34 | } 35 | 36 | .image-wrapper { 37 | position: absolute; 38 | width: 240px; 39 | } 40 | 41 | .image-wrapper img { 42 | width: 100%; 43 | height: 100%; 44 | display: block; 45 | object-fit: cover; 46 | opacity: 0.5; 47 | } 48 | 49 | .hero-section > h1 { 50 | font-size: 52px; 51 | font-weight: 600; 52 | text-align: center; 53 | } 54 | .hero-section > h1 > span { 55 | background: linear-gradient(to right, #a18cd1, #fbc2eb); 56 | color: transparent; 57 | -webkit-background-clip: text; 58 | background-clip: text; 59 | } 60 | 61 | .hero-section > button { 62 | all: unset; 63 | letter-spacing: 1px; 64 | padding: 14px 40px; 65 | background-color: rgba(250, 250, 250, 0.1); 66 | backdrop-filter: blur(20px); 67 | border-radius: 100px; 68 | border: 1px solid rgba(250, 250, 250, 0.2); 69 | cursor: pointer; 70 | transition: 0.15s ease; 71 | } 72 | .hero-section > button:hover { 73 | border: 1px solid rgba(250, 250, 250, 0.5); 74 | } 75 | -------------------------------------------------------------------------------- /Scroll/01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Page Scroll Indicator 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | 17 |
18 |
19 |

Page Scroll Indicator

20 |

A page scroll indicator is a visual cue displayed on a webpage to show users their current position on the page. It helps users understand how much content is left to view or how far they've scrolled down a webpage.

21 |
22 |
23 |

What is HTML5 (HyperText Markup Language)?

24 |

A page scroll indicator is a visual cue displayed on a webpage to show users their current position on the page. It helps users understand how much content is left to view or how far they've scrolled down a webpage.

25 |
26 |
27 |

What is CSS3 (Cascading Style Sheets)?

28 |

CSS3 is the style sheet language used for describing the presentation of a document written in HTML. It allows developers to control the layout, design, and appearance of web pages, enabling advanced styling features like animations, transitions, and responsive design for various devices.

29 |
30 |
31 |

What is JavaScript?

32 |

JavaScript is a versatile programming language used in web development to create interactive and dynamic user experiences. It powers functionalities such as form validations, DOM manipulation, asynchronous requests (AJAX), and is essential for many modern frameworks and libraries.

33 |
34 |
35 |

What is React.js?

36 |

React.js is a popular JavaScript library developed by Facebook. It's used for building user interfaces and offers a component-based architecture, enabling developers to create reusable UI components. React.js is known for its efficiency and flexibility in creating complex, interactive web applications.

37 |
38 |
39 |

What is Svelte?

40 |

Svelte is a relatively newer frontend framework that differs from traditional frameworks like React, Vue, or Angular. It's a component-based framework, but unlike others, it shifts the work from the browser to the build step. Svelte's approach is centered around compiling components into highly optimized JavaScript at build time, resulting in smaller bundle sizes and improved runtime performance.

41 |
42 |
43 |

What is Next.js?

44 |

Next.js is a React-based open-source framework used for building modern web applications. It enables server-side rendering (SSR) and static site generation (SSG) out of the box, providing improved performance and SEO benefits. Next.js simplifies React development by offering features like automatic code splitting, file-system-based routing, and API routes, making it easy to build production-ready applications.

45 |
46 |
47 | 48 | 49 | -------------------------------------------------------------------------------- /Scroll/01/script.js: -------------------------------------------------------------------------------- 1 | const progressBar = document.querySelector(".progress-bar"); 2 | const height = 3 | document.documentElement.scrollHeight - document.documentElement.clientHeight; 4 | 5 | window.addEventListener("scroll", () => { 6 | const scrollTop = document.documentElement.scrollTop; 7 | const scrolled = (scrollTop / height) * 100; 8 | 9 | progressBar.style.width = `${scrolled}%`; 10 | }); 11 | -------------------------------------------------------------------------------- /Scroll/01/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: system-ui; 9 | background-color: #252525; 10 | color: white; 11 | } 12 | 13 | .scroll-indicator { 14 | height: 10px; 15 | width: 100%; 16 | position: fixed; 17 | top: 1rem; 18 | } 19 | 20 | .scroll-indicator .progress-bar { 21 | height: 100%; 22 | width: 0; 23 | background: linear-gradient(to right, #8e2de2, #4a00e0); 24 | } 25 | 26 | section { 27 | width: 80vw; 28 | padding: 40px; 29 | margin: 2.5rem auto; 30 | border-radius: 14px; 31 | display: flex; 32 | flex-direction: column; 33 | justify-content: center; 34 | gap: 2rem; 35 | } 36 | 37 | section h1 { 38 | font-size: 3rem; 39 | font-weight: bold; 40 | } 41 | section > p { 42 | font-size: 1.25rem; 43 | } 44 | 45 | .container > section:nth-child(5n + 1) { 46 | background-color: #7dffaf; 47 | color: black; 48 | } 49 | .container > section:nth-child(5n + 2) { 50 | background-color: #424242; 51 | } 52 | .container > section:nth-child(5n + 3) { 53 | background-color: #f6f2f0; 54 | color: black; 55 | } 56 | .container > section:nth-child(5n + 4) { 57 | background-color: #ffcb70; 58 | color: black; 59 | } 60 | .container > section:nth-child(5n + 5) { 61 | background-color: #4158d0; 62 | } 63 | -------------------------------------------------------------------------------- /Sidebars/01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Youtube Sidebar 7 | 8 | 9 | 10 | 11 | 12 | 36 | 37 | 85 | 86 |
87 | 93 | 94 |
95 |

Feed

96 |
97 |
98 | 99 | 100 | -------------------------------------------------------------------------------- /Sidebars/01/script.js: -------------------------------------------------------------------------------- 1 | const menu = document.querySelector("#menu"); 2 | const menuBtns = document.querySelectorAll(".menu-btn"); 3 | 4 | menuBtns.forEach((btn) => { 5 | btn.addEventListener("click", function () { 6 | menu.classList.toggle("visible"); 7 | }); 8 | }); 9 | 10 | document.addEventListener("click", function (e) { 11 | if (!menu.contains(e.target) && !menuBtns[0].contains(e.target)) { 12 | menu.classList.remove("visible"); 13 | } 14 | }); 15 | -------------------------------------------------------------------------------- /Sidebars/01/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap"); 2 | 3 | *, 4 | *::before, 5 | *::after { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | font-family: "Roboto", sans-serif; 13 | background-color: #0f0f0f; 14 | height: 100vh; 15 | color: white; 16 | display: flex; 17 | overflow: hidden; 18 | } 19 | 20 | .sidebar { 21 | width: 80px; 22 | height: 100%; 23 | padding: 16px 0; 24 | display: flex; 25 | flex-direction: column; 26 | align-items: center; 27 | gap: 16px; 28 | } 29 | 30 | .menu-btn { 31 | display: flex; 32 | justify-content: center; 33 | align-items: center; 34 | padding: 8px; 35 | cursor: pointer; 36 | border-radius: 50%; 37 | } 38 | .menu-btn:hover { 39 | background-color: #272727; 40 | } 41 | 42 | .sidebar-items { 43 | display: flex; 44 | flex-direction: column; 45 | align-items: stretch; 46 | } 47 | 48 | .item { 49 | display: flex; 50 | flex-direction: column; 51 | align-items: center; 52 | padding: 16px 2px; 53 | border-radius: 8px; 54 | cursor: pointer; 55 | } 56 | .item:hover { 57 | background-color: #272727; 58 | } 59 | .item img { 60 | width: 24px; 61 | height: 24px; 62 | margin-bottom: 6px; 63 | } 64 | .item span { 65 | font-size: 11px; 66 | } 67 | 68 | #menu { 69 | width: 240px; 70 | height: 100%; 71 | position: absolute; 72 | top: 0; 73 | left: 0; 74 | background-color: black; 75 | padding: 16px 12px; 76 | display: flex; 77 | flex-direction: column; 78 | transform: translateX(-100%); 79 | transition: transform 0.5s ease; 80 | z-index: 10; 81 | } 82 | #menu.visible { 83 | transform: translateX(0); 84 | } 85 | 86 | .menu-header { 87 | display: flex; 88 | align-items: center; 89 | padding-left: 6px; 90 | gap: 24px; 91 | margin-bottom: 20px; 92 | } 93 | 94 | .menu-group { 95 | padding: 16px 0; 96 | border-block: 1px solid #3f3f3f; 97 | } 98 | 99 | .menu-item { 100 | font-size: 14px; 101 | display: flex; 102 | align-items: center; 103 | padding: 10px 12px; 104 | border-radius: 10px; 105 | cursor: pointer; 106 | } 107 | .menu-item:hover { 108 | background-color: #272727; 109 | } 110 | .menu-item img { 111 | margin-right: 24px; 112 | } 113 | 114 | section { 115 | width: 100%; 116 | height: 100%; 117 | } 118 | 119 | nav { 120 | width: 100%; 121 | height: 72px; 122 | display: flex; 123 | justify-content: space-between; 124 | align-items: center; 125 | padding: 24px 16px; 126 | } 127 | 128 | main { 129 | width: 100%; 130 | height: 100%; 131 | display: flex; 132 | justify-content: center; 133 | align-items: center; 134 | } 135 | main h1 { 136 | font-size: 42px; 137 | } 138 | -------------------------------------------------------------------------------- /Sidebars/01/svg/history.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Sidebars/01/svg/home.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Sidebars/01/svg/library.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Sidebars/01/svg/liked.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Sidebars/01/svg/menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Sidebars/01/svg/shorts.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Sidebars/01/svg/subscription.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Sidebars/01/svg/videos.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Sidebars/01/svg/watch-later.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Sidebars/01/svg/youtube.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Sidebars/02/assets/dashboard.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Sidebars/02/assets/expand.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Sidebars/02/assets/home.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Sidebars/02/assets/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Sidebars/02/assets/profile-pic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/Sidebars/02/assets/profile-pic.jpg -------------------------------------------------------------------------------- /Sidebars/02/assets/projects.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Sidebars/02/assets/settings.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /Sidebars/02/assets/tasks.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Sidebars/02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sidebar Part 02 7 | 8 | 9 | 10 | 11 | 63 | 64 | -------------------------------------------------------------------------------- /Sidebars/02/script.js: -------------------------------------------------------------------------------- 1 | const sidebarBtn = document.querySelector(".toggle-btn"); 2 | const sidebar = document.querySelector("aside"); 3 | 4 | sidebarBtn.addEventListener("click", () => { 5 | document.body.classList.toggle("active"); 6 | }); 7 | -------------------------------------------------------------------------------- /Sidebars/02/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"); 2 | 3 | *, 4 | *::before, 5 | *::after { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | height: 100vh; 13 | background-color: #e4e3e8; 14 | padding: 0.375rem; 15 | font-family: Poppins, sans-serif; 16 | position: relative; 17 | } 18 | 19 | button, 20 | a { 21 | all: unset; 22 | font: inherit; 23 | cursor: pointer; 24 | } 25 | 26 | nav { 27 | position: fixed; 28 | width: 5rem; 29 | height: calc(100vh - 0.75rem); 30 | background-color: #ffffff; 31 | padding: 1rem 0.75rem; 32 | border-radius: 0.75rem; 33 | display: flex; 34 | flex-direction: column; 35 | transition: width 500ms ease; 36 | } 37 | body.active nav { 38 | width: 15rem; 39 | } 40 | 41 | .sidebar-header, 42 | .sidebar-links { 43 | display: flex; 44 | justify-content: center; 45 | align-items: center; 46 | overflow: hidden; 47 | } 48 | 49 | .sidebar-header { 50 | margin-bottom: 1.5rem; 51 | } 52 | 53 | .logo-wrapper { 54 | display: flex; 55 | justify-content: start; 56 | align-items: center; 57 | gap: 1.25rem; 58 | } 59 | .logo-wrapper > img { 60 | width: 3.25rem; 61 | height: 3.25rem; 62 | background-color: #f4f4f6; 63 | padding: 0.4rem; 64 | border-radius: 0.5rem; 65 | } 66 | 67 | .sidebar-links { 68 | flex-direction: column; 69 | margin-bottom: auto; 70 | gap: 0.6rem; 71 | padding-top: 1.5rem; 72 | } 73 | nav > .sidebar-links { 74 | border-top: 1px solid rgb(211, 211, 211); 75 | } 76 | 77 | body.active .sidebar-links, 78 | body.active .sidebar-header, 79 | body.active .user-profile { 80 | justify-content: start; 81 | align-items: stretch; 82 | } 83 | 84 | .link { 85 | display: flex; 86 | padding: 0.6rem; 87 | border-radius: 0.5rem; 88 | gap: 1.5rem; 89 | } 90 | .hidden { 91 | display: none; 92 | } 93 | body.active .hidden { 94 | display: inline; 95 | } 96 | 97 | .link:hover, 98 | .link.active:hover { 99 | background-color: #e4e4e8; 100 | } 101 | .link.active { 102 | background-color: #f4f4f6; 103 | } 104 | 105 | .link > img { 106 | width: 24px; 107 | height: 24px; 108 | } 109 | 110 | .sidebar-bottom .sidebar-links { 111 | padding-bottom: 1.5rem; 112 | } 113 | 114 | .toggle-btn { 115 | position: absolute; 116 | top: 10px; 117 | right: -50px; 118 | padding: 0.5rem; 119 | background-color: #fff; 120 | border-radius: 50%; 121 | display: flex; 122 | justify-content: center; 123 | align-items: center; 124 | transition: transform 0.25s ease; 125 | } 126 | body.active .toggle-btn { 127 | transform: rotate(180deg); 128 | } 129 | 130 | .user-profile { 131 | display: flex; 132 | justify-content: center; 133 | align-items: center; 134 | gap: 1.5rem; 135 | padding-top: 1.5rem; 136 | border-top: 1px solid rgb(211, 211, 211); 137 | } 138 | 139 | .user-avatar { 140 | width: 48px; 141 | height: 48px; 142 | cursor: pointer; 143 | transition: scale 0.2s ease; 144 | } 145 | .user-avatar img { 146 | width: 100%; 147 | height: 100%; 148 | border-radius: 50%; 149 | object-fit: cover; 150 | } 151 | .user-avatar:hover { 152 | scale: 1.1; 153 | } 154 | 155 | .user-details { 156 | align-self: center; 157 | overflow: hidden; 158 | } 159 | .user-details .username { 160 | font-size: 0.85rem; 161 | font-weight: 600; 162 | } 163 | .user-details .user-email { 164 | font-size: 0.8rem; 165 | } 166 | -------------------------------------------------------------------------------- /Socials/01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Socials - 01 7 | 8 | 9 | 10 | 11 | 33 | 34 | -------------------------------------------------------------------------------- /Socials/01/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | html, 10 | body { 11 | display: grid; 12 | height: 100%; 13 | width: 100%; 14 | font-family: "Poppins", sans-serif; 15 | place-items: center; 16 | /* background: linear-gradient(315deg, #ffffff, #d7e1ec); */ 17 | background-color: rgb(34, 34, 33); 18 | } 19 | 20 | .wrapper { 21 | display: inline-flex; 22 | list-style: none; 23 | } 24 | 25 | .wrapper .icon { 26 | position: relative; 27 | background: #ffffff; 28 | border-radius: 50%; 29 | padding: 15px; 30 | margin: 10px; 31 | width: 50px; 32 | height: 50px; 33 | font-size: 18px; 34 | display: flex; 35 | justify-content: center; 36 | align-items: center; 37 | flex-direction: column; 38 | box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); 39 | cursor: pointer; 40 | transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); 41 | } 42 | 43 | .wrapper .tooltip { 44 | position: absolute; 45 | top: 0; 46 | font-size: 14px; 47 | background: #ffffff; 48 | color: #ffffff; 49 | padding: 5px 8px; 50 | border-radius: 5px; 51 | box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); 52 | opacity: 0; 53 | pointer-events: none; 54 | transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); 55 | } 56 | 57 | .wrapper .tooltip::before { 58 | position: absolute; 59 | content: ""; 60 | height: 8px; 61 | width: 8px; 62 | background: #ffffff; 63 | bottom: -3px; 64 | left: 50%; 65 | transform: translate(-50%) rotate(45deg); 66 | transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); 67 | } 68 | 69 | .wrapper .icon:hover .tooltip { 70 | top: -45px; 71 | opacity: 1; 72 | visibility: visible; 73 | pointer-events: auto; 74 | } 75 | 76 | .wrapper .icon:hover span, 77 | .wrapper .icon:hover .tooltip { 78 | text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1); 79 | } 80 | 81 | .facebook { 82 | --color: #1877f2; 83 | } 84 | .twitter { 85 | --color: #1da1f2; 86 | } 87 | .instagram { 88 | --color: #e4405f; 89 | } 90 | .github { 91 | --color: #333333; 92 | } 93 | .youtube { 94 | --color: #cd201f; 95 | } 96 | 97 | .icon:hover, 98 | .icon:hover .tooltip, 99 | .icon:hover .tooltip::before { 100 | background: var(--color); 101 | color: white; 102 | } 103 | -------------------------------------------------------------------------------- /Socials/02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Socials 02 7 | 8 | 9 | 10 | 11 | 33 | 34 | -------------------------------------------------------------------------------- /Socials/02/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | background-color: #222221; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | } 16 | 17 | ul { 18 | display: flex; 19 | list-style: none; 20 | gap: 2.5rem; 21 | } 22 | 23 | .item a { 24 | text-decoration: none; 25 | width: 4.8rem; 26 | height: 4.8rem; 27 | background-color: #f0f9fe; 28 | border-radius: 50%; 29 | display: flex; 30 | justify-content: center; 31 | align-items: center; 32 | position: relative; 33 | z-index: 1; 34 | border: 3px solid #f0f9fe; 35 | overflow: hidden; 36 | } 37 | 38 | .item a::before { 39 | content: ""; 40 | position: absolute; 41 | width: 100%; 42 | height: 100%; 43 | background: var(--bg-color); 44 | z-index: 0; 45 | scale: 1 0; 46 | transform-origin: bottom; 47 | transition: scale 0.5s ease; 48 | } 49 | 50 | .item:hover a::before { 51 | scale: 1 1; 52 | } 53 | 54 | .icon { 55 | font-size: 2rem; 56 | color: hsl(203, 92%, 8%); 57 | transition: 0.5s ease; 58 | z-index: 2; 59 | } 60 | 61 | .item a:hover .icon { 62 | color: #fff; 63 | transform: rotateY(360deg); 64 | } 65 | 66 | .item:nth-child(1) { 67 | --bg-color: linear-gradient(to bottom right, #f9ce34, #ee2a7b, #6228d7); 68 | } 69 | .item:nth-child(2) { 70 | --bg-color: #0077b5; 71 | } 72 | .item:nth-child(3) { 73 | --bg-color: #ff0000; 74 | } 75 | .item:nth-child(4) { 76 | --bg-color: #000; 77 | } 78 | -------------------------------------------------------------------------------- /Socials/03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Socials 03 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | -------------------------------------------------------------------------------- /Socials/03/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | /* background-color: hsla(209 70% 3% / 100%); */ /* For dark theme */ 12 | background-color: hsl(214, 20%, 85%); 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | } 17 | 18 | .wrapper { 19 | display: flex; 20 | justify-content: center; 21 | align-items: center; 22 | gap: 2rem; 23 | } 24 | 25 | .icon { 26 | text-decoration: none; 27 | width: 5.625rem; 28 | height: 5.625rem; 29 | border-radius: 14px; 30 | /* background-color: hsla(209 20% 70% / 20%); */ /* For dark theme */ 31 | background-color: #fff; 32 | display: flex; 33 | justify-content: center; 34 | align-items: center; 35 | overflow: hidden; 36 | position: relative; 37 | box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, 38 | rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; 39 | } 40 | 41 | .icon > i { 42 | color: #2dd4bf; 43 | font-size: 1.5rem; 44 | transition: all 0.2s; 45 | } 46 | 47 | .icon:hover > i { 48 | scale: 1.2; 49 | color: #f1f1f1; 50 | } 51 | 52 | .icon:before { 53 | background: var(--color); 54 | content: ""; 55 | position: absolute; 56 | width: 130%; 57 | height: 130%; 58 | left: -110%; 59 | top: 80%; 60 | transform: rotate(45deg); 61 | } 62 | 63 | .icon:hover:before { 64 | animation: slide 0.7s forwards; 65 | } 66 | 67 | @keyframes slide { 68 | 50% { 69 | left: 10%; 70 | top: -40%; 71 | } 72 | 73 | 100% { 74 | left: -15%; 75 | top: -15%; 76 | } 77 | } 78 | 79 | .icon:has(.fa-instagram) { 80 | --color: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7); 81 | } 82 | .icon:has(.fa-linkedin-in) { 83 | --color: #0077b5; 84 | } 85 | .icon:has(.fa-youtube) { 86 | --color: #ff0000; 87 | } 88 | .icon:has(.fa-x-twitter) { 89 | --color: #1da1f2; 90 | } 91 | .icon:has(.fa-github) { 92 | --color: #333; 93 | } 94 | -------------------------------------------------------------------------------- /Socials/04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Socials 03 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | -------------------------------------------------------------------------------- /Socials/04/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | background-color: hsl(214, 20%, 90%); 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | } 16 | 17 | .wrapper { 18 | display: flex; 19 | justify-content: center; 20 | align-items: center; 21 | gap: 2rem; 22 | } 23 | 24 | .icon { 25 | text-decoration: none; 26 | width: 5.625rem; 27 | height: 5.625rem; 28 | border-radius: 50%; 29 | display: flex; 30 | justify-content: center; 31 | align-items: center; 32 | position: relative; 33 | } 34 | 35 | .icon > i { 36 | color: #fff; 37 | font-size: 1.5rem; 38 | transition: all 0.2s; 39 | } 40 | 41 | .icon:hover > i { 42 | scale: 2.2; 43 | background: linear-gradient(220.55deg, #565656 0%, #181818 100%); 44 | /* background: linear-gradient(220.55deg, #a531dc 0%, #4300b1 100%); */ 45 | background-clip: text; 46 | -webkit-background-clip: text; 47 | -webkit-text-fill-color: transparent; 48 | } 49 | 50 | .icon::before { 51 | content: ""; 52 | position: absolute; 53 | inset: 0; 54 | border-radius: 100%; 55 | background: linear-gradient(220.55deg, #565656 0%, #181818 100%); 56 | /* background: linear-gradient(220.55deg, #a531dc 0%, #4300b1 100%); */ 57 | scale: 1; 58 | z-index: -1; 59 | transition: all 300ms ease-out; 60 | } 61 | .icon:hover::before { 62 | scale: 0; 63 | } 64 | -------------------------------------------------------------------------------- /Tabs/01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sliding Tabs 7 | 8 | 9 | 10 |

Sliding Tabs - Pure CSS

11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | -------------------------------------------------------------------------------- /Tabs/01/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"); 2 | 3 | *, 4 | *::before, 5 | *::after { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | :root { 12 | --primary: 225 88% 62%; 13 | --background: 216 60% 97%; 14 | } 15 | 16 | body { 17 | font-family: Inter, sans-serif; 18 | height: 100vh; 19 | background-color: hsl(var(--background)); 20 | display: flex; 21 | flex-direction: column; 22 | justify-content: center; 23 | align-items: center; 24 | gap: 4rem; 25 | } 26 | 27 | .tabs { 28 | font-size: 1.3rem; 29 | font-weight: 500; 30 | padding: 0.5rem; 31 | display: flex; 32 | background-color: #fff; 33 | border-radius: 1000px; 34 | box-shadow: 0 0 1px 0 rgba(24, 94, 224, 0.15), 35 | 0 6px 12px 0 rgba(24, 94, 224, 0.15); 36 | list-style: none; 37 | position: relative; 38 | } 39 | 40 | input[type="radio"] { 41 | display: none; 42 | } 43 | 44 | .tab { 45 | width: 150px; 46 | height: 50px; 47 | display: flex; 48 | justify-content: center; 49 | align-items: center; 50 | padding: 0.5rem; 51 | border-radius: inherit; 52 | cursor: pointer; 53 | z-index: 2; 54 | } 55 | 56 | .tabs .slider { 57 | width: 150px; 58 | height: 50px; 59 | position: absolute; 60 | border-radius: inherit; 61 | background-color: hsl(var(--primary)); 62 | z-index: 0; 63 | transition: 0.3s ease; 64 | } 65 | 66 | input[type="radio"]:checked + label { 67 | color: #f1f1f1; 68 | } 69 | 70 | input[id="html"]:checked ~ .slider { 71 | transform: translateX(0); 72 | } 73 | input[id="css"]:checked ~ .slider { 74 | transform: translateX(100%); 75 | } 76 | input[id="javascript"]:checked ~ .slider { 77 | transform: translateX(200%); 78 | } 79 | input[id="react"]:checked ~ .slider { 80 | transform: translateX(300%); 81 | } 82 | -------------------------------------------------------------------------------- /Tabs/02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Tabs 02 7 | 8 | 9 | 10 | 11 |
12 | 13 | 19 | 20 |
21 |
22 |

The Future Awaits

23 |

Dive into the cutting-edge world of technology, where innovation meets functionality. Our tech tab explores groundbreaking advancements, dissects the latest gadgets, and provides thought-provoking discussions on the impact of technology on our daily lives.

24 | 25 |
26 | 27 |
28 |

Unleash Your Potential

29 |

From high-intensity training to mindful practices, our fitness tab covers a wide range of exercises and wellness techniques. Gain access to personalized workout plans, nutritional guidance, and motivational stories to keep you on track.

30 | 31 |
32 | 33 |
34 |

Flavor Explorations

35 |

Whether you're a seasoned chef or a novice in the kitchen, our food tab provides a treasure trove of culinary delights. Explore regional specialties, learn from renowned chefs, and discover the stories behind iconic dishes.

36 | 37 |
38 | 39 |
40 |

Explore the World

41 |

From ancient ruins to modern metropolises, our travel tab takes you on a journey through stunning landscapes, rich histories, and vibrant traditions. Unlock the secrets of each destination with local insights and expert recommendations.

42 | 43 |
44 | 45 |
46 |
47 | 48 | -------------------------------------------------------------------------------- /Tabs/02/script.js: -------------------------------------------------------------------------------- 1 | const tabPanels = Array.from(document.querySelectorAll(".tab-panels > div")); 2 | const tabs = Array.from(document.querySelectorAll(".tab")); 3 | const tabsContainer = document.querySelector(".tab-menu"); 4 | 5 | tabPanels.forEach((tab, index) => { 6 | if (index > 0) tab.setAttribute("hidden", ""); 7 | }); 8 | 9 | const switchTab = (e) => { 10 | // Find the clicked Tab 11 | const clickedTab = e.target.closest("li"); 12 | if (!clickedTab) return; 13 | 14 | // Remove the "active" class from all Tabs 15 | tabs.forEach((tab) => tab.classList.remove("active")); 16 | // Add the "active" class to the clicked Tab 17 | clickedTab.classList.add("active"); 18 | 19 | // Get the associated PANEL for the clicked tab 20 | const activePanelId = clickedTab.children[0].getAttribute("href"); 21 | const activePanel = document.querySelector(activePanelId); 22 | 23 | // Hide all the Tab Panels 24 | tabPanels.forEach((panel) => { 25 | panel.setAttribute("hidden", ""); 26 | }); 27 | // Show the panel associated with the clicked tab 28 | activePanel.removeAttribute("hidden", ""); 29 | }; 30 | 31 | tabsContainer.addEventListener("click", switchTab); 32 | -------------------------------------------------------------------------------- /Tabs/02/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); 2 | 3 | :root { 4 | --clr-primary: hsl(263, 81%, 45%); 5 | --clr-text-dark: hsl(250, 15%, 8%); 6 | --clr-text-light: hsl(240, 4%, 57%); 7 | --clr-bg: hsl(225, 62%, 95%); 8 | --clr-neutral: hsl(222, 23%, 91%); 9 | --clr-white: hsl(0, 0%, 100%); 10 | } 11 | 12 | *, 13 | *::before, 14 | *::after { 15 | margin: 0; 16 | padding: 0; 17 | box-sizing: border-box; 18 | } 19 | 20 | body { 21 | font-family: Poppins, system-ui; 22 | height: 100vh; 23 | color: var(--clr-text-light); 24 | background-color: var(--clr-bg); 25 | display: flex; 26 | justify-content: center; 27 | align-items: start; 28 | } 29 | 30 | button, 31 | ul, 32 | li { 33 | all: unset; 34 | } 35 | 36 | .tab-container { 37 | width: 100%; 38 | max-width: 700px; 39 | 40 | display: flex; 41 | flex-direction: column; 42 | background-color: var(--clr-white); 43 | margin-top: 320px; 44 | } 45 | 46 | .tab-menu { 47 | display: flex; 48 | width: 100%; 49 | } 50 | 51 | .tab-menu > .tab { 52 | flex: 1; 53 | background-color: var(--clr-neutral); 54 | font-size: 16px; 55 | text-transform: uppercase; 56 | cursor: pointer; 57 | } 58 | .tab-menu > .tab:not(:last-child) { 59 | border-right: 2px solid var(--clr-white); 60 | } 61 | .tab-menu > .tab.active { 62 | background-color: var(--clr-white); 63 | } 64 | 65 | .tab > a { 66 | width: 100%; 67 | height: 100%; 68 | padding: 28px; 69 | 70 | display: flex; 71 | justify-content: center; 72 | align-items: center; 73 | 74 | color: var(--clr-text-dark); 75 | font-weight: 700; 76 | letter-spacing: 0.5px; 77 | text-decoration: none; 78 | } 79 | .tab-menu > .tab.active > a { 80 | color: var(--clr-primary); 81 | } 82 | 83 | .tab-panels { 84 | padding: 48px; 85 | } 86 | 87 | .panel > h3 { 88 | font-size: 28px; 89 | color: var(--clr-text-dark); 90 | margin-bottom: 20px; 91 | } 92 | 93 | .panel > p { 94 | font-size: 18px; 95 | line-height: 30px; 96 | margin-bottom: 28px; 97 | } 98 | 99 | .panel > button { 100 | padding: 10px 28px; 101 | color: var(--clr-white); 102 | background-color: var(--clr-text-dark); 103 | border-radius: 6px; 104 | font-size: 16px; 105 | letter-spacing: 1px; 106 | text-transform: uppercase; 107 | cursor: pointer; 108 | } 109 | .panel > button:hover { 110 | opacity: 0.9; 111 | } 112 | -------------------------------------------------------------------------------- /Text/01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Typography Animation 01 8 | 9 | 10 | 11 |
12 |  webdev  13 |  webdev  14 |
15 | 16 | -------------------------------------------------------------------------------- /Text/01/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Kanit:wght@500&display=swap"); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | background-color: #1e1e1e; 12 | display: grid; 13 | place-items: center; 14 | font-family: "Kanit", sans-serif; 15 | } 16 | 17 | div { 18 | position: relative; 19 | font-size: 5rem; 20 | text-transform: uppercase; 21 | letter-spacing: 3px; 22 | line-height: 80px; 23 | cursor: pointer; 24 | } 25 | 26 | :root { 27 | --clr: #1af7ff; 28 | } 29 | 30 | .text { 31 | color: transparent; 32 | -webkit-text-stroke: 1px rgba(255, 255, 255, 0.6); 33 | transition: 0.1s ease; 34 | transition-delay: 0.25s; 35 | } 36 | 37 | .hover-text { 38 | position: absolute; 39 | inset: 0; 40 | width: 0%; 41 | color: var(--clr); 42 | overflow: hidden; 43 | border-right: 6px solid var(--clr); 44 | transition: 0.5s ease-in-out; 45 | } 46 | 47 | div:hover .hover-text { 48 | width: 100%; 49 | filter: drop-shadow(0 0 40px var(--clr)); 50 | } 51 | div:hover .text { 52 | -webkit-text-stroke: 1px rgba(255, 255, 255, 0); 53 | } 54 | -------------------------------------------------------------------------------- /Text/02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Text 02 7 | 8 | 9 | 10 |

Frontend

11 | 12 | -------------------------------------------------------------------------------- /Text/02/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&display=swap"); 2 | 3 | *, 4 | *::before, 5 | *::after { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | font-family: "Poppins", sans-serif; 13 | background-color: #14141f; 14 | height: 100vh; 15 | display: flex; 16 | justify-content: center; 17 | align-items: center; 18 | } 19 | 20 | h1 { 21 | font-size: 88px; 22 | font-weight: 800; 23 | letter-spacing: 8px; 24 | text-transform: uppercase; 25 | text-decoration: none; 26 | color: transparent; 27 | -webkit-text-stroke-width: 1px; 28 | -webkit-text-stroke-color: white; 29 | text-align: center; 30 | position: relative; 31 | } 32 | 33 | h1::before, 34 | h1::after { 35 | content: attr(data-text); 36 | position: absolute; 37 | top: 0; 38 | left: 0; 39 | transition: 0.3s ease-out; 40 | } 41 | h1:hover::before { 42 | color: #bb0000; 43 | transform: translate(12px, -12px); 44 | -webkit-text-stroke-width: 1px; 45 | -webkit-text-stroke-color: black; 46 | } 47 | h1:hover::after { 48 | color: #77efff; 49 | transform: translate(24px, -24px); 50 | -webkit-text-stroke-width: 1px; 51 | -webkit-text-stroke-color: black; 52 | } 53 | -------------------------------------------------------------------------------- /Text/03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Text Reveal Animation 7 | 8 | 9 | 10 |

11 | This is a Text 12 | Reveal Animation 13 |

14 | 15 | -------------------------------------------------------------------------------- /Text/03/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Epilogue:wght@500&display=swap"); 2 | 3 | *, 4 | *::before, 5 | *::after { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | font-family: Epilogue, sans-serif; 13 | background-color: #090909; 14 | color: white; 15 | height: 100vh; 16 | display: grid; 17 | place-items: center; 18 | } 19 | 20 | .title { 21 | font-size: 4rem; 22 | line-height: 120%; 23 | font-weight: bold; 24 | } 25 | 26 | .title span { 27 | --duration: 2s; 28 | display: block; 29 | position: relative; 30 | overflow: hidden; 31 | margin-block: 4px; 32 | color: transparent; 33 | animation: reveal 1s calc(var(--delay) + var(--duration)) forwards; 34 | } 35 | 36 | .title span::before { 37 | content: ""; 38 | position: absolute; 39 | top: 0; 40 | left: 0; 41 | width: 100%; 42 | height: 100%; 43 | background-color: #1d59ac; 44 | transform: scaleX(0); 45 | transform-origin: left; 46 | animation: slideIn var(--duration) var(--delay) forwards, 47 | slideOut 1s calc(var(--delay) + var(--duration)) forwards; 48 | } 49 | 50 | @keyframes reveal { 51 | to { 52 | color: white; 53 | } 54 | } 55 | 56 | @keyframes slideIn { 57 | from { 58 | transform: scaleX(0); 59 | } 60 | to { 61 | transform: scaleX(1); 62 | } 63 | } 64 | 65 | @keyframes slideOut { 66 | from { 67 | transform: translateX(0); 68 | } 69 | to { 70 | transform: translateX(105%); 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /z_Archive/Cards/01/image-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/z_Archive/Cards/01/image-2.png -------------------------------------------------------------------------------- /z_Archive/Cards/01/image.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/z_Archive/Cards/01/image.webp -------------------------------------------------------------------------------- /z_Archive/Cards/01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Responsive Flex Blog Card 7 | 8 | 9 | 10 |
11 |
12 |
13 | 14 |
15 |
16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |

21 Oct, 2023

24 |
25 |

Responsive Blog Card with Flexbox

26 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium minus voluptatum repellendus debitis! Est voluptatum deserunt consequuntur ullam rerum provident.

27 |
28 |
29 |

HTML

30 |

CSS

31 |
32 | 33 |
34 |
35 |
36 |
37 | 38 | -------------------------------------------------------------------------------- /z_Archive/Cards/01/styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"); 2 | 3 | :root { 4 | --primary: 223 100% 50%; 5 | --bg: hsl(223, 30%, 96%); 6 | --text: hsl(223, 90%, 8%); 7 | --text-light: hsl(223, 24%, 36%); 8 | } 9 | 10 | * { 11 | margin: 0; 12 | padding: 0; 13 | box-sizing: border-box; 14 | } 15 | 16 | body { 17 | font-family: Inter, sans-serif; 18 | height: 100vh; 19 | color: var(--text); 20 | background-color: #0e1213; 21 | display: flex; 22 | justify-content: center; 23 | align-items: center; 24 | } 25 | 26 | .container { 27 | border: 2px solid white; 28 | border-radius: 20px; 29 | padding: 36px; 30 | display: flex; 31 | justify-content: center; 32 | align-items: center; 33 | resize: horizontal; 34 | overflow: auto; 35 | } 36 | div::-webkit-resizer { 37 | background-color: transparent; 38 | } 39 | 40 | .blog-card { 41 | max-width: 780px; 42 | min-height: 260px; 43 | background-color: var(--bg); 44 | border-radius: 16px; 45 | display: flex; 46 | flex-wrap: wrap; 47 | overflow: hidden; 48 | } 49 | 50 | .blog-image { 51 | flex: 1 0 240px; 52 | min-height: 100%; 53 | max-height: 350px; 54 | overflow: hidden; 55 | } 56 | 57 | img { 58 | width: 100%; 59 | height: 100%; 60 | object-fit: cover; 61 | display: block; 62 | } 63 | 64 | .blog-content { 65 | flex: 3 1 400px; 66 | padding: 20px; 67 | display: flex; 68 | justify-content: center; 69 | flex-direction: column; 70 | gap: 12px; 71 | } 72 | 73 | .published { 74 | display: flex; 75 | align-items: center; 76 | gap: 6px; 77 | font-size: 14px; 78 | font-weight: 500; 79 | } 80 | 81 | .published > svg { 82 | stroke: var(--text-light); 83 | } 84 | .published > p { 85 | font-weight: 700; 86 | color: var(--text-light); 87 | } 88 | 89 | .title { 90 | font-size: 24px; 91 | font-weight: 800; 92 | } 93 | 94 | .description { 95 | color: var(--text-light); 96 | font-weight: 500; 97 | } 98 | 99 | .info { 100 | width: 100%; 101 | display: flex; 102 | flex-wrap: wrap; 103 | align-items: center; 104 | gap: 16px; 105 | padding-top: 20px; 106 | } 107 | 108 | .info > .tags { 109 | display: flex; 110 | gap: 12px; 111 | } 112 | 113 | .tags > .tag { 114 | font-size: 14px; 115 | font-weight: 600; 116 | padding: 4px 8px; 117 | color: hsl(223, 50%, 24%); 118 | background-color: hsl(var(--primary) / 0.1); 119 | border-radius: 1000px; 120 | } 121 | 122 | .info button { 123 | flex: 1 0 240px; 124 | max-width: 100%; 125 | padding: 14px 32px; 126 | background-color: hsl(var(--primary)); 127 | border-radius: 10px; 128 | color: var(--bg); 129 | font: inherit; 130 | font-weight: 500; 131 | border: 0; 132 | cursor: pointer; 133 | } 134 | .info > button:hover { 135 | background-color: hsl(var(--primary) / 0.9); 136 | } 137 | -------------------------------------------------------------------------------- /z_Archive/Cards/02/back.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/parthwebdev/UI-Components/1fa1589dc3e463308739d03f097013a6adb7c827/z_Archive/Cards/02/back.jpg -------------------------------------------------------------------------------- /z_Archive/Cards/02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 3D Flips Card Effect 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 |

DC Universe

18 |

The Flash

19 |

2023

20 |
21 | 22 |
23 |
The Flash
24 |
25 | Synopsis: The Flash travels through time to prevent the murder of his mother, but unwittingly causes changes that result in the creation of a multiverse. 26 |
27 |
28 | Genre: Action, Adventure, Sci-Fi 29 |
30 |
31 | Release Date: 16 June, 2023 32 |
33 | Watch Trailer 34 |
35 |
36 |
37 | 38 | -------------------------------------------------------------------------------- /z_Archive/Cards/02/styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: "Poppins", sans-serif; 11 | background-color: #061519; 12 | height: 100vh; 13 | display: flex; 14 | align-items: center; 15 | justify-content: center; 16 | } 17 | 18 | .card { 19 | width: 400px; 20 | } 21 | 22 | .card-content { 23 | position: relative; 24 | padding: 15rem 5rem; 25 | transform-style: preserve-3d; 26 | transition: transform 3s; 27 | } 28 | .card:hover .card-content { 29 | transform: rotateY(180deg); 30 | } 31 | 32 | .card-front, 33 | .card-back { 34 | position: absolute; 35 | top: 0; 36 | right: 0; 37 | bottom: 0; 38 | left: 0; 39 | padding: 2rem; 40 | display: flex; 41 | flex-direction: column; 42 | justify-content: center; 43 | backface-visibility: hidden; 44 | transform-style: preserve-3d; 45 | } 46 | 47 | .card-front, 48 | .card-back { 49 | background-size: cover; 50 | background-repeat: no-repeat; 51 | background-blend-mode: overlay; 52 | color: white; 53 | } 54 | .card-front { 55 | background-image: url(https://i.pinimg.com/564x/15/dc/30/15dc30af29194fa3b91e9de015eb646b.jpg); 56 | background-color: rgba(255, 163, 42, 0.2); 57 | align-items: center; 58 | } 59 | .card-front::before { 60 | content: ""; 61 | position: absolute; 62 | inset: 1rem; 63 | border: 3px solid yellow; 64 | transform: translateZ(2rem); 65 | } 66 | .title { 67 | font-family: "Teko", sans-serif; 68 | font-size: 4.5rem; 69 | text-transform: uppercase; 70 | line-height: 120%; 71 | transform: translateZ(4.4rem); 72 | } 73 | .sub-title { 74 | font-size: 0.75rem; 75 | font-weight: 500; 76 | text-transform: uppercase; 77 | letter-spacing: 3px; 78 | transform: translateZ(3rem); 79 | } 80 | 81 | .card-back { 82 | background-image: url(./back.jpg); 83 | transform: rotateY(180deg); 84 | gap: 0.5rem; 85 | } 86 | .back-title { 87 | font-family: "Teko", sans-serif; 88 | font-size: 2.4rem; 89 | font-weight: 600; 90 | color: yellow; 91 | text-transform: uppercase; 92 | align-self: center; 93 | transform: translateZ(2rem); 94 | } 95 | 96 | .card-back span { 97 | font-weight: 600; 98 | color: yellow; 99 | } 100 | .btn { 101 | text-decoration: none; 102 | font-weight: 500; 103 | padding: 0.5rem 2.2rem; 104 | color: yellow; 105 | border: 2px solid white; 106 | border-radius: 100px; 107 | text-align: center; 108 | align-self: center; 109 | margin-top: 1rem; 110 | transform: translateZ(2rem); 111 | transition: 0.3s ease; 112 | } 113 | .btn:hover { 114 | background-color: rgb(185, 164, 0); 115 | color: white; 116 | border: 2px solid rgb(185, 164, 0); 117 | } 118 | --------------------------------------------------------------------------------