Merge branch 'Rakesh9100:main' into main

Rakesh9100 · Jul 9, 2024 · e02494b · e02494b
2 parents 96b4de3 + 6b990b9
commit e02494b
Show file tree

Hide file tree

Showing 82 changed files with 3,939 additions and 34 deletions.
diff --git a/Components/Backgrounds/Neon-Graphics-Background/index.html b/Components/Backgrounds/Neon-Graphics-Background/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Neon Graphics Background</title>
+</head>
+<body>
+    <div class="bgAnimation" id="bgAnimation">
+        <div class="backgroundAmim"></div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
diff --git a/Components/Backgrounds/Neon-Graphics-Background/script.js 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)
+}
diff --git a/Components/Backgrounds/Neon-Graphics-Background/style.css 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
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>3D Animated Breadcrumb</title>
+</head>
+<body>
+    <div class="container">
+        <div class="pane">
+            <label class="label">
+                <span>Yes</span>
+                <input id="left" class="input" name="radio" type="radio" />
+            </label>
+            <label class="label">
+                <span>No</span>
+                <input id="middle" class="input" checked="checked" name="radio" type="radio" />
+            </label>
+            <label class="label">
+                <span>Idk</span>
+                <input id="right" class="input" name="radio" type="radio" />
+            </label>
+            <span class="selection"></span>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/Components/Breadcrumbs/3D-Animated-Breadcrumb/style.css 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
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./style.css">
+    <title>Chevron Breadcrumb</title>
+</head>
+<body>
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb chevron">
+            <li class="breadcrumb-item"><a href="#">Home</a></li>
+            <li class="breadcrumb-item"><a href="#">Category</a></li>
+            <li class="breadcrumb-item active" aria-current="page">Current Page</li>
+        </ol>
+    </nav>
+</body>
+</html>
diff --git a/Components/Breadcrumbs/Chevron-Breadcrumb/style.css 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
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Bat Button</title>
+</head>
+<body>
+    <button>
+        <span>HOVER HERE</span>
+      </button>
+</body>
+</html>
diff --git a/Components/Buttons/Bat-Button/style.css 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
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Like Effect Button</title>
+</head>
+<body>
+    <button>
+        <svg height="32" width="32" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="empty">
+            <path d="M0 0H24V24H0z" fill="none"></path>
+            <path d="M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604c.881-.556 1.676-1.109 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5 5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903.745.592 1.54 1.145 2.421 1.7.299.189.595.37.934.572.339-.202.635-.383.934-.571z"></path>
+        </svg>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32" class="filled">
+            <path fill="none" d="M0 0H24V24H0z"></path>
+            <path d="M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2z"></path>
+        </svg>
+        Like
+    </button>
+</body>
+</html>