diff --git a/Components/Backgrounds/Neon-Graphics-Background/index.html b/Components/Backgrounds/Neon-Graphics-Background/index.html new file mode 100644 index 00000000..7c5bee54 --- /dev/null +++ b/Components/Backgrounds/Neon-Graphics-Background/index.html @@ -0,0 +1,16 @@ + + + + + + + + Neon Graphics Background + + +
+
+
+ + + diff --git a/Components/Backgrounds/Neon-Graphics-Background/script.js b/Components/Backgrounds/Neon-Graphics-Background/script.js new file mode 100644 index 00000000..21656e05 --- /dev/null +++ b/Components/Backgrounds/Neon-Graphics-Background/script.js @@ -0,0 +1,9 @@ +const bgAnimation = document.getElementById('bgAnimation'); + +const numberOfColorBoxes = 400; + +for (let i = 0; i < numberOfColorBoxes; i++) { + const colorBox = document.createElement('div'); + colorBox.classList.add('colorBox'); + bgAnimation.append(colorBox) +} \ No newline at end of file diff --git a/Components/Backgrounds/Neon-Graphics-Background/style.css b/Components/Backgrounds/Neon-Graphics-Background/style.css new file mode 100644 index 00000000..05702989 --- /dev/null +++ b/Components/Backgrounds/Neon-Graphics-Background/style.css @@ -0,0 +1,60 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + color: #fff; + background: #111; + font-family: 'Poppins', sans-serif; +} + +.bgAnimation { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100vh; + display: grid; + grid-template-columns: repeat(20, 1fr); + grid-template-rows: repeat(20, 1fr); + background: #1d1d1d; + filter: saturate(2); + overflow: hidden; +} + +.colorBox { + z-index: 2; + filter: brightness(1.1); + transition: 2s ease; + position: relative; + margin: 2px; + background: #1d1d1d; +} + +.colorBox:hover { + background: #00bfff; + transition-duration: 0s; +} + +.backgroundAmim { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 40px; + background: #00bfff; + filter: blur(60px); + animation: animBack 6s linear infinite; +} + +@keyframes animBack { + 0% { + top: -60px; + } + + 100% { + top: 120%; + } +} diff --git a/Components/Breadcrumbs/3D-Animated-Breadcrumb/index.html b/Components/Breadcrumbs/3D-Animated-Breadcrumb/index.html new file mode 100644 index 00000000..25eb8440 --- /dev/null +++ b/Components/Breadcrumbs/3D-Animated-Breadcrumb/index.html @@ -0,0 +1,27 @@ + + + + + + 3D Animated Breadcrumb + + +
+
+ + + + +
+
+ + diff --git a/Components/Breadcrumbs/3D-Animated-Breadcrumb/style.css b/Components/Breadcrumbs/3D-Animated-Breadcrumb/style.css new file mode 100644 index 00000000..9e54c081 --- /dev/null +++ b/Components/Breadcrumbs/3D-Animated-Breadcrumb/style.css @@ -0,0 +1,84 @@ +body { + background: #000; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + width: 100vw; +} + +.container { + transform-style: preserve-3d; + perspective: 1000px; +} + +.pane { + outline: 2px solid #00ff6a; + box-shadow: 0 0 10px #00ff6a77, inset 0 0 10px #00ff6a77; + height: 1cm; + width: 4.5cm; + border-radius: 5px; + position: relative; + overflow: hidden; + transition: 0.7s ease; +} + +.input { + display: none; +} + +.label { + height: 1cm; + width: 1.5cm; + float: left; + font-weight: 600; + letter-spacing: -1px; + font-size: 14px; + padding: 0px; + position: relative; + z-index: 1; + color: #00ff6a; + text-align: center; + padding-top: 10px; +} + +.selection { + display: none; + position: absolute; + height: 1cm; + width: calc(4.5cm / 3); + z-index: 0; + left: 0; + top: 0; + box-shadow: 0 0 10px #00ff6a77; + transition: 0.15s ease; +} + +.label:has(input:checked) { + color: #212121; +} + +.pane:has(.label:nth-child(1):hover) { + transform: rotateY(-30deg); +} + +.pane:has(.label:nth-child(3):hover) { + transform: rotateY(35deg); +} + +.label:has(input:checked)~.selection { + background-color: #00ff6a; + display: inline-block; +} + +.label:nth-child(1):has(input:checked)~.selection { + transform: translateX(calc(4.5cm * 0 / 3)); +} + +.label:nth-child(2):has(input:checked)~.selection { + transform: translateX(calc(4.5cm * 1 / 3)); +} + +.label:nth-child(3):has(input:checked)~.selection { + transform: translateX(calc(4.5cm * 2 / 3)); +} diff --git a/Components/Breadcrumbs/Chevron-Breadcrumb/index.html b/Components/Breadcrumbs/Chevron-Breadcrumb/index.html new file mode 100644 index 00000000..9a23d861 --- /dev/null +++ b/Components/Breadcrumbs/Chevron-Breadcrumb/index.html @@ -0,0 +1,18 @@ + + + + + + + Chevron Breadcrumb + + + + + diff --git a/Components/Breadcrumbs/Chevron-Breadcrumb/style.css b/Components/Breadcrumbs/Chevron-Breadcrumb/style.css new file mode 100644 index 00000000..376f8cc9 --- /dev/null +++ b/Components/Breadcrumbs/Chevron-Breadcrumb/style.css @@ -0,0 +1,57 @@ +body { + background-color: black; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.breadcrumb.chevron { + list-style: none; + display: flex; + padding: 0; + margin: 0; + background: black; + color: white; +} + +.breadcrumb.chevron .breadcrumb-item { + position: relative; + padding: 10px 20px; + background: #007bff; + color: white; + margin-right: 15px; + transition: background 0.3s ease; +} + +.breadcrumb.chevron .breadcrumb-item a { + color: white; + text-decoration: none; + display: block; +} + +.breadcrumb.chevron .breadcrumb-item:hover { + background: #0056b3; +} + +.breadcrumb.chevron .breadcrumb-item.active { + background: #6c757d; + pointer-events: none; +} + +.breadcrumb.chevron .breadcrumb-item::after { + content: ""; + position: absolute; + top: 0; + right: -15px; + width: 30px; + height: 100%; + background: #007bff; + clip-path: polygon(0 0, 100% 50%, 0 100%); + z-index: 1; +} + +.breadcrumb.chevron .breadcrumb-item.active::after { + background: #6c757d; +} diff --git a/Components/Buttons/Bat-Button/index.html b/Components/Buttons/Bat-Button/index.html new file mode 100644 index 00000000..54a9b915 --- /dev/null +++ b/Components/Buttons/Bat-Button/index.html @@ -0,0 +1,14 @@ + + + + + + + Bat Button + + + + + diff --git a/Components/Buttons/Bat-Button/style.css b/Components/Buttons/Bat-Button/style.css new file mode 100644 index 00000000..7f04bec2 --- /dev/null +++ b/Components/Buttons/Bat-Button/style.css @@ -0,0 +1,70 @@ +body, +html { + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +button { + border: none; + position: relative; + width: 200px; + height: 73px; + padding: 0; + z-index: 2; + -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='868' width='2500' viewBox='0 0 726 252.17'%3E%3Cpath d='M483.92 0S481.38 24.71 466 40.11c-11.74 11.74-24.09 12.66-40.26 15.07-9.42 1.41-29.7 3.77-34.81-.79-2.37-2.11-3-21-3.22-27.62-.21-6.92-1.36-16.52-2.82-18-.75 3.06-2.49 11.53-3.09 13.61S378.49 34.3 378 36a85.13 85.13 0 0 0-30.09 0c-.46-1.67-3.17-11.48-3.77-13.56s-2.34-10.55-3.09-13.61c-1.45 1.45-2.61 11.05-2.82 18-.21 6.67-.84 25.51-3.22 27.62-5.11 4.56-25.38 2.2-34.8.79-16.16-2.47-28.51-3.39-40.21-15.13C244.57 24.71 242 0 242 0H0s69.52 22.74 97.52 68.59c16.56 27.11 14.14 58.49 9.92 74.73C170 140 221.46 140 273 158.57c69.23 24.93 83.2 76.19 90 93.6 6.77-17.41 20.75-68.67 90-93.6 51.54-18.56 103-18.59 165.56-15.25-4.21-16.24-6.63-47.62 9.93-74.73C656.43 22.74 726 0 726 0z'/%3E%3C/svg%3E") no-repeat 50% 50%; + mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='868' width='2500' viewBox='0 0 726 252.17'%3E%3Cpath d='M483.92 0S481.38 24.71 466 40.11c-11.74 11.74-24.09 12.66-40.26 15.07-9.42 1.41-29.7 3.77-34.81-.79-2.37-2.11-3-21-3.22-27.62-.21-6.92-1.36-16.52-2.82-18-.75 3.06-2.49 11.53-3.09 13.61S378.49 34.3 378 36a85.13 85.13 0 0 0-30.09 0c-.46-1.67-3.17-11.48-3.77-13.56s-2.34-10.55-3.09-13.61c-1.45 1.45-2.61 11.05-2.82 18-.21 6.67-.84 25.51-3.22 27.62-5.11 4.56-25.38 2.2-34.8.79-16.16-2.47-28.51-3.39-40.21-15.13C244.57 24.71 242 0 242 0H0s69.52 22.74 97.52 68.59c16.56 27.11 14.14 58.49 9.92 74.73C170 140 221.46 140 273 158.57c69.23 24.93 83.2 76.19 90 93.6 6.77-17.41 20.75-68.67 90-93.6 51.54-18.56 103-18.59 165.56-15.25-4.21-16.24-6.63-47.62 9.93-74.73C656.43 22.74 726 0 726 0z'/%3E%3C/svg%3E") no-repeat 50% 50%; + -webkit-mask-size: 100%; + cursor: pointer; + background-color: transparent; + transform: translateY(8px) +} + +button:after { + content: ''; + position: absolute; + left: 0; + right: 0; + bottom: 0; + box-shadow: 0px 0 0 0 white; + transition: all 2s ease; +} + +button:hover:after { + box-shadow: 0px -13px 56px 12px #ffffffa6; +} + +button span { + position: absolute; + width: 100%; + font-size: 15px; + font-weight: 100; + left: 50%; + top: 39%; + letter-spacing: 3px; + text-align: center; + transform: translate(-50%, -50%); + color: black; + transition: all 2s ease; +} + +button:hover span { + color: white; +} + +button:before { + content: ''; + position: absolute; + width: 0; + height: 100%; + background-color: black; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + transition: all 1s ease; +} + +button:hover:before { + width: 100%; +} diff --git a/Components/Buttons/Like-Effect-Button/index.html b/Components/Buttons/Like-Effect-Button/index.html new file mode 100644 index 00000000..b804eaba --- /dev/null +++ b/Components/Buttons/Like-Effect-Button/index.html @@ -0,0 +1,21 @@ + + + + + + Like Effect Button + + + + + diff --git a/Components/Buttons/Like-Effect-Button/style.css b/Components/Buttons/Like-Effect-Button/style.css new file mode 100644 index 00000000..ef1360ff --- /dev/null +++ b/Components/Buttons/Like-Effect-Button/style.css @@ -0,0 +1,93 @@ +button { + display: flex; + justify-content: center; + align-items: center; + padding: 20px 25px 20px 22px; + box-shadow: rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset; + background-color: #e8e8e8; + border-color: #ffe2e2; + border-style: solid; + border-width: 9px; + border-radius: 35px; + font-size: 25px; + cursor: pointer; + font-weight: 900; + color: rgb(134, 124, 124); + font-family: monospace; + transition: transform 400ms cubic-bezier(0.68, -0.55, 0.27, 2.5), border-color 400ms ease-in-out, background-color 400ms ease-in-out; + word-spacing: -2px; +} + +@keyframes movingBorders { + 0% { + border-color: #fce4e4; + } + + 50% { + border-color: #ffd8d8; + } + + 90% { + border-color: #fce4e4; + } +} + +button:hover { + background-color: #eee; + transform: scale(105%); + animation: movingBorders 3s infinite; +} + +button svg { + margin-right: 11px; + fill: rgb(255, 110, 110); + transition: opacity 100ms ease-in-out; +} + +.filled { + position: absolute; + opacity: 0; + top: 20px; + left: 22px; +} + +@keyframes beatingHeart { + 0% { + transform: scale(1); + } + + 15% { + transform: scale(1.15); + } + + 30% { + transform: scale(1); + } + + 45% { + transform: scale(1.15); + } + + 60% { + transform: scale(1); + } +} + +button:hover .empty { + opacity: 0; +} + +button:hover .filled { + opacity: 1; + animation: beatingHeart 1.2s infinite; +} + +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-color: #f0f0f0; + font-family: Arial, sans-serif; +} diff --git a/Components/Buttons/On-Off-Button/index.html b/Components/Buttons/On-Off-Button/index.html new file mode 100644 index 00000000..9c0a78ae --- /dev/null +++ b/Components/Buttons/On-Off-Button/index.html @@ -0,0 +1,24 @@ + + + + + + + + On/Off Button + + + +
+ + +
+ N + F +
+
+ + + diff --git a/Components/Buttons/On-Off-Button/style.css b/Components/Buttons/On-Off-Button/style.css new file mode 100644 index 00000000..53346282 --- /dev/null +++ b/Components/Buttons/On-Off-Button/style.css @@ -0,0 +1,50 @@ +body { + margin: 0; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; +} + +.container { + margin: auto; + color: hsl(0, 0%, 30%); + font-weight: 900; + font-size: 6rem; + display: flex; +} + +.toggle { + width: 60px; + height: 155px; + background-color: hsl(0, 0%, 80%); + border-radius: 1.7rem; + padding: 0.25rem 0; + cursor: pointer; + display: flex; + justify-content: center; + transition: background-color 300ms 300ms; +} + +.toggle__circle { + width: 50px; + height: 50px; + background-color: hsl(0, 0%, 95%); + border-radius: 50%; + margin-top: calc(155px - (0.25rem * 2) - 50px); + transition: margin 500ms ease-in-out; +} + +.toggle-text { + display: flex; + flex-direction: column; + line-height: 0.8; +} + +#check:checked+.toggle>.toggle__circle { + margin-top: 0; +} + +#check:checked+.toggle { + background-color: #41a63c; +} diff --git a/Components/Buttons/Pulsing-Button/index.html b/Components/Buttons/Pulsing-Button/index.html new file mode 100644 index 00000000..c757f799 --- /dev/null +++ b/Components/Buttons/Pulsing-Button/index.html @@ -0,0 +1,12 @@ + + + + + + + Pulsing Button + + + + + diff --git a/Components/Buttons/Pulsing-Button/style.css b/Components/Buttons/Pulsing-Button/style.css new file mode 100644 index 00000000..f2cd6e74 --- /dev/null +++ b/Components/Buttons/Pulsing-Button/style.css @@ -0,0 +1,40 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #282c34; + margin: 0; + font-family: Arial, sans-serif; +} + +.pulse-button { + background-color: #61dafb; + color: #282c34; + border: none; + padding: 15px 30px; + font-size: 16px; + border-radius: 5px; + cursor: pointer; + box-shadow: 0 0 0 rgba(97, 218, 251, 0.7); + animation: pulse 2s infinite; + transition: background-color 0.3s, transform 0.3s; +} + +.pulse-button:hover { + background-color: #52c1e0; +} + +@keyframes pulse { + 0% { + box-shadow: 0 0 0 0 rgba(97, 218, 251, 0.7); + } + + 70% { + box-shadow: 0 0 20px 20px rgba(97, 218, 251, 0); + } + + 100% { + box-shadow: 0 0 0 0 rgba(97, 218, 251, 0); + } +} diff --git a/Components/Buttons/Social-Hover-Tone-Button/index.html b/Components/Buttons/Social-Hover-Tone-Button/index.html new file mode 100644 index 00000000..c3d7fbbb --- /dev/null +++ b/Components/Buttons/Social-Hover-Tone-Button/index.html @@ -0,0 +1,48 @@ + + + + + + + + + Social Hover Tone Button + + +

+ Social Hover Tone Button +

+
+ +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+ + diff --git a/Components/Buttons/Social-Hover-Tone-Button/style.css b/Components/Buttons/Social-Hover-Tone-Button/style.css new file mode 100644 index 00000000..817223a0 --- /dev/null +++ b/Components/Buttons/Social-Hover-Tone-Button/style.css @@ -0,0 +1,101 @@ +body { + background-image: url(https://t4.ftcdn.net/jpg/02/10/45/95/360_F_210459536_XmLDEcKq2DpeNLVmheuWeu9NM9aGKnih.jpg); + background-size: cover; + background-repeat: no-repeat; + overflow: hidden; +} + +.icons { + width: 100%; + display: flex; + align-items: center; + justify-content: space-evenly; + height: 100vh; +} + +.icons i { + color: black; +} + +.icons .icon i { + font-size: 3rem; /* Set the default font size for icons */ + transition: all 0.3s ease; /* Add transition for smooth animation */ +} + +.icons .icon:hover i { + transform: scale(1.2); /* Scale the icon on hover */ +} + +.icons .icon:hover .fab.fa-facebook { + color: #3B5998; /* Change to Facebook color on hover */ +} + +.icons .icon:hover .fa-brands.fa-x-twitter { + color: #090e11; /* Change to Twitter color on hover */ +} + +.icons .icon:hover .fa-brands.fa-github { + color: black; + background-color: white; + border-radius: 50%; +} + +.icons .icon:hover .fa-brands.fa-discord { + color: #5865F2; +} + +.icons .icon:hover .fab.fa-instagram { + background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); + background-clip: text; + border-radius: 20%; + transform: scale(1.5); + color: transparent; /* Change to Instagram color on hover */ +} + +.icons .icon:hover .fab.fa-youtube { + color: #C31A1E; /* Change to YouTube color on hover */ +} + +.icons .icon:hover .fab.fa-github { + color: #333; +} + +.icons .icon:hover .fab.fa-linkedin { + color: #0077B5; +} + +/* Social-Hovertone-Heading CSS */ + +.social-hovertone-heading { + font-family: 'Arial', sans-serif; + font-size: 50px; + font-weight: bold; + text-align: center; + color: black; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); + margin: 2rem 0; + padding: 10px; + border-radius: 10px; + position: relative; + overflow: hidden; + transition: color 0.3s, transform 0.3s; +} + +.social-hovertone-heading::before { + content: ""; + background: rgba(255, 255, 255, 0.2); + position: absolute; + top: 50%; + left: 50%; + width: 300%; + height: 300%; + transition: all 0.75s; + border-radius: 50%; + z-index: 0; + transform: translate(-50%, -50%) scale(0); +} + +.social-hovertone-heading span { + position: relative; + z-index: 1; +} diff --git a/Components/Cards/Port-ID-Card/assets/background.jpg b/Components/Cards/Port-ID-Card/assets/background.jpg new file mode 100644 index 00000000..0def6702 Binary files /dev/null and b/Components/Cards/Port-ID-Card/assets/background.jpg differ diff --git a/Components/Cards/Port-ID-Card/assets/image.png b/Components/Cards/Port-ID-Card/assets/image.png new file mode 100644 index 00000000..2eb02781 Binary files /dev/null and b/Components/Cards/Port-ID-Card/assets/image.png differ diff --git a/Components/Cards/Port-ID-Card/index.html b/Components/Cards/Port-ID-Card/index.html new file mode 100644 index 00000000..90cf8b28 --- /dev/null +++ b/Components/Cards/Port-ID-Card/index.html @@ -0,0 +1,110 @@ + + + + + + + Port ID Card + + +
+
+
+ avatar +

GANESH KUMAR

+

NETAJI SUBHAS UNIVERSITY

+
+
+
+
+
ABOUT
+

I want to became a web developer and I love to create websites. I hope i want to become a good developer and I am always looking for new projects.. + and explore many more languages +

+
+
+ + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
WORK EXPERIENCE
+
+
+
MATRICULATION AT SOUTH POINT ACADEMY
+
85 PERCENT .
+
+
+
INTERMEDIATE AT KARIM CITY COLLEGE
+
ABOVE 90 PERCENT.
+
+
+
PURSUING BCA AT NSU
+
RUNNING.
+
+
+
UPCOMING FRONTEND AND JAVA DEVELOPER
+
WITH DSA, OOPS AND MANY MORE .
+
+
+
+
+
+
+
CONTACT
+
+
+ + + + + DUTTA NIWAS , DIMNA JAMSHEDPUR +
+
+ + + + 70047****9 +
+
+ + + + + ganeshplays700@gmail.com +
+ +
+
+
+
+ + + +
+
+
+ + + diff --git a/Components/Cards/Port-ID-Card/script.js b/Components/Cards/Port-ID-Card/script.js new file mode 100644 index 00000000..df51e817 --- /dev/null +++ b/Components/Cards/Port-ID-Card/script.js @@ -0,0 +1,20 @@ +const buttons = document.querySelectorAll(".card-buttons button"); +const sections = document.querySelectorAll(".card-section"); +const card = document.querySelector(".card"); + +const handleButtonClick = e => { + const targetSection = e.target.getAttribute("data-section"); + const section = document.querySelector(targetSection); + targetSection !== "#about" ? + card.classList.add("is-active") : + card.classList.remove("is-active"); + card.setAttribute("data-state", targetSection); + sections.forEach(s => s.classList.remove("is-active")); + buttons.forEach(b => b.classList.remove("is-active")); + e.target.classList.add("is-active"); + section.classList.add("is-active"); +}; + +buttons.forEach(btn => { + btn.addEventListener("click", handleButtonClick); +}); diff --git a/Components/Cards/Port-ID-Card/style.css b/Components/Cards/Port-ID-Card/style.css new file mode 100644 index 00000000..383dbacd --- /dev/null +++ b/Components/Cards/Port-ID-Card/style.css @@ -0,0 +1,382 @@ +@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500|Jost:400,500,600&display=swap"); + +* { + box-sizing: border-box; +} + +body { + color: #2b2c48; + font-family: "Jost", sans-serif; + background-image: url('assets/background.jpg'); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + background-attachment: fixed; + min-height: 100vh; + overflow: hidden; + display: flex; + flex-wrap: wrap; + padding: 20px; +} + +.card { + max-width: 340px; + margin: auto; + overflow-y: auto; + position: relative; + z-index: 1; + overflow-x: hidden; + background-color: white; + display: flex; + transition: 0.3s; + flex-direction: column; + border-radius: 10px; + box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.2); +} + +.card[data-state="#about"] { + height: 450px; +} + +.card[data-state="#about"] .card-main { + padding-top: 0; +} + +.card[data-state="#contact"] { + height: 430px; +} + +.card[data-state="#experience"] { + height: 550px; +} + +.card.is-active .card-header { + height: 80px; +} + +.card.is-active .card-cover { + height: 100px; + top: -50px; +} + +.card.is-active .card-avatar { + transform: none; + left: 20px; + width: 50px; + height: 50px; + bottom: 10px; +} + +.card.is-active .card-fullname, +.card.is-active .card-jobtitle { + left: 86px; + transform: none; +} + +.card.is-active .card-fullname { + bottom: 18px; + font-size: 19px; +} + +.card.is-active .card-jobtitle { + bottom: 16px; + letter-spacing: 1px; + font-size: 10px; +} + +.card-header { + position: relative; + display: flex; + height: 200px; + flex-shrink: 0; + width: 100%; + transition: 0.3s; +} + +.card-header * { + transition: 0.3s; +} + +.card-cover { + width: 100%; + height: 100%; + position: absolute; + top: -20%; + left: 0; + will-change: top; + background-size: cover; + background-position: center; + filter: blur(30px); + transform: scale(1.2); + transition: 0.5s; +} + +.card-avatar { + width: 100px; + height: 100px; + box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2); + border-radius: 50%; + -o-object-position: center; + object-position: center; + -o-object-fit: cover; + object-fit: cover; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%) translateY(-64px); +} + +.card-fullname { + position: absolute; + bottom: 0; + font-size: 22px; + font-weight: 700; + text-align: center; + white-space: nowrap; + transform: translateY(-10px) translateX(-50%); + left: 50%; +} + +.card-jobtitle { + position: absolute; + bottom: 0; + font-size: 11px; + white-space: nowrap; + font-weight: 500; + opacity: 0.7; + text-transform: uppercase; + letter-spacing: 1.5px; + margin: 0; + left: 50%; + transform: translateX(-50%) translateY(-7px); +} + +.card-main { + position: relative; + flex: 1; + display: flex; + padding-top: 10px; + flex-direction: column; +} + +.card-subtitle { + font-weight: 700; + font-size: 13px; + margin-bottom: 8px; +} + +.card-content { + padding: 20px; +} + +.card-desc { + line-height: 1.6; + color: #636b6f; + font-size: 14px; + margin: 0; + font-weight: 400; + font-family: "DM Sans", sans-serif; +} + +.card-social { + display: flex; + align-items: center; + padding: 0 20px; + margin-bottom: 30px; +} + +.card-social svg { + fill: #a5b5ce; + width: 16px; + display: block; + transition: 0.3s; +} + +.card-social a { + color: #8797a1; + height: 32px; + width: 32px; + display: inline-flex; + align-items: center; + justify-content: center; + transition: 0.3s; + background-color: rgba(93, 133, 193, 0.05); + border-radius: 50%; + margin-right: 10px; +} + +.card-social a:hover svg { + fill: #637faa; +} + +.card-social a:last-child { + margin-right: 0; +} + +.card-buttons { + display: flex; + background-color: #fff; + margin-top: auto; + position: sticky; + bottom: 0; + left: 0; +} + +.card-buttons button { + flex: 1 1 auto; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background: 0; + font-size: 13px; + border: 0; + padding: 15px 5px; + cursor: pointer; + color: #5c5c6d; + transition: 0.3s; + font-family: "Jost", sans-serif; + font-weight: 500; + outline: 0; + border-bottom: 3px solid transparent; +} + +.card-buttons button.is-active, +.card-buttons button:hover { + color: #2b2c48; + border-bottom: 3px solid #8a84ff; + background: linear-gradient(to bottom, rgba(127, 199, 231, 0) 0%, rgba(207, 204, 255, 0.2) 44%, rgba(211, 226, 255, 0.4) 100%); +} + +.card-section { + display: none; +} + +.card-section.is-active { + display: block; + -webkit-animation: fadeIn 0.6s both; + animation: fadeIn 0.6s both; +} + +@-webkit-keyframes fadeIn { + 0% { + opacity: 0; + transform: translatey(40px); + } + + 100% { + opacity: 1; + } +} + +@keyframes fadeIn { + 0% { + opacity: 0; + transform: translatey(40px); + } + + 100% { + opacity: 1; + } +} + +.card-timeline { + margin-top: 30px; + position: relative; +} + +.card-timeline:after { + background: linear-gradient(to top, rgba(134, 214, 243, 0) 0%, #516acc 100%); + content: ""; + left: 42px; + width: 2px; + top: 0; + height: 100%; + position: absolute; +} + +.card-item { + position: relative; + padding-left: 60px; + padding-right: 20px; + padding-bottom: 30px; + z-index: 1; +} + +.card-item:last-child { + padding-bottom: 5px; +} + +.card-item:after { + content: attr(data-year); + position: absolute; + top: 0; + left: 37px; + width: 8px; + height: 8px; + line-height: 0.6; + border: 2px solid #fff; + font-size: 11px; + text-indent: -35px; + border-radius: 50%; + color: rgba(134, 134, 134, 0.7); + background: linear-gradient(to bottom, #a0aee3 0%, #516acc 100%); +} + +.card-item-title { + font-weight: 500; + font-size: 14px; + margin-bottom: 5px; +} + +.card-item-desc { + font-size: 13px; + color: #6f6f7b; + line-height: 1.5; + font-family: "DM Sans", sans-serif; +} + +.card-contact-wrapper { + margin-top: 20px; +} + +.card-contact { + display: flex; + align-items: center; + font-size: 13px; + color: #6f6f7b; + font-family: "DM Sans", sans-serif; + line-height: 1.6; + cursor: pointer; +} + +.card-contact+.card-contact { + margin-top: 16px; +} + +.card-contact svg { + flex-shrink: 0; + width: 30px; + min-height: 34px; + margin-right: 12px; + transition: 0.3s; + padding-right: 12px; + border-right: 1px solid #dfe2ec; +} + +.contact-me { + border: 0; + outline: none; + background: linear-gradient(to right, rgba(83, 200, 239, 0.8) 0%, rgba(81, 106, 204, 0.8) 96%); + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); + color: #fff; + padding: 12px 16px; + width: 100%; + border-radius: 5px; + margin-top: 25px; + cursor: pointer; + font-size: 14px; + font-weight: 500; + font-family: "Jost", sans-serif; + transition: 0.3s; +} diff --git a/Components/Cards/Sliding-Sticky-Notes-Card/index.html b/Components/Cards/Sliding-Sticky-Notes-Card/index.html new file mode 100644 index 00000000..0f1ee745 --- /dev/null +++ b/Components/Cards/Sliding-Sticky-Notes-Card/index.html @@ -0,0 +1,15 @@ + + + + + + + Sliding Sticky Notes Card + + +
+ +
+ + + diff --git a/Components/Cards/Sliding-Sticky-Notes-Card/script.js b/Components/Cards/Sliding-Sticky-Notes-Card/script.js new file mode 100644 index 00000000..41645036 --- /dev/null +++ b/Components/Cards/Sliding-Sticky-Notes-Card/script.js @@ -0,0 +1,20 @@ +document.addEventListener("DOMContentLoaded", function () { + const cardContainer = document.querySelector(".card-container"); + + for (let i = 1; i <= 20; i++) { + const card = document.createElement("div"); + card.classList.add("card"); + card.style.top = i + "rem"; // Position based on the loop index + card.style.transform = "rotate(" + i + "deg)"; // Rotate based on the loop index + + const cardTitle = document.createElement("h2"); + cardTitle.textContent = "Card Title"; + + const cardText = document.createElement("p"); + cardText.textContent = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque at nobis doloremque odit labore provident unde officiis odio sit sint? Vitae accusantium praesentium ullam alias aut quod cum perferendis maiores."; + + card.appendChild(cardTitle); + card.appendChild(cardText); + cardContainer.appendChild(card); + } +}); diff --git a/Components/Cards/Sliding-Sticky-Notes-Card/style.css b/Components/Cards/Sliding-Sticky-Notes-Card/style.css new file mode 100644 index 00000000..485f1f04 --- /dev/null +++ b/Components/Cards/Sliding-Sticky-Notes-Card/style.css @@ -0,0 +1,21 @@ +body { + margin-inline: max(0px, ((100% - 260px) / 2)); + font: 90%/1.4 system-ui; +} + +.card-container { + display: flex; + flex-wrap: wrap; + gap: 20px; +} + +.card { + position: sticky; + top: 0; + background: white; + padding: 1.5rem; + box-shadow: 0 -0.5rem 1rem rgba(0, 0, 0, 0.15); + border-radius: 4px; + flex: 1 0 calc(25% - 20px); /* Adjust card width here */ + margin-bottom: 20px; /* Adjust spacing between cards */ +} diff --git a/Components/Carousels/Touch-Slider-Carousel/images/image1.png b/Components/Carousels/Touch-Slider-Carousel/images/image1.png new file mode 100644 index 00000000..17a04f49 Binary files /dev/null and b/Components/Carousels/Touch-Slider-Carousel/images/image1.png differ diff --git a/Components/Carousels/Touch-Slider-Carousel/images/image2.png b/Components/Carousels/Touch-Slider-Carousel/images/image2.png new file mode 100644 index 00000000..02b43ff2 Binary files /dev/null and b/Components/Carousels/Touch-Slider-Carousel/images/image2.png differ diff --git a/Components/Carousels/Touch-Slider-Carousel/images/image3.png b/Components/Carousels/Touch-Slider-Carousel/images/image3.png new file mode 100644 index 00000000..a03974ed Binary files /dev/null and b/Components/Carousels/Touch-Slider-Carousel/images/image3.png differ diff --git a/Components/Carousels/Touch-Slider-Carousel/index.html b/Components/Carousels/Touch-Slider-Carousel/index.html new file mode 100644 index 00000000..f0918958 --- /dev/null +++ b/Components/Carousels/Touch-Slider-Carousel/index.html @@ -0,0 +1,71 @@ + + + + + + + + + Touch Slider Carousel + + + +

TOUCH SLIDER CAROUSEL

+
+
+
+
+
+ +
+
+

Flower Name

+ Species +
+
+
+
+ +
+
+

Flower Name

+ Species +
+
+
+
+ +
+
+

Flower Name

+ Species +
+
+
+
+ +
+
+

Flower Name

+ Species +
+
+
+
+ +
+
+

Flower Name

+ Species +
+
+
+
+
+
+ + + + + + diff --git a/Components/Carousels/Touch-Slider-Carousel/script.js b/Components/Carousels/Touch-Slider-Carousel/script.js new file mode 100644 index 00000000..c1206b9a --- /dev/null +++ b/Components/Carousels/Touch-Slider-Carousel/script.js @@ -0,0 +1,16 @@ +var swiper = new Swiper(".swiper-container", { + effect: "coverflow", + grabCursor: true, + centeredSlides: true, + slidesPerView: "auto", + coverflowEffect: { + rotate: 20, + stretch: 0, + depth: 350, + modifier: 1, + slideShadows: true + }, + pagination: { + el: ".swiper-pagination" + } +}); diff --git a/Components/Carousels/Touch-Slider-Carousel/style.css b/Components/Carousels/Touch-Slider-Carousel/style.css new file mode 100644 index 00000000..d67b2b0d --- /dev/null +++ b/Components/Carousels/Touch-Slider-Carousel/style.css @@ -0,0 +1,55 @@ +.tck { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 50px; +} + +.expk { + margin-top: -70px; +} + +.swiper-container { + width: 100%; + padding-top: 50px; + padding-bottom: 50px; +} + +.swiper-slide { + background-position: center; + background-size: cover; + width: 320px; + background-color: #fff; + overflow: hidden; + border-radius: 8px; +} + +.picturek { + width: 320px; + height: 320px; + overflow: hidden; +} + +.swiper-container img { + display: block; + width: 100%; + height: 100%; +} + +.detailek { + padding: 25px 20px; + font-weight: 600; + text-align: center; +} + +.switext1k { + margin: 0; + font-size: 20px; + color: #000; +} + +.switext2k { + display: block; + font-size: 16px; + color: #0c0c0c; +} diff --git a/Components/Dropdowns/Multiple-Selection-Dropdown/index.html b/Components/Dropdowns/Multiple-Selection-Dropdown/index.html new file mode 100644 index 00000000..0fa63971 --- /dev/null +++ b/Components/Dropdowns/Multiple-Selection-Dropdown/index.html @@ -0,0 +1,28 @@ + + + + + + + + + + Multiple Selection Dropdown + + + +
+ +
+
+
+
+ +
+
+
+ + + + + \ No newline at end of file diff --git a/Components/Dropdowns/Multiple-Selection-Dropdown/script.js b/Components/Dropdowns/Multiple-Selection-Dropdown/script.js new file mode 100644 index 00000000..cdd3cd74 --- /dev/null +++ b/Components/Dropdowns/Multiple-Selection-Dropdown/script.js @@ -0,0 +1,113 @@ +const techSkills = [ + "AWS", "Azure", "Artificial Intelligence", "Android Development", "Ansible", "Agile Development", "Automation", + "Blockchain", "Big Data", "Bootstrap", "Back-end Development", "Bash", "Business Intelligence", "Bluetooth", + "C++", "C#", "Cloud Computing", "Cybersecurity", "Cryptography", "CSS", "Continuous Integration", + "Docker", "Data Analysis", "Data Science", "Data Structures", "DevOps", "Django", "Database Management", + "Excel", "Ethical Hacking", "E-commerce Development", "Elasticsearch", "Embedded Systems", "ETL (Extract, Transform, Load)", "Express.js", + "Figma", "Firebase", "Front-end Development", "Fortran", "Functional Programming", "Flutter", "Firmware Development", + "Google Cloud", "Git", "GraphQL", "Go", "Game Development", "GIS (Geographic Information Systems)", "GPU Programming", + "HTML", "Hadoop", "Haskell", "Hybrid App Development", "Hyper-V", "HTML5", "HBase", + "iOS Development", "IoT (Internet of Things)", "Information Security", "Integration Testing", "Informatica", "IT Support", "Infrastructure as Code" +]; +let suggestions = [], selectedSkills = [] +const dropdown_list = document.querySelector(".dropdown-list") +const selected_list = document.querySelector(".dropdown-control .left") +const dropdown_toggle = document.querySelector(".dropdown-control .right") + +document.addEventListener("DOMContentLoaded", () => { + loadSelectedSkills() + dropdown_toggle.addEventListener("click", () => { + toggleDropDown() + }) +}) + +function loadSuggestions() { + dropdown_list.innerHTML = ``; + + suggestions.map((skill) => { + const list_item = document.createElement("div") + list_item.setAttribute("class", "list-item") + + if (selectedSkills.includes(skill)) { + list_item.innerHTML = `${skill}` + } else { + list_item.innerHTML = `${skill}` + } + + list_item.addEventListener("click", () => { + selectItem(skill) + }) + + dropdown_list.appendChild(list_item) + }) +} + +function loadSelectedSkills() { + selected_list.innerHTML = `` + + selectedSkills.map((skill) => { + const selected_item = document.createElement("div") + selected_item.setAttribute("class", "selected-item") + + selected_item.innerHTML = `${skill}` + + const remove_icon = document.createElement("i") + remove_icon.setAttribute("class", "fa fa-times") + + remove_icon.addEventListener("click", () => { + setSelectedSkills(selectedSkills.filter((sk) => sk != skill)) + }) + + selected_item.append(remove_icon) + + selected_list.appendChild(selected_item) + }) + + const input = createInputElement() + + selected_list.appendChild(input) +} + +function toggleDropDown() { + if (suggestions.length === 0) { + setSuggestions(techSkills) + } else { + setSuggestions([]) + } +} + +function selectItem(skill) { + if (selectedSkills.includes(skill)) { + setSelectedSkills(selectedSkills.filter((sk) => sk != skill)) + } else { + setSelectedSkills([...selectedSkills, skill]) + } +} + +function setSuggestions(newSuggestions) { + suggestions = newSuggestions + loadSuggestions() +} + +function setSelectedSkills(newSelectedSkills) { + selectedSkills = newSelectedSkills + loadSelectedSkills() + setSuggestions([]) +} + +function createInputElement() { + const input = document.createElement("input") + input.setAttribute("type", "text") + input.setAttribute("placeholder", "search skills") + + input.addEventListener("keyup", () => { + if (input.value === "") { + setSuggestions([]) + } else { + setSuggestions(techSkills.filter((skill) => skill.toLowerCase().startsWith(input.value.toLowerCase()))) + } + }) + + return input; +} + diff --git a/Components/Dropdowns/Multiple-Selection-Dropdown/style.css b/Components/Dropdowns/Multiple-Selection-Dropdown/style.css new file mode 100644 index 00000000..7bfd4ebd --- /dev/null +++ b/Components/Dropdowns/Multiple-Selection-Dropdown/style.css @@ -0,0 +1,116 @@ +* { + font-family: 'Poppins', Verdana, Geneva, Tahoma, sans-serif, Georgia, 'Times New Roman', Times, serif; + margin: 0; + padding: 0; + box-sizing: border-box; + font-weight: 400; +} + +body { + background-color: #016090; + display: flex; + align-items: center; + justify-content: center; + height: 100dvh; +} + +.dropdown-wrapper { + width: 100%; + max-width: 500px; +} + +.dropdown-control { + width: 100%; + background-color: whitesmoke; + display: flex; +} + +.dropdown-control .left { + width: 93%; + padding: 13px; + display: flex; + gap: 8px; + flex-wrap: wrap; +} + +.dropdown-control .right { + width: 7%; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + color: #016090; +} + +.dropdown-control .right:hover { + color: #9e9e9e; +} + +.selected-item { + background-color: transparent; + padding: 2px 7px; + width: max-content; + display: flex; + align-items: center; + cursor: pointer; + gap: 10px; + border-radius: 5px; + border: 2px solid #016090; + color: #016090; + font-size: 12px; + +} + +.selected-item:hover { + background-color: #e5f6ff; +} + +.dropdown-control input { + border: none; + background-color: transparent; + outline: none; + color: #016090; + flex: 1 1 50px; +} + +.dropdown-list { + width: 100%; + background-color: whitesmoke; + max-height: 220px; + overflow-y: scroll; +} + +.dropdown-list::-webkit-scrollbar { + width: 5px; +} + +.dropdown-list::-webkit-scrollbar-track { + background: whitesmoke; +} + +.dropdown-list::-webkit-scrollbar-thumb { + background: #888; + border-radius: 10px; +} + +.dropdown-list::-webkit-scrollbar-thumb:hover { + background: #555; +} + +.dropdown-list .list-item { + padding: 7px 10px; + border-bottom: 1px solid #b6e5ff; + cursor: pointer; + display: flex; + justify-content: space-between; + font-size: 14px; +} + +.dropdown-list .list-item:first-of-type { + border-top: 1px solid #b6e5ff; +} + +.dropdown-list .list-item:hover { + background-color: #dcdcdc; + color: #016090; +} \ No newline at end of file diff --git a/Components/Footers/Interactive-Footer/index.html b/Components/Footers/Interactive-Footer/index.html new file mode 100644 index 00000000..1259986c --- /dev/null +++ b/Components/Footers/Interactive-Footer/index.html @@ -0,0 +1,73 @@ + + + + + + + + Interactive Footer + + +
+

Welcome to Our Website

+
+ +
+
+

About Us

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

+
+
+ +
+

Our Products

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

+

Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

+
+
+
+ + + + + + diff --git a/Components/Footers/Interactive-Footer/script.js b/Components/Footers/Interactive-Footer/script.js new file mode 100644 index 00000000..68563228 --- /dev/null +++ b/Components/Footers/Interactive-Footer/script.js @@ -0,0 +1,20 @@ +const moreInfoButton = document.querySelector('.more-info-button'); +const moreInfoSection = document.querySelector('.more-info'); + +moreInfoButton.addEventListener('click', () => { + moreInfoSection.classList.toggle('show'); + if (moreInfoSection.classList.contains('show')) { + moreInfoButton.textContent = 'Less Info'; + } else { + moreInfoButton.textContent = 'More Info'; + } +}); + +const scrollToTopButton = document.querySelector('.scroll-to-top'); + +scrollToTopButton.addEventListener('click', () => { + window.scrollTo({ + top: 0, + behavior: 'smooth' + }); +}); diff --git a/Components/Footers/Interactive-Footer/style.css b/Components/Footers/Interactive-Footer/style.css new file mode 100644 index 00000000..e2524df5 --- /dev/null +++ b/Components/Footers/Interactive-Footer/style.css @@ -0,0 +1,130 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background-color: #f4f4f4; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 20px; +} + +header { + background-color: #333; + color: white; + padding: 20px 0; + text-align: center; +} + +header h1 { + margin: 0; +} + +main { + padding: 20px; +} + +.section-title { + text-align: center; + margin-bottom: 20px; +} + +.section-content { + background-color: #fff; + padding: 20px; + border-radius: 5px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +.footer-container { + background-color: #222; + padding: 40px 0; + display: flex; + justify-content: space-between; + align-items: flex-start; + flex-wrap: wrap; + gap: 30px; + color: #fff; +} + +.footer-section { + width: 250px; +} + +.footer-section h2 { + font-size: 1.5em; + margin-bottom: 15px; + color: #ff9900; +} + +.social-links li { + display: inline-block; + margin-right: 10px; +} + +.social-links a { + color: #fff; + /* White icons */ + font-size: 1.2em; +} + +.footer-copyright { + text-align: center; + margin-top: 30px; +} + +.more-info-button, +.scroll-to-top { + background-color: #ff9900; + border: none; + color: white; + padding: 10px 20px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin-top: 10px; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.more-info-button:hover, +.scroll-to-top:hover { + background-color: #ff7f00; +} + +.more-info { + display: none; + margin-top: 10px; +} + +.more-info.show { + display: block; +} + +.scroll-to-top { + position: fixed; + bottom: 20px; + right: 20px; +} + +.footer-section ul { + list-style: none; + padding: 0; +} + +.footer-section ul li { + margin-bottom: 5px; +} + +.footer-section ul li a { + text-decoration: none; + color: #fff; +} + +.footer-section ul li a:hover { + text-decoration: underline; +} diff --git a/Components/Footers/Parallax-Footer/index.html b/Components/Footers/Parallax-Footer/index.html new file mode 100644 index 00000000..72781bcf --- /dev/null +++ b/Components/Footers/Parallax-Footer/index.html @@ -0,0 +1,21 @@ + + + + + + + Parallax Footer + + +
+

Footer At the bottom

+

↧

+

↧

+

↧

+

↧

+
+ + + diff --git a/Components/Footers/Parallax-Footer/style.css b/Components/Footers/Parallax-Footer/style.css new file mode 100644 index 00000000..e17637ac --- /dev/null +++ b/Components/Footers/Parallax-Footer/style.css @@ -0,0 +1,27 @@ +main { + position: relative; + z-index: 2; + background: #7564f5; + height: 1500px; + margin-bottom: 350px; + box-shadow: 3px 2px 2px 0px rgba(51, 51, 51, 0.5); +} + +main p { + margin: 0; + padding-top: 100px; + font-size: 100px; + text-align: center; + color: #ddd; +} + +footer { + position: fixed; + bottom: 0; + width: 100%; + height: 350px; + padding-left: 50px; + background: #dc67a6; + font-size: 100px; + color: #a22b2f; +} diff --git a/Components/Footers/Split-Footer/index.html b/Components/Footers/Split-Footer/index.html new file mode 100644 index 00000000..985f0ccb --- /dev/null +++ b/Components/Footers/Split-Footer/index.html @@ -0,0 +1,43 @@ + + + + + + + Split Footer + + +
+

Split Footer

+
+

Section 1: Example Content

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nibh vitae fermentum condimentum, libero augue convallis elit, non tempor felis lectus non lacus. Nulla facilisi. Nulla facilisi. Nulla facilisi.

+
+
+

Section 2: More Content

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nibh vitae fermentum condimentum, libero augue convallis elit, non tempor felis lectus non lacus. Nulla facilisi. Nulla facilisi. Nulla facilisi.

+
+
+

Section 3: More Content

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nibh vitae fermentum condimentum, libero augue convallis elit, non tempor felis lectus non lacus. Nulla facilisi. Nulla facilisi. Nulla facilisi.

+
+
+

Section 4: More Content

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nibh vitae fermentum condimentum, libero augue convallis elit, non tempor felis lectus non lacus. Nulla facilisi. Nulla facilisi. Nulla facilisi.

+
+
+ + + diff --git a/Components/Footers/Split-Footer/style.css b/Components/Footers/Split-Footer/style.css new file mode 100644 index 00000000..5207dd8d --- /dev/null +++ b/Components/Footers/Split-Footer/style.css @@ -0,0 +1,64 @@ +body { + margin: 0; + font-family: 'Arial', sans-serif; + background-color: #f4f4f4; +} + +.container { + max-width: 960px; + margin: 0 auto; + padding: 20px; +} + +h1, +h2, +h3 { + text-align: center; + margin-bottom: 20px; +} + +.content { + background-color: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + margin-bottom: 30px; +} + +.footer { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #222; + color: #fff; + padding: 30px; +} + +.footer-left, +.footer-right { + flex: 1; + text-align: center; +} + +.footer-left p { + font-size: 1.2em; + margin-bottom: 10px; +} + +.social-links { + margin-top: 10px; +} + +.social-links a { + color: #fff; + text-decoration: none; + margin: 0 15px; + font-size: 1.5em; + transition: all 0.3s ease; +} + +.social-links a:hover { + text-decoration: none; + color: #ffcc00; + transform: translateY(-2px); +} diff --git a/Components/Footers/Sticky-Footer/index.html b/Components/Footers/Sticky-Footer/index.html new file mode 100644 index 00000000..adacfd21 --- /dev/null +++ b/Components/Footers/Sticky-Footer/index.html @@ -0,0 +1,30 @@ + + + + + + + Sticky Footer + + +
+

This is the main content of the page

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.

+

Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla sed consectetur.

+

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

+

More content

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.

+

Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla sed consectetur.

+

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.

+

Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla sed consectetur.

+

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.

+

Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla sed consectetur.

+

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

+
+ + + diff --git a/Components/Footers/Sticky-Footer/style.css b/Components/Footers/Sticky-Footer/style.css new file mode 100644 index 00000000..8a012b8e --- /dev/null +++ b/Components/Footers/Sticky-Footer/style.css @@ -0,0 +1,35 @@ +body { + display: flex; + flex-direction: column; + min-height: 100vh; + margin: 0; +} + +.content { + flex-grow: 1; + padding: 20px; +} + +footer { + background-color: #333; + color: #fff; + padding: 20px; + text-align: center; + position: relative; + bottom: 0; + width: 100%; + border-top: 1px solid #ddd; + font-size: 14px; + position: fixed; + bottom: 0; + left: 0; +} + +footer a { + color: #fff; + text-decoration: none; +} + +footer a:hover { + text-decoration: underline; +} diff --git a/Components/Forms/Animated-Login-Register-Form/assets/background.gif b/Components/Forms/Animated-Login-Register-Form/assets/background.gif new file mode 100644 index 00000000..f8bb41ee Binary files /dev/null and b/Components/Forms/Animated-Login-Register-Form/assets/background.gif differ diff --git a/Components/Forms/Animated-Login-Register-Form/index.html b/Components/Forms/Animated-Login-Register-Form/index.html new file mode 100644 index 00000000..ac05d97b --- /dev/null +++ b/Components/Forms/Animated-Login-Register-Form/index.html @@ -0,0 +1,79 @@ + + + + + + + + + + Animated Login Register Form + + +
+
+
+

TOUR GUIDE

+ + + + + + or use your account + +
+
+
+
+

TOUR GUIDE

+ + +
+
+ + +
+
+ Forgot password? +
+
+ + or use your account + +
+
+
+
+
+

Welcome
Back!

+

If You have an account, login here and have fun

+ +
+
+

Start your
journey now

+

if you don't have an account yet, join us and start your journey.

+ +
+
+
+
+ + + + diff --git a/Components/Forms/Animated-Login-Register-Form/script.js b/Components/Forms/Animated-Login-Register-Form/script.js new file mode 100644 index 00000000..ac4b7e2f --- /dev/null +++ b/Components/Forms/Animated-Login-Register-Form/script.js @@ -0,0 +1,15 @@ +const registerButton = document.getElementById("register"); +const loginButton = document.getElementById("login"); +const container = document.getElementById("container"); + +registerButton.addEventListener("click", () => { + container.classList.add("right-panel-active"); +}); + +loginButton.addEventListener("click", () => { + container.classList.remove("right-panel-active"); +}); + +function refreshPage() { + location.reload(); +} diff --git a/Components/Forms/Animated-Login-Register-Form/style.css b/Components/Forms/Animated-Login-Register-Form/style.css new file mode 100644 index 00000000..312ebfdd --- /dev/null +++ b/Components/Forms/Animated-Login-Register-Form/style.css @@ -0,0 +1,317 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins"); + +* { + box-sizing: border-box; +} + +body { + display: flex; + background-color: #f6f5f7; + justify-content: center; + align-items: center; + flex-direction: column; + font-family: "Poppins", sans-serif; + overflow: hidden; + height: 100vh; + background: url("assets/background.gif"); + background-size: cover; + opacity: 1.2; + +} + +h1 { + font-weight: 700; + letter-spacing: -1.5px; + margin: 0; + margin-bottom: 15px; +} + +h1.title { + font-size: 45px; + line-height: 45px; + margin: 0; + text-shadow: 0 0 10px rgba(16, 64, 74, 0.5); +} + +p { + font-size: 14px; + font-weight: 100; + line-height: 20px; + letter-spacing: 0.5px; + margin: 20px 0 30px; + text-shadow: 0 0 10px rgba(16, 64, 74, 0.5); +} + +span { + font-size: 14px; + margin-top: 25px; +} + +a { + color: #333; + font-size: 14px; + text-decoration: none; + margin: 15px 0; + transition: 0.3s ease-in-out; +} + +a:hover { + color: #296543; +} + +.content { + display: flex; + width: 100%; + height: 50px; + align-items: center; + justify-content: space-around; +} + +.content .checkbox { + display: flex; + align-items: center; + justify-content: center; +} + +.content input { + accent-color: #333; + width: 12px; + height: 12px; +} + +.content label { + font-size: 14px; + user-select: none; + padding-left: 5px; +} + +button { + position: relative; + border-radius: 20px; + border: 1px solid #296543; + background-color: #296543; + color: #fff; + font-size: 15px; + font-weight: 700; + margin: 10px; + padding: 12px 80px; + letter-spacing: 1px; + text-transform: capitalize; + transition: 0.3s ease-in-out; +} + +button:hover { + letter-spacing: 3px; +} + +button:active { + transform: scale(0.95); +} + +button:focus { + outline: none; +} + +button.ghost { + background-color: rgba(225, 225, 225, 0.2); + border: 2px solid #fff; + color: #fff; +} + +button.ghost i { + position: absolute; + opacity: 0; + transition: 0.3s ease-in-out; +} + +button.ghost i.register { + right: 70px; +} + +button.ghost i.login { + left: 70px; +} + +button.ghost:hover i.register { + right: 40px; + opacity: 1; +} + +button.ghost:hover i.login { + left: 40px; + opacity: 1; +} + +form { + background-color: #fff; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 0 50px; + height: 100%; + text-align: center; +} + +input { + background-color: #eee; + border-radius: 10px; + border: none; + padding: 12px 15px; + margin: 8px 0; + width: 100%; +} + +.container { + background-color: #fff; + border-radius: 25px; + box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); + position: relative; + overflow: hidden; + width: 768px; + max-width: 100%; + min-height: 500px; +} + +.form-container { + position: absolute; + top: 0; + height: 100%; + transition: all 0.6s ease-in-out; +} + +.login-container { + left: 0; + width: 50%; + z-index: 2; +} + +.container.right-panel-active .login-container { + transform: translateX(100%); +} + +.register-container { + left: 0; + width: 50%; + opacity: 0; + z-index: 1; +} + +.container.right-panel-active .register-container { + transform: translateX(100%); + opacity: 1; + z-index: 5; + animation: show 0.6s; +} + +@keyframes show { + + 0%, + 49.99% { + opacity: 0; + z-index: 1; + } + + 50%, + 100% { + opacity: 1; + z-index: 5; + } +} + +.overlay-container { + position: absolute; + top: 0; + left: 50%; + width: 50%; + height: 100%; + overflow: hidden; + transition: transform 0.6s ease-in-out; + z-index: 100; +} + +.container.right-panel-active .overlay-container { + transform: translate(-100%); +} + +.overlay { + background-image: url('assets/background.gif'); + background-repeat: no-repeat; + background-size: cover; + background-position: 0 0; + color: #fff; + position: relative; + left: -100%; + height: 100%; + width: 200%; + transform: translateX(0); + transition: transform 0.6s ease-in-out; +} + +.overlay::before { + content: ""; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + background: linear-gradient(to top, + rgba(46, 94, 109, 0.4) 40%, + rgba(46, 94, 109, 0)); +} + +.container.right-panel-active .overlay { + transform: translateX(50%); +} + +.overlay-panel { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 0 40px; + text-align: center; + top: 0; + height: 100%; + width: 50%; + transform: translateX(0); + transition: transform 0.6s ease-in-out; +} + +.overlay-left { + transform: translateX(-20%); +} + +.container.right-panel-active .overlay-left { + transform: translateX(0); +} + +.overlay-right { + right: 0; + transform: translateX(0); +} + +.container.right-panel-active .overlay-right { + transform: translateX(20%); +} + +.social-container { + margin: 20px 0; +} + +.social-container a { + border: 1px solid #dddddd; + border-radius: 50%; + display: inline-flex; + justify-content: center; + align-items: center; + margin: 0 5px; + height: 40px; + width: 40px; + transition: 0.3s ease-in-out; +} + +.social-container a:hover { + border: 1px solid #296543; +} diff --git a/Components/Forms/Event-Form/style.css b/Components/Forms/Event-Form/style.css index 2a7c50b3..916cba4b 100644 --- a/Components/Forms/Event-Form/style.css +++ b/Components/Forms/Event-Form/style.css @@ -6,8 +6,7 @@ body { justify-content: center; align-items: center; height: 100vh; - background-color: #c9e8ed; - /* Light background color */ + background: linear-gradient(135deg, #a8edea, #fed6e3); transition: background-color 0.3s; } @@ -15,48 +14,54 @@ form { display: flex; flex-direction: column; align-items: center; - padding: 20px; - background-color: #efb7d5; - /* White background color */ - border-radius: 10px; - box-shadow: 0 0 10px #e44d26, 0 0 20px #e44d26, 0 0 30px #e44d26, 0 0 40px #e44d26; - /* Neon glow effect */ + padding: 30px; + background: linear-gradient(135deg, #f6d365, #fda085); + border-radius: 20px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); animation: slideIn 0.5s ease-in-out; - transition: background-color 0.3s, box-shadow 0.3s; + transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s; + max-width: 400px; + width: 100%; } input, button { - margin: 10px; - padding: 10px; - width: 200px; - border: 1px solid #e44d26; - /* Vibrant border color */ - border-radius: 5px; + margin: 15px; + padding: 12px 15px; + width: 240px; + border: 2px solid #fd7e14; + border-radius: 10px; font-size: 16px; - color: #edc3c3; - /* Vibrant text color */ + color: #0e71d5; background-color: #fff; - /* Vibrant background color */ - transition: background-color 0.3s, border-color 0.3s; + transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s; +} + +input:focus { + outline: none; + border-color: #ff9f43; + box-shadow: 0 0 10px rgba(255, 159, 67, 0.5); + transform: scale(1.05); } button { cursor: pointer; - background-color: #e44d26; - /* Vibrant button color */ + background-color: #fd7e14; + color: white; + font-weight: bold; + transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s; } button:hover { - /* background-color: #ff704d; Brighter color on hover */ - background-color: #b0406d; + background-color: #ff9f43; + transform: scale(1.1); + box-shadow: 0 0 10px rgba(255, 159, 67, 0.5); } form:hover { - background-color: #f5c6c6; - /* Lighter background color on hover */ - box-shadow: 0 0 15px #e44d26, 0 0 25px #e44d26, 0 0 35px #e44d26, 0 0 45px #e44d26; - /* Intensify neon glow on hover */ + background: linear-gradient(135deg, #fda085, #f6d365); + box-shadow: 0 0 15px rgba(253, 126, 20, 0.5), 0 0 25px rgba(253, 126, 20, 0.4), 0 0 35px rgba(253, 126, 20, 0.3), 0 0 45px rgba(253, 126, 20, 0.2); + transform: scale(1.02); } @keyframes slideIn { @@ -64,9 +69,40 @@ form:hover { opacity: 0; transform: translateY(-20px); } - 100% { opacity: 1; transform: translateY(0); } +} + +input[type="text"], +input[type="email"], +input[type="password"], +input[type="date"] { + padding-left: 40px; + background: url('icon-placeholder.png') no-repeat 10px center; + background-size: 20px 20px; +} + +input::placeholder, +input[type="date"]::placeholder { + color: #adb5bd; + font-style: italic; +} + +button:active { + transform: scale(1.05); +} + +@media (max-width: 500px) { + form { + padding: 20px; + width: 90%; + } + + input, + button { + width: 100%; + margin: 10px 0; + } } \ No newline at end of file diff --git a/Components/Forms/Sign-Up-Form/index.html b/Components/Forms/Sign-Up-Form/index.html new file mode 100644 index 00000000..c81dad7c --- /dev/null +++ b/Components/Forms/Sign-Up-Form/index.html @@ -0,0 +1,78 @@ + + + + + + + + + Sign Up Form + + +
+
+
+

Sign Up

+
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ +
+ +
+ +
+
+
+

Why Sign Up?

+

Calling all agricultural sellers! Be part of a community dedicated to supporting farmers with diverse products essential for crop cultivation, health, and protection. Together, let's innovate, elevate farming practices, and safeguard crops against diseases, ensuring food security and sustainable agriculture for generations to come.

+

Join Us and Grow!

+
+
+
+ + diff --git a/Components/Forms/Sign-Up-Form/style.css b/Components/Forms/Sign-Up-Form/style.css new file mode 100644 index 00000000..3d8d0aca --- /dev/null +++ b/Components/Forms/Sign-Up-Form/style.css @@ -0,0 +1,14 @@ +html, +body { + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.login-container { + display: flex; + justify-content: center; + align-items: center; + max-width: 90%; +} diff --git a/Components/Loaders/Bike-Loader/index.html b/Components/Loaders/Bike-Loader/index.html new file mode 100644 index 00000000..f50cd600 --- /dev/null +++ b/Components/Loaders/Bike-Loader/index.html @@ -0,0 +1,25 @@ + + + + + + + + Bike Loader + + + +
+

The Biker's Club

+
+ img 1 + img 2 + img 3 + img 4 + img 5 +
+
+ + + + diff --git a/Components/Loaders/Bike-Loader/script.js b/Components/Loaders/Bike-Loader/script.js new file mode 100644 index 00000000..81511b14 --- /dev/null +++ b/Components/Loaders/Bike-Loader/script.js @@ -0,0 +1,8 @@ +const bikeImages = document.querySelectorAll(".bike-image"); +let currentIndex = 0; + +setInterval(() => { + bikeImages[currentIndex].style.opacity = "0"; + currentIndex = (currentIndex + 1) % bikeImages.length; + bikeImages[currentIndex].style.opacity = "1"; +}, 800); diff --git a/Components/Loaders/Bike-Loader/style.css b/Components/Loaders/Bike-Loader/style.css new file mode 100644 index 00000000..e75a1d61 --- /dev/null +++ b/Components/Loaders/Bike-Loader/style.css @@ -0,0 +1,70 @@ +body { + margin: 0; + padding: 0; + height: 100vh; + background-color: black; +} + +.main { + height: 100vh; + width: 100vw; + display: flex; + justify-content: center; + align-items: center; +} + +h1 { + color: chartreuse; + font-family: sans-serif; + font-size: 54px; + text-shadow: -2px -2px 30px chartreuse; +} + +.preloader-container { + position: relative; + width: 200px; + height: 200px; +} + +.bike-image { + position: absolute; + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 50%; + opacity: 0; + transition: opacity 0.7s ease-in-out; +} + +.loading { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.loading::before, +.loading::after { + content: ""; + position: absolute; + border: 8px solid #3498db; + border-radius: 50%; + width: 40px; + height: 40px; + animation: spin 1s linear infinite; +} + +.loading::before { + border-color: transparent transparent transparent #3498db; + animation-delay: 0.4s; +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} diff --git a/Components/Loaders/Bouncing-Loader/index.html b/Components/Loaders/Bouncing-Loader/index.html new file mode 100644 index 00000000..14630efc --- /dev/null +++ b/Components/Loaders/Bouncing-Loader/index.html @@ -0,0 +1,19 @@ + + + + + + + Bouncing Loader + + +
+
+
+
+
+
+
+
+ + diff --git a/Components/Loaders/Bouncing-Loader/style.css b/Components/Loaders/Bouncing-Loader/style.css new file mode 100644 index 00000000..dda9bb37 --- /dev/null +++ b/Components/Loaders/Bouncing-Loader/style.css @@ -0,0 +1,52 @@ +body, +html { + height: 100%; + margin: 0; + display: flex; + justify-content: center; + align-items: center; + background: linear-gradient(to top, rgb(231, 181, 88), rgb(81, 81, 172), rgb(235, 106, 106)) +} + +.loader-container { + text-align: center; +} + +.bouncing-loader { + display: flex; + justify-content: center; +} + +.bouncing-loader div { + width: 40px; + height: 40px; + background: linear-gradient(to bottom, rgb(247, 250, 83), rgb(243, 125, 46)); + border-radius: 50%; + margin: 0 5px; + animation: bouncing-animation 1.4s infinite ease-in-out; + animation-delay: calc(var(--delay) * 0.2s); +} + +@keyframes bouncing-animation { + + 0%, + 100% { + transform: translateY(0); + } + + 50% { + transform: translateY(-20px); + } +} + +.bouncing-loader div:nth-child(2) { + --delay: 1; +} + +.bouncing-loader div:nth-child(3) { + --delay: 2; +} + +.bouncing-loader div:nth-child(4) { + --delay: 3; +} diff --git a/Components/Loaders/Pan-Flip-Loader/index.html b/Components/Loaders/Pan-Flip-Loader/index.html new file mode 100644 index 00000000..03203a2f --- /dev/null +++ b/Components/Loaders/Pan-Flip-Loader/index.html @@ -0,0 +1,30 @@ + + + + + + + Pan Flip Loader + + +
+
+

Loading...

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + diff --git a/Components/Loaders/Pan-Flip-Loader/style.css b/Components/Loaders/Pan-Flip-Loader/style.css new file mode 100644 index 00000000..f7db1790 --- /dev/null +++ b/Components/Loaders/Pan-Flip-Loader/style.css @@ -0,0 +1,276 @@ +@import url("https://fonts.googleapis.com/css?family=Amatic+SC"); + +body { + height: 100vh; + width: 100vw; + overflow: hidden; +} + +h1 { + position: relative; + margin-bottom: 50%; + top: 25vh; + width: 100vw; + text-align: center; + font-family: "Amatic SC"; + font-size: 6vh; + color: #333; + opacity: 0.75; + animation: pulse 2.5s linear infinite; +} + +#preloader { + width: 100%; + height: 100vh; + position: fixed; + top: 0; + left: 0; + background-color: #ffde6b; + z-index: 2000; + margin-bottom: 50%; +} + +#preloader .bubble { + position: absolute; + border-radius: 100%; + box-shadow: 0 0 0.25vh #4d4d4d; + opacity: 0; +} + +#preloader .bubble:nth-child(1) { + margin-top: 2.5vh; + left: 58%; + width: 3.5vh; + height: 3.5vh; + background-color: #175486; + animation: bubble 2s cubic-bezier(0.53, 0.16, 0.39, 0.96) infinite; +} + +#preloader .bubble:nth-child(2) { + margin-top: 3vh; + left: 52%; + width: 3vh; + height: 3vh; + background-color: #46c0ed; + animation: bubble 2s ease-in-out 0.35s infinite; +} + +#preloader .bubble:nth-child(3) { + margin-top: 1.8vh; + left: 50%; + width: 2.5vh; + height: 2.5vh; + background-color: #365cf3; + animation: bubble 1.5s cubic-bezier(0.53, 0.16, 0.39, 0.96) 0.55s infinite; +} + +#preloader .bubble:nth-child(4) { + margin-top: 2.7vh; + left: 56%; + width: 2.2vh; + height: 2.2vh; + background-color: #029ef9; + animation: bubble 1.8s cubic-bezier(0.53, 0.16, 0.39, 0.96) 0.9s infinite; +} + +#preloader .bubble:nth-child(5) { + left: 54%; + width: 2.1vh; + height: 2.1vh; + background-color: #0b1a7b; + animation: bubble 1.6s ease-in-out 1s infinite; +} + +#preloader #area { + position: absolute; + bottom: 0; + right: 0; + width: 25%; + height: 25%; + background-color: transparent; + transform-origin: 15% 60%; + animation: flip 2.1s ease-in-out infinite; + margin-bottom: 10%; + margin-right: 30%; +} + +#preloader #area #sides { + position: absolute; + width: 100%; + height: 100%; + transform-origin: 15% 60%; + animation: switchSide 2.1s ease-in-out infinite; +} + +#preloader #area #sides #handle { + position: absolute; + bottom: 18%; + right: 80%; + width: 35%; + height: 20%; + background-color: transparent; + border-top: 1vh solid #333; + border-left: 1vh solid transparent; + border-radius: 100%; + transform: rotate(20deg) rotateX(0deg) scale(1.3, 0.9); +} + +#preloader #area #sides #pan { + position: absolute; + bottom: 20%; + right: 30%; + width: 50%; + height: 8%; + background-color: #333; + border-radius: 0 0 1.4em 1.4em; + transform-origin: -15% 0; +} + +#preloader #area #pancake { + position: absolute; + top: 24%; + width: 100%; + height: 100%; + transform: rotateX(85deg); + animation: jump 2.1s ease-in-out infinite; +} + +#preloader #area #pancake #pastry { + position: absolute; + bottom: 26%; + right: 37%; + width: 40%; + height: 45%; + background-color: #907048; + box-shadow: 0 0 3px 0 #333; + border-radius: 100%; + transform-origin: -20% 0; + animation: fly 2.1s ease-in-out infinite; +} + +@keyframes jump { + 0% { + top: 24%; + transform: rotateX(85deg); + } + + 25% { + top: 10%; + transform: rotateX(0deg); + } + + 50% { + top: 30%; + transform: rotateX(85deg); + } + + 75% { + transform: rotateX(0deg); + } + + 100% { + transform: rotateX(85deg); + } +} + +@keyframes flip { + 0% { + transform: rotate(0deg); + } + + 5% { + transform: rotate(-27deg); + } + + 30%, + 50% { + transform: rotate(0deg); + } + + 55% { + transform: rotate(27deg); + } + + 83.3% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(0deg); + } +} + +@keyframes switchSide { + 0% { + transform: rotateY(0deg); + } + + 50% { + transform: rotateY(180deg); + } + + 100% { + transform: rotateY(0deg); + } +} + +@keyframes fly { + 0% { + bottom: 26%; + transform: rotate(0deg); + } + + 10% { + bottom: 40%; + } + + 50% { + bottom: 26%; + transform: rotate(-190deg); + } + + 80% { + bottom: 40%; + } + + 100% { + bottom: 26%; + transform: rotate(0deg); + } +} + +@keyframes bubble { + 0% { + transform: scale(0.15, 0.15); + top: 80%; + opacity: 0; + } + + 50% { + transform: scale(1.1, 1.1); + opacity: 1; + } + + 100% { + transform: scale(0.33, 0.33); + top: 60%; + opacity: 0; + } +} + +@keyframes pulse { + 0% { + transform: scale(1, 1); + opacity: 0.25; + } + + 50% { + transform: scale(1.2, 1); + opacity: 1; + } + + 100% { + transform: scale(1, 1); + opacity: 0.25; + } +} diff --git a/Components/Navigation-Bars/Floating-Action-Button-Navigation-Bar/index.html b/Components/Navigation-Bars/Floating-Action-Button-Navigation-Bar/index.html new file mode 100644 index 00000000..322c7603 --- /dev/null +++ b/Components/Navigation-Bars/Floating-Action-Button-Navigation-Bar/index.html @@ -0,0 +1,37 @@ + + + + + + + + Floating Action Button Navigation Bar + + +
+
+ + +
+ +
+ + + + diff --git a/Components/Navigation-Bars/Floating-Action-Button-Navigation-Bar/script.js b/Components/Navigation-Bars/Floating-Action-Button-Navigation-Bar/script.js new file mode 100644 index 00000000..7c26c05b --- /dev/null +++ b/Components/Navigation-Bars/Floating-Action-Button-Navigation-Bar/script.js @@ -0,0 +1,26 @@ +document.addEventListener('click', function(event) { + const fabMenu = document.getElementById('nav-items'); + const fab = document.getElementById('fab'); + const isClickInside = fab.contains(event.target) || fabMenu.contains(event.target); + + if (!isClickInside) { + fabMenu.classList.remove('open'); + } +}); + +function toggleFabMenu() { + const fabMenu = document.getElementById('nav-items'); + fabMenu.classList.toggle('open'); +} + +function navigateTo(element) { + highlightActiveItem(element); +} + +function highlightActiveItem(element) { + const menuItems = document.querySelectorAll('.nav-item'); + menuItems.forEach(item => { + item.classList.remove('active'); + }); + element.classList.add('active'); +} diff --git a/Components/Navigation-Bars/Floating-Action-Button-Navigation-Bar/style.css b/Components/Navigation-Bars/Floating-Action-Button-Navigation-Bar/style.css new file mode 100644 index 00000000..2b9ccd9a --- /dev/null +++ b/Components/Navigation-Bars/Floating-Action-Button-Navigation-Bar/style.css @@ -0,0 +1,101 @@ +body { + font-family: 'Arial', sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-color: #f0f2f5; +} + +.navbar { + position: fixed; + top: 0; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + background-color: #2c3e50; + padding: 10px 0; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); +} + +.fab { + width: 60px; + height: 60px; + background-color: #e74c3c; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + color: white; + font-size: 24px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + cursor: pointer; + position: relative; + transition: transform 0.3s ease, background-color 0.3s ease; +} + +.fab:hover { + background-color: #c0392b; +} + +.fab:active { + transform: scale(0.95); +} + +.nav-items { + display: flex; + justify-content: space-around; + align-items: center; + width: 0; + overflow: hidden; + transition: width 0.5s ease; +} + +.nav-item { + display: flex; + align-items: center; + justify-content: center; + width: 120px; + height: 60px; + background-color: #34495e; + color: white; + border-radius: 30px; + cursor: pointer; + margin: 0 10px; + transition: background-color 0.3s ease, opacity 0.5s ease, transform 0.5s ease; + opacity: 0; + transform: scale(0); +} + +.nav-item i { + font-size: 24px; + margin-right: 8px; +} + +.nav-item span { + display: none; + font-size: 14px; +} + +.nav-item:hover { + background-color: #2c3e50; +} + +.nav-item.active { + background-color: #1abc9c; +} + +.nav-items.open { + width: 100%; +} + +.nav-items.open .nav-item { + opacity: 1; + transform: scale(1); +} + +.nav-items.open .nav-item span { + display: inline; +} diff --git a/Components/Text-Animations/Color-Cycle-Text-Animation/index.html b/Components/Text-Animations/Color-Cycle-Text-Animation/index.html new file mode 100644 index 00000000..11a4f5ef --- /dev/null +++ b/Components/Text-Animations/Color-Cycle-Text-Animation/index.html @@ -0,0 +1,12 @@ + + + + + + + Color Cycle Text Animation + + +

Color Cycle Text Animation

+ + diff --git a/Components/Text-Animations/Color-Cycle-Text-Animation/style.css b/Components/Text-Animations/Color-Cycle-Text-Animation/style.css new file mode 100644 index 00000000..2711a690 --- /dev/null +++ b/Components/Text-Animations/Color-Cycle-Text-Animation/style.css @@ -0,0 +1,36 @@ +@keyframes colorCycle { + 0% { + color: red; + } + + 16.67% { + color: orange; + } + + 33.33% { + color: yellow; + } + + 50% { + color: green; + } + + 66.67% { + color: blue; + } + + 83.33% { + color: indigo; + } + + 100% { + color: violet; + } +} + +.color-cycle-text { + font-size: 2em; + animation: colorCycle 3s linear infinite; + text-align: center; + margin-top: 20%; +} diff --git a/Components/Text-Animations/Frozen-Text-Animation/assets/background.jpg b/Components/Text-Animations/Frozen-Text-Animation/assets/background.jpg new file mode 100644 index 00000000..a006400b Binary files /dev/null and b/Components/Text-Animations/Frozen-Text-Animation/assets/background.jpg differ diff --git a/Components/Text-Animations/Frozen-Text-Animation/assets/ice.jpg b/Components/Text-Animations/Frozen-Text-Animation/assets/ice.jpg new file mode 100644 index 00000000..21f9fc95 Binary files /dev/null and b/Components/Text-Animations/Frozen-Text-Animation/assets/ice.jpg differ diff --git a/Components/Text-Animations/Frozen-Text-Animation/index.html b/Components/Text-Animations/Frozen-Text-Animation/index.html new file mode 100644 index 00000000..baaf4cc4 --- /dev/null +++ b/Components/Text-Animations/Frozen-Text-Animation/index.html @@ -0,0 +1,17 @@ + + + + + + + Frozen Text Animation + + +
+

+ +

+
+ + + diff --git a/Components/Text-Animations/Frozen-Text-Animation/script.js b/Components/Text-Animations/Frozen-Text-Animation/script.js new file mode 100644 index 00000000..44a76081 --- /dev/null +++ b/Components/Text-Animations/Frozen-Text-Animation/script.js @@ -0,0 +1,5 @@ +var h1 = document.querySelector("h1"); +​ +h1.addEventListener("input", function() { + this.setAttribute("data-heading", this.innerText); +}); \ No newline at end of file diff --git a/Components/Text-Animations/Frozen-Text-Animation/style.css b/Components/Text-Animations/Frozen-Text-Animation/style.css new file mode 100644 index 00000000..e0ec06f1 --- /dev/null +++ b/Components/Text-Animations/Frozen-Text-Animation/style.css @@ -0,0 +1,39 @@ +body { + background: linear-gradient(to bottom, #000428, #004e92), url("assets/background.jpg"); + background-blend-mode: saturation; + background-size: cover; +} + +div { + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + position: relative; +} + +h1 { + transform: translate(0, -40%); + font-size: calc(20vw + 0.5rem); + font-family: "frozen", serif; + background-image: url("assets/ice.jpg"); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-size: contain; + position: relative; + -webkit-text-stroke: 1px #4f90ab; +} + +@keyframes shine { + 0% { + background-position: -120%; + } + + 10% { + background-position: 120%; + } + + 100% { + background-position: 120%; + } +} diff --git a/Components/Text-Animations/Ghost-Text-Animation/index.html b/Components/Text-Animations/Ghost-Text-Animation/index.html new file mode 100644 index 00000000..0962fdbd --- /dev/null +++ b/Components/Text-Animations/Ghost-Text-Animation/index.html @@ -0,0 +1,26 @@ + + + + + + + + Ghost Text Animation + + + +
+
+

GHOST

+
+
+
+
+
+
+
+
+
+ + + diff --git a/Components/Text-Animations/Ghost-Text-Animation/style.css b/Components/Text-Animations/Ghost-Text-Animation/style.css new file mode 100644 index 00000000..75b0187d --- /dev/null +++ b/Components/Text-Animations/Ghost-Text-Animation/style.css @@ -0,0 +1,108 @@ +@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap"); + +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + min-height: 100vh; + display: grid; + place-items: center; + --bkg: #5eb3fd; + --white: #e7e6e6; + background-color: var(--white); + background-image: url("https://www.transparenttextures.com/patterns/concrete-wall.png"); +} + +.container { + width: 100%; + height: 100%; + display: grid; + place-items: center; + overflow: hidden; +} + +.title { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.title h1 { + font-size: 25vmin; + font-weight: 900; + font-family: "Montserrat", sans-serif; + color: black; +} + +.ghost { + width: 8vmin; + height: 12vmin; + background-color: var(--white); + background-image: url("https://www.transparenttextures.com/patterns/concrete-wall.png"); + background-image: radial-gradient(ellipse at 35% 40%, #000 8%, transparent 0%), + radial-gradient(ellipse at 65% 40%, #000 8%, transparent 0%), + radial-gradient(ellipse at 50% 60%, #000 8%, transparent 0%); + border-radius: 100% / 70% 70% 0% 0%; + transform: translateX(100em) rotateZ(-90deg); + position: relative; + opacity: 0.9; + mix-blend-mode: exclusion; + animation: ghostMove 4s ease-out infinite; +} + +@keyframes ghostMove { + 0% { + transform: translateX(30em) rotateZ(-90deg); + } + + 100% { + transform: translateX(-35em) rotateZ(-90deg); + } +} + +.ghost div { + position: absolute; + width: 20%; + background-color: var(--white); + background-image: url("https://www.transparenttextures.com/patterns/concrete-wall.png"); +} + +.ghost div:nth-of-type(1) { + height: 7vmin; + left: 0; + bottom: -6vmin; + border-radius: 100% / 0% 0% 50% 50%; +} + +.ghost div:nth-of-type(2), +.ghost div:nth-of-type(4) { + height: 4vmin; + left: 20%; + bottom: -3vmin; + border-radius: 100% / 50% 50% 0% 0%; + background-color: transparent; +} + +.ghost div:nth-of-type(3) { + height: 4vmin; + left: 40%; + bottom: -3.95vmin; + border-radius: 100% / 0% 0% 60% 60%; + background-color: var(--white); +} + +.ghost div:nth-of-type(4) { + left: 60%; +} + +.ghost div:nth-of-type(5) { + height: 3vmin; + left: 80%; + bottom: -2.9vmin; + border-radius: 100% / 0% 0% 70% 70%; + background-color: var(--white); +} diff --git a/assets/html_files/backgrounds.html b/assets/html_files/backgrounds.html index 4792e00c..52e63546 100644 --- a/assets/html_files/backgrounds.html +++ b/assets/html_files/backgrounds.html @@ -408,6 +408,19 @@

Moving Squares Background

+
+

Neon Graphics Background

+
+ + + +
+
+ + + +
+

Neumorphism Background

diff --git a/assets/html_files/breadcrumbs.html b/assets/html_files/breadcrumbs.html index 5ff15927..627630ac 100644 --- a/assets/html_files/breadcrumbs.html +++ b/assets/html_files/breadcrumbs.html @@ -96,6 +96,19 @@

Hmmm, we are not getting any result.
Our bad - Please try another searc

+
+

3D Animated Breadcrumb

+
+ + + +
+
+ + + +
+

3D Breadcrumb

@@ -122,6 +135,19 @@

Animated Breadcrumb

+
+

Chevron Breadcrumb

+
+ + + +
+
+ + + +
+

Colored Breadcrumb

diff --git a/assets/html_files/buttons.html b/assets/html_files/buttons.html index 36df4c06..c1d882c5 100644 --- a/assets/html_files/buttons.html +++ b/assets/html_files/buttons.html @@ -122,6 +122,19 @@

3D Button-2

+
+

Bat Button

+
+ + + +
+
+ + + +
+

Blob Button

@@ -291,6 +304,19 @@

Jelly Button

+
+

Like Effect Button

+
+ + + +
+
+ + + +
+

Liquid Button

@@ -382,6 +408,19 @@

Neumorphism Button

+
+

On/Off Button

+
+ + + +
+
+ + + +
+

Perspective Button

@@ -395,6 +434,19 @@

Perspective Button

+
+

Pulsing Button

+
+ + + +
+
+ + + +
+

Rainbow Animation Button

@@ -421,6 +473,19 @@

Skeuomorphism Button

+
+

Social Hover Tone Button

+
+ + + +
+
+ + + +
+

Swipe Right Button

diff --git a/assets/html_files/cards.html b/assets/html_files/cards.html index db101da2..d7efbafe 100644 --- a/assets/html_files/cards.html +++ b/assets/html_files/cards.html @@ -317,6 +317,19 @@

Neumorphism Card

+
+

Port ID Card

+
+ + + +
+
+ + + +
+

Premium Card

@@ -421,6 +434,19 @@

Slider Card

+
+

Sliding Sticky Notes Card

+
+ + + +
+
+ + + +
+

Testimonial Card

diff --git a/assets/html_files/carousels.html b/assets/html_files/carousels.html index 857742e4..b99d5769 100644 --- a/assets/html_files/carousels.html +++ b/assets/html_files/carousels.html @@ -304,6 +304,19 @@

Strip Carousel

+
+

Touch Slider Carousel

+
+ + + +
+
+ + + +
+
diff --git a/assets/html_files/dropdowns.html b/assets/html_files/dropdowns.html index 0d80ef4a..e94be106 100644 --- a/assets/html_files/dropdowns.html +++ b/assets/html_files/dropdowns.html @@ -122,6 +122,19 @@

Multilevel Dropdown

+
+

Multiple Selection Dropdown

+
+ + + +
+
+ + + +
+

The More Menu Dropdown

diff --git a/assets/html_files/footers.html b/assets/html_files/footers.html index 877c89d9..1781cc9d 100644 --- a/assets/html_files/footers.html +++ b/assets/html_files/footers.html @@ -148,6 +148,19 @@

Glassmorphism Footer

+
+

Interactive Footer

+
+ + + +
+
+ + + +
+

Minimalist Footer

@@ -161,6 +174,19 @@

Minimalist Footer

+
+

Parallax Footer

+
+ + + +
+
+ + + +
+

Simple Footer

@@ -174,6 +200,32 @@

Simple Footer

+
+

Split Footer

+
+ + + +
+
+ + + +
+
+
+

Sticky Footer

+
+ + + +
+
+ + + +
+

Waves Footer

diff --git a/assets/html_files/forms.html b/assets/html_files/forms.html index b93bd5f2..bed9b2b1 100644 --- a/assets/html_files/forms.html +++ b/assets/html_files/forms.html @@ -122,6 +122,19 @@

Animated Login Form

+
+

Animated Login Register Form

+
+ + + +
+
+ + + +
+

Animated Login/Signup Form

@@ -434,6 +447,19 @@

QR Code Generator Form

+
+

Sign Up Form

+
+ + + +
+
+ + + +
+

Slide Login Register Form

diff --git a/assets/html_files/loaders.html b/assets/html_files/loaders.html index d0e31bd9..00fb4c7d 100644 --- a/assets/html_files/loaders.html +++ b/assets/html_files/loaders.html @@ -96,6 +96,19 @@

Hmmm, we are not getting any result.
Our bad - Please try another searc

+
+

Bike Loader

+
+ + + +
+
+ + + +
+

Bird Loader

@@ -109,6 +122,19 @@

Bird Loader

+
+

Bouncing Loader

+
+ + + +
+
+ + + +
+

Box Loader

@@ -395,6 +421,19 @@

Newton Cradle Loader

+
+

Pan Flip Loader

+
+ + + +
+
+ + + +
+

Pendulum Loader

diff --git a/assets/html_files/navigation-bars.html b/assets/html_files/navigation-bars.html index d0cde8cc..6bba663c 100644 --- a/assets/html_files/navigation-bars.html +++ b/assets/html_files/navigation-bars.html @@ -148,6 +148,19 @@

Elastic Side Navigation Bar

+
+

Floating Action Button Navigation Bar

+
+ + + +
+
+ + + +
+

Glassmorphism Navigation Bar

diff --git a/assets/html_files/text-animations.html b/assets/html_files/text-animations.html index d5fe2004..51305936 100644 --- a/assets/html_files/text-animations.html +++ b/assets/html_files/text-animations.html @@ -135,6 +135,19 @@

3D Rotating Text Animation

+
+

Color Cycle Text Animation

+
+ + + +
+
+ + + +
+

Distortion Text Animation

@@ -187,6 +200,32 @@

Fog Text Animation

+
+

Frozen Text Animation

+
+ + + +
+
+ + + +
+
+
+

Ghost Text Animation

+
+ + + +
+
+ + + +
+

Glowing Text Animation

diff --git a/index.html b/index.html index 5d23d95c..3c827a1d 100644 --- a/index.html +++ b/index.html @@ -89,7 +89,7 @@ Logo

Beautiify

-

Every component, on the right place!!

+

Every component, in one place!!

Beautiify comprises a curated selection of beautifully designed components and animations that can be seamlessly incorporated into any website, elevating its overall UI experience.

diff --git a/style.css b/style.css index d121c860..0f9d4303 100644 --- a/style.css +++ b/style.css @@ -529,7 +529,7 @@ section { justify-content: center; align-items: center; margin: 25px; - background: rgba(224, 202, 245, 0.743); + background: rgba(224, 202, 245, 0.777); border: 4px solid rgb(171, 196, 218); border-radius: 50px; box-shadow: 2px 2px 4px 2px rgb(163, 205, 239); @@ -537,13 +537,13 @@ section { } .container .box:hover { - background-color: rgb(100, 96, 130); - border: 4px solid rgba(224, 202, 245, 0.743); + background-color: rgb(100, 96, 131); + border: 4px solid rgba(224, 202, 245, 0.745); box-shadow: 2px 2px 4px 2px rgba(224, 202, 245, 0.743); } .dark-mode .container .box { - background: rgba(251, 251, 251, 0.743); + background: rgba(251, 251, 251, 0.846); border: 4px solid rgb(238, 245, 251); box-shadow: 2px 2px 4px 2px rgb(91, 131, 164); } @@ -593,7 +593,7 @@ section { .container .box:hover .content i, .container .box:hover .content h2 { - color: rgba(224, 202, 245, 0.743); + color: rgba(224, 202, 245, 0.746); text-shadow: 1px 1px 2px black, 1px 1px 2px rgb(37, 111, 172); }