├── .github └── workflows │ └── count_components.yml ├── .gitignore ├── .prettierignore ├── Background Animations ├── Particles Animation │ ├── index.html │ ├── script.js │ └── style.css ├── README.md └── Waves Animation │ ├── index.html │ └── style.css ├── Buttons ├── Button_Bounce │ ├── index.html │ └── style.css ├── Confetti_Button │ ├── index.html │ ├── script.js │ └── style.css ├── Delete_Button │ ├── index.html │ ├── script.js │ └── style.css ├── Download_Button │ ├── index.html │ ├── script.js │ └── style.css ├── Floating_Action_Button │ ├── index.html │ └── style.css ├── Floating_Action_Button_Vertical │ ├── index.html │ ├── script.js │ └── style.css ├── README.md ├── Ripple_Button │ ├── index.html │ ├── script.js │ └── style.css ├── Scroll_To_Top │ ├── index.html │ ├── script.js │ └── style.css ├── Search_Button │ ├── index.html │ ├── script.js │ └── style.css ├── Send_Button │ ├── index.html │ ├── script.js │ └── style.css ├── Share_Button │ ├── index.html │ ├── script.js │ └── style.css ├── Star_Button │ ├── index.html │ ├── script.js │ └── style.css └── Subscribe_Button │ ├── index.html │ ├── script.js │ └── style.css ├── Carousels ├── README.md ├── Split_Screen_Carousel │ ├── index.html │ ├── script.js │ └── style.css └── Testimonials_Carousel │ ├── index.html │ ├── script.js │ └── style.css ├── Form Fields ├── Feedback_Field │ ├── index.html │ ├── script.js │ └── style.css ├── Feedback_Field_Emojis │ ├── images │ │ ├── angry-face.png │ │ ├── happy-face.png │ │ ├── heart-eyes-face.png │ │ ├── okay-face.png │ │ └── sad-face.png │ ├── index.html │ ├── script.js │ └── style.css ├── Invalid_Input_Shake_Effect │ ├── index.html │ └── style.css ├── Label_Animation │ ├── index.html │ └── style.css ├── Multiselect_Dropdown │ ├── index.html │ ├── script.js │ └── style.css ├── Password_Validation │ ├── index.html │ ├── script.js │ └── style.css ├── README.md ├── Radio_Cards │ ├── index.html │ └── style.css ├── Star_Rating_Field │ ├── index.html │ ├── script.js │ └── style.css └── Toggle Password Field │ ├── index.html │ ├── script.js │ └── style.css ├── Hover Effects ├── Book_Flip_Effect │ ├── index.html │ └── style.css ├── Button_Background_Rotate │ ├── index.html │ └── style.css ├── Button_Border_Fill_Up │ ├── index.html │ └── style.css ├── Button_Stripes │ ├── index.html │ └── style.css ├── Button_Wave_Animation │ ├── index.html │ └── style.css ├── Card_Image_Zoom │ ├── index.html │ └── style.css ├── Focus_Image_Effect │ ├── index.html │ └── style.css ├── Image_Shrink │ ├── index.html │ └── style.css ├── Multi_Line_Underline │ ├── index.html │ └── style.css ├── README.md ├── Share_Button │ ├── index.html │ └── style.css ├── Slide_Up_Link_Effect │ ├── index.html │ └── style.css ├── Team_Card │ ├── index.html │ └── style.css └── Text_Underline │ ├── index.html │ └── style.css ├── Icons ├── Inbox_Icon │ ├── index.html │ └── style.css ├── Notification_Bell_Icon │ ├── index.html │ └── style.css ├── README.md └── Social_Icons │ ├── index.html │ └── style.css ├── Loaders ├── Cube_Loader │ ├── index.html │ └── style.css ├── Dots_Loader │ ├── index.html │ └── style.css ├── Hourglass_Loader │ ├── index.html │ └── style.css ├── README.md ├── Ripple_Loader │ ├── index.html │ └── style.css ├── Square_Border_Fill_Loader │ ├── index.html │ └── style.css ├── Text_Loader │ ├── index.html │ └── style.css └── Whirlpool_Loader │ ├── index.html │ └── style.css ├── Miscellaneous ├── Accordion │ ├── index.html │ └── style.css ├── Cards_Swipe │ ├── images │ │ ├── img_1.jpg │ │ ├── img_2.jpg │ │ ├── img_3.jpg │ │ └── img_4.jpg │ ├── index.html │ ├── script.js │ └── style.css ├── Countdown_Animation │ ├── index.html │ ├── script.js │ └── style.css ├── Dropdown_Menu │ ├── index.html │ └── style.css ├── Items_Quantity_Counter │ ├── index.html │ ├── script.js │ └── style.css ├── Menu_Switcher │ ├── index.html │ ├── script.js │ └── style.css ├── Nav_Active_Link │ ├── index.html │ ├── script.js │ └── style.css ├── Navigation_Menu_Animation │ ├── index.html │ ├── script.js │ └── style.css ├── Pagination │ ├── index.html │ ├── script.js │ └── style.css ├── README.md ├── Rotating_Border │ ├── index.html │ └── style.css ├── Side_Navigation_Bar │ ├── index.html │ ├── script.js │ └── style.css ├── Statistics_Card │ ├── index.html │ ├── script.js │ └── style.css ├── To_Do_List_Check_Item │ ├── index.html │ └── style.css └── Video_Clipped_Inside_Text │ ├── index.html │ ├── script.js │ └── style.css ├── README.md ├── Text Animations ├── Infinite_Text_Loop │ ├── index.html │ └── style.css ├── Letter_By_Letter_Reveal │ ├── index.html │ └── style.css ├── README.md ├── Rotating_Text │ ├── index.html │ └── style.css ├── Text_Outline │ ├── index.html │ └── style.css ├── Text_Rotate_Animation │ ├── index.html │ ├── script.js │ └── style.css ├── Text_Shadow_Animation │ ├── index.html │ └── style.css ├── Text_Slide_Up │ ├── index.html │ └── style.css └── Text_Split_And_Reveal │ ├── index.html │ └── style.css ├── assets └── gifs │ ├── Image_Shrink.gif │ └── Split_Screen_Carousel.gif ├── component_count.svg ├── package-lock.json └── package.json /.github/workflows/count_components.yml: -------------------------------------------------------------------------------- 1 | name: Count the components 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | pull_request: 8 | branches: 9 | - main 10 | 11 | jobs: 12 | count_components: 13 | runs-on: ubuntu-latest 14 | steps: 15 | - name: Checkout repository 16 | uses: actions/checkout@v4 17 | - name: Count Components 18 | run: | 19 | #!/bin/bash 20 | # Count components in the repository 21 | components=$(find . -mindepth 2 -maxdepth 2 -type d -name '[A-Z]*' ! -path '*/.*' -exec sh -c 'dirname="{}"; parent_dir=$(basename "$(dirname "$dirname")"); echo "$parent_dir" | grep -q "^[A-Z]" && echo "{}"' \; | wc -l) 22 | echo "components=$components" >> $GITHUB_ENV 23 | - name: Set Git user identity 24 | run: | 25 | git config --global user.email "ritikaagrawal339@gmail.com" 26 | git config --global user.name "Ritika Agrawal" 27 | - name: Add Components Count SVG 28 | run: | 29 | echo ' 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | Components 49 | Components 50 | ${{ env.components }} 51 | ${{ env.components }} 52 | 53 | ' > component_count.svg 54 | git add component_count.svg 55 | git commit -m "Create a components count svg" || echo "No changes to commit" 56 | git push 57 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .next 3 | next-env.d.ts 4 | .vscode -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .github 2 | .vscode 3 | .gitignore 4 | node_modules 5 | *.json 6 | website/ -------------------------------------------------------------------------------- /Background Animations/Particles Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Particles Animation 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Background Animations/Particles Animation/script.js: -------------------------------------------------------------------------------- 1 | const canvas = document.getElementById("particlesBackground"); 2 | 3 | const width = window.innerWidth; 4 | const height = window.innerHeight; 5 | 6 | canvas.width = width; 7 | canvas.height = height; 8 | 9 | const c = canvas.getContext("2d"); 10 | 11 | const colors = ["#A020F0", "#5CACEE", "#0FDDAF", "#00688B"]; 12 | 13 | function Circle(x, y, r, color) { 14 | this.x = x; 15 | this.y = y; 16 | this.radius = r; 17 | this.startX = x - 15; 18 | this.endX = x + 15; 19 | this.startY = y - 15; 20 | this.endY = y + 15; 21 | this.dx = Math.random() - 0.5; 22 | this.dy = Math.random() - 0.5; 23 | 24 | this.draw = function () { 25 | c.beginPath(); 26 | c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); 27 | c.fillStyle = color; 28 | c.fill(); 29 | }; 30 | 31 | this.update = function () { 32 | if ( 33 | this.x > this.endX || 34 | this.y > this.endY || 35 | this.x < this.startX || 36 | this.y < this.startY 37 | ) { 38 | this.dx = -this.dx; 39 | this.dy = -this.dy; 40 | } 41 | 42 | this.x += this.dx; 43 | this.y += this.dy; 44 | this.draw(); 45 | }; 46 | } 47 | 48 | const circlesArray = []; 49 | 50 | for (let i = 0; i < 150; i++) { 51 | const x = Math.random() * width; 52 | const y = Math.random() * height; 53 | const r = Math.random() * 8; 54 | const index = Math.floor(Math.random() * colors.length); 55 | 56 | const circle = new Circle(x, y, r, colors[index]); 57 | 58 | circlesArray.push(circle); 59 | } 60 | 61 | function animate() { 62 | requestAnimationFrame(animate); 63 | c.clearRect(0, 0, innerWidth, innerHeight); 64 | 65 | for (let circle of circlesArray) { 66 | circle.update(); 67 | } 68 | } 69 | 70 | animate(); 71 | -------------------------------------------------------------------------------- /Background Animations/Particles Animation/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | overflow: hidden; 11 | } 12 | 13 | canvas { 14 | background-color: #121212; 15 | } 16 | -------------------------------------------------------------------------------- /Background Animations/README.md: -------------------------------------------------------------------------------- 1 | ## Background Animations :sparkles: 2 | 3 | Background animations like particle effects, gradient animations, video backgrounds, parallax scrollings etc significantly enhance a website's visual appeal. It makes the website more engaging and memorable for users. 4 | 5 | I've got a list of various such animations. Pick the right one for your website! 6 | 7 | - [Waves Animation](#waves-animation-zap) 8 | - [Particles Animation](#particles-animation-zap) 9 | 10 | ### Waves Animation :zap: 11 | 12 | A Waves Animation where the waves are an svg. CSS transform property is used to animate the waves taking help of CSS Variables to set different durations for each wave! 13 |
14 | :paperclip: View code [here](https://github.com/Ritika-Agrawal811/css-and-js-code-snippets/tree/main/Background%20Animations/Waves_Animation). 15 | 16 |
17 | 18 | 19 | ### Particles Animation :zap: 20 | 21 | A Particles Animation made using HTML \ tag. JavaScript is used to draw randam circles of different colors and varying radii. requestAnimationFrame() method is used to animate these circles! 22 | 23 | :paperclip: View code [here](https://github.com/Ritika-Agrawal811/css-and-js-code-snippets/tree/main/Background%20Animations/Particles%20Animation). 24 | 25 | 26 | -------------------------------------------------------------------------------- /Background Animations/Waves Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Waves Animation 8 | 9 | 10 |
11 | 17 | 18 | 27 | 28 | 29 | 37 | 38 | 39 | 47 | 48 | 49 | 57 | 58 | 59 | 67 | 68 | 69 |
70 | 71 | 72 | -------------------------------------------------------------------------------- /Background Animations/Waves Animation/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | header { 10 | height: 100vh; 11 | display: flex; 12 | align-items: flex-end; 13 | } 14 | 15 | svg { 16 | height: 20vmin; 17 | width: 100%; 18 | } 19 | 20 | .wave-backward { 21 | animation: move-backward var(--duration) linear infinite; 22 | } 23 | 24 | .wave-forward { 25 | animation: move-forward var(--duration) linear infinite; 26 | } 27 | 28 | @keyframes move-forward { 29 | 0% { 30 | transform: translate(85px); 31 | } 32 | 100% { 33 | transform: translate(-90px); 34 | } 35 | } 36 | 37 | @keyframes move-backward { 38 | 0% { 39 | transform: translate(-90px); 40 | } 41 | 100% { 42 | transform: translate(85px); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /Buttons/Button_Bounce/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Button Bounce Effect on Click 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Buttons/Button_Bounce/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | height: 100vh; 14 | background-color: #fefefe; 15 | } 16 | 17 | .btn-bounce { 18 | background: #24305e; 19 | border-radius: 0.75em; 20 | border: none; 21 | cursor: pointer; 22 | } 23 | 24 | .btn-label { 25 | display: inline-block; 26 | padding: 0.5em 1.25em; 27 | border-radius: 0.5em; 28 | background: #a8d0e6; 29 | font-size: 1.25rem; 30 | transform: translateY(-0.25em); 31 | transition: transform ease 0.1s; 32 | } 33 | 34 | .btn-bounce:active .btn-label { 35 | transform: translateY(0); 36 | } 37 | -------------------------------------------------------------------------------- /Buttons/Confetti_Button/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Confetti Button 9 | 10 | 11 |
12 | 13 |
14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Buttons/Confetti_Button/script.js: -------------------------------------------------------------------------------- 1 | const confettiBtn = document.querySelector(".confetti-button"); 2 | 3 | confettiBtn.addEventListener("click", () => { 4 | const canvas = document.createElement("canvas"); 5 | const container = document.querySelector(".wrapper"); 6 | 7 | // set dimensions for canvas 8 | canvas.width = 600; 9 | canvas.height = 600; 10 | 11 | container.appendChild(canvas); 12 | 13 | // create confetti inside the canvas 14 | const confetti_btn = confetti.create(canvas); 15 | 16 | // remove the canvas after spreading confetti 17 | confetti_btn().then(() => canvas.remove()); 18 | }); 19 | -------------------------------------------------------------------------------- /Buttons/Confetti_Button/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | height: 100vh; 14 | } 15 | 16 | .wrapper { 17 | position: relative; 18 | } 19 | 20 | .confetti-button { 21 | font-size: 1.15rem; 22 | font-weight: 700; 23 | padding: 0.75em 1.5em; 24 | border: 0; 25 | border-radius: 100vmax; 26 | background: linear-gradient(90deg, #a8ff78 50%, #78ffd6); 27 | cursor: pointer; 28 | transition: transform 150ms ease-in; 29 | } 30 | 31 | .confetti-button:hover { 32 | transform: scale(1.1); 33 | } 34 | 35 | .wrapper canvas { 36 | position: absolute; 37 | top: 50%; 38 | left: 50%; 39 | transform: translate(-50%, -50%); 40 | pointer-events: none; 41 | } 42 | -------------------------------------------------------------------------------- /Buttons/Delete_Button/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Delete Button 9 | 10 | 11 |
12 | 13 |
14 |

Are you sure you want to delete this?

15 |
16 | 17 | 18 |
19 |
20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /Buttons/Delete_Button/script.js: -------------------------------------------------------------------------------- 1 | let deleteBtn = document.querySelector(".delete-btn"); 2 | let confirmBox = document.querySelector(".confirm-box"); 3 | let btn = document.querySelectorAll(".btn"); 4 | 5 | deleteBtn.addEventListener("click", () => { 6 | deleteBtn.classList.add("clicked"); 7 | confirmBox.classList.add("show"); 8 | }); 9 | 10 | btn.forEach((element) => { 11 | element.addEventListener("click", () => { 12 | deleteBtn.classList.remove("clicked"); 13 | confirmBox.classList.remove("show"); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /Buttons/Delete_Button/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::after, 3 | ::before { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | } 15 | 16 | .container { 17 | position: relative; 18 | width: min(90%, 350px); 19 | height: 8em; 20 | overflow: hidden; 21 | } 22 | 23 | .delete-btn { 24 | position: absolute; 25 | top: 50%; 26 | left: 50%; 27 | border: 0; 28 | padding: 0.5em 1.5em; 29 | font-size: 24px; 30 | background: #d22b2b; 31 | color: #fff; 32 | cursor: pointer; 33 | transition: transform 350ms ease-in-out; 34 | box-shadow: 0 0 5px #aaa; 35 | backface-visibility: hidden; 36 | transform: translate(-50%, -50%) translateZ(200px) perspective(1000px); 37 | } 38 | 39 | .confirm-box { 40 | position: absolute; 41 | width: 100%; 42 | height: 100%; 43 | background-color: #fff; 44 | border: 2px solid #ddd; 45 | display: flex; 46 | flex-direction: column; 47 | justify-content: space-around; 48 | align-items: center; 49 | transition: transform 350ms ease-in-out; 50 | transition-delay: 50ms; 51 | transform-origin: bottom; 52 | transform: rotateX(180deg) perspective(500px); 53 | backface-visibility: hidden; 54 | } 55 | 56 | .btn { 57 | padding: 0.75em 2em; 58 | border: 0; 59 | color: #0096ff; 60 | margin: 0 5px; 61 | cursor: pointer; 62 | } 63 | 64 | .yes-btn { 65 | background-color: #0096ff; 66 | color: #fff; 67 | } 68 | 69 | .delete-btn.clicked { 70 | transform: translate(-50%, -50%) rotateX(180deg) translateZ(50px) 71 | perspective(800px); 72 | } 73 | 74 | .confirm-box.show { 75 | transform: rotateX(0) perspective(800px); 76 | } 77 | 78 | @media (max-width: 320px) { 79 | .container { 80 | height: 95px; 81 | } 82 | 83 | .deleteBtn { 84 | font-size: 20px; 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /Buttons/Download_Button/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Download Button 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Buttons/Download_Button/script.js: -------------------------------------------------------------------------------- 1 | let downloadBtn = document.getElementById("downloadBtn"); 2 | 3 | downloadBtn.addEventListener("click", (event) => { 4 | let btn = event.target; 5 | btn.classList.add("clicked"); 6 | btn.textContent = ""; 7 | 8 | setTimeout(() => { 9 | btn.classList.remove("clicked"); 10 | btn.textContent = "Download"; 11 | }, 3000); 12 | }); 13 | -------------------------------------------------------------------------------- /Buttons/Download_Button/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | height: 100vh; 14 | background-color: #fefefe; 15 | } 16 | 17 | .download-btn { 18 | position: relative; 19 | font-size: 1.15rem; 20 | width: 8em; 21 | height: 3em; 22 | font-weight: 700; 23 | border: 0; 24 | border-radius: 100vmax; 25 | color: #fff; 26 | background-color: rgb(29, 155, 240); 27 | cursor: pointer; 28 | transition: all 300ms ease-in; 29 | } 30 | 31 | .download-btn::before { 32 | content: "Done"; 33 | position: absolute; 34 | color: rgb(29, 165, 29); 35 | left: 50%; 36 | top: -2em; 37 | transform: translateX(-50%); 38 | opacity: 0; 39 | } 40 | 41 | .download-btn.clicked { 42 | width: 20em; 43 | height: 0.5em; 44 | background-color: rgb(206, 224, 237); 45 | animation: fill 1.5s ease-out 1 forwards; 46 | animation-delay: 450ms; 47 | } 48 | 49 | .download-btn.clicked::before { 50 | animation: show 250ms ease-in 1 forwards; 51 | animation-delay: 2s; 52 | } 53 | 54 | @keyframes fill { 55 | 0% { 56 | box-shadow: 0 0 0 rgb(29, 155, 240) inset; 57 | } 58 | 59 | 95% { 60 | box-shadow: 20em 0 0 rgb(29, 155, 240) inset; 61 | } 62 | 63 | 100% { 64 | box-shadow: 20em 0 0 rgb(29, 165, 29) inset; 65 | } 66 | } 67 | 68 | @keyframes show { 69 | 100% { 70 | opacity: 1; 71 | } 72 | } 73 | 74 | @media (max-width: 576px) { 75 | .download-btn { 76 | font-size: 0.85rem; 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /Buttons/Floating_Action_Button/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Floating Action Button 16 | 17 | 18 |
19 | 20 |
21 | 22 |
23 | 24 |
25 | 26 |
27 | 28 |
29 | 30 |
31 | 32 |
33 | 34 |
35 |
36 | 37 | 38 | -------------------------------------------------------------------------------- /Buttons/Floating_Action_Button/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | background: #f9ebea; 15 | } 16 | 17 | .container { 18 | position: relative; 19 | } 20 | 21 | input[type="checkbox"] { 22 | position: relative; 23 | appearance: none; 24 | -moz-appearance: none; 25 | -webkit-appearance: none; 26 | width: 4em; 27 | height: 4em; 28 | border-radius: 50%; 29 | background-color: #25009f; 30 | box-shadow: 0 0 10px #aaa; 31 | transition: all 100ms linear; 32 | cursor: pointer; 33 | outline: none; 34 | } 35 | 36 | input[type="checkbox"]::before { 37 | content: "+"; 38 | position: absolute; 39 | color: #fff; 40 | top: 50%; 41 | left: 50%; 42 | transform: translate(-50%, -50%); 43 | font-size: 36px; 44 | } 45 | 46 | input[type="checkbox"]:checked { 47 | transform: rotate(45deg); 48 | } 49 | 50 | .items { 51 | position: absolute; 52 | top: 0; 53 | left: 0; 54 | width: 2em; 55 | height: 2em; 56 | display: grid; 57 | place-items: center; 58 | color: #fff; 59 | font-size: 24px; 60 | border-radius: 50%; 61 | transition: all 200ms ease-in-out; 62 | z-index: -1; 63 | } 64 | 65 | .btn-image { 66 | background: #ff7f50; 67 | } 68 | 69 | .btn-camera { 70 | background: #f2e50b; 71 | } 72 | 73 | .btn-share { 74 | background: #48c9b0; 75 | } 76 | 77 | .btn-video { 78 | background: #e59866; 79 | } 80 | 81 | input[type="checkbox"]:checked ~ .btn-image { 82 | left: -3em; 83 | box-shadow: 0 0 5px #aaa; 84 | } 85 | 86 | input[type="checkbox"]:checked ~ .btn-camera { 87 | top: -3em; 88 | box-shadow: 0 0 5px #aaa; 89 | } 90 | 91 | input[type="checkbox"]:checked ~ .btn-share { 92 | top: 3em; 93 | box-shadow: 0 0 5px #aaa; 94 | } 95 | 96 | input[type="checkbox"]:checked ~ .btn-video { 97 | left: 3em; 98 | box-shadow: 0 0 5px #aaa; 99 | } 100 | -------------------------------------------------------------------------------- /Buttons/Floating_Action_Button_Vertical/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 13 | 14 | Floating Action Button 15 | 16 | 17 |
18 | 25 | 32 | 39 | 42 |
43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /Buttons/Floating_Action_Button_Vertical/script.js: -------------------------------------------------------------------------------- 1 | const viewActionsBtn = document.querySelector(".plus-btn"); 2 | const floatingBtns = document.getElementsByClassName("small"); 3 | 4 | viewActionsBtn.addEventListener("click", () => { 5 | viewActionsBtn.classList.toggle("selected"); 6 | 7 | Array.from(floatingBtns).forEach((btn) => btn.classList.toggle("hide")); 8 | }); 9 | -------------------------------------------------------------------------------- /Buttons/Floating_Action_Button_Vertical/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | .container { 10 | --viewport-margin: 3.5vmin; 11 | 12 | position: fixed; 13 | display: flex; 14 | flex-direction: column-reverse; 15 | align-items: center; 16 | gap: 1em; 17 | 18 | inset-block: auto var(--viewport-margin); 19 | inset-inline: auto var(--viewport-margin); 20 | } 21 | 22 | .fab { 23 | --size: 2.25rem; 24 | --bg-color: #3f00ff; 25 | --icon-color: #fff; 26 | 27 | border: none; 28 | border-radius: 50%; 29 | font-size: var(--size); 30 | width: calc(var(--size) * 2); 31 | height: calc(var(--size) * 2); 32 | background-color: var(--bg-color); 33 | color: var(--icon-color); 34 | box-shadow: 35 | 0 0 0.5em #ddd, 36 | 0 3px 0.2em #bbb; 37 | transition: all 150ms ease-in-out; 38 | cursor: pointer; 39 | } 40 | 41 | .small { 42 | --size: 1.5rem; 43 | --bg-color: #fff; 44 | --icon-color: #3f00ff; 45 | transform: translateY(0); 46 | } 47 | 48 | .hide { 49 | opacity: 0; 50 | transform: translateY(10%); 51 | } 52 | 53 | .fab:active { 54 | transform: translateY(2%); 55 | } 56 | 57 | .plus-btn.selected:active { 58 | transform: translateY(2%) rotate(45deg); 59 | } 60 | 61 | .selected { 62 | transform: rotate(45deg); 63 | } 64 | -------------------------------------------------------------------------------- /Buttons/Ripple_Button/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Ripple Button 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Buttons/Ripple_Button/script.js: -------------------------------------------------------------------------------- 1 | const button = document.querySelector(".ripple-btn"); 2 | 3 | button.addEventListener("click", drawRipple); 4 | 5 | function drawRipple(event) { 6 | const x = event.clientX - event.target.offsetLeft; 7 | const y = event.clientY - event.target.offsetTop; 8 | 9 | const ripples = document.createElement("span"); 10 | ripples.style.left = x + "px"; 11 | ripples.style.top = y + "px"; 12 | 13 | this.appendChild(ripples); 14 | 15 | setTimeout(() => { 16 | ripples.remove(); 17 | }, 1000); 18 | } 19 | -------------------------------------------------------------------------------- /Buttons/Ripple_Button/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | display: flex; 11 | justify-content: center; 12 | min-height: 100vh; 13 | align-items: center; 14 | background: #121212; 15 | } 16 | 17 | .ripple-btn { 18 | position: relative; 19 | padding: 1em 1.5em; 20 | color: #fff; 21 | font-size: 1.15rem; 22 | border-radius: 100vmax; 23 | background-color: transparent; 24 | border: 2px solid #fff; 25 | text-transform: uppercase; 26 | overflow: hidden; 27 | cursor: pointer; 28 | } 29 | 30 | span { 31 | position: absolute; 32 | border-radius: 50%; 33 | font-size: 10px; 34 | opacity: 0.5; 35 | width: 20em; 36 | height: 20em; 37 | background: linear-gradient(90deg, #0162c8, #55e7fc); 38 | transform: translate(-50%, -50%) scale(0); 39 | animation: animate 1s linear infinite; 40 | pointer-events: none; 41 | } 42 | 43 | @keyframes animate { 44 | 100% { 45 | opacity: 0; 46 | transform: translate(-50%, -50%) scale(1); 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /Buttons/Scroll_To_Top/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 13 | 14 | Scroll To Top Button 15 | 16 | 17 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /Buttons/Scroll_To_Top/script.js: -------------------------------------------------------------------------------- 1 | const scrollToTopBtn = document.querySelector(".scroll-to-top-btn"); 2 | const screen = document.documentElement; 3 | 4 | const getScrollValue = () => { 5 | const pos = screen.scrollTop; 6 | const height = screen.scrollHeight - screen.clientHeight; 7 | const scrollValue = Math.round((pos * 100) / height); 8 | 9 | scrollToTopBtn.style.display = pos > 100 ? "block" : "none"; 10 | scrollToTopBtn.addEventListener("click", () => { 11 | screen.scrollTop = 0; 12 | }); 13 | 14 | scrollToTopBtn.style.background = `conic-gradient(#743DFF ${scrollValue}%, #d4b5ef ${scrollValue}%)`; 15 | }; 16 | 17 | window.addEventListener("scroll", getScrollValue); 18 | -------------------------------------------------------------------------------- /Buttons/Scroll_To_Top/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | html { 10 | scroll-behavior: smooth; 11 | } 12 | 13 | /* to see button in action */ 14 | body { 15 | height: 3000px; 16 | } 17 | 18 | .scroll-to-top-btn { 19 | display: none; 20 | position: fixed; 21 | width: 3.5em; 22 | height: 3.5em; 23 | right: 2em; 24 | bottom: 2em; 25 | font-size: 1.5rem; 26 | border-radius: 50%; 27 | border: 0; 28 | color: #001a2e; 29 | cursor: pointer; 30 | } 31 | -------------------------------------------------------------------------------- /Buttons/Search_Button/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Search Button 16 | 17 | 18 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /Buttons/Search_Button/script.js: -------------------------------------------------------------------------------- 1 | const searchBtn = document.querySelector(".search-btn"); 2 | const closeBtn = document.querySelector(".close-btn"); 3 | const searchInputContainer = document.getElementById("search-input-container"); 4 | 5 | searchBtn.addEventListener("click", () => { 6 | searchInputContainer.classList.add("show"); 7 | searchInputContainer.querySelector("input").focus(); 8 | }); 9 | 10 | closeBtn.addEventListener("click", () => { 11 | searchInputContainer.classList.remove("show"); 12 | searchInputContainer.querySelector("input").value = ""; 13 | }); 14 | -------------------------------------------------------------------------------- /Buttons/Search_Button/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | nav { 10 | height: 8em; 11 | position: relative; 12 | } 13 | 14 | .btn { 15 | position: absolute; 16 | width: 2em; 17 | height: 2em; 18 | right: 2em; 19 | top: 50%; 20 | transform: translateY(-50%); 21 | border-radius: 50%; 22 | border: none; 23 | font-size: 2rem; 24 | cursor: pointer; 25 | transition: 26 | background-color 300ms ease-in, 27 | color 300ms ease-in; 28 | } 29 | 30 | .search-btn { 31 | background-color: #fff; 32 | color: rgb(27, 31, 105); 33 | } 34 | 35 | .search-btn:hover { 36 | color: #fff; 37 | background-color: rgb(27, 31, 105); 38 | } 39 | 40 | .close-btn { 41 | color: #fff; 42 | background-color: transparent; 43 | } 44 | 45 | .close-btn:hover { 46 | background-color: #fff; 47 | color: rgb(27, 31, 105); 48 | } 49 | 50 | .container { 51 | position: absolute; 52 | top: -100%; 53 | left: 0; 54 | width: 100%; 55 | height: 100%; 56 | background-color: rgb(27, 31, 105); 57 | transition: 58 | top 200ms ease-in, 59 | height 300ms ease-out 200ms; 60 | } 61 | 62 | .container.show { 63 | top: 0; 64 | height: 130%; 65 | } 66 | 67 | input[type="search"] { 68 | position: absolute; 69 | top: 50%; 70 | transform: translateY(-50%); 71 | left: 10%; 72 | width: 80%; 73 | font-size: 1.5rem; 74 | background-color: transparent; 75 | border: none; 76 | border-bottom: 1px solid rgba(255, 255, 255, 0.5); 77 | outline: none; 78 | caret-color: #fff; 79 | color: #fff; 80 | } 81 | 82 | input[type="search"]::placeholder { 83 | color: rgba(255, 255, 255, 0.5); 84 | } 85 | 86 | @media (max-width: 424px) { 87 | nav { 88 | height: 5em; 89 | } 90 | 91 | .btn { 92 | font-size: 1.5rem; 93 | right: 0.5em; 94 | } 95 | 96 | input[type="search"] { 97 | font-size: 1rem; 98 | width: 65%; 99 | } 100 | } 101 | -------------------------------------------------------------------------------- /Buttons/Send_Button/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Send Button 16 | 17 | 18 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /Buttons/Send_Button/script.js: -------------------------------------------------------------------------------- 1 | let sendBtn = document.querySelector(".send-btn"); 2 | 3 | sendBtn.addEventListener("click", () => { 4 | let planePath = sendBtn.querySelector(".circle"); 5 | let planeIcon = sendBtn.querySelector(".plane-icon"); 6 | 7 | planePath.classList.add("rotateCircle"); 8 | planeIcon.classList.remove("hide"); 9 | 10 | setTimeout(() => { 11 | planeIcon.classList.add("hide"); 12 | planePath.classList.remove("rotateCircle"); 13 | }, 2750); 14 | 15 | setTimeout(() => { 16 | sendBtn.classList.add("checked"); 17 | sendBtn.innerHTML = "Sent"; 18 | }, 3000); 19 | }); 20 | -------------------------------------------------------------------------------- /Buttons/Send_Button/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | } 15 | 16 | .send-btn { 17 | width: 150px; 18 | height: 50px; 19 | border: none; 20 | border-radius: 100vmax; 21 | background-color: #0096ff; 22 | font-size: 1.5rem; 23 | font-weight: 700; 24 | position: relative; 25 | box-shadow: 26 | 0 0 0 #50c878 inset, 27 | 0 2px 5px #0095ffa6; 28 | transition: all 350ms ease-in-out; 29 | cursor: pointer; 30 | } 31 | 32 | .send-btn.checked { 33 | box-shadow: 34 | 200px 0 0 #50c878 inset, 35 | 0 2px 5px #50c878a6; 36 | } 37 | 38 | .circle { 39 | position: absolute; 40 | width: 5em; 41 | height: 5em; 42 | border-radius: 50%; 43 | top: 50%; 44 | left: 50%; 45 | transform: translate(-50%, -50%); 46 | } 47 | 48 | .plane-icon { 49 | position: absolute; 50 | left: -0.5em; 51 | top: 50%; 52 | transform: translateY(-50%) rotate(-25deg); 53 | } 54 | 55 | .rotateCircle { 56 | animation: rotate 3s ease-in-out 1; 57 | } 58 | 59 | .hide { 60 | display: none; 61 | visibility: hidden; 62 | } 63 | 64 | @keyframes rotate { 65 | 100% { 66 | transform: translate(-50%, -50%) rotate(360deg); 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /Buttons/Share_Button/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 13 | 14 | 15 | 19 | 20 | Share Button 21 | 22 | 23 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /Buttons/Share_Button/script.js: -------------------------------------------------------------------------------- 1 | const shareBtn = document.getElementById("shareBtn"); 2 | 3 | shareBtn.addEventListener("click", () => { 4 | shareBtn.classList.toggle("open"); 5 | }); 6 | -------------------------------------------------------------------------------- /Buttons/Share_Button/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | display: flex; 11 | height: 100vh; 12 | justify-content: center; 13 | align-items: center; 14 | background-color: #afe1af; 15 | } 16 | 17 | .share-btn { 18 | position: relative; 19 | display: flex; 20 | justify-content: center; 21 | align-items: center; 22 | width: 2em; 23 | height: 2em; 24 | border-radius: 100vmax; 25 | border: 0; 26 | font-size: 2rem; 27 | background-color: #fff; 28 | color: #008000; 29 | transition: width 300ms ease-in-out; 30 | transition-delay: 50ms; 31 | cursor: pointer; 32 | z-index: 1; 33 | } 34 | 35 | .share-btn::before { 36 | content: "x"; 37 | position: absolute; 38 | left: 5px; 39 | font-size: 2.25rem; 40 | font-weight: 500; 41 | font-family: "Nunito", sans-serif; 42 | width: 1.5em; 43 | height: 1.5em; 44 | background-color: transparent; 45 | color: #fff; 46 | border-radius: inherit; 47 | transition: background-color 300ms ease-in-out; 48 | z-index: -1; 49 | } 50 | 51 | .social-icons { 52 | position: absolute; 53 | display: flex; 54 | justify-content: space-around; 55 | align-items: center; 56 | width: calc(100% - 2em); 57 | height: 100%; 58 | right: 0; 59 | border-radius: inherit; 60 | } 61 | 62 | .fa-facebook-f, 63 | .fa-twitter, 64 | .fa-instagram { 65 | transform: scale(0); 66 | transition: transform 300ms ease-in-out; 67 | } 68 | 69 | .share-icon { 70 | transform: scale(1); 71 | transition: transform 300ms ease-in-out; 72 | } 73 | 74 | .share-btn.open { 75 | width: 8em; 76 | } 77 | 78 | .share-btn.open::before { 79 | background-color: #008000; 80 | } 81 | 82 | .share-btn.open :is(.fa-facebook-f, .fa-twitter, .fa-instagram) { 83 | transform: scale(1); 84 | color: #008000; 85 | } 86 | 87 | .share-btn.open .share-icon { 88 | transform: scale(0); 89 | } 90 | -------------------------------------------------------------------------------- /Buttons/Star_Button/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 13 | 14 | Star Button 15 | 16 | 17 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /Buttons/Star_Button/script.js: -------------------------------------------------------------------------------- 1 | const starBtn = document.getElementById("starBtn"); 2 | 3 | starBtn.addEventListener("click", () => { 4 | const starText = starBtn.querySelector(".star__text"); 5 | const starCount = starBtn.querySelector(".star__count"); 6 | 7 | starBtn.classList.toggle("selected"); 8 | 9 | const isSelected = starBtn.classList.contains("selected"); 10 | const count = parseInt(starCount.textContent); 11 | 12 | starText.textContent = isSelected ? "Starred" : "Star"; 13 | 14 | setTimeout(() => { 15 | starCount.textContent = isSelected ? count + 1 : count - 1; 16 | }, 450); 17 | }); 18 | -------------------------------------------------------------------------------- /Buttons/Star_Button/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | min-height: 100vh; 14 | background-color: #eee; 15 | } 16 | 17 | .star__button { 18 | position: relative; 19 | width: 8em; 20 | height: 2.5em; 21 | font-size: 1.5rem; 22 | border: 0; 23 | background-color: #fff; 24 | border-radius: 0.5em; 25 | box-shadow: 0 0 0.5em #ccc; 26 | cursor: pointer; 27 | } 28 | 29 | .star__text, 30 | .star__icon, 31 | .fa-star, 32 | .star__count { 33 | position: absolute; 34 | display: grid; 35 | place-content: center; 36 | width: 100%; 37 | height: 100%; 38 | pointer-events: none; 39 | } 40 | 41 | .star__text { 42 | left: 0; 43 | top: 0; 44 | color: #545454; 45 | font-weight: 700; 46 | transition: width 250ms ease-in-out; 47 | } 48 | 49 | .star__icon { 50 | left: 50%; 51 | top: 50%; 52 | transform: translate(-50%, -50%) rotate(0); 53 | border-radius: 50%; 54 | transition: transform 450ms ease-in-out 100ms; 55 | } 56 | 57 | .star__icon .fa-star { 58 | left: 0; 59 | width: 35%; 60 | color: #aaa; 61 | transition: 62 | left 450ms ease-in-out, 63 | opacity 50ms linear 500ms; 64 | } 65 | 66 | .star__count { 67 | top: 0; 68 | right: 0; 69 | width: 25%; 70 | color: #aaa; 71 | border-left: 3px solid #eee; 72 | border-radius: 0 0.5em 0.5em 0; 73 | } 74 | 75 | .star__button.selected .star__text { 76 | width: 75%; 77 | } 78 | 79 | .star__button.selected .star__icon { 80 | transform: translate(-50%, -50%) rotate(-190deg); 81 | } 82 | 83 | .star__button.selected .fa-star { 84 | left: -0.5em; 85 | opacity: 0; 86 | color: #ffd700; 87 | } 88 | -------------------------------------------------------------------------------- /Buttons/Subscribe_Button/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Subscribe Button 9 | 10 | 11 |
12 | 13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Buttons/Subscribe_Button/script.js: -------------------------------------------------------------------------------- 1 | let subscribeBtn = document.getElementById("subscribeBtn"); 2 | let toggle = false; 3 | 4 | subscribeBtn.addEventListener("click", (event) => { 5 | let parent = event.target.offsetParent; 6 | 7 | if (toggle) { 8 | subscribeBtn.classList.replace("clicked", "green-bg"); 9 | parent.classList.remove("clicked"); 10 | subscribeBtn.innerHTML = "Subscribed"; 11 | } else { 12 | subscribeBtn.classList.add("clicked"); 13 | parent.classList.add("clicked"); 14 | subscribeBtn.innerHTML = "✓"; 15 | 16 | toggle = true; 17 | } 18 | }); 19 | -------------------------------------------------------------------------------- /Buttons/Subscribe_Button/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | } 15 | 16 | .container { 17 | width: min(50%, 180px); 18 | height: 50px; 19 | position: relative; 20 | border-radius: 50px; 21 | transition: width 350ms ease-in; 22 | } 23 | 24 | .subscribe-btn, 25 | .emailInput { 26 | position: absolute; 27 | width: 100%; 28 | height: 100%; 29 | top: 0; 30 | left: 0; 31 | border-radius: inherit; 32 | } 33 | 34 | .subscribe-btn { 35 | border: 0; 36 | font-size: 1.25rem; 37 | font-family: sans-serif; 38 | background-color: rgb(217, 20, 20); 39 | color: #fff; 40 | cursor: pointer; 41 | transition: 42 | width 350ms ease-in, 43 | left 350ms ease-in; 44 | z-index: 3; 45 | } 46 | 47 | .container::before { 48 | content: "@"; 49 | position: absolute; 50 | left: 0; 51 | top: 50%; 52 | transform: translateY(-50%); 53 | font-size: 1.75rem; 54 | font-weight: 900; 55 | color: #696969; 56 | background-color: #ccc; 57 | height: 100%; 58 | width: 10%; 59 | display: grid; 60 | place-items: center; 61 | z-index: 2; 62 | opacity: 0; 63 | } 64 | 65 | .emailInput { 66 | border: 2px solid #ccc; 67 | z-index: 1; 68 | outline: 0; 69 | font-size: 1.15rem; 70 | padding-left: 3em; 71 | } 72 | 73 | .emailInput:placeholder { 74 | color: #696969; 75 | } 76 | 77 | .subscribe-btn.clicked { 78 | width: 11.5%; 79 | left: 89.5%; 80 | font-size: 1.5rem; 81 | background-color: #4cbb17; 82 | } 83 | 84 | .container.clicked { 85 | width: min(95%, 450px); 86 | border-radius: 0; 87 | } 88 | 89 | .container.clicked::before { 90 | opacity: 1; 91 | } 92 | 93 | .subscribe-btn.green-bg { 94 | background-color: #4cbb17; 95 | } 96 | 97 | @media (max-width: 424px) { 98 | .emailInput { 99 | font-size: 1rem; 100 | } 101 | 102 | .container.clicked { 103 | height: 40px; 104 | } 105 | 106 | .container::before { 107 | font-size: 1.25rem; 108 | } 109 | } 110 | -------------------------------------------------------------------------------- /Carousels/README.md: -------------------------------------------------------------------------------- 1 | ## Carousels :sparkles: 2 | 3 | Carousels are a great way to provide visually appealing multiple pieces of content on a webpage all the while using space effectively. They make it easier to incorporate animation and various features without cluttering the layout. 4 | 5 | I've got a collection of animated carousels for you! 6 | 7 | - [Split Screen Carousel](#split-screen-carousel) 8 | 9 | ### Split Screen Carousel 10 | 11 | A Split Screen Carousel with half-slide-up and half-slide-down animation made using CSS pseudo elements and JS to handle click events! 12 |
13 | :paperclip: View code [here](https://github.com/Ritika-Agrawal811/css-and-js-code-snippets/tree/main/Carousels/Split_Screen_Carousel). 14 | 15 |
16 | 17 | -------------------------------------------------------------------------------- /Carousels/Split_Screen_Carousel/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Split Screen Carousel 16 | 17 | 18 |
19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 |
29 | Colosseum 33 |
34 |
35 |

Colosseum

36 |

37 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde quasi 38 | repellendus placeat aspernatur voluptatibus repellat iste voluptates 39 | voluptatem. Odio eos repellendus a, nemo asperiores perferendis 40 | quis? Sed, veritatis suscipit.Quaerat sapiente magnam, blanditiis 41 | placeat itaque veritatis cum provident animi expedita 42 |

43 |
44 |
45 |
46 |
47 | Taj Mahal 51 |
52 |
53 |

Taj Mahal

54 |

55 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde quasi 56 | repellendus placeat aspernatur voluptatibus repellat iste voluptates 57 | voluptatem. Odio eos repellendus a, nemo asperiores perferendis 58 | quis? Sed, veritatis suscipit.Quaerat sapiente magnam, blanditiis 59 | placeat itaque veritatis cum provident animi expedita 60 |

61 |
62 |
63 |
64 |
65 | Petra 69 |
70 |
71 |

Petra

72 |

73 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde quasi 74 | repellendus placeat aspernatur voluptatibus repellat iste voluptates 75 | voluptatem. Odio eos repellendus a, nemo asperiores perferendis 76 | quis? Sed, veritatis suscipit.Quaerat sapiente magnam, blanditiis 77 | placeat itaque veritatis cum provident animi expedita 78 |

79 |
80 |
81 |
82 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /Carousels/Split_Screen_Carousel/script.js: -------------------------------------------------------------------------------- 1 | const arrowLeft = document.getElementById("arrowLeft"); 2 | const arrowRight = document.getElementById("arrowRight"); 3 | 4 | let carouselItems = document.getElementsByClassName("carousel-item"); 5 | 6 | carouselItems[0].classList.replace("hide", "prev"); 7 | 8 | function displayCarouselItem() { 9 | let previousIndex = 0, 10 | currentIndex = 0; 11 | let prevAnimationClass = "prev", 12 | currentAnimationClass; 13 | 14 | return function showItem(operation) { 15 | if (operation == "next") { 16 | currentIndex = 17 | currentIndex === carouselItems.length - 1 ? 0 : currentIndex + 1; 18 | 19 | currentAnimationClass = "next"; 20 | } 21 | 22 | if (operation == "prev") { 23 | currentIndex = 24 | currentIndex === 0 ? carouselItems.length - 1 : currentIndex - 1; 25 | 26 | currentAnimationClass = "prev"; 27 | } 28 | 29 | carouselItems[previousIndex].classList.replace(prevAnimationClass, "hide"); 30 | carouselItems[currentIndex].classList.replace( 31 | "hide", 32 | currentAnimationClass, 33 | ); 34 | 35 | previousIndex = currentIndex; 36 | prevAnimationClass = currentAnimationClass; 37 | }; 38 | } 39 | 40 | let showImage = displayCarouselItem(); 41 | 42 | arrowLeft.addEventListener("click", () => { 43 | showImage("prev"); 44 | }); 45 | 46 | arrowRight.addEventListener("click", () => { 47 | showImage("next"); 48 | }); 49 | -------------------------------------------------------------------------------- /Carousels/Split_Screen_Carousel/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | .container { 10 | position: relative; 11 | height: 100vh; 12 | overflow: hidden; 13 | } 14 | 15 | .icons { 16 | position: absolute; 17 | right: 1em; 18 | top: 50%; 19 | transform: translateY(-50%); 20 | z-index: 4; 21 | } 22 | 23 | .icons span { 24 | display: grid; 25 | place-items: center; 26 | font-size: 1.5rem; 27 | margin-bottom: 0.5em; 28 | width: 1.75em; 29 | height: 1.75em; 30 | border-radius: 50%; 31 | background-color: #121212; 32 | color: #fff; 33 | cursor: pointer; 34 | } 35 | 36 | .carousel-item { 37 | position: absolute; 38 | width: 100%; 39 | height: 100%; 40 | } 41 | 42 | .hide { 43 | display: none; 44 | } 45 | 46 | .carousel-item .carousel-image { 47 | position: absolute; 48 | width: 65%; 49 | height: 100%; 50 | right: 0; 51 | } 52 | 53 | .carousel-image img { 54 | width: 100%; 55 | height: 100%; 56 | object-fit: cover; 57 | } 58 | 59 | .carousel-item .carousel-content { 60 | position: absolute; 61 | display: flex; 62 | flex-direction: column; 63 | justify-content: center; 64 | width: 35%; 65 | height: 100%; 66 | padding: 1em; 67 | font-family: sans-serif; 68 | } 69 | 70 | .carousel-image::before, 71 | .carousel-content::before { 72 | content: ""; 73 | position: absolute; 74 | width: 100%; 75 | height: 100%; 76 | background-color: #feeace; 77 | animation: slideDown 1s ease-in-out 1; 78 | animation-fill-mode: forwards; 79 | } 80 | 81 | .carousel-content::before { 82 | left: 0; 83 | bottom: 0; 84 | } 85 | 86 | .carousel-item.next .carousel-content::before { 87 | top: 0; 88 | } 89 | 90 | .carousel-item.prev .carousel-content::before { 91 | bottom: 0; 92 | } 93 | 94 | .carousel-item.next .carousel-image::before { 95 | bottom: 0; 96 | } 97 | 98 | .carousel-item.prev .carousel-image::before { 99 | top: 0; 100 | } 101 | 102 | @keyframes slideDown { 103 | 100% { 104 | height: 0; 105 | } 106 | } 107 | 108 | .carousel-content h2 { 109 | font-size: 2rem; 110 | margin-bottom: 0.5em; 111 | } 112 | 113 | .carousel-content p { 114 | font-size: 1.15rem; 115 | } 116 | 117 | @media (max-width: 675px) { 118 | .carousel-item .carousel-image { 119 | width: 100%; 120 | height: 60%; 121 | } 122 | 123 | .carousel-item .carousel-content { 124 | width: 100%; 125 | height: 40%; 126 | bottom: 0; 127 | } 128 | 129 | .carousel-content h2 { 130 | font-size: 1.25rem; 131 | } 132 | 133 | .carousel-content p { 134 | font-size: 0.95rem; 135 | } 136 | 137 | .icons span { 138 | font-size: 1.25rem; 139 | } 140 | } 141 | -------------------------------------------------------------------------------- /Carousels/Testimonials_Carousel/script.js: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | id: 1, 4 | name: "susan smith", 5 | job: "web developer", 6 | image: 7 | "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883334/person-1_rfzshl.jpg", 8 | text: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam nullamolestiae repudiandae harum eveniet corrupti eaque? Amet numquam doloremincidunt.", 9 | }, 10 | { 11 | id: 2, 12 | name: "anna johnson", 13 | job: "web designer", 14 | image: 15 | "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883409/person-2_np9x5l.jpg", 16 | text: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam nullamolestiae repudiandae harum eveniet corrupti eaque? Amet numquam doloremincidunt.", 17 | }, 18 | { 19 | id: 3, 20 | name: "peter jones", 21 | job: "intern", 22 | image: 23 | "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883417/person-3_ipa0mj.jpg", 24 | text: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam nullamolestiae repudiandae harum eveniet corrupti eaque? Amet numquam doloremincidunt.", 25 | }, 26 | { 27 | id: 4, 28 | name: "bill anderson", 29 | job: "the boss", 30 | image: 31 | "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883423/person-4_t9nxjt.jpg", 32 | text: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam nullamolestiae repudiandae harum eveniet corrupti eaque? Amet numquam doloremincidunt.", 33 | }, 34 | ]; 35 | -------------------------------------------------------------------------------- /Carousels/Testimonials_Carousel/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | display: flex; 11 | align-items: center; 12 | height: 100vh; 13 | } 14 | 15 | .testimonial-container { 16 | width: min(95%, 600px); 17 | margin-inline: auto; 18 | border: 2px solid red; 19 | overflow-x: hidden; 20 | } 21 | 22 | .testimonial-header { 23 | display: flex; 24 | border: 2px solid blue; 25 | } 26 | 27 | .user-details { 28 | border: 2px solid green; 29 | font-family: sans-serif; 30 | white-space: nowrap; 31 | display: flex; 32 | flex-direction: column; 33 | align-items: center; 34 | width: 100%; 35 | flex-shrink: 0; 36 | } 37 | 38 | .user-details h3 { 39 | text-transform: capitalize; 40 | margin-top: 0.5em; 41 | font-size: 1.25rem; 42 | } 43 | 44 | .user-details p { 45 | margin-top: 0.25em; 46 | text-transform: capitalize; 47 | } 48 | 49 | .user-details img { 50 | width: 100px; 51 | height: 100px; 52 | object-fit: cover; 53 | border-radius: 50%; 54 | } 55 | 56 | .testimonial-content { 57 | font-family: sans-serif; 58 | text-align: center; 59 | line-height: 1.25; 60 | margin-top: 2em; 61 | } 62 | 63 | @media (min-width: 640px) { 64 | .user-details { 65 | width: 200px; 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /Form Fields/Feedback_Field/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Feedback Field 9 | 10 | 11 |
12 |

How was the help you received?

13 | 14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /Form Fields/Feedback_Field/script.js: -------------------------------------------------------------------------------- 1 | let circles = document.getElementsByClassName("circle"); 2 | 3 | for (let i = 0; i < circles.length; i++) { 4 | let emoji = circles[i]; 5 | 6 | emoji.addEventListener("click", selectCircle); 7 | } 8 | 9 | let previousCircle, currentCircle; 10 | function selectCircle(event) { 11 | let currentCircle = event.currentTarget; 12 | 13 | if (previousCircle) { 14 | previousCircle.classList.remove("grow"); 15 | } 16 | 17 | currentCircle.classList.add("grow"); 18 | previousCircle = currentCircle; 19 | } 20 | -------------------------------------------------------------------------------- /Form Fields/Feedback_Field_Emojis/images/angry-face.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ritika-Agrawal811/css-and-js-code-snippets/668a07f4ce4dc93643d479b09b05afd4412bbfc5/Form Fields/Feedback_Field_Emojis/images/angry-face.png -------------------------------------------------------------------------------- /Form Fields/Feedback_Field_Emojis/images/happy-face.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ritika-Agrawal811/css-and-js-code-snippets/668a07f4ce4dc93643d479b09b05afd4412bbfc5/Form Fields/Feedback_Field_Emojis/images/happy-face.png -------------------------------------------------------------------------------- /Form Fields/Feedback_Field_Emojis/images/heart-eyes-face.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ritika-Agrawal811/css-and-js-code-snippets/668a07f4ce4dc93643d479b09b05afd4412bbfc5/Form Fields/Feedback_Field_Emojis/images/heart-eyes-face.png -------------------------------------------------------------------------------- /Form Fields/Feedback_Field_Emojis/images/okay-face.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ritika-Agrawal811/css-and-js-code-snippets/668a07f4ce4dc93643d479b09b05afd4412bbfc5/Form Fields/Feedback_Field_Emojis/images/okay-face.png -------------------------------------------------------------------------------- /Form Fields/Feedback_Field_Emojis/images/sad-face.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ritika-Agrawal811/css-and-js-code-snippets/668a07f4ce4dc93643d479b09b05afd4412bbfc5/Form Fields/Feedback_Field_Emojis/images/sad-face.png -------------------------------------------------------------------------------- /Form Fields/Feedback_Field_Emojis/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Feedback Field with Emojis 8 | 9 | 10 |
11 |

How was the help you received?

12 | 29 |
30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /Form Fields/Feedback_Field_Emojis/script.js: -------------------------------------------------------------------------------- 1 | const emojis = document.getElementsByClassName("emoji"); 2 | 3 | for (let i = 0; i < emojis.length; i++) { 4 | const emoji = emojis[i]; 5 | emoji.addEventListener("click", selectCircle); 6 | } 7 | 8 | let previousCircle; 9 | function selectCircle(event) { 10 | const currentCircle = event.currentTarget; 11 | 12 | if (previousCircle) { 13 | previousCircle.classList.remove("selected"); 14 | } 15 | 16 | currentCircle.classList.add("selected"); 17 | previousCircle = currentCircle; 18 | } 19 | -------------------------------------------------------------------------------- /Form Fields/Feedback_Field_Emojis/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | font-size: 16px; 15 | } 16 | 17 | .feedback-container { 18 | width: 95%; 19 | max-width: 500px; 20 | } 21 | 22 | h2 { 23 | font-size: 1.15rem; 24 | font-family: sans-serif; 25 | color: #646464; 26 | text-align: center; 27 | } 28 | 29 | .feedback-bar { 30 | position: relative; 31 | margin-top: 1.25em; 32 | display: flex; 33 | justify-content: space-between; 34 | } 35 | 36 | .feedback-bar::before { 37 | content: ""; 38 | position: absolute; 39 | width: 90%; 40 | height: 2px; 41 | top: 50%; 42 | left: 50%; 43 | transform: translate(-50%, -50%); 44 | background-color: rgb(190, 190, 190); 45 | } 46 | 47 | .emoji { 48 | width: 4.5em; 49 | height: 4.5em; 50 | position: relative; 51 | filter: drop-shadow(0 0 2px #ddd) grayscale(1); 52 | transform: scale(1); 53 | transition: transform 150ms ease-in; 54 | cursor: pointer; 55 | } 56 | 57 | img { 58 | width: 100%; 59 | height: 100%; 60 | object-fit: cover; 61 | } 62 | 63 | .selected { 64 | filter: drop-shadow(0 0 2px #ddd) grayscale(0); 65 | transform: scale(1.15); 66 | } 67 | 68 | @media (max-width: 424px) { 69 | .emoji { 70 | width: 3.5em; 71 | height: 3.5em; 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /Form Fields/Invalid_Input_Shake_Effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 13 | 14 | Invalid Input With Shake Animation 15 | 16 | 17 |
18 | 19 | 28 |

29 | 30 | Only lowercase letters and underscores are allowed 31 |

32 |
33 | 34 | 35 | -------------------------------------------------------------------------------- /Form Fields/Invalid_Input_Shake_Effect/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | background-color: #1f1d36; 15 | } 16 | 17 | form { 18 | display: flex; 19 | flex-direction: column; 20 | gap: 0.75em; 21 | color: #ddd; 22 | } 23 | 24 | label { 25 | font-size: 1.25rem; 26 | font-family: sans-serif; 27 | } 28 | 29 | input { 30 | height: 3em; 31 | width: 400px; 32 | padding: 0.5em; 33 | font-size: 1.15rem; 34 | color: #ddd; 35 | border-radius: 5px; 36 | border: 2px solid #ddd; 37 | background-color: transparent; 38 | outline: none; 39 | } 40 | 41 | .username__condition { 42 | font-size: 0.875rem; 43 | font-family: sans-serif; 44 | color: #ed2b2a; 45 | background-color: #e3b2b8; 46 | padding: 0.5em; 47 | border-radius: 0.25em; 48 | opacity: 0; 49 | transition: opacity 150ms ease-in; 50 | } 51 | 52 | .username__condition i { 53 | margin-right: 0.25em; 54 | } 55 | 56 | input::placeholder { 57 | color: #aaa; 58 | } 59 | 60 | input:invalid { 61 | border-color: #ed2b2a; 62 | animation: shake 350ms 1; 63 | } 64 | 65 | input:invalid ~ .username__condition { 66 | opacity: 1; 67 | } 68 | 69 | input:focus:not(:placeholder-shown):valid { 70 | border-color: #4e9f3d; 71 | } 72 | 73 | @keyframes shake { 74 | 0% { 75 | transform: translateX(5px); 76 | } 77 | 50% { 78 | transform: translateX(-5px); 79 | } 80 | 100% { 81 | transform: translateX(5px); 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /Form Fields/Label_Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Label Animation 9 | 10 | 11 |
12 | 19 | 20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /Form Fields/Label_Animation/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | background: #121212; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | height: 100vh; 15 | } 16 | 17 | .container { 18 | width: 90%; 19 | max-width: 20em; 20 | height: 2.5em; 21 | position: relative; 22 | } 23 | 24 | .form__input { 25 | position: absolute; 26 | height: 100%; 27 | width: 100%; 28 | background: transparent; 29 | border: 2px solid #fff; 30 | border-radius: 0.5em; 31 | outline: none; 32 | color: #fff; 33 | padding-left: 1em; 34 | } 35 | 36 | label { 37 | position: absolute; 38 | background: #121212; 39 | color: #fff; 40 | font-family: sans-serif; 41 | left: 1em; 42 | top: 0.75em; 43 | cursor: text; 44 | transition: 45 | top 350ms ease-in, 46 | font-size 350ms ease-in; 47 | } 48 | 49 | .form__input:hover { 50 | border: 2px solid rgba(255, 255, 255, 0.5); 51 | } 52 | 53 | .form__input:focus { 54 | border: 2px solid #00ffff; 55 | } 56 | 57 | .form__input:focus ~ label, 58 | .form__input:not(:placeholder-shown).form__input:not(:focus) ~ label { 59 | top: -0.5em; 60 | font-size: 0.75rem; 61 | padding: 0 0.125em; 62 | } 63 | -------------------------------------------------------------------------------- /Form Fields/Multiselect_Dropdown/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Multiselect Dropdown 16 | 17 | 18 |
19 | 20 |
21 | 29 |
30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /Form Fields/Multiselect_Dropdown/script.js: -------------------------------------------------------------------------------- 1 | const dropdown = document.querySelector(".multiselect-dropdown"); 2 | const menu = document.querySelector(".menu"); 3 | const listContainer = document.querySelector(".selectedList-container"); 4 | let selectedItems = []; 5 | 6 | dropdown.onclick = (event) => { 7 | event.currentTarget.classList.toggle("show"); 8 | }; 9 | 10 | menu.addEventListener("click", (event) => { 11 | event.stopPropagation(); 12 | const item = event.target.innerHTML; 13 | 14 | if (!selectedItems.includes(item)) { 15 | selectedItems.push(item); 16 | showSelectedItems(item); 17 | } 18 | }); 19 | 20 | function showSelectedItems(item) { 21 | const itemSpan = document.createElement("span"); 22 | const crossIcon = document.createElement("i"); 23 | 24 | itemSpan.innerHTML = item; 25 | itemSpan.classList.add("selectedItem"); 26 | 27 | crossIcon.classList.add("fa-solid", "fa-xmark"); 28 | itemSpan.append(crossIcon); 29 | 30 | itemSpan.addEventListener("click", deleteItem); 31 | listContainer.append(itemSpan); 32 | } 33 | 34 | function deleteItem(event) { 35 | event.stopPropagation(); 36 | const item = event.currentTarget; 37 | selectedItems = selectedItems.filter((value) => value !== item.textContent); 38 | item.classList.add("zoomOut"); 39 | 40 | setTimeout(() => { 41 | item.remove(); 42 | item.classList.remove("zoomOut"); 43 | }, 390); 44 | } 45 | -------------------------------------------------------------------------------- /Form Fields/Multiselect_Dropdown/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | background-color: rgba(138, 214, 237, 0.83); 15 | } 16 | 17 | .multiselect-dropdown { 18 | position: relative; 19 | width: min(90%, 350px); 20 | height: 60px; 21 | border-radius: 5px; 22 | box-shadow: 0 2px 5px #aaa; 23 | font-family: sans-serif; 24 | cursor: pointer; 25 | background-color: #fff; 26 | } 27 | 28 | .icon { 29 | position: absolute; 30 | right: 1em; 31 | top: 50%; 32 | transform: translateY(-50%); 33 | z-index: 2; 34 | } 35 | 36 | .menu { 37 | list-style-type: none; 38 | position: absolute; 39 | width: 100%; 40 | top: 120%; 41 | height: 0; 42 | border-radius: inherit; 43 | box-shadow: 0 2px 5px #aaa; 44 | transition: height 300ms ease-in-out; 45 | cursor: pointer; 46 | overflow-y: scroll; 47 | background-color: #fff; 48 | } 49 | 50 | .menu li { 51 | padding: 1em; 52 | opacity: 0; 53 | transition: 54 | background-color 300ms ease-in, 55 | opacity 400ms ease-in-out; 56 | } 57 | 58 | .menu li:hover { 59 | background-color: rgba(87, 82, 82, 0.25); 60 | } 61 | 62 | .multiselect-dropdown.show .menu { 63 | height: 200px; 64 | } 65 | 66 | .multiselect-dropdown.show .menu li { 67 | opacity: 1; 68 | } 69 | 70 | .selectedList-container { 71 | position: relative; 72 | width: 100%; 73 | height: 100%; 74 | inset: 0; 75 | border-radius: inherit; 76 | display: flex; 77 | align-items: center; 78 | flex-wrap: wrap; 79 | overflow: auto; 80 | padding: 0.5em; 81 | } 82 | 83 | .multiselect-dropdown ::-webkit-scrollbar { 84 | width: 5px; 85 | } 86 | 87 | .multiselect-dropdown ::-webkit-scrollbar-track { 88 | background: #f1f1f1; 89 | } 90 | 91 | .multiselect-dropdown ::-webkit-scrollbar-thumb { 92 | background: #800080; 93 | } 94 | 95 | .selectedItem { 96 | position: relative; 97 | border: 2px solid #800080; 98 | padding: 0.1em 0 0.1em 0.75em; 99 | height: 35px; 100 | border-radius: inherit; 101 | margin: 0.25em; 102 | display: flex; 103 | justify-content: space-between; 104 | align-items: center; 105 | animation: zoomIn 350ms ease-in-out 1; 106 | } 107 | 108 | .selectedItem .fa-solid { 109 | margin: 0 0.5em; 110 | } 111 | 112 | .zoomOut { 113 | animation: zoomOut 400ms ease-in-out 1; 114 | } 115 | 116 | @keyframes zoomIn { 117 | 0% { 118 | transform: scale(0); 119 | } 120 | 121 | 100% { 122 | transform: scale(1); 123 | } 124 | } 125 | 126 | @keyframes zoomOut { 127 | 0% { 128 | transform: scale(1); 129 | } 130 | 131 | 100% { 132 | transform: scale(0); 133 | } 134 | } 135 | -------------------------------------------------------------------------------- /Form Fields/Password_Validation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Password Validation 16 | 17 | 18 |
19 | 20 | 21 |
22 | 23 | 24 |
25 |
26 |
    27 |
  • Lower-case letter
    • 28 |
  • Upper-case letter
    • 29 |
  • Number
    • 30 |
  • More than 8 characters
    • 31 |
32 |
33 |
34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /Form Fields/Password_Validation/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | height: 100vh; 14 | } 15 | 16 | .container { 17 | display: flex; 18 | flex-direction: column; 19 | width: min(90%, 300px); 20 | font-family: sans-serif; 21 | position: relative; 22 | } 23 | 24 | label { 25 | font-size: 1.15rem; 26 | margin-bottom: 0.5em; 27 | } 28 | 29 | #password-field { 30 | height: 35px; 31 | font-size: 1.15rem; 32 | padding: 0.85em; 33 | letter-spacing: 3px; 34 | border-radius: 0.25em; 35 | } 36 | 37 | .validation-checks { 38 | margin: 1em 0; 39 | padding: 1em 1em 1em 2em; 40 | box-shadow: 0 0 2px #708090; 41 | background-color: #301934; 42 | border-radius: 0.65em; 43 | transition: all 300ms ease-in; 44 | } 45 | 46 | .validation-checks ul { 47 | list-style-type: none; 48 | } 49 | 50 | .validation-checks li { 51 | position: relative; 52 | margin: 0.45em 0; 53 | transition: all 150ms ease-in; 54 | color: #708090; 55 | font-weight: 400; 56 | } 57 | 58 | .validation-checks li::before { 59 | content: ""; 60 | position: absolute; 61 | width: 0.5em; 62 | height: 0.5em; 63 | border-radius: 50%; 64 | background-color: #708090; 65 | outline: 1px solid #708090; 66 | outline-offset: 2px; 67 | left: -1em; 68 | top: 50%; 69 | transform: translateY(-50%); 70 | transition: inherit; 71 | } 72 | 73 | .hide { 74 | display: none; 75 | } 76 | 77 | .icon { 78 | position: absolute; 79 | right: 0; 80 | top: 2.5em; 81 | cursor: pointer; 82 | } 83 | 84 | .icon i { 85 | position: absolute; 86 | right: 0.5em; 87 | } 88 | 89 | /* additional CSS classes */ 90 | .validation-checks li.checked::before { 91 | background-color: #0bda51; 92 | outline: 2px solid #0bda51; 93 | outline-offset: 0; 94 | } 95 | 96 | .validation-checks li.checked { 97 | color: #50c878; 98 | font-weight: 700; 99 | } 100 | -------------------------------------------------------------------------------- /Form Fields/Radio_Cards/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Radio Cards 8 | 9 | 10 |
11 |
12 | 13 | 14 |
15 |
16 | 17 | 18 |
19 |
20 | 21 | 22 |
23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /Form Fields/Radio_Cards/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | background-color: #272737; 14 | height: 100vh; 15 | } 16 | 17 | form { 18 | padding: 0 1em; 19 | width: 350px; 20 | } 21 | 22 | .inputGroup { 23 | position: relative; 24 | margin: 1em 0; 25 | } 26 | 27 | input[type="radio"] { 28 | appearance: none; 29 | position: absolute; 30 | width: 1.75em; 31 | height: 1.75em; 32 | background: radial-gradient(45% 45% at 50% 50%, #4c4c5e 48%, #24293c 50%); 33 | border-radius: 50%; 34 | left: 2em; 35 | top: 50%; 36 | transform: translateY(-50%); 37 | transition: all 100ms ease-in; 38 | cursor: pointer; 39 | z-index: 2; 40 | } 41 | 42 | label { 43 | display: block; 44 | padding: 1em 3em; 45 | width: 100%; 46 | font-size: 1.35rem; 47 | font-family: sans-serif; 48 | color: #878790; 49 | background-color: #323246; 50 | border: 3px solid #4c4c5e; 51 | border-radius: 0.5em; 52 | transition: all 100ms ease-in; 53 | cursor: pointer; 54 | } 55 | 56 | input:checked ~ label { 57 | color: #fff; 58 | border: 3px solid #3f5cd3; 59 | } 60 | 61 | input:checked { 62 | background: radial-gradient(45% 45% at 50% 50%, #fff 48%, #3f5cd3 50%); 63 | } 64 | -------------------------------------------------------------------------------- /Form Fields/Star_Rating_Field/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Star Rating Field 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Form Fields/Star_Rating_Field/script.js: -------------------------------------------------------------------------------- 1 | let starsArray = document.getElementsByClassName("star"); 2 | starsArray = [...starsArray]; 3 | 4 | starsArray.forEach((star) => { 5 | star.addEventListener("click", setRating); 6 | }); 7 | 8 | function setRating(event) { 9 | let rate = event.target.dataset.rate; 10 | 11 | for (let i = starsArray.length - 1; i >= rate; i--) { 12 | starsArray[i].classList.remove("rated"); 13 | } 14 | 15 | for (let i = 0; i < rate; i++) { 16 | starsArray[i].classList.add("rated"); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /Form Fields/Star_Rating_Field/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | height: 100vh; 14 | background: #121212; 15 | } 16 | 17 | .star-rating { 18 | width: min(90%, 350px); 19 | height: 100px; 20 | display: flex; 21 | align-items: center; 22 | justify-content: space-around; 23 | } 24 | 25 | .star { 26 | width: 50px; 27 | height: 45px; 28 | clip-path: polygon( 29 | 50% 0%, 30 | 61% 35%, 31 | 98% 35%, 32 | 68% 57%, 33 | 79% 91%, 34 | 50% 70%, 35 | 21% 91%, 36 | 32% 57%, 37 | 2% 35%, 38 | 39% 35% 39 | ); 40 | background-color: #262626; 41 | transform: rotateX(50deg); 42 | cursor: pointer; 43 | transition: transform 150ms ease-in; 44 | outline: none; 45 | } 46 | 47 | .star.rated { 48 | background: #ffea00; 49 | transform: rotateX(0); 50 | } 51 | -------------------------------------------------------------------------------- /Form Fields/Toggle Password Field/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Toggle Password Field 16 | 17 | 18 |
19 | 27 | 28 | 29 | 30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /Form Fields/Toggle Password Field/script.js: -------------------------------------------------------------------------------- 1 | let passwordField = document.getElementById("password"); 2 | let eyeOpen = document.querySelector(".eye-open"); 3 | let eyeClosed = document.querySelector(".eye-closed"); 4 | 5 | function showPassword() { 6 | passwordField.classList.toggle("show"); 7 | 8 | changeIcon(); 9 | 10 | if (passwordField.type == "password") { 11 | passwordField.type = "text"; 12 | } else { 13 | passwordField.type = "password"; 14 | } 15 | } 16 | 17 | function changeIcon() { 18 | if (eyeClosed.classList.contains("none")) { 19 | eyeClosed.classList.remove("none"); 20 | } else { 21 | eyeClosed.classList.add("none"); 22 | } 23 | } 24 | 25 | eyeClosed.addEventListener("click", showPassword); 26 | eyeOpen.addEventListener("click", showPassword); 27 | -------------------------------------------------------------------------------- /Form Fields/Toggle Password Field/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | } 15 | 16 | .container { 17 | position: relative; 18 | width: 90%; 19 | max-width: 350px; 20 | height: 3.5em; 21 | } 22 | 23 | input { 24 | position: absolute; 25 | width: 100%; 26 | height: 100%; 27 | border-radius: 5px; 28 | border: none; 29 | padding: 0 1em; 30 | font-size: 1.15rem; 31 | background-color: #1f1a1a; 32 | transition: all 350ms ease-in-out; 33 | } 34 | 35 | .eye-icon { 36 | position: absolute; 37 | top: 50%; 38 | transform: translateY(-50%); 39 | right: 1em; 40 | width: 2em; 41 | height: 2em; 42 | display: grid; 43 | place-items: center; 44 | background: rgb(19, 181, 221); 45 | border-radius: 50%; 46 | cursor: pointer; 47 | } 48 | 49 | .hide { 50 | box-shadow: 0 0 0 rgb(19, 181, 221) inset; 51 | color: rgb(19, 181, 221); 52 | } 53 | 54 | .show { 55 | box-shadow: -400px 0 0 rgb(19, 181, 221) inset; 56 | color: #000; 57 | } 58 | 59 | .none { 60 | display: none; 61 | visibility: hidden; 62 | } 63 | -------------------------------------------------------------------------------- /Hover Effects/Book_Flip_Effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Book Flip Effect 8 | 9 | 10 |
11 | 12 |
13 | Book Thief 17 |
18 |
19 |
20 |
21 |
22 |
23 |

PROLOGUE

24 |

a mountain range of rubble

25 |

in which our narrator introduces:

26 |

himself-the colors-and the book thief

27 |
28 |
29 |
30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /Hover Effects/Book_Flip_Effect/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | background: #ecf0f1; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | height: 100vh; 15 | } 16 | 17 | /* specific classes */ 18 | 19 | .book { 20 | position: relative; 21 | width: 8.5em; 22 | height: 13em; 23 | perspective: 1000px; 24 | transform-style: preserve-3d; 25 | background: #fffbec; 26 | box-shadow: 5px 5px 1em #bbb; 27 | cursor: pointer; 28 | } 29 | 30 | .book::before { 31 | content: ""; 32 | position: absolute; 33 | inset: 0; 34 | transition: box-shadow 500ms ease-in-out; 35 | } 36 | 37 | /* book cover */ 38 | 39 | .book_front { 40 | position: relative; 41 | height: 100%; 42 | border: 1px solid #111; 43 | z-index: 3; 44 | box-shadow: 45 | -1px 0 0 #320a0a, 46 | -2px 0.5px 0 #320a0a, 47 | -3px 1px 0 #320a0a, 48 | -4px 1.5px 0 #320a0a; 49 | } 50 | 51 | .book_front-back { 52 | position: absolute; 53 | background: #fffbec; 54 | inset: 0; 55 | z-index: 2; 56 | } 57 | 58 | img { 59 | width: 100%; 60 | height: 100%; 61 | object-fit: cover; 62 | } 63 | 64 | /* book pages */ 65 | 66 | .page { 67 | position: absolute; 68 | inset: 0; 69 | background: linear-gradient(90deg, #eeeae3, #fffbf6); 70 | box-shadow: 71 | inset 0px -1px 2px rgba(50, 50, 50, 0.1), 72 | inset -1px 0px 1px rgba(150, 150, 150, 0.2); 73 | padding: 1em 0.5em; 74 | z-index: 1; 75 | } 76 | 77 | .book_front, 78 | .book_front-back, 79 | .page { 80 | transform-origin: 0 50%; 81 | transition: 82 | transform 1s ease-in-out, 83 | box-shadow 1s ease-in-out; 84 | } 85 | 86 | /* page content */ 87 | 88 | h2 { 89 | font-size: 0.9rem; 90 | font-weight: 400; 91 | text-align: center; 92 | margin-bottom: 1em; 93 | } 94 | 95 | p { 96 | font-size: 0.5rem; 97 | text-align: center; 98 | } 99 | 100 | /* hover styles */ 101 | 102 | .book:hover::before { 103 | box-shadow: 104 | 1px 0 0 #320a0a, 105 | 2px 0.5px 0 #320a0a, 106 | 3px 1px 0 #320a0a, 107 | 4px 1.5px 0 #320a0a; 108 | } 109 | 110 | .book:hover > * { 111 | transform: rotateY(var(--angle)); 112 | transition-duration: var(--duration, 1s); 113 | } 114 | 115 | .book:hover .book_front { 116 | box-shadow: 2px 5px 0.5em #bbb; 117 | } 118 | 119 | @media (min-width: 424px) { 120 | .book { 121 | width: 11.5em; 122 | height: 16em; 123 | } 124 | 125 | h2 { 126 | font-size: 1rem; 127 | } 128 | 129 | p { 130 | font-size: 0.65rem; 131 | } 132 | } 133 | -------------------------------------------------------------------------------- /Hover Effects/Button_Background_Rotate/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Button Background Rotate Hover Effect 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Hover Effects/Button_Background_Rotate/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | height: 100vh; 14 | } 15 | 16 | .btn { 17 | position: relative; 18 | border: none; 19 | padding: 0.75em 1.5em; 20 | font-size: 1.15rem; 21 | background-color: #ff7251; 22 | border-radius: 100vmax; 23 | overflow: hidden; 24 | transition: all 350ms ease; 25 | cursor: pointer; 26 | } 27 | 28 | .btn::before { 29 | content: " "; 30 | position: absolute; 31 | width: 150%; 32 | height: 150%; 33 | top: 50%; 34 | left: 50%; 35 | transform: translate(-50%, -50%); 36 | background: #51deff; 37 | transition: all 350ms ease; 38 | z-index: -1; 39 | } 40 | 41 | .btn:hover { 42 | background: transparent; 43 | box-shadow: 44 | 1px 1px 0.5em 0 rgba(255, 255, 255, 0.5), 45 | -1px -1px 0.5em 0 rgba(116, 125, 136, 0.2); 46 | } 47 | 48 | .btn:hover::before { 49 | transform: translate(-50%, -50%) rotate(180deg); 50 | } 51 | -------------------------------------------------------------------------------- /Hover Effects/Button_Border_Fill_Up/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Button Border Fill Up Hover Effect 9 | 10 | 11 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Hover Effects/Button_Border_Fill_Up/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | height: 100vh; 14 | } 15 | 16 | .btn { 17 | width: 8em; 18 | height: 2.5em; 19 | font-size: 1.25rem; 20 | font-weight: 700; 21 | position: relative; 22 | border: 0; 23 | cursor: pointer; 24 | background-color: #ffdd99; 25 | color: #5d4f0f; 26 | transition: background-color 200ms ease-in-out; 27 | } 28 | 29 | .border-container { 30 | position: absolute; 31 | width: 100%; 32 | height: 100%; 33 | inset: 0; 34 | } 35 | 36 | .border-line { 37 | width: 100%; 38 | height: 100%; 39 | fill: transparent; 40 | stroke: #5d4f0f; 41 | stroke-width: 5px; 42 | stroke-dasharray: 0 100; 43 | transition: stroke-dasharray 750ms ease-in-out; 44 | } 45 | 46 | .btn:hover { 47 | background-color: transparent; 48 | } 49 | 50 | .btn:hover .border-line { 51 | stroke-dasharray: 100 0; 52 | } 53 | -------------------------------------------------------------------------------- /Hover Effects/Button_Stripes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Button Stripes Hover Effect 9 | 10 | 11 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Hover Effects/Button_Stripes/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | height: 100vh; 14 | background-color: rgb(166, 226, 206); 15 | } 16 | 17 | .btn-stripes { 18 | position: relative; 19 | font-size: 2rem; 20 | padding: 0.25em 0.75em; 21 | background: #fff; 22 | border: none; 23 | outline: none; 24 | cursor: pointer; 25 | z-index: 1; 26 | box-shadow: 0px 8px 2em rgba(117, 151, 185, 0.8); 27 | } 28 | 29 | .btn-stripes span { 30 | transition: all 300ms ease-in-out; 31 | } 32 | 33 | .btn-stripes:hover span { 34 | color: #fff; 35 | } 36 | 37 | .btn-stripes::before { 38 | content: ""; 39 | position: absolute; 40 | top: 50%; 41 | left: 50%; 42 | width: 0; 43 | height: 100%; 44 | background: linear-gradient( 45 | #eaecc6 12%, 46 | #014421 12%, 47 | #014421 88%, 48 | #eaecc6 88% 49 | ); 50 | transform: translate(-50%, -50%); 51 | transition: all 500ms ease; 52 | z-index: -1; 53 | } 54 | 55 | .btn-stripes:hover::before { 56 | width: 100%; 57 | } 58 | -------------------------------------------------------------------------------- /Hover Effects/Button_Wave_Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Button Liquid Animation 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Hover Effects/Button_Wave_Animation/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | height: 100vh; 14 | background-color: #f8fdcf; 15 | } 16 | 17 | button { 18 | position: relative; 19 | font-size: 1.25rem; 20 | padding: 0.75em 2.5em; 21 | border: 0; 22 | border-radius: 100vmax; 23 | background-color: #3a98b9; 24 | transition: color 500ms ease-in; 25 | overflow: hidden; 26 | cursor: pointer; 27 | z-index: 1; 28 | } 29 | 30 | button::before, 31 | button::after { 32 | content: ""; 33 | position: absolute; 34 | width: 13.5em; 35 | height: 12.5em; 36 | transform: translateX(-50%); 37 | transition: top 1s ease-in-out; 38 | border-radius: 50%; 39 | z-index: -1; 40 | } 41 | 42 | button::before { 43 | top: -10em; 44 | left: 50%; 45 | background: #daf5ff; 46 | animation: wave 4s ease-in infinite; 47 | } 48 | 49 | button::after { 50 | top: -10.15em; 51 | left: 55%; 52 | background: #b9e9fc; 53 | animation: wave 3s ease-in infinite; 54 | } 55 | 56 | button:hover::before, 57 | button:hover::after { 58 | top: -20em; 59 | } 60 | 61 | button:hover { 62 | color: #fff; 63 | } 64 | 65 | @keyframes wave { 66 | 0% { 67 | transform: translateX(-50%) rotate(0); 68 | } 69 | 100% { 70 | transform: translateX(-50%) rotate(360deg); 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /Hover Effects/Card_Image_Zoom/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Cards Image Zoom Hover Effect 8 | 9 | 10 |
11 |
12 | writing pads and diaries 16 |
17 |
18 |

Writing pads & Diaries

19 |

Affordable notebooks for planning, journaling, and note-taking.

20 |
21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /Hover Effects/Card_Image_Zoom/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Diphylleia&display=swap"); 2 | 3 | *, 4 | ::before, 5 | ::after { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | min-height: 100vh; 16 | background-color: #34b597; 17 | } 18 | 19 | .card { 20 | width: 18em; 21 | border-radius: 0.5em; 22 | cursor: pointer; 23 | } 24 | 25 | figure { 26 | height: 18em; 27 | overflow: hidden; 28 | border-radius: 0.5em 0.5em 0 0; 29 | } 30 | 31 | img { 32 | width: 100%; 33 | height: 100%; 34 | object-fit: cover; 35 | border-radius: 0.5em 0.5em 0 0; 36 | transition: transform 300ms ease-in-out; 37 | } 38 | 39 | .card__content { 40 | position: relative; 41 | background-color: #b1d795; 42 | border-radius: 0 0 0.5em 0.5em; 43 | text-align: center; 44 | height: 11em; 45 | padding: 1.5em 0; 46 | z-index: 0; 47 | transition: 48 | padding 300ms ease-in, 49 | color 300ms ease-in; 50 | } 51 | 52 | .card__content::before { 53 | content: ""; 54 | position: absolute; 55 | left: 0; 56 | bottom: 0; 57 | width: 100%; 58 | height: 0; 59 | border-radius: 50% 50% 0.5em 0.5em; 60 | background-color: #fff; 61 | transition: 62 | height 300ms ease-in-out, 63 | border-radius 300ms ease-in-out; 64 | z-index: -1; 65 | } 66 | 67 | .card__content h2 { 68 | font-size: 2rem; 69 | font-family: "Diphylleia", serif; 70 | line-height: 1.25; 71 | } 72 | 73 | .card__content p { 74 | font-family: sans-serif; 75 | margin-top: 1em; 76 | } 77 | 78 | .card:hover img { 79 | transform: scale(1.1); 80 | } 81 | 82 | .card:hover .card__content { 83 | color: #0000ff; 84 | padding-top: 1em; 85 | } 86 | 87 | .card:hover .card__content::before { 88 | height: 100%; 89 | border-radius: 0 0 0.5em 0.5em; 90 | } 91 | -------------------------------------------------------------------------------- /Hover Effects/Focus_Image_Effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Focus Item on Hover Effect 8 | 9 | 10 |
11 |
12 | 15 |
16 |
17 | 20 |
21 | 22 |
23 | 26 |
27 | 28 |
29 | 32 |
33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /Hover Effects/Focus_Image_Effect/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | height: 100vh; 14 | background-color: #40445a; 15 | } 16 | 17 | .container { 18 | width: min(95%, 1200px); 19 | display: flex; 20 | gap: 1em; 21 | } 22 | 23 | figure { 24 | width: calc((100% - 3em) / 4); 25 | height: 350px; 26 | cursor: pointer; 27 | transition: opacity 150ms ease-in; 28 | } 29 | 30 | img { 31 | width: 100%; 32 | height: 100%; 33 | object-fit: cover; 34 | } 35 | 36 | .container:hover figure:not(:hover) { 37 | opacity: 0.2; 38 | } 39 | -------------------------------------------------------------------------------- /Hover Effects/Image_Shrink/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Image Shrink Hover Effect 8 | 9 | 10 |
11 |
12 |

Poodle

13 | poodle 17 |
18 |
19 |

labrador

20 | labrador retreiver 24 |
25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /Hover Effects/Image_Shrink/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | background-color: #121212; 11 | } 12 | 13 | .container { 14 | width: clamp(300px, 85vw, 900px); 15 | margin: 3em auto; 16 | } 17 | 18 | .img-container { 19 | position: relative; 20 | margin: 1em 0; 21 | height: clamp(350px, 85vw, 500px); 22 | transition: transform 450ms ease-in-out; 23 | cursor: pointer; 24 | } 25 | 26 | .img-container .img-title { 27 | position: absolute; 28 | font-size: 3.5rem; 29 | left: 50%; 30 | letter-spacing: 0.75em; 31 | opacity: 0; 32 | color: #fff; 33 | text-transform: uppercase; 34 | font-family: sans-serif; 35 | transform: translate(-50%, -50%); 36 | transition: all 450ms ease-in-out; 37 | transition-delay: 150ms; 38 | } 39 | 40 | .img-container img { 41 | width: 100%; 42 | height: 100%; 43 | object-fit: cover; 44 | } 45 | 46 | .img-container:hover { 47 | transform: scale(0.8); 48 | } 49 | 50 | .img-container:hover .img-title { 51 | letter-spacing: 0; 52 | opacity: 1; 53 | } 54 | 55 | @media (min-width: 576px) { 56 | body { 57 | display: flex; 58 | justify-content: center; 59 | align-items: center; 60 | height: 100vh; 61 | } 62 | 63 | .container { 64 | display: flex; 65 | gap: 1em; 66 | } 67 | 68 | .img-container { 69 | width: 50%; 70 | } 71 | 72 | .img-container .img-title { 73 | font-size: 4.5rem; 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /Hover Effects/Multi_Line_Underline/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Multi-Line Underline Hover Effect 8 | 9 | 10 |

11 | Check out this cool 12 | css underline hover effect that spans over multiple lines. 13 |

14 | 15 | 16 | -------------------------------------------------------------------------------- /Hover Effects/Multi_Line_Underline/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | height: 100vh; 14 | } 15 | 16 | p { 17 | width: 15em; 18 | font-family: sans-serif; 19 | line-height: 1.5; 20 | font-size: 2rem; 21 | } 22 | 23 | a { 24 | color: #3b5998; 25 | text-decoration: none; 26 | background-image: linear-gradient(90deg, #fe4a49 50%, #fe4a49 50%); 27 | background-size: 0% 0.1em; 28 | background-repeat: no-repeat; 29 | background-position: 0% 100%; 30 | transition: background-size 450ms ease-in-out; 31 | padding-bottom: 0.1em; 32 | cursor: pointer; 33 | } 34 | 35 | a:hover { 36 | background-size: 100% 0.1em; 37 | } 38 | -------------------------------------------------------------------------------- /Hover Effects/Share_Button/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Share Button 16 | 17 | 18 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /Hover Effects/Share_Button/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | } 15 | 16 | button { 17 | width: 270px; 18 | height: 60px; 19 | border: none; 20 | background: #ffe4c4; 21 | display: flex; 22 | justify-content: center; 23 | align-items: center; 24 | position: relative; 25 | } 26 | 27 | button::before, 28 | button::after { 29 | content: ""; 30 | position: absolute; 31 | width: 0; 32 | height: 3px; 33 | background-color: #000; 34 | transition: width 1s ease-in-out; 35 | } 36 | 37 | button::before { 38 | top: 0; 39 | left: 0; 40 | } 41 | 42 | button::after { 43 | bottom: 0; 44 | right: 0; 45 | } 46 | 47 | button:hover:before, 48 | button:hover:after { 49 | width: 100%; 50 | } 51 | 52 | .letters { 53 | width: 50px; 54 | height: 50px; 55 | perspective: 600px; 56 | } 57 | 58 | .card { 59 | width: 100%; 60 | height: 100%; 61 | position: relative; 62 | transition: transform 1s ease-in-out; 63 | transform-style: preserve-3d; 64 | } 65 | 66 | .card_face { 67 | position: absolute; 68 | height: 100%; 69 | width: 100%; 70 | backface-visibility: hidden; 71 | font-size: 28px; 72 | display: flex; 73 | align-items: center; 74 | justify-content: center; 75 | cursor: pointer; 76 | font-weight: 600; 77 | } 78 | 79 | .back { 80 | transform: rotateY(180deg); 81 | } 82 | 83 | button:hover .card { 84 | transform: rotateY(180deg); 85 | } 86 | -------------------------------------------------------------------------------- /Hover Effects/Slide_Up_Link_Effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Slide Up Link Hover Effect 8 | 9 | 10 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /Hover Effects/Slide_Up_Link_Effect/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | background-color: #c7f6c7; 14 | height: 100vh; 15 | } 16 | 17 | .menu { 18 | display: flex; 19 | gap: 2em; 20 | list-style-type: none; 21 | } 22 | 23 | .nav-link { 24 | font-size: 1.5rem; 25 | font-family: sans-serif; 26 | cursor: pointer; 27 | overflow: hidden; 28 | } 29 | 30 | .nav-link a { 31 | position: relative; 32 | display: block; 33 | top: 0; 34 | color: #000; 35 | text-decoration: none; 36 | transition: transform 350ms ease-in-out; 37 | } 38 | 39 | .nav-link a::before { 40 | content: attr(data-link); 41 | position: absolute; 42 | transform: translateY(100%); 43 | } 44 | 45 | .nav-link:hover a { 46 | transform: translateY(-100%); 47 | } 48 | 49 | @media (max-width: 27em) { 50 | .menu { 51 | flex-direction: column; 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /Hover Effects/Team_Card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 13 | 14 | Team Cards 15 | 16 | 17 |
18 |
19 | 22 |
23 |

Aslan Jade Callenreese

24 |

25 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius placeat 26 | distinctio corrupti a ipsum. 27 |

28 | 37 |
38 | 39 | 40 | -------------------------------------------------------------------------------- /Hover Effects/Team_Card/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | background: #ddd6f3; 15 | } 16 | 17 | .card { 18 | position: relative; 19 | width: 18em; 20 | height: 18em; 21 | border-radius: 1.5em; 22 | box-shadow: 0 0 5px #e5e5e5; 23 | background: #fff; 24 | font-family: sans-serif; 25 | cursor: pointer; 26 | } 27 | 28 | figure { 29 | position: absolute; 30 | width: 100%; 31 | height: 100%; 32 | top: 0; 33 | left: 0; 34 | transform-origin: 50% 0%; 35 | transition: all 600ms ease-in-out; 36 | z-index: 2; 37 | } 38 | 39 | img { 40 | width: 100%; 41 | height: 100%; 42 | object-fit: cover; 43 | border-radius: 1.5em; 44 | } 45 | 46 | .card:hover figure { 47 | top: -20%; 48 | transform: scale(0.6); 49 | } 50 | 51 | .social-icons, 52 | .title { 53 | position: absolute; 54 | bottom: 0; 55 | width: 100%; 56 | height: 15%; 57 | color: #fff; 58 | background: rgb(196, 30, 58); 59 | } 60 | 61 | .social-icons { 62 | display: flex; 63 | border-radius: 0 0 1.5em 1.5em; 64 | } 65 | 66 | .social-icons .icon-container { 67 | display: inline-block; 68 | width: calc(100% / 3); 69 | height: 100%; 70 | font-size: 1.25rem; 71 | display: grid; 72 | place-content: center; 73 | transition: background-color 150ms ease-in-out; 74 | } 75 | 76 | .social-icons .icon-container:nth-child(1) { 77 | border-radius: 0 0 0 1.25em; 78 | } 79 | 80 | .social-icons .icon-container:nth-child(3) { 81 | border-radius: 0 0 1.25em 0; 82 | } 83 | 84 | .social-icons .icon-container:hover { 85 | background-color: rgba(0, 0, 0, 0.5); 86 | } 87 | 88 | .title { 89 | display: grid; 90 | place-content: center; 91 | font-size: 1.35rem; 92 | font-weight: 400; 93 | border-radius: 0 0 1em 1em; 94 | z-index: 3; 95 | transition: bottom 600ms ease-in-out; 96 | } 97 | 98 | .card:hover .title { 99 | bottom: 40%; 100 | font-weight: 700; 101 | background: transparent; 102 | color: #262626; 103 | } 104 | 105 | .content { 106 | position: absolute; 107 | bottom: 20%; 108 | padding: 0 1em; 109 | color: #545454; 110 | opacity: 0; 111 | text-align: center; 112 | transition: opacity 150ms ease-in; 113 | transition-delay: 600ms; 114 | } 115 | 116 | .card:hover .content { 117 | opacity: 1; 118 | } 119 | 120 | @media screen and (max-width: 424px) { 121 | .card { 122 | width: 17em; 123 | height: 17em; 124 | } 125 | 126 | .title { 127 | font-size: 1.15rem; 128 | } 129 | 130 | .card:hover .title { 131 | bottom: 45%; 132 | } 133 | } 134 | -------------------------------------------------------------------------------- /Hover Effects/Text_Underline/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Text Underline Hover Effect 8 | 9 | 10 |

Underline Hover Effect

11 | 12 | 13 | -------------------------------------------------------------------------------- /Hover Effects/Text_Underline/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | height: 100vh; 14 | background-color: bisque; 15 | } 16 | 17 | h1 { 18 | position: relative; 19 | font-size: 3rem; 20 | font-family: Georgia, "Times New Roman", Times, serif; 21 | cursor: pointer; 22 | } 23 | 24 | h1::before { 25 | content: ""; 26 | position: absolute; 27 | width: 0; 28 | left: 50%; 29 | bottom: 0; 30 | height: 3px; 31 | background-color: #000; 32 | transition: all 350ms ease-in-out; 33 | } 34 | 35 | h1:hover::before { 36 | width: 100%; 37 | left: 0; 38 | } 39 | -------------------------------------------------------------------------------- /Icons/Inbox_Icon/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Inbox Icon 9 | 10 | 11 |
12 |
13 |
14 |
2
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /Icons/Inbox_Icon/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::after, 3 | ::before { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | font-size: 10px; 15 | } 16 | 17 | .container { 18 | width: 15em; 19 | height: 10em; 20 | position: relative; 21 | animation: notify 750ms ease-in-out 1 forwards; 22 | } 23 | 24 | @keyframes notify { 25 | 0%, 26 | 100% { 27 | transform: scale(1); 28 | } 29 | 30 | 50% { 31 | transform: scale(0.7); 32 | } 33 | } 34 | 35 | .container::before, 36 | .container::after { 37 | content: ""; 38 | position: absolute; 39 | top: 0; 40 | width: 0; 41 | height: 0; 42 | border-top: 5em solid transparent; 43 | border-bottom: 4.5em solid transparent; 44 | } 45 | 46 | .container::before { 47 | left: 0; 48 | border-left: 4.5em solid #000; 49 | } 50 | 51 | .container::after { 52 | right: 0; 53 | border-right: 4.5em solid #000; 54 | } 55 | 56 | .trapezium { 57 | position: absolute; 58 | bottom: 0; 59 | width: 100%; 60 | height: 0; 61 | border-left: 5em solid transparent; 62 | border-right: 5em solid transparent; 63 | border-bottom: 5em solid #000; 64 | } 65 | 66 | .triangle { 67 | position: absolute; 68 | width: 0; 69 | height: 0; 70 | top: 0; 71 | left: 50%; 72 | transform: translateX(-50%); 73 | transform-origin: top; 74 | border-top: 8em solid #fff; 75 | border-left: 8em solid transparent; 76 | border-right: 8em solid transparent; 77 | z-index: 3; 78 | animation: open 1s ease-in 1 375ms forwards; 79 | } 80 | 81 | @keyframes open { 82 | 0%, 83 | 65%, 84 | 100% { 85 | transform: translateX(-50%) rotateX(0); 86 | } 87 | 88 | 85% { 89 | transform: translateX(-50%) rotateX(35deg); 90 | } 91 | 92 | 40%, 93 | 45% { 94 | transform: translateX(-50%) rotateX(85deg); 95 | } 96 | } 97 | 98 | .triangle::before { 99 | content: ""; 100 | position: absolute; 101 | width: 0; 102 | height: 0; 103 | bottom: 10px; 104 | left: 50%; 105 | transform: translateX(-50%); 106 | border-top: 7em solid #000; 107 | border-left: 7.5em solid transparent; 108 | border-right: 7.5em solid transparent; 109 | } 110 | 111 | .count { 112 | position: absolute; 113 | width: 2em; 114 | height: 2em; 115 | border-radius: 50%; 116 | background-color: #e20606; 117 | display: grid; 118 | place-items: center; 119 | font-size: 1.5rem; 120 | font-weight: 700; 121 | font-family: sans-serif; 122 | color: #fff; 123 | right: -0.5em; 124 | top: -0.5em; 125 | transform: scale(0); 126 | animation: scaleUp 300ms ease-in-out 750ms 1 forwards; 127 | z-index: 5; 128 | } 129 | 130 | @keyframes scaleUp { 131 | 0% { 132 | transform: scale(0); 133 | } 134 | 135 | 100% { 136 | transform: scale(1); 137 | } 138 | } 139 | -------------------------------------------------------------------------------- /Icons/Notification_Bell_Icon/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Notification Bell Icon 9 | 10 | 11 |
12 | 13 | 17 | 18 |
19 |
2
20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /Icons/Notification_Bell_Icon/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | } 15 | 16 | .container { 17 | width: 10em; 18 | height: 10em; 19 | font-size: 10px; 20 | display: flex; 21 | justify-content: center; 22 | position: relative; 23 | } 24 | 25 | svg { 26 | width: 8em; 27 | fill: #0b0b31; 28 | transform-origin: 50% 0%; 29 | animation: sway 1s ease-in-out 1; 30 | animation-fill-mode: forwards; 31 | } 32 | 33 | .clapper { 34 | position: absolute; 35 | width: 5px; 36 | height: 90%; 37 | background-color: transparent; 38 | transform-origin: top; 39 | animation: swayReverse 1s ease-in-out 1; 40 | } 41 | 42 | .clapper::before { 43 | content: ""; 44 | position: absolute; 45 | width: 2em; 46 | height: 1em; 47 | left: -0.8em; 48 | bottom: -0.5em; 49 | background-color: #0b0b31; 50 | border-radius: 50%/0 0 100% 100%; 51 | animation: sway 1s ease-in-out 1; 52 | animation-fill-mode: forwards; 53 | } 54 | 55 | @keyframes sway { 56 | 0% { 57 | transform: rotate(-10deg); 58 | } 59 | 60 | 25% { 61 | transform: rotate(10deg); 62 | } 63 | 64 | 50% { 65 | transform: rotate(-10deg); 66 | } 67 | 68 | 75% { 69 | transform: rotate(5deg); 70 | } 71 | 72 | 100% { 73 | transform: rotate(0deg); 74 | } 75 | } 76 | 77 | @keyframes swayReverse { 78 | 0% { 79 | transform: rotate(5deg); 80 | } 81 | 82 | 25% { 83 | transform: rotate(-5deg); 84 | } 85 | 86 | 50% { 87 | transform: rotate(5deg); 88 | } 89 | 90 | 75% { 91 | transform: rotate(-5deg); 92 | } 93 | 94 | 100% { 95 | transform: rotate(0deg); 96 | } 97 | } 98 | 99 | .notification-count { 100 | position: absolute; 101 | width: 1.75em; 102 | height: 1.75em; 103 | border-radius: 50%; 104 | background-color: #e20606; 105 | display: grid; 106 | place-items: center; 107 | font-size: 1.25rem; 108 | font-weight: 700; 109 | font-family: sans-serif; 110 | color: #fff; 111 | left: 60%; 112 | top: 10%; 113 | transform: translate(-60%, -10%); 114 | opacity: 0; 115 | animation: scaleUp 300ms ease-in-out 1s 1; 116 | animation-fill-mode: forwards; 117 | } 118 | 119 | @keyframes scaleUp { 120 | 0% { 121 | transform: scale(0.5); 122 | } 123 | 124 | 100% { 125 | opacity: 1; 126 | transform: scale(1); 127 | } 128 | } 129 | -------------------------------------------------------------------------------- /Icons/README.md: -------------------------------------------------------------------------------- 1 | ## Icons :sparkles: 2 | 3 | Though it is always best to use easily available icons library to add suitable icons in a project, making one with CSS is super fun to animate and may also come in handy in sometimes! 4 | 5 | - [Inbox Icon](#inbox-icon-zap) 6 | - [Notification Bell Icon](#notification-bell-icon-zap) 7 | - [Social Icons](#social-icons-zap) 8 | 9 | ### Inbox Icon :zap: 10 | 11 | An Inbox Icon where its shapes are made with CSS using pseudo elements and border properties! 12 |
13 | 14 | :paperclip: View code [here](https://github.com/Ritika-Agrawal811/css-and-js-code-snippets/tree/main/Icons/Inbox_Icon). 15 | 16 |
17 | 18 | 19 | ### Notification Bell Icon :zap: 20 | 21 | A Notification Bell Icon where its parts are made with CSS and svg. All parts are then animated to get desired effect! 22 |
23 | 24 | :paperclip: View code [here](https://github.com/Ritika-Agrawal811/css-and-js-code-snippets/tree/main/Icons/Notification_Bell_Icon). 25 | 26 |
27 | 28 | 29 | ### Social Icons :zap: 30 | 31 | A Social Icons hover effect made with CSS outline and background properties! 32 |
33 | 34 | :paperclip: View code [here](https://github.com/Ritika-Agrawal811/css-and-js-code-snippets/tree/main/Icons/Social_Icons). 35 | 36 |
37 | 38 | -------------------------------------------------------------------------------- /Icons/Social_Icons/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 13 | 14 | Social Icons 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /Icons/Social_Icons/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | height: 100vh; 14 | } 15 | 16 | .container { 17 | display: flex; 18 | gap: 1em; 19 | } 20 | 21 | .icon { 22 | width: 2.5em; 23 | height: 2.5em; 24 | font-size: 3em; 25 | display: flex; 26 | text-decoration: none; 27 | color: #000; 28 | outline: 2px solid #000; 29 | outline-offset: -8px; 30 | border-radius: 50%; 31 | transition: all 200ms ease-in; 32 | } 33 | 34 | .icon i { 35 | margin: auto; 36 | } 37 | 38 | .icon:hover { 39 | outline-width: 6px; 40 | outline-color: #fff; 41 | color: #fff; 42 | } 43 | 44 | .icon:hover:has(.fa-x-twitter) { 45 | background-color: #000; 46 | } 47 | 48 | .icon:hover:has(.fa-instagram) { 49 | background-image: radial-gradient( 50 | circle at 30% 107%, 51 | #fdf497 0%, 52 | #fdf497 5%, 53 | #fd5949 45%, 54 | #d6249f 60%, 55 | #285aeb 90% 56 | ); 57 | } 58 | -------------------------------------------------------------------------------- /Loaders/Cube_Loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Cube Loader 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /Loaders/Cube_Loader/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | background: #121212; 11 | } 12 | 13 | .cube_loader { 14 | width: 5em; 15 | height: 5em; 16 | perspective: 5em; 17 | font-size: 10px; 18 | position: fixed; 19 | top: 50%; 20 | left: 50%; 21 | transform: translate(-50%, -50%); 22 | } 23 | 24 | .cube { 25 | width: 100%; 26 | height: 100%; 27 | position: relative; 28 | transform: translateZ(-2.5em); 29 | transform-style: preserve-3d; 30 | animation: spin 5s ease-in-out infinite; 31 | } 32 | 33 | .cube_face { 34 | position: absolute; 35 | width: 100%; 36 | height: 100%; 37 | border: 3px solid #7122fa; 38 | background-color: transparent; 39 | } 40 | 41 | .cube_face--front { 42 | transform: rotateY(0deg) translateZ(2.5em); 43 | } 44 | 45 | .cube_face--bottom { 46 | transform: rotateX(-90deg) translateZ(2.5em); 47 | } 48 | 49 | .cube_face--top { 50 | transform: rotateX(90deg) translateZ(2.5em); 51 | } 52 | 53 | .cube_face--left { 54 | transform: rotateY(-90deg) translateZ(2.5em); 55 | } 56 | 57 | .cube_face--right { 58 | transform: rotateY(90deg) translateZ(2.5em); 59 | } 60 | 61 | .cube_face--back { 62 | transform: rotateY(180deg) translateZ(2.5em); 63 | } 64 | 65 | @keyframes spin { 66 | 0%, 67 | 100% { 68 | transform: rotateY(0deg); 69 | } 70 | 71 | 20% { 72 | transform: translateZ(-2.5em) rotateY(90deg); 73 | } 74 | 75 | 40% { 76 | transform: translateZ(-2.5em) rotateX(-90deg); 77 | } 78 | 79 | 60% { 80 | transform: translateZ(-2.5em) rotateY(-90deg); 81 | } 82 | 83 | 80% { 84 | transform: translateZ(-2.5em) rotateX(90deg); 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /Loaders/Dots_Loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Rotating Dots Loader 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /Loaders/Dots_Loader/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | .dots-loader { 10 | position: fixed; 11 | left: 50%; 12 | top: 50%; 13 | transform: translate(-50%, -50%); 14 | width: 3em; 15 | height: 3em; 16 | animation: rotateAndShrink 1.25s ease-in-out infinite; 17 | } 18 | 19 | @keyframes rotateAndShrink { 20 | 50% { 21 | width: 1.5em; 22 | height: 1.5em; 23 | } 24 | 25 | 100% { 26 | transform: translate(-50%, -50%) rotate(360deg); 27 | } 28 | } 29 | 30 | .dot { 31 | position: absolute; 32 | display: inline-block; 33 | width: 1em; 34 | height: 1em; 35 | border-radius: 50%; 36 | } 37 | 38 | .dot:nth-child(1) { 39 | left: -0.5em; 40 | top: -0.5em; 41 | background-color: #84de02; 42 | } 43 | 44 | .dot:nth-child(2) { 45 | right: -0.5em; 46 | top: -0.5em; 47 | background-color: #da2647; 48 | } 49 | 50 | .dot:nth-child(3) { 51 | left: -0.5em; 52 | bottom: -0.5em; 53 | background-color: #ffd12a; 54 | } 55 | 56 | .dot:nth-child(4) { 57 | right: -0.5em; 58 | bottom: -0.5em; 59 | background-color: #6f2da8; 60 | } 61 | -------------------------------------------------------------------------------- /Loaders/Hourglass_Loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Hourglass Loader 9 | 10 | 11 |
12 |
13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /Loaders/Hourglass_Loader/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | background-color: #121212; 11 | } 12 | 13 | .hourglass { 14 | position: fixed; 15 | top: 50%; 16 | left: 50%; 17 | transform: translate(-50%, -50%) rotate(0); 18 | width: 10em; 19 | height: 10em; 20 | font-size: 10px; 21 | } 22 | 23 | .triangle { 24 | width: 10em; 25 | height: 5em; 26 | clip-path: polygon(50% 0%, 0% 100%, 100% 100%); 27 | position: relative; 28 | } 29 | 30 | .upper-triangle { 31 | background-color: #383636; 32 | transform: rotate(180deg); 33 | } 34 | 35 | .upper-triangle::before { 36 | content: ""; 37 | position: absolute; 38 | width: 100%; 39 | height: 100%; 40 | clip-path: inherit; 41 | background-color: #fec763; 42 | animation: empty 3s linear infinite; 43 | } 44 | 45 | .lower-triangle { 46 | background-color: #fec763; 47 | } 48 | 49 | .lower-triangle::before { 50 | content: ""; 51 | position: absolute; 52 | width: 5px; 53 | height: 100%; 54 | top: 0; 55 | left: 50%; 56 | transform: translateX(-50%); 57 | background-color: #fec763; 58 | z-index: 2; 59 | } 60 | 61 | .lower-triangle::after { 62 | content: ""; 63 | position: absolute; 64 | width: 100%; 65 | height: 100%; 66 | clip-path: inherit; 67 | background-color: #383636; 68 | animation: fill 3s linear infinite; 69 | } 70 | 71 | @keyframes empty { 72 | 0% { 73 | height: 5em; 74 | } 75 | 76 | 90%, 77 | 100% { 78 | height: 0; 79 | } 80 | } 81 | 82 | @keyframes fill { 83 | 0% { 84 | height: 5em; 85 | } 86 | 87 | 90%, 88 | 100% { 89 | height: 0; 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /Loaders/README.md: -------------------------------------------------------------------------------- 1 | ## Loaders :sparkles: 2 | 3 | Loaders, an important gap-filler for an api call, also garners the most creative attention from developers. I've got sleek animated loaders for you. Pick the right one for your project! 4 | 5 | - [Cube Loader](#cube-loader-zap) 6 | - [Hourglass Loader](#hourglass-loader-zap) 7 | - [Text Loader](#text-loader-zap) 8 | - [Whirlpool Loader](#whirlpool-loader-zap) 9 | - [Rotating Dots Loader](#rotating-dots-loader-zap) 10 | - [Ripple Loader](#ripple-loader-zap) 11 | - [Square Border Fill Loader](#square-border-fill-loader-zap) 12 | 13 | ### Cube Loader :zap: 14 | 15 | A Cube Loader rotating animation made with 3D CSS transform properties! 16 |
17 | :paperclip: View code [here](https://github.com/Ritika-Agrawal811/css-and-js-code-snippets/tree/main/Loaders/Cube_Loader). 18 | 19 |
20 | 21 | 22 | ### Hourglass Loader :zap: 23 | 24 | An Hourglass Loader with sand filling animation made using pseudo elements in CSS! 25 |
26 | :paperclip: View code [here](https://github.com/Ritika-Agrawal811/css-and-js-code-snippets/tree/main/Loaders/Cube_Loader). 27 | 28 |
29 | 30 | 31 | ### Text Loader :zap: 32 | 33 | A Text Loader which uses CSS background gradient and clip properties! 34 |
35 | :paperclip: View code [here](https://github.com/Ritika-Agrawal811/css-and-js-code-snippets/tree/main/Loaders/Text_Loader). 36 | 37 |
38 | 39 | 40 | ### Whirlpool Loader :zap: 41 | 42 | A Whirlpool Loader which uses CSS border properties and pseudo elements, each with a different animation speed and delay to give a whirlpool effect! 43 |
44 | :paperclip: View code [here](https://github.com/Ritika-Agrawal811/css-and-js-code-snippets/tree/main/Loaders/Whirlpool_Loader). 45 | 46 |
47 | 48 | 49 | ### Rotating Dots Loader :zap: 50 | 51 | A Rotating Dots Loader which uses CSS transform properties to place and rotate the dots! 52 |
53 | :paperclip: View code [here](https://github.com/Ritika-Agrawal811/css-and-js-code-snippets/tree/main/Loaders/Dots_Loader). 54 | 55 |
56 | 57 | 58 | ### Ripple Loader :zap: 59 | 60 | A Ripple Loader made by animating the CSS outline-offset property! 61 |
62 | :paperclip: View code [here](https://github.com/Ritika-Agrawal811/css-and-js-code-snippets/tree/main/Loaders/Ripple_Loader). 63 | 64 |
65 | 66 | 67 | ### Square Border Fill Loader :zap: 68 | 69 | A Square Border Fill Loader made by animating the background gradient using background position property! 70 |
71 | :paperclip: View code [here](https://github.com/Ritika-Agrawal811/css-and-js-code-snippets/tree/main/Loaders/Square_Border_Fill_Loader). 72 | 73 |
74 | 75 | -------------------------------------------------------------------------------- /Loaders/Ripple_Loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Ripple Loader 8 | 9 | 10 |
11 |
12 |
13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /Loaders/Ripple_Loader/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | background-color: #121212; 11 | } 12 | 13 | .ripple-loader { 14 | position: fixed; 15 | left: 50%; 16 | top: 50%; 17 | transform: translate(-50%, -50%); 18 | width: 5em; 19 | height: 5em; 20 | border-radius: 50%; 21 | } 22 | 23 | .ripple-1, 24 | .ripple-2 { 25 | position: absolute; 26 | width: 100%; 27 | height: 100%; 28 | border-radius: 50%; 29 | outline: 1px solid #1e90ff; 30 | animation: ripple 2s ease-in-out infinite; 31 | } 32 | 33 | .ripple-2 { 34 | animation-delay: 0.75s; 35 | } 36 | 37 | @keyframes ripple { 38 | 0% { 39 | outline-width: 1px; 40 | outline-offset: -2.5em; 41 | opacity: 0.8; 42 | } 43 | 44 | 100% { 45 | outline-width: 8px; 46 | outline-offset: 0; 47 | opacity: 0; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /Loaders/Square_Border_Fill_Loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Square Border Fill Loader 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /Loaders/Square_Border_Fill_Loader/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | background-color: #121212; 11 | } 12 | 13 | .square-border-fill-loader { 14 | position: fixed; 15 | left: 50%; 16 | top: 50%; 17 | transform: translate(-50%, -50%); 18 | width: 5em; 19 | height: 5em; 20 | background: linear-gradient( 21 | 135deg, 22 | #545454 25%, 23 | #00ffbc 25% 50%, 24 | #545454 50% 75%, 25 | #8ea5ff 75% 26 | ); 27 | background-size: 400% 400%; 28 | animation: animate 5s ease-in infinite; 29 | } 30 | 31 | .square-border-fill-loader::before { 32 | content: ""; 33 | position: absolute; 34 | width: 85%; 35 | height: 85%; 36 | left: 50%; 37 | top: 50%; 38 | transform: translate(-50%, -50%); 39 | background-color: #121212; 40 | } 41 | 42 | @keyframes animate { 43 | 0%, 44 | 100% { 45 | background-position: 0 0; 46 | } 47 | 48 | 50% { 49 | background-position: 100% 100%; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /Loaders/Text_Loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Text Loader 9 | 10 | 11 |
Loading
12 | 13 | 14 | -------------------------------------------------------------------------------- /Loaders/Text_Loader/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | background-color: #121212; 11 | } 12 | 13 | .loader { 14 | position: fixed; 15 | top: 50%; 16 | left: 50%; 17 | transform: translate(-50%, -50%); 18 | font-size: 2rem; 19 | font-family: sans-serif; 20 | font-variant: small-caps; 21 | font-weight: 900; 22 | background: conic-gradient( 23 | #dff2ae 0 25%, 24 | #ff904f 25% 50%, 25 | #feefe7 50% 75%, 26 | #ffde2b 75% 27 | ); 28 | background-size: 200% 200%; 29 | animation: animateBackground 3.5s ease-in-out infinite; 30 | color: transparent; 31 | background-clip: text; 32 | -webkit-background-clip: text; 33 | } 34 | 35 | @keyframes animateBackground { 36 | 25% { 37 | background-position: 0 100%; 38 | } 39 | 40 | 50% { 41 | background-position: 100% 100%; 42 | } 43 | 44 | 75% { 45 | background-position: 100% 0%; 46 | } 47 | 48 | 100% { 49 | background-position: 0 0; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /Loaders/Whirlpool_Loader/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Whirlpool Loader 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /Loaders/Whirlpool_Loader/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | background-color: #121212; 11 | } 12 | 13 | .loader { 14 | position: fixed; 15 | width: 5em; 16 | height: 5em; 17 | top: 50%; 18 | left: 50%; 19 | transform: translate(-50%, -50%); 20 | border-top: 5px solid #ff2281; 21 | border-radius: 50%; 22 | animation: rotate 1s ease-in-out infinite; 23 | } 24 | 25 | .loader::before, 26 | .loader::after { 27 | content: ""; 28 | position: absolute; 29 | border-radius: inherit; 30 | top: 50%; 31 | left: 50%; 32 | transform: translate(-50%, -50%); 33 | animation: rotate 2s ease-in-out infinite; 34 | } 35 | 36 | .loader::before { 37 | width: 80%; 38 | height: 80%; 39 | border-top: 4px solid #75d5fd; 40 | animation-delay: 250ms; 41 | } 42 | 43 | .loader::after { 44 | width: 50%; 45 | height: 50%; 46 | border-top: 3px solid #7fff00; 47 | animation-delay: 500ms; 48 | } 49 | 50 | @keyframes rotate { 51 | 100% { 52 | transform: translate(-50%, -50%) rotate(360deg); 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /Miscellaneous/Accordion/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Accordion 8 | 9 | 10 |
11 | Who created donuts? 12 |

13 | Hanson Gregory, an American, claimed to have invented the ring-shaped 14 | doughnut in 1847 aboard a lime-trading ship when he was 16 years old. 15 |

16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /Miscellaneous/Accordion/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | } 15 | 16 | .accordion__container { 17 | width: 90%; 18 | max-width: 750px; 19 | font-family: sans-serif; 20 | font-size: 1.25rem; 21 | } 22 | 23 | .accordion__question { 24 | position: relative; 25 | color: #fff; 26 | background: rgb(196, 30, 58); 27 | padding: 1em 1.25em; 28 | border-radius: 0.5rem; 29 | box-shadow: 0 0 2px #3a3a3a; 30 | cursor: pointer; 31 | } 32 | 33 | .accordion__question::marker { 34 | content: none; 35 | } 36 | 37 | .accordion__question::before, 38 | .accordion__question::after { 39 | content: ""; 40 | position: absolute; 41 | right: 1.25em; 42 | width: 1.05em; 43 | height: 3px; 44 | top: 50%; 45 | transform: translateY(-50%); 46 | background-color: #fff; 47 | border-radius: 100vmax; 48 | transition: transform 100ms ease-in; 49 | } 50 | 51 | .accordion__question::before { 52 | transform: translateY(-50%) rotate(90deg); 53 | } 54 | 55 | .accordion__container[open] .accordion__question::before { 56 | transform: translateY(-50%) rotate(0); 57 | } 58 | 59 | .accordion__container p { 60 | position: relative; 61 | padding: 1em 1.5em; 62 | } 63 | 64 | .accordion__container p::before { 65 | content: ""; 66 | position: absolute; 67 | width: 3px; 68 | height: 80%; 69 | top: 50%; 70 | left: 10px; 71 | background: rgb(196, 30, 58); 72 | transform: translateY(-50%); 73 | } 74 | -------------------------------------------------------------------------------- /Miscellaneous/Cards_Swipe/images/img_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ritika-Agrawal811/css-and-js-code-snippets/668a07f4ce4dc93643d479b09b05afd4412bbfc5/Miscellaneous/Cards_Swipe/images/img_1.jpg -------------------------------------------------------------------------------- /Miscellaneous/Cards_Swipe/images/img_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ritika-Agrawal811/css-and-js-code-snippets/668a07f4ce4dc93643d479b09b05afd4412bbfc5/Miscellaneous/Cards_Swipe/images/img_2.jpg -------------------------------------------------------------------------------- /Miscellaneous/Cards_Swipe/images/img_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ritika-Agrawal811/css-and-js-code-snippets/668a07f4ce4dc93643d479b09b05afd4412bbfc5/Miscellaneous/Cards_Swipe/images/img_3.jpg -------------------------------------------------------------------------------- /Miscellaneous/Cards_Swipe/images/img_4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ritika-Agrawal811/css-and-js-code-snippets/668a07f4ce4dc93643d479b09b05afd4412bbfc5/Miscellaneous/Cards_Swipe/images/img_4.jpg -------------------------------------------------------------------------------- /Miscellaneous/Cards_Swipe/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | Cards Swipe Effect 12 | 13 | 14 |
15 |
16 |
17 | Slide Image 18 |
19 |
20 | Slide Image 21 |
22 |
23 | Slide Image 24 |
25 |
26 | Slide Image 27 |
28 |
29 |
30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /Miscellaneous/Cards_Swipe/script.js: -------------------------------------------------------------------------------- 1 | const swiper = new Swiper(".swiper", { 2 | effect: "cards", 3 | grabCursor: true, 4 | centerdSlides: true, 5 | loop: true, 6 | }); 7 | -------------------------------------------------------------------------------- /Miscellaneous/Cards_Swipe/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | height: 100vh; 14 | } 15 | 16 | .swiper { 17 | width: 15em; 18 | height: 20em; 19 | } 20 | 21 | .swiper-slide { 22 | border-radius: 1em; 23 | } 24 | 25 | .swiper-slide img { 26 | width: 100%; 27 | object-fit: cover; 28 | border-radius: 1em; 29 | } 30 | -------------------------------------------------------------------------------- /Miscellaneous/Countdown_Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Countdown Animation 8 | 9 | 10 |
11 |
10
12 |
13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Miscellaneous/Countdown_Animation/script.js: -------------------------------------------------------------------------------- 1 | let countContainer = document.querySelector(".count"); 2 | let counter = +countContainer.innerHTML; 3 | let upperPiece = document.querySelector(".upper-piece"); 4 | 5 | let interval = setInterval(() => { 6 | countContainer.classList.remove("zoomOut"); 7 | upperPiece.classList.remove("roll"); 8 | decrementCounter(); 9 | }, 1500); 10 | 11 | function decrementCounter() { 12 | counter--; 13 | 14 | setTimeout(() => { 15 | countContainer.classList.add("zoomOut"); 16 | upperPiece.classList.add("roll"); 17 | }, 30); 18 | 19 | if (counter > 0) { 20 | countContainer.innerHTML = counter; 21 | } else { 22 | countContainer.innerHTML = 0; 23 | clearInterval(interval); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /Miscellaneous/Countdown_Animation/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | overflow: hidden; 15 | } 16 | 17 | .countdown-container { 18 | width: 13em; 19 | height: 13em; 20 | border-radius: 50%; 21 | position: relative; 22 | background-color: #fff; 23 | background-image: linear-gradient(to right, transparent 50%, #9bbfe0 50%); 24 | } 25 | 26 | .count { 27 | position: absolute; 28 | left: 50%; 29 | top: 50%; 30 | transform: translate(-50%, -50%); 31 | font-size: 7rem; 32 | font-family: sans-serif; 33 | font-weight: 700; 34 | z-index: 5; 35 | } 36 | 37 | .zoomOut { 38 | animation: zoomOut 500ms linear 1; 39 | } 40 | 41 | @keyframes zoomOut { 42 | 0% { 43 | font-size: 10rem; 44 | } 45 | 46 | 100% { 47 | font-size: 7rem; 48 | } 49 | } 50 | 51 | .upper-piece { 52 | position: absolute; 53 | top: 0; 54 | left: 50%; 55 | width: 50%; 56 | height: 100%; 57 | border-radius: 0 100% 100% 0/50%; 58 | background-color: #fff; 59 | transform-origin: left; 60 | } 61 | 62 | .roll { 63 | animation: 64 | rotateDown 500ms linear 1, 65 | rotateUp 500ms linear 500ms 1; 66 | animation-fill-mode: forwards; 67 | } 68 | 69 | @keyframes rotateDown { 70 | 0% { 71 | transform: rotate(0); 72 | } 73 | 100% { 74 | transform: rotate(0.5turn); 75 | } 76 | } 77 | 78 | @keyframes rotateUp { 79 | 0% { 80 | transform: rotate(0); 81 | background-color: #9bbfe0; 82 | } 83 | 100% { 84 | transform: rotate(0.5turn); 85 | background-color: #9bbfe0; 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /Miscellaneous/Dropdown_Menu/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Dropdown Menu 8 | 9 | 10 |
11 | Genre 12 | 20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /Miscellaneous/Dropdown_Menu/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | font-family: sans-serif; 15 | background-color: antiquewhite; 16 | } 17 | 18 | .dropdown__container { 19 | width: 150px; 20 | position: relative; 21 | } 22 | 23 | .dropdown__title { 24 | display: inline-block; 25 | width: 100%; 26 | color: #fff; 27 | padding: 0.5em; 28 | text-align: center; 29 | background-color: #121212; 30 | text-decoration: none; 31 | } 32 | 33 | .dropdown__list { 34 | position: absolute; 35 | margin-top: 0.5em; 36 | list-style-type: none; 37 | background-color: #fff; 38 | box-shadow: 0 0 1px #aaa; 39 | transform-origin: 50% 0; 40 | } 41 | 42 | .dropdown__list li a { 43 | display: inline-block; 44 | font-size: 0.75rem; 45 | padding: 0.75em 0; 46 | text-align: center; 47 | color: #545454; 48 | text-decoration: none; 49 | transition-delay: 350ms; 50 | } 51 | 52 | .dropdown__list, 53 | .dropdown__list li a { 54 | width: 100%; 55 | transform: scale(0); 56 | transition: transform 350ms ease-in-out; 57 | } 58 | 59 | .dropdown__list li:not(:last-child) { 60 | border-bottom: 1px solid #eee; 61 | } 62 | 63 | .dropdown__container:hover .dropdown__list, 64 | .dropdown__container:hover .dropdown__list li a { 65 | transform: scale(1); 66 | } 67 | 68 | .dropdown__list li a:hover { 69 | background-color: #f0f8ff; 70 | } 71 | -------------------------------------------------------------------------------- /Miscellaneous/Items_Quantity_Counter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 13 | 14 | Items Quantity Counter 15 | 16 | 17 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /Miscellaneous/Items_Quantity_Counter/script.js: -------------------------------------------------------------------------------- 1 | const counter = document.getElementById("counter"); 2 | const itemQuantityDiv = document.getElementById("itemQuantity"); 3 | const plusIcon = document.getElementById("plusIcon"); 4 | const minusIcon = document.getElementById("minusIcon"); 5 | 6 | counter.addEventListener("click", () => { 7 | counter.classList.add("expand"); 8 | plusIcon.addEventListener("click", incrementQuantity); 9 | minusIcon.addEventListener("click", decrementQuantity); 10 | }); 11 | 12 | function incrementQuantity() { 13 | const quantity = +itemQuantityDiv.innerHTML; 14 | itemQuantityDiv.innerHTML = quantity + 1; 15 | animateCount("showDown", "hideDown"); 16 | } 17 | 18 | function decrementQuantity(event) { 19 | const quantity = +itemQuantityDiv.innerHTML; 20 | if (quantity <= 1) { 21 | itemQuantityDiv.innerHTML = 0; 22 | event.stopPropagation(); 23 | counter.classList.remove("expand"); 24 | } else { 25 | itemQuantityDiv.innerHTML = quantity - 1; 26 | } 27 | animateCount("showUp", "hideUp"); 28 | } 29 | 30 | function animateCount(showClass, hideClass) { 31 | itemQuantityDiv.classList = "itemCount"; 32 | itemQuantityDiv.classList.add(showClass); 33 | setTimeout(() => { 34 | itemQuantityDiv.classList.replace(showClass, hideClass); 35 | }, 450); 36 | } 37 | -------------------------------------------------------------------------------- /Miscellaneous/Items_Quantity_Counter/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | } 15 | 16 | .counter-container { 17 | position: relative; 18 | width: 4em; 19 | height: 4em; 20 | border: 3px solid #3498db; 21 | background-color: #3498db; 22 | border-radius: 50%; 23 | transition: all 500ms ease-in-out; 24 | cursor: pointer; 25 | } 26 | 27 | .itemCount, 28 | .icon { 29 | position: absolute; 30 | width: 2em; 31 | height: 100%; 32 | left: 50%; 33 | top: 50%; 34 | transform: translate(-50%, -50%); 35 | display: grid; 36 | place-items: center; 37 | } 38 | 39 | .itemCount { 40 | font-size: 1.65rem; 41 | font-family: sans-serif; 42 | visibility: hidden; 43 | user-select: none; 44 | } 45 | 46 | .itemCount::before { 47 | content: ""; 48 | position: absolute; 49 | width: 70%; 50 | height: 0; 51 | left: 50%; 52 | transform: translateX(-50%); 53 | background: #ffe5b4; 54 | border-radius: 0.5em; 55 | transition: height 300ms ease-in-out; 56 | z-index: -1; 57 | } 58 | 59 | .icon { 60 | border-radius: 50%; 61 | font-size: 1.35rem; 62 | transition: left 250ms ease-in-out; 63 | color: #fff; 64 | } 65 | 66 | .expand { 67 | width: 12em; 68 | border-radius: 4em; 69 | background-color: #fff; 70 | } 71 | 72 | .expand .plus-icon { 73 | left: 85%; 74 | color: #3498db; 75 | } 76 | 77 | .expand .minus-icon { 78 | left: 15%; 79 | color: #3498db; 80 | } 81 | 82 | .expand .itemCount { 83 | visibility: visible; 84 | } 85 | 86 | .itemCount.showDown::before { 87 | top: 0; 88 | height: 100%; 89 | } 90 | 91 | .itemCount.hideDown::before { 92 | height: 0; 93 | bottom: 0; 94 | } 95 | 96 | .itemCount.showUp::before { 97 | bottom: 0; 98 | height: 100%; 99 | } 100 | 101 | .itemCount.hideUp::before { 102 | height: 0; 103 | top: 0; 104 | } 105 | -------------------------------------------------------------------------------- /Miscellaneous/Menu_Switcher/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 13 | 14 | Menu Switcher 15 | 16 | 17 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /Miscellaneous/Menu_Switcher/script.js: -------------------------------------------------------------------------------- 1 | const menuSwitcher = document.getElementById("menuSwitcher"); 2 | const menu = document.getElementById("menu"); 3 | let rotation = 0; 4 | menuSwitcher.addEventListener("click", () => { 5 | rotation += 90; 6 | menu.style.transform = `rotate(${rotation}deg)`; 7 | }); 8 | -------------------------------------------------------------------------------- /Miscellaneous/Menu_Switcher/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | background-color: #e5e5e5; 15 | } 16 | 17 | .menu-switcher-container { 18 | position: relative; 19 | width: 12.5em; 20 | height: 5em; 21 | border-radius: 7em; 22 | background-color: #f5f5f5; 23 | box-shadow: 0 0 0.5em rgb(190, 190, 190); 24 | transition: all 350ms ease-in-out; 25 | cursor: pointer; 26 | overflow: hidden; 27 | } 28 | 29 | .menu-switcher-container:hover { 30 | box-shadow: 0 0 1em rgb(190, 190, 190); 31 | transform: scale(0.97); 32 | } 33 | 34 | .down-arrow { 35 | position: absolute; 36 | height: 100%; 37 | width: 3em; 38 | right: 0; 39 | display: grid; 40 | place-items: center; 41 | font-size: 1.55em; 42 | color: #aaa; 43 | } 44 | 45 | .menu-switcher-container:hover .down-arrow { 46 | color: #444444; 47 | } 48 | 49 | .menu { 50 | position: absolute; 51 | list-style-type: none; 52 | width: 5em; 53 | height: 5em; 54 | border-radius: 50%; 55 | left: -2.5em; 56 | transition: transform 500ms ease-in-out; 57 | } 58 | 59 | .menu .item { 60 | position: absolute; 61 | font-family: sans-serif; 62 | font-size: 1.25rem; 63 | } 64 | 65 | .menu .item:nth-child(1) { 66 | top: 50%; 67 | right: -2em; 68 | transform: translateY(-50%); 69 | } 70 | 71 | .menu .item:nth-child(2) { 72 | top: -2em; 73 | left: 50%; 74 | transform: translateX(-50%) rotate(-90deg); 75 | } 76 | 77 | .menu .item:nth-child(3) { 78 | left: -120%; 79 | top: 50%; 80 | transform: translateY(-50%) rotate(-180deg); 81 | } 82 | 83 | .menu .item:nth-child(4) { 84 | left: 50%; 85 | top: 140%; 86 | transform: translateX(-50%) rotate(-270deg); 87 | } 88 | -------------------------------------------------------------------------------- /Miscellaneous/Nav_Active_Link/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Nav Active Link Effect 8 | 9 | 10 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Miscellaneous/Nav_Active_Link/script.js: -------------------------------------------------------------------------------- 1 | const menuLinks = document.getElementsByClassName("nav-link"); 2 | const menuList = document.getElementById("menuList"); 3 | let initialPosition = "75%"; 4 | 5 | function highlightLink(index, end) { 6 | const percentages = ["75%", "50%", "25%", "0"]; 7 | let targetPosition = index !== -1 ? percentages[index] : end; 8 | 9 | // set CSS Variables 10 | menuList.style.setProperty("--initial-position", initialPosition); 11 | menuList.style.setProperty("--target-position", targetPosition); 12 | 13 | // remove "clicked" class 14 | menuList.classList.remove("clicked"); 15 | 16 | // add "clicked" class 17 | setTimeout(() => { 18 | menuList.classList.add("clicked"); 19 | }, 0); 20 | 21 | initialPosition = targetPosition; 22 | } 23 | 24 | Array.from(menuLinks).forEach((link, index) => { 25 | link.addEventListener("click", (event) => { 26 | event.preventDefault(); 27 | highlightLink(index); 28 | }); 29 | }); 30 | 31 | // adding keyboard events 32 | menuList.addEventListener("keydown", (event) => { 33 | let start = +initialPosition.slice(0, 2) || 0; 34 | let end; 35 | 36 | if (event.key === "ArrowRight") { 37 | end = start !== 0 ? start - 25 : 0; 38 | } 39 | if (event.key === "ArrowLeft") { 40 | end = start !== 75 ? start + 25 : 75; 41 | } 42 | 43 | highlightLink(-1, end + "%"); 44 | }); 45 | -------------------------------------------------------------------------------- /Miscellaneous/Nav_Active_Link/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | background-color: #121212; 15 | } 16 | 17 | #menuList { 18 | --initial-position: 75%; 19 | --target-position: 75%; 20 | 21 | display: flex; 22 | list-style-type: none; 23 | background: linear-gradient( 24 | 90deg, 25 | #fff 37.5%, 26 | rgb(42, 193, 16) 37.5%, 27 | rgb(42, 193, 16) 50%, 28 | #fff 50% 29 | ); 30 | background-size: 200% 100%; 31 | background-position: var(--initial-position) 0; 32 | background-clip: text; 33 | -webkit-background-clip: text; 34 | } 35 | 36 | #menuList.clicked { 37 | animation: fillUp 400ms ease-in-out 1 forwards; 38 | } 39 | 40 | @keyframes fillUp { 41 | 0% { 42 | background-position: var(--initial-position) 0; 43 | } 44 | 45 | 100% { 46 | background-position: var(--target-position) 0; 47 | } 48 | } 49 | 50 | li { 51 | margin: 0 2.5em; 52 | } 53 | 54 | a { 55 | text-decoration: none; 56 | font-size: 1.5rem; 57 | text-transform: capitalize; 58 | font-family: sans-serif; 59 | color: transparent; 60 | } 61 | 62 | @media (max-width: 576px) { 63 | #menuList { 64 | flex-direction: column; 65 | background: linear-gradient( 66 | 180deg, 67 | #fff 37.5%, 68 | rgb(42, 193, 16) 37.5%, 69 | rgb(42, 193, 16) 50%, 70 | #fff 50% 71 | ); 72 | background-size: 100% 200%; 73 | background-position: 0 var(--initial-position); 74 | background-clip: text; 75 | -webkit-background-clip: text; 76 | } 77 | 78 | li { 79 | margin: 1em 0; 80 | text-align: center; 81 | } 82 | 83 | @keyframes fillUp { 84 | 0% { 85 | background-position: 0 var(--initial-position); 86 | } 87 | 88 | 100% { 89 | background-position: 0 var(--target-position); 90 | } 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /Miscellaneous/Navigation_Menu_Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 13 | 14 | Navigation Menu Animation 15 | 16 | 17 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /Miscellaneous/Navigation_Menu_Animation/script.js: -------------------------------------------------------------------------------- 1 | const link = document.querySelector(".link"); 2 | const header = document.getElementById("header"); 3 | 4 | link.addEventListener("click", () => { 5 | header.classList.toggle("show"); 6 | }); 7 | -------------------------------------------------------------------------------- /Miscellaneous/Navigation_Menu_Animation/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | nav ul { 10 | display: flex; 11 | justify-content: flex-end; 12 | } 13 | 14 | ul { 15 | list-style-type: none; 16 | padding: 1em; 17 | } 18 | 19 | .link { 20 | position: relative; 21 | font-family: sans-serif; 22 | font-size: 1.15rem; 23 | cursor: pointer; 24 | z-index: 10; 25 | } 26 | 27 | .menu { 28 | --circle-diameter: calc(max(100vw, 100vh) * 2); 29 | --circle-position: calc(var(--circle-diameter) * -0.25); 30 | 31 | position: fixed; 32 | top: 0; 33 | right: 0; 34 | width: 100%; 35 | height: 100%; 36 | display: flex; 37 | flex-direction: column; 38 | align-items: center; 39 | justify-content: center; 40 | overflow: hidden; 41 | pointer-events: none; 42 | } 43 | 44 | .menu::before { 45 | content: ""; 46 | position: absolute; 47 | width: 0; 48 | height: 0; 49 | background: #000; 50 | border-radius: 50%; 51 | right: 2em; 52 | top: 2em; 53 | transition: all 750ms ease-in-out; 54 | z-index: -1; 55 | } 56 | 57 | /* styling the menu content */ 58 | 59 | .menu ul li { 60 | position: relative; 61 | width: fit-content; 62 | margin: 1em 0; 63 | font-size: 1.75rem; 64 | font-family: cursive; 65 | letter-spacing: 1px; 66 | color: rgba(250, 250, 250, 0.85); 67 | cursor: pointer; 68 | } 69 | 70 | .menu ul li::first-letter { 71 | font-size: 2.25rem; 72 | } 73 | 74 | .menu ul li::before { 75 | content: ""; 76 | position: absolute; 77 | width: 0; 78 | height: 2px; 79 | bottom: -2px; 80 | background-color: rgba(250, 250, 250, 0.85); 81 | transition: width 250ms ease-in-out; 82 | } 83 | 84 | .menu ul li:hover::before { 85 | width: 100%; 86 | } 87 | 88 | .menu .social-icons i { 89 | font-size: 2rem; 90 | color: rgba(250, 250, 250, 0.85); 91 | margin-right: 0.5em; 92 | cursor: pointer; 93 | transition: transform 150ms ease-in-out; 94 | } 95 | 96 | .menu .social-icons i:hover { 97 | transform: scale(1.15); 98 | } 99 | 100 | .menu * { 101 | opacity: 0; 102 | transition: opacity 250ms ease-in; 103 | } 104 | 105 | /* adding show class */ 106 | 107 | #header.show .link { 108 | color: #fff; 109 | } 110 | 111 | #header.show .menu { 112 | pointer-events: auto; 113 | } 114 | 115 | #header.show .menu::before { 116 | width: var(--circle-diameter); 117 | height: var(--circle-diameter); 118 | top: var(--circle-position); 119 | right: var(--circle-position); 120 | } 121 | 122 | #header.show .menu * { 123 | opacity: 1; 124 | } 125 | 126 | @media (max-width: 26.5em) { 127 | .menu ul li { 128 | font-size: 1.25rem; 129 | } 130 | 131 | .menu ul li::first-letter { 132 | font-size: 1.75rem; 133 | } 134 | 135 | .menu .social-icons i { 136 | font-size: 1.5rem; 137 | } 138 | } 139 | -------------------------------------------------------------------------------- /Miscellaneous/Pagination/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Pagination 16 | 17 | 18 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /Miscellaneous/Pagination/script.js: -------------------------------------------------------------------------------- 1 | let numbersBar = document.querySelector(".numbers-bar"); 2 | let leftIcon = document.getElementById("leftIcon"); 3 | let rightIcon = document.getElementById("rightIcon"); 4 | let circle = numbersBar.querySelector(".circle"); 5 | 6 | function generatePageNumbers() { 7 | for (let i = 1; i <= 10; i++) { 8 | let numSpan = document.createElement("span"); 9 | numSpan.innerHTML = i; 10 | numbersBar.appendChild(numSpan); 11 | } 12 | } 13 | 14 | generatePageNumbers(); 15 | 16 | let numbersBarMargin = Number(numbersBar.style.marginLeft); 17 | let circleMargin = Number(circle.style.marginLeft); 18 | 19 | leftIcon.addEventListener("click", () => { 20 | numbersBarMargin -= 50; 21 | circleMargin -= 50; 22 | 23 | if (numbersBarMargin >= 0) { 24 | numbersBar.style.marginLeft = `-${numbersBarMargin}px`; 25 | } else { 26 | numbersBarMargin = 0; 27 | } 28 | 29 | if (circleMargin >= 0) { 30 | circle.style.marginLeft = `${circleMargin}px`; 31 | } else { 32 | circleMargin = 0; 33 | } 34 | }); 35 | 36 | rightIcon.addEventListener("click", () => { 37 | numbersBarMargin += 50; 38 | circleMargin += 50; 39 | 40 | if (numbersBarMargin <= 250) { 41 | numbersBar.style.marginLeft = `-${numbersBarMargin}px`; 42 | } else { 43 | numbersBarMargin = 250; 44 | } 45 | 46 | if (circleMargin <= 450) { 47 | circle.style.marginLeft = `${circleMargin}px`; 48 | } else { 49 | circleMargin = 450; 50 | } 51 | }); 52 | -------------------------------------------------------------------------------- /Miscellaneous/Pagination/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | } 15 | 16 | .pagination { 17 | width: min(95%, 320px); 18 | height: 50px; 19 | display: grid; 20 | grid-template: 100%/0.5fr 4fr 0.5fr; 21 | } 22 | 23 | i { 24 | align-self: center; 25 | justify-self: center; 26 | font-size: 1rem; 27 | cursor: pointer; 28 | } 29 | 30 | .numbers-container { 31 | overflow: hidden; 32 | } 33 | 34 | .numbers-bar { 35 | position: relative; 36 | width: 500px; 37 | height: 100%; 38 | display: flex; 39 | align-items: center; 40 | transition: all 400ms linear; 41 | } 42 | 43 | .numbers-bar span { 44 | width: 50px; 45 | text-align: center; 46 | font-size: 1.25rem; 47 | position: relative; 48 | font-family: sans-serif; 49 | z-index: 2; 50 | user-select: none; 51 | } 52 | 53 | .circle { 54 | position: absolute; 55 | width: 30px; 56 | height: 30px; 57 | border-radius: 50%; 58 | background-color: #d1ec40; 59 | top: 50%; 60 | left: 10px; 61 | transform: translateY(-50%); 62 | z-index: 1; 63 | transition: all 250ms linear; 64 | } 65 | -------------------------------------------------------------------------------- /Miscellaneous/Rotating_Border/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Rotating Border Animation 8 | 9 | 10 |
11 |

Border Animation

12 |

13 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea nostrum quam 14 | mollitia sit aliquam omnis nisi neque nulla, ipsa obcaecati eveniet 15 | incidunt doloribus quaerat at totam nemo exercitationem, officiis 16 | quisquam! Lorem ipsum dolor, sit amet consectetur adipisicing elit. 17 | Necessitatibus, quisquam perferendis 18 |

19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /Miscellaneous/Rotating_Border/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | height: 100vh; 14 | background-color: #111111; 15 | } 16 | 17 | .card { 18 | position: relative; 19 | width: 300px; 20 | height: 300px; 21 | padding: 1em; 22 | color: #fff; 23 | background: transparent; 24 | font-family: sans-serif; 25 | display: flex; 26 | flex-direction: column; 27 | justify-content: space-around; 28 | align-items: center; 29 | border-top: 1px solid rgba(255, 49, 49, 0.5); 30 | border-right: 1px solid rgba(0, 255, 255, 0.5); 31 | border-bottom: 1px solid rgba(57, 255, 20, 0.5); 32 | border-left: 1px solid rgba(255, 255, 113, 0.5); 33 | overflow: hidden; 34 | } 35 | 36 | p { 37 | font-size: 0.95rem; 38 | text-align: center; 39 | } 40 | 41 | span { 42 | position: absolute; 43 | border-radius: 100vmax; 44 | } 45 | 46 | .top { 47 | top: 0; 48 | left: 0; 49 | width: 0; 50 | height: 5px; 51 | background: linear-gradient( 52 | 90deg, 53 | transparent 50%, 54 | rgba(255, 49, 49, 0.5), 55 | rgb(255, 49, 49) 56 | ); 57 | } 58 | 59 | .bottom { 60 | right: 0; 61 | bottom: 0; 62 | height: 5px; 63 | background: linear-gradient( 64 | 90deg, 65 | rgb(57, 255, 20), 66 | rgba(57, 255, 20, 0.5), 67 | transparent 50% 68 | ); 69 | } 70 | 71 | .right { 72 | top: 0; 73 | right: 0; 74 | width: 5px; 75 | height: 0; 76 | background: linear-gradient( 77 | 180deg, 78 | transparent 30%, 79 | rgba(0, 255, 255, 0.5), 80 | rgb(0, 255, 255) 81 | ); 82 | } 83 | 84 | .left { 85 | left: 0; 86 | bottom: 0; 87 | width: 5px; 88 | height: 0; 89 | background: linear-gradient( 90 | 180deg, 91 | rgb(255, 255, 113), 92 | rgba(255, 255, 113, 0.5), 93 | transparent 70% 94 | ); 95 | } 96 | 97 | .top { 98 | animation: animateTop 3s ease-in-out infinite; 99 | } 100 | 101 | .bottom { 102 | animation: animateBottom 3s ease-in-out infinite; 103 | } 104 | 105 | .right { 106 | animation: animateRight 3s ease-in-out infinite; 107 | } 108 | 109 | .left { 110 | animation: animateLeft 3s ease-in-out infinite; 111 | } 112 | 113 | @keyframes animateTop { 114 | 25% { 115 | width: 100%; 116 | opacity: 1; 117 | } 118 | 119 | 30%, 120 | 100% { 121 | opacity: 0; 122 | } 123 | } 124 | 125 | @keyframes animateBottom { 126 | 0%, 127 | 50% { 128 | opacity: 0; 129 | width: 0; 130 | } 131 | 132 | 75% { 133 | opacity: 1; 134 | width: 100%; 135 | } 136 | 137 | 76%, 138 | 100% { 139 | opacity: 0; 140 | } 141 | } 142 | 143 | @keyframes animateRight { 144 | 0%, 145 | 25% { 146 | opacity: 0; 147 | height: 0; 148 | } 149 | 150 | 50% { 151 | opacity: 1; 152 | height: 100%; 153 | } 154 | 155 | 55%, 156 | 100% { 157 | height: 100%; 158 | opacity: 0; 159 | } 160 | } 161 | 162 | @keyframes animateLeft { 163 | 0%, 164 | 75% { 165 | opacity: 0; 166 | bottom: 0; 167 | height: 0; 168 | } 169 | 170 | 100% { 171 | opacity: 1; 172 | height: 100%; 173 | } 174 | } 175 | -------------------------------------------------------------------------------- /Miscellaneous/Side_Navigation_Bar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Side Navigation Bar 9 | 10 | 11 | 22 |
23 |
24 |

Intro Section

25 |
26 |
27 |

Services Section

28 |
29 |
30 |

About Section

31 |
32 |
33 |

Team Section

34 |
35 |
36 |

Culture Section

37 |
38 |
39 |

Contact Section

40 |
41 |
42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /Miscellaneous/Side_Navigation_Bar/script.js: -------------------------------------------------------------------------------- 1 | const bar = document.querySelector(".bar"); 2 | 3 | document.onscroll = () => { 4 | const y = Math.floor( 5 | (window.scrollY / document.documentElement.scrollHeight) * 100, 6 | ); 7 | 8 | // const y = window.scrollY; 9 | bar.style.height = y * 1.08 + "%"; // 1.08 is the margin error in calculation 10 | 11 | const remainder = Math.floor(y / 16) + 1; 12 | const activeLink = document.getElementById("link-" + remainder); 13 | 14 | activateLink(activeLink); 15 | }; 16 | 17 | let previous = document.getElementById("link-1"); 18 | 19 | function activateLink(link) { 20 | const current = link; 21 | previous.classList.remove("active"); 22 | current.classList.add("active"); 23 | previous = current; 24 | } 25 | -------------------------------------------------------------------------------- /Miscellaneous/Side_Navigation_Bar/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | html { 10 | scroll-behavior: smooth; 11 | } 12 | 13 | .page-section { 14 | font-family: sans-serif; 15 | display: flex; 16 | justify-content: flex-end; 17 | align-items: center; 18 | height: 100vh; 19 | } 20 | 21 | h2 { 22 | font-size: 5rem; 23 | margin-right: 3em; 24 | } 25 | 26 | aside { 27 | display: flex; 28 | position: fixed; 29 | padding-left: 1.25em; 30 | left: 5em; 31 | top: 50%; 32 | transform: translateY(-50%); 33 | } 34 | 35 | .bar { 36 | position: absolute; 37 | width: 5px; 38 | height: 0; 39 | background: #aaa; 40 | top: 0.5em; 41 | left: 0; 42 | border-radius: 100vmax; 43 | transition: height 150ms eease-in; 44 | } 45 | 46 | .bar::after { 47 | content: ""; 48 | position: absolute; 49 | width: 0.65em; 50 | height: 0.65em; 51 | border-radius: 50%; 52 | background-color: #000; 53 | left: -0.16em; 54 | top: 92%; 55 | } 56 | 57 | .menu { 58 | list-style-type: none; 59 | font-family: sans-serif; 60 | line-height: 1.5; 61 | } 62 | 63 | .menu li a { 64 | cursor: pointer; 65 | color: #696969; 66 | font-weight: 700; 67 | text-decoration: none; 68 | transition: 69 | color 300ms ease-in, 70 | margin-left 300ms ease-in; 71 | } 72 | 73 | .menu li a.active { 74 | color: red; 75 | margin-left: 5px; 76 | } 77 | 78 | @media (max-width: 424px) { 79 | h2 { 80 | font-size: 1.5rem; 81 | margin-right: 1em; 82 | } 83 | 84 | aside { 85 | left: 1em; 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /Miscellaneous/Statistics_Card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 13 | 14 | Statistics Card 15 | 16 | 17 |
18 | 19 |
20 |

10

21 |

Cups of Coffee

22 |
23 |
24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /Miscellaneous/Statistics_Card/script.js: -------------------------------------------------------------------------------- 1 | const counter = document.getElementById("counter"); 2 | const speed = 350; 3 | 4 | const incrementCount = () => { 5 | const target = +counter.getAttribute("data-target"); 6 | const count = +counter.innerHTML; 7 | const increment = Math.floor(target / speed); 8 | 9 | if (count < target) { 10 | counter.innerHTML = count + increment; 11 | setTimeout(incrementCount, 1); 12 | } else { 13 | counter.innerText = target; 14 | } 15 | }; 16 | 17 | incrementCount(); 18 | -------------------------------------------------------------------------------- /Miscellaneous/Statistics_Card/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | background: #e0e0e0; 15 | } 16 | 17 | .stats-card { 18 | display: flex; 19 | align-items: center; 20 | font-family: sans-serif; 21 | padding: 1.5em 2em; 22 | gap: 2em; 23 | border-radius: 0.5em; 24 | color: #323232; 25 | background: #e0e0e0; 26 | box-shadow: 27 | 1em 1em 2em #d0d0d0, 28 | -1em -1em 2em #f0f0f0; 29 | } 30 | 31 | .cup-icon { 32 | font-size: 3.5rem; 33 | color: #fe6f5e; 34 | } 35 | 36 | h2 { 37 | font-size: 2rem; 38 | margin: 0.15em 0; 39 | } 40 | 41 | h4 { 42 | font-size: 1rem; 43 | text-transform: uppercase; 44 | } 45 | -------------------------------------------------------------------------------- /Miscellaneous/To_Do_List_Check_Item/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | To Do List Check Item 8 | 9 | 10 | 11 |
12 | 13 | 14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /Miscellaneous/To_Do_List_Check_Item/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | } 15 | 16 | .container { 17 | display: flex; 18 | align-items: center; 19 | } 20 | 21 | label { 22 | font-size: 1.75rem; 23 | margin: 0 0.25em; 24 | font-family: sans-serif; 25 | position: relative; 26 | cursor: pointer; 27 | } 28 | 29 | label::before { 30 | content: ""; 31 | position: absolute; 32 | width: 0; 33 | height: 2px; 34 | background-color: rgb(150, 150, 150); 35 | top: 50%; 36 | left: 0; 37 | transform: translateY(-50%); 38 | transition: all 250ms linear; 39 | } 40 | 41 | input[type="checkbox"] { 42 | position: relative; 43 | appearance: none; 44 | -moz-appearance: none; 45 | -webkit-appearance: none; 46 | width: 2.5em; 47 | height: 2.5em; 48 | font-size: 10px; 49 | border: 2px solid #000; 50 | background: transparent; 51 | outline: none; 52 | border-radius: 15%; 53 | transition: all 150ms linear; 54 | cursor: pointer; 55 | } 56 | 57 | input[type="checkbox"]:before { 58 | content: "\2713"; 59 | position: absolute; 60 | top: 50%; 61 | left: 50%; 62 | transform: translate(-50%, -50%); 63 | color: rgb(16, 200, 65); 64 | font-size: 0; 65 | font-weight: 700; 66 | transition: all 250ms linear; 67 | } 68 | 69 | input[type="checkbox"]:checked:before { 70 | font-size: 1.75rem; 71 | } 72 | 73 | input[type="checkbox"]:checked { 74 | border: none; 75 | } 76 | 77 | input[type="checkbox"]:checked ~ label::before { 78 | width: 100%; 79 | } 80 | 81 | input[type="checkbox"]:checked ~ label { 82 | color: rgb(180, 180, 180); 83 | } 84 | -------------------------------------------------------------------------------- /Miscellaneous/Video_Clipped_Inside_Text/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Video Clipped Inside Text 9 | 10 | 11 |
12 | 13 |

EXPLORE

14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Miscellaneous/Video_Clipped_Inside_Text/script.js: -------------------------------------------------------------------------------- 1 | let videoSource = [ 2 | "https://res.cloudinary.com/djix6uusx/video/upload/v1670218314/pexels-mikhail-nilov-6981411_pfi8ky.mp4", 3 | "https://res.cloudinary.com/djix6uusx/video/upload/v1594313729/samples/sea-turtle.mp4", 4 | "https://res.cloudinary.com/djix6uusx/video/upload/v1594313733/samples/elephants.mp4", 5 | ]; 6 | 7 | let bgVideoSource = document.getElementById("bg-video"); 8 | 9 | bgVideoSource.setAttribute("src", videoSource[0]); 10 | 11 | function videoPlay(index) { 12 | bgVideoSource.setAttribute("src", videoSource[index]); 13 | bgVideoSource.load(); 14 | bgVideoSource.play(); 15 | } 16 | 17 | function loop() { 18 | let i = 0; 19 | setInterval(() => { 20 | i++; 21 | if (i == videoSource.length) { 22 | i = 0; 23 | videoPlay(i); 24 | } else { 25 | videoPlay(i); 26 | } 27 | }, 4000); 28 | } 29 | 30 | loop(); 31 | -------------------------------------------------------------------------------- /Miscellaneous/Video_Clipped_Inside_Text/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | overflow: hidden; 11 | background-color: rgb(31, 29, 29); 12 | } 13 | 14 | .container { 15 | position: relative; 16 | width: 100%; 17 | height: 100vh; 18 | } 19 | 20 | .container > #bg-video { 21 | width: 100%; 22 | height: 100%; 23 | object-fit: cover; 24 | } 25 | 26 | .container > h1 { 27 | position: absolute; 28 | inset: 0; 29 | display: grid; 30 | place-items: center; 31 | background-color: rgb(31, 29, 29); 32 | color: #fff; 33 | font-weight: 900; 34 | font-size: 15rem; 35 | font-family: sans-serif; 36 | mix-blend-mode: multiply; 37 | user-select: none; 38 | } 39 | 40 | @media (max-width: 1024px) { 41 | .container > h1 { 42 | font-size: min(35vw, 10rem); 43 | } 44 | } 45 | 46 | @media (max-width: 768px) { 47 | .container > h1 { 48 | font-size: min(25vw, 7rem); 49 | } 50 | } 51 | 52 | @media (max-width: 424px) { 53 | .container > h1 { 54 | font-size: min(15vw, 5rem); 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /Text Animations/Infinite_Text_Loop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Infinite Text Loop 8 | 9 | 10 |
11 |

this is continuous text  

12 |

this is continuous text  

13 |

this is continuous text  

14 |

this is continuous text  

15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /Text Animations/Infinite_Text_Loop/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | } 15 | 16 | .infinite-text-loop { 17 | display: flex; 18 | white-space: nowrap; 19 | overflow: hidden; 20 | font-family: sans-serif; 21 | } 22 | 23 | p { 24 | font-size: calc(2.5rem + 3vw); 25 | text-transform: uppercase; 26 | font-weight: 700; 27 | animation: loop 7s infinite linear; 28 | } 29 | 30 | @keyframes loop { 31 | 0% { 32 | transform: translateX(0%); 33 | } 34 | 35 | 100% { 36 | transform: translateX(-100%); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /Text Animations/Letter_By_Letter_Reveal/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Letter By Letter Reveal Animation 8 | 9 | 10 |

11 | u 12 | k 13 | i 14 | y 15 | o 16 |

17 | 18 | 19 | -------------------------------------------------------------------------------- /Text Animations/Letter_By_Letter_Reveal/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | background-color: #add8e6; 15 | } 16 | 17 | h1 { 18 | font-size: 4rem; 19 | } 20 | 21 | .letter { 22 | position: relative; 23 | } 24 | 25 | .letter::before { 26 | content: ""; 27 | position: absolute; 28 | width: 100%; 29 | height: 100%; 30 | top: 0; 31 | background: #add8e6; 32 | animation: animate 500ms linear 1; 33 | animation-fill-mode: forwards; 34 | animation-delay: var(--delay); 35 | } 36 | 37 | @keyframes animate { 38 | 100% { 39 | top: -100%; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /Text Animations/Rotating_Text/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Rotating Text Animation 8 | 9 | 10 |
11 |
12 | Heya 13 | ¡Hola! 14 | Bonjour 15 | Konnichiwa 16 | Heya 17 |
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /Text Animations/Rotating_Text/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | background-color: #121212; 15 | } 16 | 17 | .wrapper { 18 | width: min(90%, 400px); 19 | height: calc(3.25em + 1.35vw); 20 | position: relative; 21 | overflow: hidden; 22 | } 23 | 24 | .words { 25 | position: absolute; 26 | top: 0; 27 | width: 100%; 28 | text-align: center; 29 | font-family: sans-serif; 30 | font-size: calc(40px + 1.5vw); 31 | } 32 | 33 | .words span { 34 | display: block; 35 | color: #121212; 36 | letter-spacing: 5px; 37 | text-shadow: 38 | -1px 1px 0 #cfc547, 39 | 1px 1px 0 #ff99cc, 40 | 1px -1px 0 #00ffff, 41 | -1px -1px 0 #00ff00; 42 | user-select: none; 43 | animation: rotate 7s infinite ease-in-out; 44 | } 45 | 46 | @keyframes rotate { 47 | 10% { 48 | transform: translateY(-105%); 49 | } 50 | 51 | 25% { 52 | transform: translateY(-100%); 53 | } 54 | 55 | 35% { 56 | transform: translateY(-205%); 57 | } 58 | 59 | 50% { 60 | transform: translateY(-200%); 61 | } 62 | 63 | 60% { 64 | transform: translateY(-305%); 65 | } 66 | 67 | 75% { 68 | transform: translateY(-300%); 69 | } 70 | 71 | 85% { 72 | transform: translateY(-405%); 73 | } 74 | 75 | 100% { 76 | transform: translateY(-400%); 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /Text Animations/Text_Outline/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 19 | Hello World 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /Text Animations/Text_Outline/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | height: 100vh; 14 | background-color: #121212; 15 | } 16 | 17 | svg { 18 | width: 100%; 19 | } 20 | 21 | .text { 22 | font-size: 2.85rem; 23 | font-weight: 600; 24 | letter-spacing: 5px; 25 | } 26 | 27 | #outline { 28 | fill: none; 29 | stroke: #ffffc0; 30 | stroke-width: 1.5px; 31 | stroke-dasharray: 100%; 32 | animation: outline 3.5s ease-in; 33 | animation-fill-mode: forwards; 34 | } 35 | 36 | @keyframes outline { 37 | from { 38 | stroke-dashoffset: 100%; 39 | } 40 | 41 | to { 42 | stroke-dashoffset: 0; 43 | } 44 | } 45 | 46 | @media (min-width: 48rem) { 47 | .text { 48 | font-size: 4rem; 49 | } 50 | } 51 | 52 | @media (min-width: 64rem) { 53 | .text { 54 | font-size: 5rem; 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /Text Animations/Text_Rotate_Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Text Rotate Animation 8 | 9 | 10 |
11 |

Hello

12 |
13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Text Animations/Text_Rotate_Animation/script.js: -------------------------------------------------------------------------------- 1 | const rotateText = document.querySelector(".rotate-text"); 2 | const headings = ["Hey", "Hola", "Yo", "Hello"]; 3 | let index = 0; 4 | 5 | function changeRotateText() { 6 | rotateText.classList.remove("flip"); 7 | 8 | setTimeout(() => { 9 | rotateText.innerHTML = headings[index]; 10 | rotateText.classList.add("flip"); 11 | }, 850); 12 | 13 | index = (index + 1) % headings.length; 14 | } 15 | 16 | setInterval(changeRotateText, 1700); 17 | -------------------------------------------------------------------------------- /Text Animations/Text_Rotate_Animation/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | height: 100vh; 14 | background-color: #bed1cf; 15 | } 16 | 17 | .text-rotate-container { 18 | perspective: 8em; 19 | } 20 | 21 | h1 { 22 | font-size: 3rem; 23 | font-family: sans-serif; 24 | text-align: center; 25 | backface-visibility: hidden; 26 | } 27 | 28 | h1.flip { 29 | animation: flip 850ms ease-in 1; 30 | } 31 | 32 | @keyframes flip { 33 | 0% { 34 | opacity: 0; 35 | transform: rotateX(120deg); 36 | } 37 | 38 | 40% { 39 | opacity: 1; 40 | } 41 | 42 | 60% { 43 | transform: rotateX(0); 44 | } 45 | 46 | 80% { 47 | transform: rotateX(15deg); 48 | } 49 | 50 | 100% { 51 | transform: rotateX(0); 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /Text Animations/Text_Shadow_Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Text Shadow Animation 8 | 9 | 10 |

Hustle!

11 | 12 | 13 | -------------------------------------------------------------------------------- /Text Animations/Text_Shadow_Animation/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | background-color: #121212; 14 | height: 100vh; 15 | } 16 | 17 | h1 { 18 | position: relative; 19 | color: hsla(230, 40%, 50%, 1); 20 | font-size: 10rem; 21 | font-family: cursive; 22 | letter-spacing: 0.05em; 23 | text-shadow: 0 0 0.15em #121212; 24 | } 25 | 26 | h1::before { 27 | content: attr(data-shadow); 28 | position: absolute; 29 | top: 0.02em; 30 | left: 0.06em; 31 | color: transparent; 32 | background-image: linear-gradient( 33 | 45deg, 34 | transparent 45%, 35 | hsla(48, 20%, 90%, 1) 45%, 36 | hsla(48, 20%, 90%, 1) 55%, 37 | transparent 0 38 | ); 39 | 40 | background-size: 0.07em 0.07em; 41 | background-clip: text; 42 | -webkit-background-clip: text; 43 | animation: rotate-lines 25s linear infinite; 44 | z-index: -1; 45 | } 46 | 47 | @keyframes rotate-lines { 48 | 0% { 49 | background-position: 0 0; 50 | } 51 | 52 | 100% { 53 | background-position: 100% -100%; 54 | } 55 | } 56 | 57 | @media (max-width: 35em) { 58 | h1 { 59 | font-size: 5rem; 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /Text Animations/Text_Slide_Up/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Text Slide Up 8 | 9 | 10 |

11 | Explore 12 | CSS 13 | With 14 | Me 15 |

16 | 17 | 18 | -------------------------------------------------------------------------------- /Text Animations/Text_Slide_Up/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | background-color: #fcfff0; 11 | height: 100vh; 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | } 16 | 17 | h2 { 18 | font-size: 2.5rem; 19 | font-family: sans-serif; 20 | text-align: center; 21 | overflow: hidden; 22 | } 23 | 24 | .word { 25 | color: transparent; 26 | font-weight: 900; 27 | text-shadow: 0 1.5em 0.25px #fff; 28 | animation: moveUp 250ms ease-in-out 1 forwards; 29 | 30 | /* CSS variable for text-color */ 31 | --text-color: #de3163; 32 | } 33 | 34 | .word:nth-child(2) { 35 | animation-delay: 150ms; 36 | 37 | --text-color: #6495ed; 38 | } 39 | 40 | .word:nth-child(3) { 41 | animation-delay: 300ms; 42 | 43 | --text-color: #00ee76; 44 | } 45 | 46 | .word:nth-child(4) { 47 | animation-delay: 450ms; 48 | 49 | --text-color: #ff7f50; 50 | } 51 | 52 | @keyframes moveUp { 53 | 100% { 54 | text-shadow: 0 0 0.25px var(--text-color); 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /Text Animations/Text_Split_And_Reveal/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Text Split and Reveal Animation 8 | 9 | 10 |

11 | Hello Everyone 12 | Hope You Have A Nice Day 13 |

14 | 15 | 16 | -------------------------------------------------------------------------------- /Text Animations/Text_Split_And_Reveal/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::before, 3 | ::after { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | background-color: #121212; 15 | } 16 | 17 | h1 { 18 | position: relative; 19 | width: 10em; 20 | height: 1.2em; 21 | font-size: 4rem; 22 | font-family: sans-serif; 23 | color: transparent; 24 | } 25 | 26 | h1::before, 27 | h1::after { 28 | content: "Hello Everyone"; 29 | position: absolute; 30 | left: 0; 31 | width: 100%; 32 | text-transform: uppercase; 33 | text-align: center; 34 | } 35 | 36 | h1::before { 37 | top: 0; 38 | height: 55%; 39 | color: #fff; 40 | background-color: #121212; 41 | animation: moveUp 1.5s ease-in-out 1; 42 | overflow: hidden; 43 | z-index: 2; 44 | } 45 | 46 | h1::after { 47 | bottom: 0; 48 | height: 100%; 49 | background: linear-gradient(180deg, transparent 55%, #fff 55%); 50 | background-clip: text; 51 | -webkit-background-clip: text; 52 | animation: moveDown 1.5s ease-in-out 1; 53 | z-index: 1; 54 | } 55 | 56 | .message { 57 | position: absolute; 58 | top: 40%; 59 | left: 50%; 60 | transform: translate(-50%, -40%); 61 | font-size: 1rem; 62 | color: #dc143c; 63 | z-index: -1; 64 | } 65 | 66 | @keyframes moveUp { 67 | 0%, 68 | 100% { 69 | top: 0; 70 | } 71 | 72 | 50%, 73 | 70% { 74 | top: -0.75em; 75 | } 76 | } 77 | 78 | @keyframes moveDown { 79 | 0%, 80 | 100% { 81 | bottom: 0; 82 | } 83 | 84 | 50%, 85 | 70% { 86 | bottom: -0.75em; 87 | } 88 | } 89 | 90 | @media (max-width: 424px) { 91 | h1 { 92 | font-size: 2.15rem; 93 | } 94 | 95 | .message { 96 | font-size: 0.75rem; 97 | } 98 | } 99 | 100 | @media (max-width: 320px) { 101 | h1 { 102 | font-size: 2rem; 103 | } 104 | 105 | .message { 106 | font-size: 0.5rem; 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /assets/gifs/Image_Shrink.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ritika-Agrawal811/css-and-js-code-snippets/668a07f4ce4dc93643d479b09b05afd4412bbfc5/assets/gifs/Image_Shrink.gif -------------------------------------------------------------------------------- /assets/gifs/Split_Screen_Carousel.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Ritika-Agrawal811/css-and-js-code-snippets/668a07f4ce4dc93643d479b09b05afd4412bbfc5/assets/gifs/Split_Screen_Carousel.gif -------------------------------------------------------------------------------- /component_count.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | Components 21 | Components 22 | 71 23 | 71 24 | 25 | 26 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-and-js-code-snippets", 3 | "version": "1.0.0", 4 | "lockfileVersion": 3, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "css-and-js-code-snippets", 9 | "version": "1.0.0", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "prettier": "^3.2.5" 13 | } 14 | }, 15 | "node_modules/prettier": { 16 | "version": "3.2.5", 17 | "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz", 18 | "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==", 19 | "dev": true, 20 | "bin": { 21 | "prettier": "bin/prettier.cjs" 22 | }, 23 | "engines": { 24 | "node": ">=14" 25 | }, 26 | "funding": { 27 | "url": "https://github.com/prettier/prettier?sponsor=1" 28 | } 29 | } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-and-js-code-snippets", 3 | "version": "1.0.0", 4 | "description": "A collection of real-life code snippets for every web development project. Each folder contains the stylesheet and script file (if required).", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "format": "npx prettier --write . --ignore-path .prettierignore" 9 | }, 10 | "keywords": [ 11 | "css", 12 | "javascript", 13 | "snippets" 14 | ], 15 | "author": "https://github.com/Ritika-Agrawal811", 16 | "license": "ISC", 17 | "devDependencies": { 18 | "prettier": "^3.2.5" 19 | } 20 | } 21 | --------------------------------------------------------------------------------