├── Busy Traffic ├── Images │ ├── background.jpg │ ├── mincar.png │ ├── mincar2.png │ ├── mincar3.png │ ├── mincar4.png │ ├── mincar5.png │ ├── mincar6.png │ ├── mincar7.png │ ├── mincar8.png │ └── mincar9.png ├── index.html └── style.css ├── CONTRIBUTING.md ├── CSS Animations ├── 3d wave │ ├── css 3D wave circle.css │ └── index.html ├── AnimatedSpinner.html ├── Neon Blossom Dance │ ├── index.html │ └── styles.css ├── Parallax-Effect │ ├── images │ │ ├── Binking.jpg │ │ ├── men with mountain.jpg │ │ ├── mountain.jpg │ │ ├── paragliding.jpg │ │ ├── surfing.jpg │ │ └── transparentback.png │ ├── index.html │ └── style.css ├── PencilTypeLoadingSpinner.html ├── Pulsing effect │ ├── index.html │ └── style.css ├── Readme.md ├── Tilting_Profile_Card │ ├── index.html │ ├── style.css │ └── vanilla-tilt.js ├── anim8css │ ├── index.html │ └── style.css ├── animation1.css ├── clock.js ├── flower │ ├── index.html │ └── style.css ├── loder.css ├── parallax scrolling │ ├── index.html │ └── style.css ├── smiley │ ├── index.html │ └── style.css └── text-animations │ ├── index.html │ └── style.css ├── Clock animation ├── c.png ├── index.html └── s.css ├── DarkNight ├── 2.png ├── 3.png ├── index.html └── styles.css ├── GameChanger ├── assets │ ├── IMG_7564.JPG │ ├── IMG_7565.JPG │ ├── IMG_7566.JPG │ ├── IMG_7567.JPG │ ├── IMG_7568.JPG │ └── raybanlogo.png ├── index.html ├── javascript.js └── styles.css ├── JOKE_GENERATOR ├── img │ ├── 1.gif │ ├── 10.gif │ ├── 11.gif │ ├── 12.gif │ ├── 13.gif │ ├── 14.gif │ ├── 17.gif │ ├── 2.gif │ ├── 200w.gif │ ├── 22.jpg │ ├── 3.gif │ ├── 4.gif │ ├── 4.jpeg │ ├── 5.gif │ ├── 5.png │ ├── 6.gif │ ├── 6.png │ ├── 7.gif │ ├── 8.gif │ ├── 8.jpeg │ ├── 9.gif │ ├── a.gif │ ├── bg3.jpeg │ ├── d.gif │ ├── e.gif │ ├── f.gif │ ├── i.gif │ ├── q.gif │ ├── q.webp │ ├── qa.gif │ ├── qw.gif │ ├── r.png │ ├── s.gif │ ├── smile.png │ ├── t.gif │ ├── u.gif │ ├── u.jpeg │ ├── w.gif │ └── y.jpeg ├── img1 │ ├── as.gif │ ├── b.gif │ ├── c.gif │ ├── ct.gif │ ├── n.gif │ ├── v.gif │ ├── x.gif │ ├── z.gif │ ├── za.gif │ ├── zd.gif │ ├── zf.gif │ └── zs.gif ├── index.html ├── script.js └── style.css ├── Loader ├── loader.css └── loader.html ├── PORTFOLIO ├── bg1.png ├── img │ ├── Tesla-clone.png │ ├── calculator.png │ ├── chatapp.png │ ├── dateCrush.png │ ├── educate girl.png │ ├── img-generator.png │ ├── joke-generator.png │ ├── konoha-kart.png │ ├── landing-page-pet-shop.png │ ├── live-time.png │ ├── login-byphp.png │ ├── love-calculator.png │ ├── microsoft-clone.png │ ├── myntra-clone.png │ ├── netfrlix clone.png │ ├── obj-move.png │ ├── proposal.png │ ├── robomania-clone.png │ ├── rock-paper-scissor.png │ ├── sketch-anime.png │ ├── temp-converter.png │ ├── to-do-app.png │ ├── tribute-page.png │ └── weather-app.png ├── img1.png ├── img2.png ├── index.html ├── logo2.png ├── project.html ├── resp.css ├── script.js └── style.css ├── Password Generator ├── password.html └── password.js ├── Pulsing effect using CSS3 Transform Scale #6 ├── clock.css ├── clock.html ├── index.html ├── index2.html ├── index3.html ├── pulse.css ├── pulse.html ├── square.html ├── style.css ├── toggle.css └── toggle.html /Busy Traffic/Images/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/Busy Traffic/Images/background.jpg -------------------------------------------------------------------------------- /Busy Traffic/Images/mincar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/Busy Traffic/Images/mincar.png -------------------------------------------------------------------------------- /Busy Traffic/Images/mincar2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/Busy Traffic/Images/mincar2.png -------------------------------------------------------------------------------- /Busy Traffic/Images/mincar3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/Busy Traffic/Images/mincar3.png -------------------------------------------------------------------------------- /Busy Traffic/Images/mincar4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/Busy Traffic/Images/mincar4.png -------------------------------------------------------------------------------- /Busy Traffic/Images/mincar5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/Busy Traffic/Images/mincar5.png -------------------------------------------------------------------------------- /Busy Traffic/Images/mincar6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/Busy Traffic/Images/mincar6.png -------------------------------------------------------------------------------- /Busy Traffic/Images/mincar7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/Busy Traffic/Images/mincar7.png -------------------------------------------------------------------------------- /Busy Traffic/Images/mincar8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/Busy Traffic/Images/mincar8.png -------------------------------------------------------------------------------- /Busy Traffic/Images/mincar9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/Busy Traffic/Images/mincar9.png -------------------------------------------------------------------------------- /Busy Traffic/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Cloud Car 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 |
19 | 20 | 21 | mincar





22 | mincar4











23 | mincar5 24 | 25 | 26 |
27 | 28 |
29 | 30 | mincar2






31 | mincar7





32 | mincar6 33 | 34 | 35 |
36 | 37 |
38 | 39 | 40 | mincar3













41 | mincar8











42 | mincar9 43 | 44 | 45 |
46 | 47 |
48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /Busy Traffic/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: url("Images/background.jpg"); 3 | background-size: cover; 4 | background-repeat: no-repeat; 5 | background-position: center; 6 | height: 100vh; 7 | padding: 0; 8 | margin: 0; 9 | } 10 | 11 | #title { 12 | height: 100%; 13 | } 14 | 15 | marquee { 16 | height: 100%; 17 | } 18 | 19 | .cardiv { 20 | height: 100vh; 21 | width: 200px; 22 | position: relative; 23 | left: 15%; 24 | } 25 | 26 | .mincar2, .mincar3 { 27 | width: 100%; 28 | } 29 | 30 | .mincar { 31 | width: 80% 32 | } 33 | 34 | .cardiv3 { 35 | height: 100vh; 36 | width: 200px; 37 | position: relative; 38 | left: 70%; 39 | bottom: 200%; 40 | } 41 | 42 | .cardiv2 { 43 | height: 100vh; 44 | width: 200px; 45 | position: relative; 46 | left: 40%; 47 | bottom: 100%; 48 | } -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Hacktoberfest Contribution Repository 2 | 3 | Welcome to the Hacktoberfest contribution repository! We're excited to have you as a contributor. This repository is open for anyone looking to participate in Hacktoberfest and make a meaningful contribution to open source projects. 4 | 5 | ## How to Contribute 6 | 7 | To make a contribution to this repository, follow these steps: 8 | 9 | 1. Fork this repository to your GitHub account. 10 | 2. Clone the forked repository to your local machine: 11 | ```bash 12 | git clone https://github.com/Am10aN16/hacktoberfest2023.git 13 | ``` 14 | 3. Create a new branch for your contribution: 15 | ```bash 16 | git checkout -b feature/your-feature-name 17 | ``` 18 | 4. Make your changes or add your code to the repository. 19 | 5. Commit your changes and push them to your forked repository: 20 | ```bash 21 | git add . 22 | git commit -m "Add your meaningful commit message here" 23 | git push origin feature/your-feature-name 24 | ``` 25 | 6. Create a Pull Request (PR) from your forked repository to this main repository. 26 | 7. Your PR will be reviewed and merged if everything is in order. 27 | 28 | ## Contribution Guidelines 29 | 30 | - Ensure your code follows the project's coding standards and conventions. 31 | - Make sure to document your code and add comments where necessary. 32 | - Test your changes to ensure they work as expected. 33 | - Please be respectful and considerate of others in your interactions on this repository. 34 | 35 | ## Getting Help 36 | 37 | If you have any questions or need assistance with your contribution, feel free to reach out to us by [opening an issue](https://github.com/your-username/hacktoberfest-contribution/issues). 38 | 39 | ## Happy Hacking! 40 | 41 | Thank you for your interest in contributing to this project and for participating in Hacktoberfest. We appreciate your contributions and look forward to seeing your amazing work! 42 | 43 | Happy coding! 44 | ``` 45 | 46 | This README.md file provides a clear and concise guide for contributors, making it easier for them to understand how to get involved in your Hacktoberfest contribution repository. -------------------------------------------------------------------------------- /CSS Animations/3d wave/css 3D wave circle.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body{ 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | min-height: 100vh; 11 | background: #279eb0; 12 | } 13 | 14 | .loader{ 15 | position: relative; 16 | width: 300px; 17 | height: 300px; 18 | transform-style: preserve-3d; 19 | transform: perspective(500px) rotateX(60deg); 20 | } 21 | .loader span{ 22 | position: absolute; 23 | display: block; 24 | border: 5px solid #fff; 25 | box-shadow: 0 5px 0 #ccc; 26 | /* inset 0 5px 0 #ccc; */ 27 | box-sizing: border-box; 28 | border-radius: 50%; 29 | animation: animate 3s ease-in-out infinite; 30 | } 31 | 32 | @keyframes animate 33 | { 34 | 0%,100% 35 | { 36 | transform: translateZ(-100px); 37 | } 38 | 50% 39 | { 40 | transform: translateZ(100px); 41 | } 42 | 43 | } 44 | 45 | .loader span:nth-child(1) 46 | { 47 | top: 0; 48 | left: 0; 49 | bottom: 0; 50 | right: 0; 51 | animation-delay: 1.4s; 52 | } 53 | 54 | .loader span:nth-child(2) 55 | { 56 | top: 10px; 57 | left: 10px; 58 | bottom: 10px; 59 | right: 10px; 60 | animation-delay: 1.3s; 61 | } 62 | 63 | .loader span:nth-child(3) 64 | { 65 | top: 20px; 66 | left: 20px; 67 | bottom: 20px; 68 | right: 20px; 69 | animation-delay: 1.2s; 70 | } 71 | 72 | .loader span:nth-child(4) 73 | { 74 | top: 30px; 75 | left: 30px; 76 | bottom: 30px; 77 | right: 30px; 78 | animation-delay: 1.1s; 79 | } 80 | 81 | .loader span:nth-child(5) 82 | { 83 | top: 40px; 84 | left: 40px; 85 | bottom: 40px; 86 | right: 40px; 87 | animation-delay: 1s; 88 | } 89 | 90 | .loader span:nth-child(6) 91 | { 92 | top: 50px; 93 | left: 50px; 94 | bottom: 50px; 95 | right: 50px; 96 | animation-delay: 0.9s; 97 | } 98 | 99 | .loader span:nth-child(7) 100 | { 101 | top: 60px; 102 | left: 60px; 103 | bottom: 60px; 104 | right: 60px; 105 | animation-delay: 0.8s; 106 | } 107 | .loader span:nth-child(8) 108 | { 109 | top: 70px; 110 | left: 70px; 111 | bottom: 70px; 112 | right: 70px; 113 | animation-delay: 0.7s; 114 | } 115 | .loader span:nth-child(9) 116 | { 117 | top:80px; 118 | left: 80px; 119 | bottom:80px; 120 | right:80px; 121 | animation-delay: 0.6s; 122 | } 123 | .loader span:nth-child(10) 124 | { 125 | top: 90px; 126 | left: 90px; 127 | bottom: 90px; 128 | right: 90px; 129 | animation-delay: 0.5s; 130 | } 131 | 132 | .loader span:nth-child(11) 133 | { 134 | top: 120px; 135 | left: 120px; 136 | bottom:120px; 137 | right:120px; 138 | animation-delay: 0.4s; 139 | } 140 | .loader span:nth-child(12) 141 | { 142 | top: 130px; 143 | left: 130px; 144 | bottom: 130px; 145 | right: 130px; 146 | animation-delay: 0.3s; 147 | } 148 | 149 | .loader span:nth-child(13) 150 | { 151 | top: 140px; 152 | left: 140px; 153 | bottom: 140px; 154 | right: 140px; 155 | animation-delay: 0.2s; 156 | } 157 | 158 | .loader span:nth-child(14) 159 | { 160 | top: 110px; 161 | left: 110px; 162 | bottom: 110px; 163 | right: 110px; 164 | animation-delay: 0.1s; 165 | } 166 | .loader span:nth-child(15) 167 | { 168 | top: 100px; 169 | left: 100px; 170 | bottom: 100px; 171 | right: 100px; 172 | animation-delay: 0s; 173 | } -------------------------------------------------------------------------------- /CSS Animations/3d wave/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | -------------------------------------------------------------------------------- /CSS Animations/AnimatedSpinner.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 127 | 128 | 129 | 130 | Spinner 131 | 132 | 133 | 134 | 141 |

Loading...

142 | 143 | 144 | -------------------------------------------------------------------------------- /CSS Animations/Neon Blossom Dance/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Dancing Flower with Neon Effect 8 | 9 | 10 |
11 |
12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /CSS Animations/Neon Blossom Dance/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | height: 100vh; 6 | background-color: #1a1a1a; 7 | margin: 0; 8 | } 9 | 10 | .flower-container { 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | height: 200px; 15 | } 16 | 17 | .flower { 18 | width: 0; 19 | height: 0; 20 | border-left: 20px solid transparent; 21 | border-right: 20px solid transparent; 22 | border-bottom: 40px solid #ff1493; 23 | border-radius: 50%; 24 | position: relative; 25 | animation: dance 1s infinite alternate ease-in-out, spin 2s infinite linear; 26 | box-shadow: 0 0 20px rgba(255, 20, 147, 0.8); 27 | } 28 | 29 | @keyframes dance { 30 | 0% { 31 | transform: translateY(0); 32 | } 33 | 100% { 34 | transform: translateY(-20px); 35 | } 36 | } 37 | 38 | @keyframes spin { 39 | 0% { 40 | transform: rotate(0deg); 41 | } 42 | 100% { 43 | transform: rotate(360deg); 44 | } 45 | } 46 | 47 | /* Neon effect */ 48 | .flower::before, .flower::after { 49 | content: ''; 50 | position: absolute; 51 | width: 100%; 52 | height: 100%; 53 | border-radius: 50%; 54 | animation: neon 1.5s infinite alternate ease-in-out; 55 | } 56 | 57 | .flower::before { 58 | background: #ff1493; 59 | filter: blur(15px); 60 | } 61 | 62 | .flower::after { 63 | background: #ff1493; 64 | opacity: 0; 65 | mix-blend-mode: screen; 66 | } 67 | 68 | @keyframes neon { 69 | 0% { 70 | opacity: 1; 71 | } 72 | 100% { 73 | opacity: 0.4; 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /CSS Animations/Parallax-Effect/images/Binking.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/CSS Animations/Parallax-Effect/images/Binking.jpg -------------------------------------------------------------------------------- /CSS Animations/Parallax-Effect/images/men with mountain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/CSS Animations/Parallax-Effect/images/men with mountain.jpg -------------------------------------------------------------------------------- /CSS Animations/Parallax-Effect/images/mountain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/CSS Animations/Parallax-Effect/images/mountain.jpg -------------------------------------------------------------------------------- /CSS Animations/Parallax-Effect/images/paragliding.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/CSS Animations/Parallax-Effect/images/paragliding.jpg -------------------------------------------------------------------------------- /CSS Animations/Parallax-Effect/images/surfing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/CSS Animations/Parallax-Effect/images/surfing.jpg -------------------------------------------------------------------------------- /CSS Animations/Parallax-Effect/images/transparentback.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/CSS Animations/Parallax-Effect/images/transparentback.png -------------------------------------------------------------------------------- /CSS Animations/Parallax-Effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | parallel effect 7 | 8 | 9 | 10 |
11 |
12 | 13 | 14 |

Parallax Effect

15 | 17 | 18 | 19 | 20 |
21 |
22 | 23 |

Adventure

24 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis quibusdam aspernatur cupiditate obcaecati nemo, aliquam natus harum ratione eos accusantium cumque mollitia sint tempora perferendis pariatur sequi! Modi, itaque error.Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis quibusdam aspernatur cupiditate obcaecati nemo, aliquam natus harum ratione eos accusantium cumque mollitia sint tempora perferendis pariatur sequi! Modi, itaque error.

25 | 26 |
27 |

BiCyCle

28 |
29 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis quibusdam aspernatur cupiditate obcaecati nemo, aliquam natus harum ratione eos accusantium cumque mollitia sint tempora perferendis pariatur sequi! Modi, itaque error.Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis quibusdam aspernatur cupiditate obcaecati nemo, aliquam natus harum ratione eos accusantium cumque mollitia sint tempora perferendis pariatur sequi! Modi, itaque error.

30 | 31 |
32 |

PsRaGlIdInG DiNg

33 |
34 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis quibusdam aspernatur cupiditate obcaecati nemo, aliquam natus harum ratione eos accusantium cumque mollitia sint tempora perferendis pariatur sequi! Modi, itaque error.Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis quibusdam aspernatur cupiditate obcaecati nemo, aliquam natus harum ratione eos accusantium cumque mollitia sint tempora perferendis pariatur sequi! Modi, itaque error.

35 | 36 |
37 |

SuRfInG

38 |
39 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis quibusdam aspernatur cupiditate obcaecati nemo, aliquam natus harum ratione eos accusantium cumque mollitia sint tempora perferendis pariatur sequi! Modi, itaque error.Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis quibusdam aspernatur cupiditate obcaecati nemo, aliquam natus harum ratione eos accusantium cumque mollitia sint tempora perferendis pariatur sequi! Modi, itaque error.

40 | 41 | 42 | 43 |
44 |
45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /CSS Animations/Parallax-Effect/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0px; 3 | padding: 0px; 4 | box-sizing:border-box; 5 | } 6 | .wrapper{ 7 | height: 100vh; 8 | overflow-x:hidden; 9 | perspective: 10px; 10 | } 11 | .container{ 12 | position: relative; 13 | display: flex; 14 | height: 100%; 15 | width: 100%; 16 | justify-content: center; 17 | align-items: center; 18 | transform-style:preserve-3d; 19 | z-index: -2; 20 | 21 | 22 | } 23 | .mountain,.man{ 24 | position: absolute; 25 | height: 100%; 26 | width: 100%; 27 | object-fit: cover; 28 | 29 | 30 | 31 | } 32 | .mountain{ 33 | transform: translateZ(-40px) scale(6); 34 | } 35 | .man{ 36 | transform: translateZ(-20px) scale(3); 37 | } 38 | .parallax{ 39 | position: absolute; 40 | color: white; 41 | font-size: 6rem; 42 | top: 20%; 43 | 44 | } 45 | .lowest-div{ 46 | background-color: aqua; 47 | width: 620px; 48 | height: 111px; 49 | position: absolute; 50 | top: 20%; 51 | z-index: -2; 52 | border-radius:1rem; 53 | 54 | } 55 | .below-text{ 56 | background-color: brown; 57 | position: absolute; 58 | width: 620px; 59 | height: 111px; 60 | top: 20%; 61 | opacity: 0.6; 62 | z-index: -1; 63 | border-radius: 1rem; 64 | transition:tarnsform 1s ease 1s; 65 | transform: scaleX(0); 66 | 67 | 68 | } 69 | .below-text:hover{ 70 | cursor: pointer; 71 | transform: scaleX(1); 72 | 73 | } 74 | section{ 75 | background-color: rgb(45,45,45); 76 | color: white; 77 | 78 | /* text-align: center; */ 79 | /* font-size: 2rem; */ 80 | /* padding: 3rem; */ 81 | } 82 | .Adventure{ 83 | padding: 0 10rem; 84 | font-size:3.5rem ; 85 | /* background-color: brown; */ 86 | /* color: black; */ 87 | 88 | } 89 | .para{ 90 | font-size: 1.5rem; 91 | margin: 5rem; 92 | padding: 0 10rem; 93 | } 94 | .bg1{ 95 | background-image: url(./images/Binking.jpg); 96 | } 97 | .bg2{ 98 | background-image: url(./images/paragliding.jpg); 99 | } 100 | .bg3{ 101 | background-image: url(./images/surfing.jpg); 102 | /* background-size: fixed; */ 103 | } 104 | .bg{ 105 | position:relative; 106 | width: 100%; 107 | background-attachment: fixed; 108 | height: 16rem; 109 | background-size: cover; 110 | } 111 | .description{ 112 | 113 | position: absolute; 114 | background-color: lightcyan; 115 | font-size: 3.5rem; 116 | color: black; 117 | top: 50%; 118 | left: 50%; 119 | transform:translate(-50%,-50%); 120 | padding: 1.5rem; 121 | } 122 | 123 | /* .bg{ 124 | background-color: lightgray; 125 | font-size: 2rem; 126 | text-align: center; 127 | max-width:1rem ; 128 | } */ -------------------------------------------------------------------------------- /CSS Animations/PencilTypeLoadingSpinner.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Pencil Type Loading Spinner 4 | 5 | 109 | 110 | 111 |
112 |
113 |

Loading....

114 |
115 |
116 |
117 |
118 |
119 | 120 | 121 | -------------------------------------------------------------------------------- /CSS Animations/Pulsing effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 |
12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /CSS Animations/Pulsing effect/style.css: -------------------------------------------------------------------------------- 1 | 2 | body{ 3 | margin:0; 4 | padding:0; 5 | background: #262626; 6 | } 7 | .pulse{ 8 | position: absolute; 9 | top: 50%; 10 | left:50%; 11 | transform: translate(-50%,-50%); 12 | width: 80px; 13 | height: 80px; 14 | background: #58ea00; 15 | color:#fff; 16 | border-radius: 50%; 17 | text-align: center; 18 | line-height: 80px; 19 | font-size: 48px; 20 | } 21 | .pulse:before, 22 | .pulse:after{ 23 | content: ''; 24 | display: block; 25 | position: absolute; 26 | border:50%; 27 | border: 1px solid #58ea00; 28 | left:-20px; 29 | right: -20px; 30 | top:-20px; 31 | bottom: -20px; 32 | border-radius: 50%; 33 | animation: animate 1.5s linear infinite; 34 | opacity:0; 35 | } 36 | .pulse:after{ 37 | animation-delay: 0.5s; 38 | } 39 | @keyframes animate{ 40 | 0%{ 41 | transform:scale(0.5); 42 | opacity:0; 43 | } 44 | 50%{ 45 | opacity:1; 46 | } 47 | 100%{ 48 | transform:scale(1.2); 49 | opacity:0; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /CSS Animations/Readme.md: -------------------------------------------------------------------------------- 1 | # Hacktoberfest Contribution Repository 2 | 3 | Welcome to the Hacktoberfest contribution repository! We're excited to have you as a contributor. This repository is open for anyone looking to participate in Hacktoberfest and make a meaningful contribution to open source projects. 4 | 5 | ## How to Contribute 6 | 7 | To make a contribution to this repository, follow these steps: 8 | 9 | 1. Fork this repository to your GitHub account. 10 | 2. Clone the forked repository to your local machine: 11 | ```bash 12 | git clone https://github.com/Am10aN16/hacktoberfest2023.git 13 | ``` 14 | 3. Create a new branch for your contribution: 15 | ```bash 16 | git checkout -b feature/your-feature-name 17 | ``` 18 | 4. Make your changes or add your code to the repository. 19 | 5. Commit your changes and push them to your forked repository: 20 | ```bash 21 | git add . 22 | git commit -m "Add your meaningful commit message here" 23 | git push origin feature/your-feature-name 24 | ``` 25 | 6. Create a Pull Request (PR) from your forked repository to this main repository. 26 | 7. Your PR will be reviewed and merged if everything is in order. 27 | 28 | ## Contribution Guidelines 29 | 30 | - Ensure your code follows the project's coding standards and conventions. 31 | - Make sure to document your code and add comments where necessary. 32 | - Test your changes to ensure they work as expected. 33 | - Please be respectful and considerate of others in your interactions on this repository. 34 | 35 | ## Getting Help 36 | 37 | If you have any questions or need assistance with your contribution, feel free to reach out to us by [opening an issue](https://github.com/your-username/hacktoberfest-contribution/issues). 38 | 39 | ## Happy Hacking! 40 | 41 | Thank you for your interest in contributing to this project and for participating in Hacktoberfest. We appreciate your contributions and look forward to seeing your amazing work! 42 | 43 | Happy coding! 44 | ``` 45 | 46 | This README.md file provides a clear and concise guide for contributors, making it easier for them to understand how to get involved in your Hacktoberfest contribution repository. -------------------------------------------------------------------------------- /CSS Animations/Tilting_Profile_Card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Profile Card 6 | 7 | 8 | 9 | 10 |
11 |
12 |

Subham Chandra

13 |

Front-End Developer

14 |
15 | 16 | 17 | 18 |
19 | Contact me 20 |
21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /CSS Animations/Tilting_Profile_Card/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: 'Poppins', sans-serif; 6 | } 7 | 8 | .container{ 9 | width: 100%; 10 | height: 100vh; 11 | background-image: url(https://ik.imagekit.io/houseofcoders/wp-content/uploads/2017/10/portfolio-background.png); /* You can change background here*/ 12 | background-position: center; 13 | background-size: cover; 14 | display: flex; 15 | align-items: center; 16 | justify-content: center; 17 | } 18 | 19 | .card{ 20 | width: 90%; 21 | max-width: 440px; 22 | color: #fff; 23 | text-align: center; 24 | padding: 50px 35px; 25 | border: 1px solid rgba(255, 255, 255, 0.3); 26 | background: rgba(255,255,255,0.2); 27 | border-radius: 16px; 28 | box-shadow: 0 4px 30px rgba(0,0,0,0.1); 29 | backdrop-filter: blur(5px); 30 | } 31 | 32 | .card img{ 33 | width: 140px; 34 | border-radius: 50%; 35 | font-weight: 600; 36 | margin-top: 20px; 37 | } 38 | 39 | .card p{ 40 | font-size: 18px; 41 | margin: 10px auto; 42 | max-width: 330px; 43 | } 44 | 45 | .card .links img{ 46 | width: 40px; 47 | border-radius: 50%; 48 | margin: 10px 5px; 49 | transition: background 0.5s; 50 | } 51 | 52 | .card .links img:hover{ 53 | background: #ffffff; 54 | box-shadow: 0 0 10px rgb(169, 205, 235); 55 | } 56 | 57 | .btn{ 58 | text-decoration: none; 59 | display: inline-block; 60 | font-size: 18px; 61 | font-weight: 500; 62 | background-color: transparent; 63 | border: 1px solid white; 64 | color: #fff; 65 | padding: 10px 30px; 66 | border-radius: 30px; 67 | margin: 30px 0 10px; 68 | } 69 | 70 | .btn:hover{ 71 | cursor: pointer; 72 | background-color: white; 73 | font-weight: medium; 74 | box-shadow: 0 0 10px rgb(169, 205, 235); 75 | color: #137570; 76 | } -------------------------------------------------------------------------------- /CSS Animations/Tilting_Profile_Card/vanilla-tilt.js: -------------------------------------------------------------------------------- 1 | var VanillaTilt = (function () { 2 | 'use strict'; 3 | 4 | class VanillaTilt { 5 | constructor(element, settings = {}) { 6 | if (!(element instanceof Node)) { 7 | throw ("Can't initialize VanillaTilt because " + element + " is not a Node."); 8 | } 9 | 10 | this.width = null; 11 | this.height = null; 12 | this.clientWidth = null; 13 | this.clientHeight = null; 14 | this.left = null; 15 | this.top = null; 16 | 17 | // for Gyroscope sampling 18 | this.gammazero = null; 19 | this.betazero = null; 20 | this.lastgammazero = null; 21 | this.lastbetazero = null; 22 | 23 | this.transitionTimeout = null; 24 | this.updateCall = null; 25 | this.event = null; 26 | 27 | this.updateBind = this.update.bind(this); 28 | this.resetBind = this.reset.bind(this); 29 | 30 | this.element = element; 31 | this.settings = this.extendSettings(settings); 32 | 33 | this.reverse = this.settings.reverse ? -1 : 1; 34 | this.glare = VanillaTilt.isSettingTrue(this.settings.glare); 35 | this.glarePrerender = VanillaTilt.isSettingTrue(this.settings["glare-prerender"]); 36 | this.fullPageListening = VanillaTilt.isSettingTrue(this.settings["full-page-listening"]); 37 | this.gyroscope = VanillaTilt.isSettingTrue(this.settings.gyroscope); 38 | this.gyroscopeSamples = this.settings.gyroscopeSamples; 39 | 40 | this.elementListener = this.getElementListener(); 41 | 42 | if (this.glare) { 43 | this.prepareGlare(); 44 | } 45 | 46 | if (this.fullPageListening) { 47 | this.updateClientSize(); 48 | } 49 | 50 | this.addEventListeners(); 51 | this.reset(); 52 | this.updateInitialPosition(); 53 | } 54 | 55 | static isSettingTrue(setting) { 56 | return setting === "" || setting === true || setting === 1; 57 | } 58 | 59 | /** 60 | * Method returns element what will be listen mouse events 61 | * @return {Node} 62 | */ 63 | getElementListener() { 64 | if (this.fullPageListening) { 65 | return window.document; 66 | } 67 | 68 | if (typeof this.settings["mouse-event-element"] === "string") { 69 | const mouseEventElement = document.querySelector(this.settings["mouse-event-element"]); 70 | 71 | if (mouseEventElement) { 72 | return mouseEventElement; 73 | } 74 | } 75 | 76 | if (this.settings["mouse-event-element"] instanceof Node) { 77 | return this.settings["mouse-event-element"]; 78 | } 79 | 80 | return this.element; 81 | } 82 | 83 | /** 84 | * Method set listen methods for this.elementListener 85 | * @return {Node} 86 | */ 87 | addEventListeners() { 88 | this.onMouseEnterBind = this.onMouseEnter.bind(this); 89 | this.onMouseMoveBind = this.onMouseMove.bind(this); 90 | this.onMouseLeaveBind = this.onMouseLeave.bind(this); 91 | this.onWindowResizeBind = this.onWindowResize.bind(this); 92 | this.onDeviceOrientationBind = this.onDeviceOrientation.bind(this); 93 | 94 | this.elementListener.addEventListener("mouseenter", this.onMouseEnterBind); 95 | this.elementListener.addEventListener("mouseleave", this.onMouseLeaveBind); 96 | this.elementListener.addEventListener("mousemove", this.onMouseMoveBind); 97 | 98 | if (this.glare || this.fullPageListening) { 99 | window.addEventListener("resize", this.onWindowResizeBind); 100 | } 101 | 102 | if (this.gyroscope) { 103 | window.addEventListener("deviceorientation", this.onDeviceOrientationBind); 104 | } 105 | } 106 | 107 | /** 108 | * Method remove event listeners from current this.elementListener 109 | */ 110 | removeEventListeners() { 111 | this.elementListener.removeEventListener("mouseenter", this.onMouseEnterBind); 112 | this.elementListener.removeEventListener("mouseleave", this.onMouseLeaveBind); 113 | this.elementListener.removeEventListener("mousemove", this.onMouseMoveBind); 114 | 115 | if (this.gyroscope) { 116 | window.removeEventListener("deviceorientation", this.onDeviceOrientationBind); 117 | } 118 | 119 | if (this.glare || this.fullPageListening) { 120 | window.removeEventListener("resize", this.onWindowResizeBind); 121 | } 122 | } 123 | 124 | destroy() { 125 | clearTimeout(this.transitionTimeout); 126 | if (this.updateCall !== null) { 127 | cancelAnimationFrame(this.updateCall); 128 | } 129 | 130 | this.reset(); 131 | 132 | this.removeEventListeners(); 133 | this.element.vanillaTilt = null; 134 | delete this.element.vanillaTilt; 135 | 136 | this.element = null; 137 | } 138 | 139 | onDeviceOrientation(event) { 140 | if (event.gamma === null || event.beta === null) { 141 | return; 142 | } 143 | 144 | this.updateElementPosition(); 145 | 146 | if (this.gyroscopeSamples > 0) { 147 | this.lastgammazero = this.gammazero; 148 | this.lastbetazero = this.betazero; 149 | 150 | if (this.gammazero === null) { 151 | this.gammazero = event.gamma; 152 | this.betazero = event.beta; 153 | } else { 154 | this.gammazero = (event.gamma + this.lastgammazero) / 2; 155 | this.betazero = (event.beta + this.lastbetazero) / 2; 156 | } 157 | 158 | this.gyroscopeSamples -= 1; 159 | } 160 | 161 | const totalAngleX = this.settings.gyroscopeMaxAngleX - this.settings.gyroscopeMinAngleX; 162 | const totalAngleY = this.settings.gyroscopeMaxAngleY - this.settings.gyroscopeMinAngleY; 163 | 164 | const degreesPerPixelX = totalAngleX / this.width; 165 | const degreesPerPixelY = totalAngleY / this.height; 166 | 167 | const angleX = event.gamma - (this.settings.gyroscopeMinAngleX + this.gammazero); 168 | const angleY = event.beta - (this.settings.gyroscopeMinAngleY + this.betazero); 169 | 170 | const posX = angleX / degreesPerPixelX; 171 | const posY = angleY / degreesPerPixelY; 172 | 173 | if (this.updateCall !== null) { 174 | cancelAnimationFrame(this.updateCall); 175 | } 176 | 177 | this.event = { 178 | clientX: posX + this.left, 179 | clientY: posY + this.top, 180 | }; 181 | 182 | this.updateCall = requestAnimationFrame(this.updateBind); 183 | } 184 | 185 | onMouseEnter() { 186 | this.updateElementPosition(); 187 | this.element.style.willChange = "transform"; 188 | this.setTransition(); 189 | } 190 | 191 | onMouseMove(event) { 192 | if (this.updateCall !== null) { 193 | cancelAnimationFrame(this.updateCall); 194 | } 195 | 196 | this.event = event; 197 | this.updateCall = requestAnimationFrame(this.updateBind); 198 | } 199 | 200 | onMouseLeave() { 201 | this.setTransition(); 202 | 203 | if (this.settings.reset) { 204 | requestAnimationFrame(this.resetBind); 205 | } 206 | } 207 | 208 | reset() { 209 | this.event = { 210 | clientX: this.left + this.width / 2, 211 | clientY: this.top + this.height / 2 212 | }; 213 | 214 | if (this.element && this.element.style) { 215 | this.element.style.transform = `perspective(${this.settings.perspective}px) ` + 216 | `rotateX(0deg) ` + 217 | `rotateY(0deg) ` + 218 | `scale3d(1, 1, 1)`; 219 | } 220 | 221 | this.resetGlare(); 222 | } 223 | 224 | resetGlare() { 225 | if (this.glare) { 226 | this.glareElement.style.transform = "rotate(180deg) translate(-50%, -50%)"; 227 | this.glareElement.style.opacity = "0"; 228 | } 229 | } 230 | 231 | updateInitialPosition() { 232 | if (this.settings.startX === 0 && this.settings.startY === 0) { 233 | return; 234 | } 235 | 236 | this.onMouseEnter(); 237 | 238 | if (this.fullPageListening) { 239 | this.event = { 240 | clientX: (this.settings.startX + this.settings.max) / (2 * this.settings.max) * this.clientWidth, 241 | clientY: (this.settings.startY + this.settings.max) / (2 * this.settings.max) * this.clientHeight 242 | }; 243 | } else { 244 | this.event = { 245 | clientX: this.left + ((this.settings.startX + this.settings.max) / (2 * this.settings.max) * this.width), 246 | clientY: this.top + ((this.settings.startY + this.settings.max) / (2 * this.settings.max) * this.height) 247 | }; 248 | } 249 | 250 | 251 | let backupScale = this.settings.scale; 252 | this.settings.scale = 1; 253 | this.update(); 254 | this.settings.scale = backupScale; 255 | this.resetGlare(); 256 | } 257 | 258 | getValues() { 259 | let x, y; 260 | 261 | if (this.fullPageListening) { 262 | x = this.event.clientX / this.clientWidth; 263 | y = this.event.clientY / this.clientHeight; 264 | } else { 265 | x = (this.event.clientX - this.left) / this.width; 266 | y = (this.event.clientY - this.top) / this.height; 267 | } 268 | 269 | x = Math.min(Math.max(x, 0), 1); 270 | y = Math.min(Math.max(y, 0), 1); 271 | 272 | let tiltX = (this.reverse * (this.settings.max - x * this.settings.max * 2)).toFixed(2); 273 | let tiltY = (this.reverse * (y * this.settings.max * 2 - this.settings.max)).toFixed(2); 274 | let angle = Math.atan2(this.event.clientX - (this.left + this.width / 2), -(this.event.clientY - (this.top + this.height / 2))) * (180 / Math.PI); 275 | 276 | return { 277 | tiltX: tiltX, 278 | tiltY: tiltY, 279 | percentageX: x * 100, 280 | percentageY: y * 100, 281 | angle: angle 282 | }; 283 | } 284 | 285 | updateElementPosition() { 286 | let rect = this.element.getBoundingClientRect(); 287 | 288 | this.width = this.element.offsetWidth; 289 | this.height = this.element.offsetHeight; 290 | this.left = rect.left; 291 | this.top = rect.top; 292 | } 293 | 294 | update() { 295 | let values = this.getValues(); 296 | 297 | this.element.style.transform = "perspective(" + this.settings.perspective + "px) " + 298 | "rotateX(" + (this.settings.axis === "x" ? 0 : values.tiltY) + "deg) " + 299 | "rotateY(" + (this.settings.axis === "y" ? 0 : values.tiltX) + "deg) " + 300 | "scale3d(" + this.settings.scale + ", " + this.settings.scale + ", " + this.settings.scale + ")"; 301 | 302 | if (this.glare) { 303 | this.glareElement.style.transform = `rotate(${values.angle}deg) translate(-50%, -50%)`; 304 | this.glareElement.style.opacity = `${values.percentageY * this.settings["max-glare"] / 100}`; 305 | } 306 | 307 | this.element.dispatchEvent(new CustomEvent("tiltChange", { 308 | "detail": values 309 | })); 310 | 311 | this.updateCall = null; 312 | } 313 | 314 | /** 315 | * Appends the glare element (if glarePrerender equals false) 316 | * and sets the default style 317 | */ 318 | prepareGlare() { 319 | // If option pre-render is enabled we assume all html/css is present for an optimal glare effect. 320 | if (!this.glarePrerender) { 321 | // Create glare element 322 | const jsTiltGlare = document.createElement("div"); 323 | jsTiltGlare.classList.add("js-tilt-glare"); 324 | 325 | const jsTiltGlareInner = document.createElement("div"); 326 | jsTiltGlareInner.classList.add("js-tilt-glare-inner"); 327 | 328 | jsTiltGlare.appendChild(jsTiltGlareInner); 329 | this.element.appendChild(jsTiltGlare); 330 | } 331 | 332 | this.glareElementWrapper = this.element.querySelector(".js-tilt-glare"); 333 | this.glareElement = this.element.querySelector(".js-tilt-glare-inner"); 334 | 335 | if (this.glarePrerender) { 336 | return; 337 | } 338 | 339 | Object.assign(this.glareElementWrapper.style, { 340 | "position": "absolute", 341 | "top": "0", 342 | "left": "0", 343 | "width": "100%", 344 | "height": "100%", 345 | "overflow": "hidden", 346 | "pointer-events": "none" 347 | }); 348 | 349 | Object.assign(this.glareElement.style, { 350 | "position": "absolute", 351 | "top": "50%", 352 | "left": "50%", 353 | "pointer-events": "none", 354 | "background-image": `linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)`, 355 | "transform": "rotate(180deg) translate(-50%, -50%)", 356 | "transform-origin": "0% 0%", 357 | "opacity": "0", 358 | }); 359 | 360 | this.updateGlareSize(); 361 | } 362 | 363 | updateGlareSize() { 364 | if (this.glare) { 365 | const glareSize = (this.element.offsetWidth > this.element.offsetHeight ? this.element.offsetWidth : this.element.offsetHeight) * 2; 366 | 367 | Object.assign(this.glareElement.style, { 368 | "width": `${glareSize}px`, 369 | "height": `${glareSize}px`, 370 | }); 371 | } 372 | } 373 | 374 | updateClientSize() { 375 | this.clientWidth = window.innerWidth 376 | || document.documentElement.clientWidth 377 | || document.body.clientWidth; 378 | 379 | this.clientHeight = window.innerHeight 380 | || document.documentElement.clientHeight 381 | || document.body.clientHeight; 382 | } 383 | 384 | onWindowResize() { 385 | this.updateGlareSize(); 386 | this.updateClientSize(); 387 | } 388 | 389 | setTransition() { 390 | clearTimeout(this.transitionTimeout); 391 | this.element.style.transition = this.settings.speed + "ms " + this.settings.easing; 392 | if (this.glare) this.glareElement.style.transition = `opacity ${this.settings.speed}ms ${this.settings.easing}`; 393 | 394 | this.transitionTimeout = setTimeout(() => { 395 | this.element.style.transition = ""; 396 | if (this.glare) { 397 | this.glareElement.style.transition = ""; 398 | } 399 | }, this.settings.speed); 400 | 401 | } 402 | 403 | /** 404 | * Method return patched settings of instance 405 | * @param {boolean} settings.reverse - reverse the tilt direction 406 | * @param {number} settings.max - max tilt rotation (degrees) 407 | * @param {startX} settings.startX - the starting tilt on the X axis, in degrees. Default: 0 408 | * @param {startY} settings.startY - the starting tilt on the Y axis, in degrees. Default: 0 409 | * @param {number} settings.perspective - Transform perspective, the lower the more extreme the tilt gets 410 | * @param {string} settings.easing - Easing on enter/exit 411 | * @param {number} settings.scale - 2 = 200%, 1.5 = 150%, etc.. 412 | * @param {number} settings.speed - Speed of the enter/exit transition 413 | * @param {boolean} settings.transition - Set a transition on enter/exit 414 | * @param {string|null} settings.axis - What axis should be disabled. Can be X or Y 415 | * @param {boolean} settings.glare - What axis should be disabled. Can be X or Y 416 | * @param {number} settings.max-glare - the maximum "glare" opacity (1 = 100%, 0.5 = 50%) 417 | * @param {boolean} settings.glare-prerender - false = VanillaTilt creates the glare elements for you, otherwise 418 | * @param {boolean} settings.full-page-listening - If true, parallax effect will listen to mouse move events on the whole document, not only the selected element 419 | * @param {string|object} settings.mouse-event-element - String selector or link to HTML-element what will be listen mouse events 420 | * @param {boolean} settings.reset - false = If the tilt effect has to be reset on exit 421 | * @param {gyroscope} settings.gyroscope - Enable tilting by deviceorientation events 422 | * @param {gyroscopeSensitivity} settings.gyroscopeSensitivity - Between 0 and 1 - The angle at which max tilt position is reached. 1 = 90deg, 0.5 = 45deg, etc.. 423 | * @param {gyroscopeSamples} settings.gyroscopeSamples - How many gyroscope moves to decide the starting position. 424 | */ 425 | extendSettings(settings) { 426 | let defaultSettings = { 427 | reverse: false, 428 | max: 15, 429 | startX: 0, 430 | startY: 0, 431 | perspective: 1000, 432 | easing: "cubic-bezier(.03,.98,.52,.99)", 433 | scale: 1, 434 | speed: 300, 435 | transition: true, 436 | axis: null, 437 | glare: false, 438 | "max-glare": 1, 439 | "glare-prerender": false, 440 | "full-page-listening": false, 441 | "mouse-event-element": null, 442 | reset: true, 443 | gyroscope: true, 444 | gyroscopeMinAngleX: -45, 445 | gyroscopeMaxAngleX: 45, 446 | gyroscopeMinAngleY: -45, 447 | gyroscopeMaxAngleY: 45, 448 | gyroscopeSamples: 10 449 | }; 450 | 451 | let newSettings = {}; 452 | for (var property in defaultSettings) { 453 | if (property in settings) { 454 | newSettings[property] = settings[property]; 455 | } else if (this.element.hasAttribute("data-tilt-" + property)) { 456 | let attribute = this.element.getAttribute("data-tilt-" + property); 457 | try { 458 | newSettings[property] = JSON.parse(attribute); 459 | } catch (e) { 460 | newSettings[property] = attribute; 461 | } 462 | 463 | } else { 464 | newSettings[property] = defaultSettings[property]; 465 | } 466 | } 467 | 468 | return newSettings; 469 | } 470 | 471 | static init(elements, settings) { 472 | if (elements instanceof Node) { 473 | elements = [elements]; 474 | } 475 | 476 | if (elements instanceof NodeList) { 477 | elements = [].slice.call(elements); 478 | } 479 | 480 | if (!(elements instanceof Array)) { 481 | return; 482 | } 483 | 484 | elements.forEach((element) => { 485 | if (!("vanillaTilt" in element)) { 486 | element.vanillaTilt = new VanillaTilt(element, settings); 487 | } 488 | }); 489 | } 490 | } 491 | 492 | if (typeof document !== "undefined") { 493 | /* expose the class to window */ 494 | window.VanillaTilt = VanillaTilt; 495 | 496 | /** 497 | * Auto load 498 | */ 499 | VanillaTilt.init(document.querySelectorAll("[data-tilt]")); 500 | } 501 | 502 | return VanillaTilt; 503 | 504 | }()); -------------------------------------------------------------------------------- /CSS Animations/anim8css/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Anim8 CSS 9 | 10 | 11 |
12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 |
34 |
35 | 36 | 37 | -------------------------------------------------------------------------------- /CSS Animations/anim8css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | section { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | min-height: 100vh; 12 | background: #042104; 13 | animation: animateBg 10s linear infinite; 14 | } 15 | @keyframes animateBg { 16 | 0% { 17 | filter: hue-rotate(0deg); 18 | } 19 | 100% { 20 | filter: hue-rotate(360deg); 21 | } 22 | } 23 | 24 | section .loader { 25 | position: relative; 26 | width: 120px; 27 | height: 120px; 28 | } 29 | 30 | section .loader span { 31 | position: absolute; 32 | top: 0; 33 | left: 0; 34 | width: 100%; 35 | height: 100%; 36 | transform: rotate(calc(18deg * var(--i))); 37 | } 38 | 39 | section .loader span::before { 40 | content: ''; 41 | position: absolute; 42 | top: 0; 43 | left: 0; 44 | width: 15px; 45 | height: 15px; 46 | border-radius: 50%; 47 | background: #00ff0a; 48 | box-shadow: 0 0 10px #00ff0a, 0 0 20px #00ff0a, 0 0 40px #00ff0a, 0 0 60px #00ff0a, 49 | 0 0 80px #00ff0a, 0 0 100px #00ff0a; 50 | animation: animate 2s linear infinite; 51 | animation-delay: calc(0.1s * var(--i)); 52 | } 53 | @keyframes animate { 54 | 0% { 55 | transform: scale(1); 56 | } 57 | 80%, 58 | 100% { 59 | transform: scale(0); 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /CSS Animations/animation1.css: -------------------------------------------------------------------------------- 1 | div { 2 | /* animation properties */ 3 | animation-name: my-animation; 4 | animation-duration: 2s; 5 | animation-direction: alternate; 6 | animation-iteration-count: infinite; 7 | animation-timing-function: linear; 8 | 9 | /* other properties */ 10 | width: 300px; 11 | height: 100px; 12 | border-radius: 10px; 13 | position: absolute; 14 | left: 0; 15 | right: 0; 16 | margin-left: auto; 17 | margin-right: auto; 18 | 19 | } 20 | 21 | @keyframes my-animation { 22 | from { 23 | background-color: #ff7a59; 24 | width: 300px; 25 | top: 10px; 26 | } 27 | to { 28 | background-color: #33475b; 29 | width: 50px; 30 | top: 100px; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /CSS Animations/clock.js: -------------------------------------------------------------------------------- 1 | window.onload = function() { 2 | 3 | const hourHand = document.querySelector('.hourHand'); 4 | const minuteHand = document.querySelector('.minuteHand'); 5 | const secondHand = document.querySelector('.secondHand'); 6 | const time = document.querySelector('.time'); 7 | const clock = document.querySelector('.clock'); 8 | const audio = document.querySelector('.audio'); 9 | 10 | function setDate(){ 11 | const today = new Date(); 12 | 13 | const second = today.getSeconds(); 14 | const secondDeg = ((second / 60) * 360) + 360; 15 | secondHand.style.transform = `rotate(${secondDeg}deg)`; 16 | 17 | audio.play(); 18 | 19 | const minute = today.getMinutes(); 20 | const minuteDeg = ((minute / 60) * 360); 21 | minuteHand.style.transform = `rotate(${minuteDeg}deg)`; 22 | 23 | const hour = today.getHours(); 24 | const hourDeg = ((hour / 12 ) * 360 ); 25 | hourHand.style.transform = `rotate(${hourDeg}deg)`; 26 | 27 | time.innerHTML = '' + '' + hour + '' + ' : ' + minute + ' : ' + '' + second +''+ ''; 28 | 29 | } 30 | 31 | setInterval(setDate, 1000); 32 | 33 | } -------------------------------------------------------------------------------- /CSS Animations/flower/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | 26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 | 40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /CSS Animations/flower/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::after, 3 | *::before{ 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | :root{ 10 | --color-bg: linear-gradient(to top,#010329,#000005); 11 | --color-glass:linear-gradient(to left,#142544,#1a9092); 12 | --color-water:linear-gradient(to left,#142544,#1b6d6e); 13 | } 14 | 15 | body{ 16 | background-image:var(--color-bg); 17 | min-height: 100vh; 18 | display: flex; 19 | justify-content: center; 20 | align-items:flex-end; 21 | overflow: hidden; 22 | } 23 | 24 | .flower{ 25 | position: relative; 26 | } 27 | 28 | .flower__glass{ 29 | width:20vmin; 30 | height: 30vmin; 31 | background-image: var(--color-glass); 32 | clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%); 33 | opacity: .8; 34 | position: relative; 35 | } 36 | 37 | .flower__glass::after{ 38 | content: ''; 39 | position: absolute; 40 | bottom: 0; 41 | left: 0; 42 | background-color: #182843; 43 | width: 100%; 44 | height: 2vmin; 45 | } 46 | 47 | .flower__glass::before{ 48 | content: ''; 49 | position: absolute; 50 | bottom: 0; 51 | left: 0; 52 | background-image: var(--color-water); 53 | width: 100%; 54 | height: 15vmin; 55 | } 56 | 57 | .f-wrapper{ 58 | position: absolute; 59 | left: 45%; 60 | bottom: 2vmin; 61 | } 62 | 63 | .f-wrapper--2{ 64 | left: 50%; 65 | bottom: 5%; 66 | transform-origin: 10% left; 67 | transform: rotate(20deg); 68 | } 69 | 70 | .f-wrapper--3{ 71 | left: 30%; 72 | bottom: 5%; 73 | transform-origin: 10% left; 74 | transform: rotate(-10deg); 75 | } 76 | 77 | .f-wrapper--3 .flower__line{ 78 | height: 45vmin; 79 | position: relative; 80 | } 81 | 82 | .f-wrapper--3 .flower__line::after{ 83 | content: ''; 84 | position: absolute; 85 | left:0; 86 | top: 0; 87 | width: 6vmin; 88 | height: 6vmin; 89 | transform: translate(-69%,-30%) rotate(-5deg); 90 | border-radius:10vmin 10vmin 0 0; 91 | border: 2vmin solid #104d4e; 92 | border-bottom: transparent; 93 | border-left: transparent; 94 | } 95 | 96 | .f-wrapper--3 .flower__line::before{ 97 | content: ''; 98 | position: absolute; 99 | left:-40%; 100 | top: -1%; 101 | width: 6vmin; 102 | height: 2vmin; 103 | transform-origin: right; 104 | transform: translate(-100%,-80%) rotate(-20deg); 105 | background-color: #104d4e; 106 | border-radius: 2vmin; 107 | } 108 | 109 | .f-wrapper--3 .flower__line{ 110 | background-image: linear-gradient(to top,#142544,#104d4e); 111 | } 112 | 113 | 114 | .f-wrapper--2 .flower__line{ 115 | height: 45vmin; 116 | } 117 | 118 | .f-wrapper--2 .f{ 119 | transform: translateX(-50%) rotate(20deg); 120 | } 121 | 122 | .f-wrapper--3 .f{ 123 | transform: translate(-350%,-50%) rotate(-120deg); 124 | } 125 | 126 | .f-wrapper--2 .flower__leaf:not(:first-child){ 127 | width: 3.8vmin; 128 | height: 10vmin; 129 | background-image: linear-gradient(to bottom, #ff43b6 ,#c22887, #1a233a 99%); 130 | } 131 | 132 | .f-wrapper--3 .flower__leaf:not(:first-child){ 133 | width: 3.8vmin; 134 | height: 10vmin; 135 | background-image: linear-gradient(to bottom, #ad2be0 ,#712291, #1a233a 99%); 136 | } 137 | 138 | .f-wrapper--3 .flower__leaf--1{ 139 | width: 8vmin; 140 | height: 10vmin; 141 | bottom: 2vmin; 142 | background-color: #ad2be0; 143 | } 144 | 145 | .f-wrapper--2 .flower__leaf--1{ 146 | width: 8vmin; 147 | height: 10vmin; 148 | bottom: 2vmin; 149 | background-color: #de118b; 150 | } 151 | 152 | .f-wrapper--2 .f .flower__leaf--8{ 153 | width: 10vmin; 154 | height: 9vmin; 155 | bottom: 3vmin; 156 | left: -30%; 157 | transform: rotate(-50deg); 158 | background-image: linear-gradient(to left bottom, #ff43b6 ,#4d1337);; 159 | } 160 | 161 | .f-wrapper--3 .f .flower__leaf--8{ 162 | width: 10vmin; 163 | height: 9vmin; 164 | left: -10% !important; 165 | background-image: linear-gradient(to left bottom, #ad2be0 ,#712291);; 166 | } 167 | 168 | .flower__line{ 169 | width: 2vmin; 170 | height: 56vmin; 171 | background-image: linear-gradient(to left top,#82fdff 20%,#142544,#104d4e); 172 | border-radius: 4vmin; 173 | } 174 | 175 | .f{ 176 | position: absolute; 177 | top: 1vmin; 178 | left: 50%; 179 | transform: translateX(-50%) rotate(-10deg); 180 | width: 2vmin; 181 | height: 2vmin; 182 | } 183 | 184 | 185 | .flower__leaf{ 186 | position: absolute; 187 | left: 50%; 188 | bottom: 2vmin; 189 | transform: translateX(-50%); 190 | width: 5vmin; 191 | height: 14vmin; 192 | background-image: linear-gradient(to bottom, #b72b04 ,#fa7373, #1a233a 99%); 193 | 194 | clip-path: ellipse(50% 50% at 50% 50%); 195 | transform-origin: center bottom; 196 | animation: open-flower 2s 1s backwards; 197 | } 198 | 199 | .flower__leaf--1{ 200 | width: 10vmin; 201 | height: 12vmin; 202 | bottom: 3vmin; 203 | border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%; 204 | background-color: #e24f5f; 205 | background-image: none; 206 | animation: open-flowe--middle 1.4s 1s backwards; 207 | } 208 | 209 | .flower__leaf--2{ 210 | transform: translateX(-50%) rotate(-30deg); 211 | } 212 | .flower__leaf--3{ 213 | transform: translateX(-50%) rotate(-50deg); 214 | } 215 | .flower__leaf--4{ 216 | transform: translateX(-50%) rotate(-70deg); 217 | } 218 | 219 | .flower__leaf--5{ 220 | transform: translateX(-50%) rotate(30deg); 221 | } 222 | 223 | .flower__leaf--6{ 224 | transform: translateX(-50%) rotate(50deg); 225 | } 226 | 227 | .flower__leaf--7{ 228 | transform: translateX(-50%) rotate(70deg); 229 | } 230 | 231 | .flower__leaf--8{ 232 | width: 13vmin; 233 | height: 11vmin; 234 | bottom: 6vmin; 235 | left: -30%; 236 | border-radius: none; 237 | clip-path: none; 238 | border-radius: 10vmin 2vmin 10vmin 2vmin; 239 | transform: rotate(-55deg); 240 | background-image: linear-gradient(to left bottom, #ffa085 ,#eb8b8b,#492f2f 98%); 241 | } 242 | 243 | .flower__fall-down--yellow{ 244 | animation: flower-fall-down-yellow 8s 1.2s linear forwards; 245 | } 246 | 247 | .flower__fall-down--pink{ 248 | animation: flower-fall-down-pink 5s 1.2s linear forwards; 249 | } 250 | 251 | .flower__fall-down--purple{ 252 | bottom: 4vmin; 253 | animation:flower-fall-down-purple 6s 1.2s linear forwards, flower-falling 6s 7.2s linear infinite; 254 | } 255 | 256 | 257 | @keyframes open-flower{ 258 | 0%{ 259 | transform: translateX(-50%) rotate(0); 260 | } 261 | } 262 | 263 | @keyframes open-flowe--middle { 264 | 0%{ 265 | opacity: 0; 266 | transform: translateX(-50%) scale(0); 267 | } 268 | } 269 | 270 | @keyframes flower-fall-down-pink { 271 | 272 | 0%{ 273 | transform: rotate(-55deg); 274 | } 275 | 276 | 50%{ 277 | transform: rotateX(-100deg); 278 | } 279 | 280 | 100%{ 281 | transform:translate(2vmin,28vmin); 282 | } 283 | 284 | } 285 | 286 | @keyframes flower-fall-down-yellow { 287 | 288 | 0%{ 289 | transform: rotate(-55deg); 290 | } 291 | 292 | 50%{ 293 | bottom: 3vmin; 294 | transform: rotateX(-100deg); 295 | } 296 | 297 | 100%{ 298 | transform:translate(2vmin,70vmin) rotate(150deg); 299 | } 300 | 301 | } 302 | 303 | @keyframes flower-fall-down-purple { 304 | 305 | 0%{ 306 | transform: rotate(-50deg); 307 | } 308 | 309 | 25%{ 310 | bottom: 1vmin ; 311 | transform: rotateX(-100deg); 312 | perspective: 0px; 313 | } 314 | 315 | 50%{ 316 | perspective: 0px; 317 | transform:translate(-30vmin,2vmin) rotate(90deg); 318 | } 319 | 320 | 75%{ 321 | perspective: 0px; 322 | transform:translate(-34vmin,-2vmin); 323 | } 324 | 325 | 100%{ 326 | transform-origin: center; 327 | transform:translate(-34vmin,-2vmin) rotateY(-80deg) rotateX(35deg); 328 | } 329 | 330 | } 331 | 332 | @keyframes flower-falling { 333 | 0%,100%{ 334 | transform-origin: center; 335 | transform:translate(-34vmin,-2vmin) rotateY(-80deg) rotateX(35deg); 336 | } 337 | 338 | 25%{ 339 | transform-origin: center; 340 | transform:translate(-34.4vmin,-2vmin) rotateY(-84deg) rotateX(35deg); 341 | } 342 | 343 | 50%{ 344 | transform-origin: center; 345 | transform:translate(-32vmin,-4.2vmin) rotateY(-80deg) rotateX(35deg); 346 | } 347 | 348 | 75%{ 349 | transform-origin: center; 350 | transform:translate(-36vmin,1.1vmin) rotateY(-80deg) rotateX(35deg); 351 | } 352 | } -------------------------------------------------------------------------------- /CSS Animations/loder.css: -------------------------------------------------------------------------------- 1 | 2 | /* this is a beautiful css loader without no border which will give a professional touch to your weeb projects. */ 3 | 4 | 5 | /* code for html part 6 |
7 | 8 |
9 | */ 10 | 11 | /* code for css */ 12 | 13 | 14 | body { 15 | -webkit-box-sizing: border-box; 16 | box-sizing: border-box; 17 | background-color: #263238; 18 | height: 100vh; 19 | padding: 0; 20 | margin: 0; 21 | font-family: Arial; 22 | } 23 | 24 | .nb-spinner { 25 | width: 75px; 26 | height: 75px; 27 | margin: 0; 28 | background: transparent; 29 | border-top: 4px solid #009688; 30 | border-right: 4px solid transparent; 31 | border-radius: 50%; 32 | -webkit-animation: 1s spin linear infinite; 33 | animation: 1s spin linear infinite; 34 | } 35 | -------------------------------------------------------------------------------- /CSS Animations/parallax scrolling/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Webpage 5 | 6 | 7 | 8 |
9 | 10 | 11 |
  • Home
    • 12 |
  • About
    • 13 |
  • Contact
    • 14 |     15 |
    16 |
    17 | 18 | 19 | 20 |

    SCROLL DOWN

    21 | Explore 22 | 23 | 24 |
    25 |
    26 |

    27 | Parallax Scrolling Effects 28 |

    29 |

    30 | Parallax scrolling is a popular visual effect used in web design, video games, and multimedia applications to create a sense of depth and motion within a 2D environment. It involves dividing the content into different layers, typically a background and a foreground, and moving these layers at different speeds as the user interacts with the content. The background layer typically moves more slowly than the foreground, creating the illusion of depth and dimension. This effect simulates how objects closer to the viewer move faster than distant objects in real life, enhancing the visual experience. Parallax scrolling can be used in various ways, such as in web design to make websites more engaging, in video games to create immersive 2D environments, or in interactive presentations to add visual interest and depth to the content. The intensity of the parallax effect can vary, ranging from subtle depth enhancements to more pronounced, immersive experiences, depending on the specific design goals. 31 |

    32 |
    33 | 42 | 43 | -------------------------------------------------------------------------------- /CSS Animations/parallax scrolling/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap'); 2 | * 3 | { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: 'Poppins' , sans-serif; 8 | scroll-behavior: smooth; 9 | } 10 | 11 | body 12 | { 13 | min-height: 100vh; 14 | background: linear-gradient(#2b1055, #7597de) 15 | 16 | } 17 | header{ 18 | position: absolute; 19 | top: 0; 20 | left: 0; 21 | width: 100%; 22 | padding: 30px 100px; 23 | display: flex; 24 | justify-content: space-between; 25 | align-items: center; 26 | } 27 | 28 | header .logo 29 | { 30 | color:#fff; 31 | font-weight:700 ; 32 | text-decoration: none; 33 | font-size:2em ; 34 | text-transform: uppercase; 35 | letter-spacing: 2px; 36 | } 37 | 38 | header u1 39 | { 40 | display: flex; 41 | justify-content: center; 42 | align-items: center; 43 | } 44 | 45 | header u1 li 46 | { 47 | list-style: none; 48 | margin-left: 20px; 49 | } 50 | 51 | header u1 li a 52 | { 53 | text-decoration: none; 54 | padding: 6px 15px; 55 | color: #fff; 56 | border-radius: 20px; 57 | } 58 | 59 | header u1 li a:hover 60 | { 61 | background:#fff; 62 | color: #2b1055; 63 | 64 | } 65 | 66 | section{ 67 | position: relative; 68 | width: 100%; 69 | height: 100vh; 70 | padding: 100px; 71 | display: flex; 72 | justify-content: center; 73 | align-items: center; 74 | overflow:hidden; 75 | 76 | 77 | } 78 | section::before 79 | { 80 | content: ''; 81 | position: absolute; 82 | bottom: 0; 83 | width: 100%; 84 | height: 100px; 85 | background: linear-gradient(to top, #1c0522, transparent); 86 | } 87 | 88 | section img 89 | { 90 | position: absolute; 91 | top: 0; 92 | left: 0; 93 | width: 100%; 94 | height: 100%; 95 | object-fit: cover; 96 | pointer-events: none; 97 | } 98 | 99 | section img #___ 100 | { 101 | mix-blend-mode: screen; 102 | } 103 | 104 | section img #______ 105 | { 106 | z-index: 10; 107 | } 108 | 109 | #text 110 | { 111 | position: absolute; 112 | right:-350px ; 113 | color: #fff; 114 | white-space: nowrap; 115 | font-size: 7.5vw; 116 | z-index: 9; 117 | 118 | } 119 | 120 | #btn 121 | { 122 | text-decoration: none; 123 | display: inline-block; 124 | padding: 8px 3px; 125 | border-radius: 40px; 126 | background: #fff; 127 | color: #2b1055; 128 | font-size: 1.5em; 129 | z-index: 9; 130 | transform: translateY(100px); 131 | } 132 | .sec 133 | { 134 | position: relative; 135 | padding: 100px; 136 | background: #1c0522; 137 | } 138 | 139 | .sec h2 140 | { 141 | font-size: 3.5em; 142 | margin-bottom: 10px; 143 | color:#fff; 144 | 145 | } 146 | .sec p{ 147 | font-size: 1em; 148 | color: #fff; 149 | } -------------------------------------------------------------------------------- /CSS Animations/smiley/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | eyes move with cursor 7 | 8 | 9 | 10 | 11 | 12 |
    13 |
    14 |
    15 |
    16 |
    17 |
    18 | 19 | 45 | 46 | -------------------------------------------------------------------------------- /CSS Animations/smiley/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin:0; 3 | padding:0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body{ 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | min-height: 100vh; 12 | background: #5d3800; 13 | } 14 | 15 | .face{ 16 | position: relative; 17 | width: 300px; 18 | height: 300px; 19 | border-radius: 50%; 20 | background: #ffcd00; 21 | display: flex; 22 | justify-content: center; 23 | align-items: center; 24 | } 25 | 26 | .face::before{ 27 | content : ''; 28 | position:absolute; 29 | top: 180px; 30 | width: 150px; 31 | height:70px; 32 | background: #b57700; 33 | border-bottom-left-radius: 70px; 34 | border-bottom-right-radius: 70px; 35 | transition :0.5s; 36 | } 37 | 38 | .face:hover::before{ 39 | 40 | top:210px; 41 | width:150px; 42 | height: 20px; 43 | border-bottom-left-radius: 0px; 44 | border-bottom-right-radius: 0px; 45 | 46 | } 47 | 48 | .eyes{ 49 | position: relative; 50 | top:-40px; 51 | display: flex; 52 | } 53 | 54 | .eyes .eye{ 55 | position: relative; 56 | width: 80px; 57 | height: 80px; 58 | display: block; 59 | background:#fff; 60 | margin:0 15px; 61 | border-radius:50%; 62 | 63 | } 64 | 65 | .eyes .eye::before 66 | { 67 | content : ''; 68 | position:absolute; 69 | top:50%; 70 | left:25px; 71 | transform : translate(-50%,-50%); 72 | width:40px; 73 | height: 40px; 74 | background: #333; 75 | border-radius: 50%; 76 | } -------------------------------------------------------------------------------- /CSS Animations/text-animations/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | text-animation 7 | 8 | 9 | 10 |
    11 |

    animated text

    12 |

    animated text

    13 |

    animated text

    14 |

    animated text

    15 |

    animated text

    16 |

    animated text

    17 |

    animated text

    18 |

    animated text

    19 |

    animated text

    20 |

    animated text

    21 |

    animated text

    22 |

    animated text

    23 |
    24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /CSS Animations/text-animations/style.css: -------------------------------------------------------------------------------- 1 | .fade-out { 2 | opacity: 1; 3 | animation: fadeOut 2s forwards; 4 | } 5 | 6 | @keyframes fadeOut { 7 | from { 8 | opacity: 1; 9 | } 10 | to { 11 | opacity: 0; 12 | } 13 | } 14 | 15 | .fade-in { 16 | opacity: 0; 17 | animation: fadeIn 2s ease-in forwards; 18 | } 19 | 20 | @keyframes fadeIn { 21 | from { 22 | opacity: 0; 23 | } 24 | to { 25 | opacity: 1; 26 | } 27 | } 28 | 29 | .slide-in-right { 30 | opacity: 0; 31 | transform: translateX(100%); 32 | animation: slideInRight 1s ease forwards; 33 | } 34 | 35 | @keyframes slideInRight { 36 | from { 37 | opacity: 0; 38 | transform: translateX(100%); 39 | } 40 | to { 41 | opacity: 1; 42 | transform: translateX(0); 43 | } 44 | } 45 | 46 | .slide-in-left { 47 | opacity: 0; 48 | transform: translateX(-100%); 49 | animation: slideInLeft 1s ease forwards; 50 | } 51 | 52 | @keyframes slideInLeft { 53 | from { 54 | opacity: 0; 55 | transform: translateX(-100%); 56 | } 57 | to { 58 | opacity: 1; 59 | transform: translateX(0); 60 | } 61 | } 62 | .pulse { 63 | animation: pulse 2s infinite; 64 | } 65 | 66 | @keyframes pulse { 67 | 0% { 68 | transform: scale(1); 69 | } 70 | 50% { 71 | transform: scale(1.1); 72 | } 73 | 100% { 74 | transform: scale(1); 75 | } 76 | } 77 | 78 | .rotate-scale { 79 | animation: rotateScale 2s ease-in-out infinite; 80 | } 81 | 82 | @keyframes rotateScale { 83 | 0% { 84 | transform: rotate(0deg) scale(1); 85 | } 86 | 50% { 87 | transform: rotate(180deg) scale(1.2); 88 | } 89 | 100% { 90 | transform: rotate(360deg) scale(1); 91 | } 92 | } 93 | 94 | .bounce-in { 95 | opacity: 0; 96 | animation: bounceIn 1s ease forwards; 97 | } 98 | 99 | @keyframes bounceIn { 100 | from { 101 | opacity: 0; 102 | transform: translateY(-500px); 103 | } 104 | to { 105 | opacity: 1; 106 | transform: translateY(0); 107 | } 108 | } 109 | 110 | .color-change { 111 | animation: colorChange 3s alternate infinite; 112 | } 113 | 114 | @keyframes colorChange { 115 | 0% { 116 | color: #ff5733; 117 | } 118 | 100% { 119 | color: #33ff57; 120 | } 121 | } 122 | 123 | .shake { 124 | animation: shake 0.5s ease infinite; 125 | } 126 | 127 | @keyframes shake { 128 | 0% { 129 | transform: translateX(0); 130 | } 131 | 25% { 132 | transform: translateX(-5px); 133 | } 134 | 50% { 135 | transform: translateX(5px); 136 | } 137 | 75% { 138 | transform: translateX(-5px); 139 | } 140 | 100% { 141 | transform: translateX(0); 142 | } 143 | } 144 | 145 | .flip-in { 146 | opacity: 0; 147 | transform: rotateX(-90deg); 148 | animation: flipIn 1s ease forwards; 149 | } 150 | 151 | @keyframes flipIn { 152 | from { 153 | opacity: 0; 154 | transform: rotateX(-90deg); 155 | } 156 | to { 157 | opacity: 1; 158 | transform: rotateX(0); 159 | } 160 | } 161 | 162 | .blink { 163 | animation: blink 1s step-start infinite; 164 | } 165 | 166 | @keyframes blink { 167 | 0%, 168 | 50% { 169 | opacity: 0; 170 | } 171 | 51%, 172 | 100% { 173 | opacity: 1; 174 | } 175 | } 176 | 177 | .tada { 178 | animation: tada 1s ease infinite; 179 | } 180 | 181 | @keyframes tada { 182 | 0% { 183 | transform: scale(1); 184 | opacity: 1; 185 | } 186 | 10%, 20% { 187 | transform: scale(0.9) rotate(-3deg); 188 | } 189 | 30%, 50%, 70%, 90% { 190 | transform: scale(1.1) rotate(3deg); 191 | } 192 | 40%, 60%, 80% { 193 | transform: scale(1.1) rotate(-3deg); 194 | } 195 | 100% { 196 | transform: scale(1) rotate(0); 197 | } 198 | } 199 | 200 | .jello { 201 | animation: jello 1s infinite; 202 | } 203 | 204 | @keyframes jello { 205 | 0% { 206 | transform: scale(1, 1); 207 | } 208 | 15% { 209 | transform: scale(1.3, 1); 210 | } 211 | 30% { 212 | transform: scale(1.3, 1.3); 213 | } 214 | 45% { 215 | transform: scale(1.3, 1.3); 216 | } 217 | 60% { 218 | transform: scale(1.3, 1); 219 | } 220 | 75% { 221 | transform: scale(1.3, 1); 222 | } 223 | 100% { 224 | transform: scale(1, 1); 225 | } 226 | } 227 | -------------------------------------------------------------------------------- /Clock animation/c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/Clock animation/c.png -------------------------------------------------------------------------------- /Clock animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Clock Animation 7 | 8 | 9 | 10 | 11 |
    12 | 13 | -------------------------------------------------------------------------------- /Clock animation/s.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | padding: 0; 4 | background: #262626 ; 5 | } 6 | 7 | .clock{ 8 | position: absolute; 9 | top: 50%; 10 | left: 50%; 11 | transform: translate(-50%,-50%); 12 | width: 200px; 13 | height: 200px; 14 | border: 15px solid #ff5f5f; 15 | border-radius: 50%; 16 | background: url(./c.png); 17 | background-size: cover; 18 | box-shadow: -2px 2px 0 #e23232,inset 0 0 20px rgba(0,0,0,0.5); 19 | } 20 | 21 | .clock:before 22 | { 23 | content: ''; 24 | position: absolute; 25 | top: calc(50% ); 26 | left:50%; 27 | width: 40%; 28 | height: 6px; 29 | background: #262626; 30 | border-radius: 3px; 31 | animation: animate 60s linear infinite; /* Slower animation */ 32 | transform-origin: left; 33 | } 34 | 35 | .clock:after 36 | { 37 | content: ''; 38 | position: absolute; 39 | top: calc(50% ); 40 | left:50%; 41 | width: 30%; 42 | height: 6px; 43 | background: #262626; 44 | border-radius: 3px; 45 | animation: animate 3600s linear infinite; /* 60 minutes */ 46 | transform-origin: left; 47 | } 48 | span 49 | { 50 | display: block; 51 | position: absolute; 52 | top: 50%; 53 | left: 50%; 54 | transform: translate(-50%,-50%); 55 | width: 12px; 56 | height: 12px; /* Slightly larger circles */ 57 | background: #ff5f5f; 58 | border-radius: 50%; 59 | z-index: 1; 60 | } 61 | @keyframes animate 62 | { 63 | 0% 64 | { 65 | transform: rotate(0deg); 66 | } 67 | 100% 68 | { 69 | transform: rotate(360deg); 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /DarkNight/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/DarkNight/2.png -------------------------------------------------------------------------------- /DarkNight/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/DarkNight/3.png -------------------------------------------------------------------------------- /DarkNight/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Lightning Illumination Effect 8 | 9 | 10 |
    11 |
    12 |
    13 | 14 | Image 1 15 |
    16 |
    17 | 18 | 19 | -------------------------------------------------------------------------------- /DarkNight/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | overflow: hidden; 4 | background-image: url('4.png'); 5 | background-size: cover; 6 | background-repeat: no-repeat; 7 | background-attachment: fixed; 8 | background-position: center center; 9 | } 10 | 11 | .night { 12 | width: 100vw; 13 | height: 100vh; 14 | background-color: #000; 15 | position: relative; 16 | } 17 | 18 | .lightning { 19 | width: 100%; 20 | height: 100%; 21 | background-color: #fff; 22 | opacity: 0; 23 | animation: lightningFlash 8s linear infinite; 24 | } 25 | 26 | .image-container { 27 | position: absolute; 28 | top: 0; 29 | left: 0; 30 | width: 100%; 31 | height: 100%; 32 | display: flex; 33 | align-items: center; 34 | justify-content: center; 35 | } 36 | 37 | .image-container img { 38 | width: 200px; 39 | } 40 | 41 | @keyframes lightningFlash { 42 | 0%, 100% { 43 | opacity: 0; 44 | } 45 | 5%, 25%, 45%, 65%, 85% { 46 | opacity: 0.4; 47 | } 48 | 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% { 49 | opacity: 0; 50 | } 51 | } 52 | 53 | -------------------------------------------------------------------------------- /GameChanger/assets/IMG_7564.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/GameChanger/assets/IMG_7564.JPG -------------------------------------------------------------------------------- /GameChanger/assets/IMG_7565.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/GameChanger/assets/IMG_7565.JPG -------------------------------------------------------------------------------- /GameChanger/assets/IMG_7566.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/GameChanger/assets/IMG_7566.JPG -------------------------------------------------------------------------------- /GameChanger/assets/IMG_7567.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/GameChanger/assets/IMG_7567.JPG -------------------------------------------------------------------------------- /GameChanger/assets/IMG_7568.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/GameChanger/assets/IMG_7568.JPG -------------------------------------------------------------------------------- /GameChanger/assets/raybanlogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/GameChanger/assets/raybanlogo.png -------------------------------------------------------------------------------- /GameChanger/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Game Changer 8 | 9 | 10 | 11 | 12 | 13 | 14 |
    15 |
    16 | 17 | 18 | 19 | 20 | 21 | 22 |
    23 |
    24 |
    25 | 31 |
    32 |
    33 |
    34 |

    david chang

    35 |

    Susan ian

    36 |

    Olivia Wilson's

    37 |

    Willy nom

    38 |

    Carl CJ

    39 |
    40 |
    41 |

    gives zero

    42 |

    indifference is

    43 |

    Apathy is

    44 |

    feels

    45 |

    is

    46 |
    47 |
    48 |

    funks.

    49 |

    absolute.

    50 |

    subtle.

    51 |

    exciting.

    52 |

    very cool.

    53 |
    54 | 55 |
    56 | 57 |
    58 |

    Lorem ipsum dolor sit amet.

    59 |
    60 |

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto labore accusamus 61 | quibusdam culpa adipisci! Totam quo dolores animi nisi provident, dolorem architecto 62 | consequuntur cupiditate unde, dolor earum. Temporibus, voluptate saepe tempore repellat 63 | consequuntur dignissimos!

    64 |

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum iste maxime odit est, 65 | debitis nam, quisquam similique impedit sunt dolorem aliquid modi mollitia.

    66 | 67 |
    68 |
    69 |
    70 |
    71 |
    72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /GameChanger/javascript.js: -------------------------------------------------------------------------------- 1 | Shery.imageEffect("#back", {style: 5, config :{ 2 | 3 | a:{value: 1.49, range: [0,30]}, 4 | b:{value: -0.98, range: [-1,1]}, 5 | aspect:{value:1.8822947576656774}, 6 | gooey:{value: true}, 7 | infiniteGooey:{value: true}, 8 | durationOut: {value:1, range:[0.1,5]}, 9 | durationIn: {value:1, range:[0.1,5]}, 10 | displaceAmount:{value:0.5}, 11 | masker: {value:true}, 12 | maskVal:{value:1.33, range:[1,5]}, 13 | scrollType:{value:0}, 14 | geoVertex:{range:[1,64],value:1}, 15 | noEffectGooey:{value:false}, 16 | onMouse:{value:1}, 17 | noise_speed:{value:1.59, range:[0,10]}, 18 | metaball:{value:0.21,range:[0,2]}, 19 | discard_threshold:{value:0.5,range:[0,1]}, 20 | antialias_threshold:{value:0,range:[0,0.1]}, 21 | noise_height:{value:0.47, range:[0,2]}, 22 | noise_scale:{value:12.15, range: [0,100]}, 23 | 24 | }, gooey:true}) 25 | 26 | var elems = document.querySelectorAll(".elem"); 27 | 28 | elems.forEach(function(elem){ 29 | 30 | var h1s = elem.querySelectorAll("h1"); 31 | var index = 0; 32 | 33 | var animating = false; 34 | 35 | document.querySelector("#main") 36 | .addEventListener("click", function(){ 37 | if(!animating){ 38 | animating = true; 39 | gsap.to(h1s[index],{ 40 | top: "-=100%", 41 | ease: Expo.easeInOut, 42 | duration: 1, 43 | onComplete:function(){ 44 | gsap.set(this._targets[0],{top:"100%"}); 45 | animating = false; 46 | }, 47 | }) 48 | index === h1s.length-1 ? (index=0) : index++; 49 | gsap.to(h1s[index],{ 50 | top: "-=100%", 51 | ease: Expo.easeInOut, 52 | duration: 1 53 | }); 54 | } 55 | }); 56 | 57 | }) 58 | 59 | -------------------------------------------------------------------------------- /GameChanger/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: "gilroy"; 6 | } 7 | 8 | html, 9 | body { 10 | width: 100%; 11 | height: 100%; 12 | } 13 | 14 | #main { 15 | width: 100%; 16 | height: 100vh; 17 | /* background-color: black; */ 18 | } 19 | 20 | #back { 21 | width: 100%; 22 | height: 100vh; 23 | } 24 | 25 | #back img { 26 | width: 100%; 27 | height: 100%; 28 | object-fit: cover; 29 | } 30 | 31 | #top { 32 | pointer-events: none; 33 | position: absolute; 34 | top: 0; 35 | left: 0; 36 | width: 100%; 37 | height: 100vh; 38 | /* background-color: #000000; */ 39 | } 40 | 41 | #workingarea { 42 | position: relative; 43 | margin: 0 auto; 44 | width: 80%; 45 | height: 100vh; 46 | max-width: 1920px; 47 | /* border : 1px solid red; */ 48 | } 49 | 50 | #nav { 51 | 52 | display: flex; 53 | justify-content: space-between; 54 | align-items: center; 55 | width: 100%; 56 | padding: 10px 0; 57 | } 58 | 59 | #nav img { 60 | height: 40px; 61 | } 62 | 63 | #nleft, 64 | #nright { 65 | display: flex; 66 | align-items: center; 67 | gap: 60px; 68 | } 69 | 70 | #nav a { 71 | pointer-events: all; 72 | text-decoration: none; 73 | text-transform: uppercase; 74 | font-size: 12px; 75 | 76 | font-weight: 600; 77 | color: #fff; 78 | } 79 | 80 | #hero { 81 | position: absolute; 82 | top: 50%; 83 | left: 0; 84 | transform: translate(0%, -50%); 85 | display: flex; 86 | justify-content: space-between; 87 | width: 100%; 88 | } 89 | 90 | #heroleft { 91 | min-width: 50%; 92 | } 93 | 94 | #heroleft .elem { 95 | position: relative; 96 | height: 9vw; 97 | overflow: hidden; 98 | } 99 | 100 | #heroleft .elem h1:nth-child(1){ 101 | top:0; 102 | } 103 | 104 | #heroleft .elem h1 { 105 | position: absolute; 106 | top:100%; 107 | left:0; 108 | line-height: 0.9; 109 | font-family: "kajiro"; 110 | color: #fff; 111 | font-weight: 100; 112 | font-size: 11vw; 113 | } 114 | 115 | #heroleft button { 116 | pointer-events: all; 117 | padding: 0.8vw 3vw; 118 | font-size: 4vw; 119 | margin-top: 3vw; 120 | font-family: "kajiro"; 121 | } 122 | 123 | #heroright { 124 | display: flex; 125 | flex-direction: column; 126 | align-items: flex-end; 127 | width: 17%; 128 | color: #fff; 129 | } 130 | 131 | #heroright p { 132 | font-size: 14px; 133 | font-weight: 300; 134 | text-align: right; 135 | } 136 | 137 | #heroright #imagediv { 138 | width: 100%; 139 | height: 170px; 140 | margin-top: 20px; 141 | margin-bottom: 30px; 142 | background-image: url(https://images.unsplash.com/photo-1644519797407-df9b4f9782fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MnxOZENFZkhWbjdqNHx8ZW58MHx8fHx8&auto=format&fit=crop&w=500&q=60); 143 | background-size: cover; 144 | background-position: center; 145 | } 146 | 147 | 148 | #heroright p:nth-child(3) { 149 | margin-bottom: 100px; 150 | } 151 | -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/1.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/10.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/10.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/11.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/11.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/12.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/12.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/13.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/13.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/14.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/14.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/17.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/17.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/2.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/200w.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/200w.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/22.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/22.jpg -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/3.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/4.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/4.jpeg -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/5.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/5.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/5.png -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/6.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/6.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/6.png -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/7.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/7.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/8.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/8.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/8.jpeg -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/9.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/9.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/a.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/a.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/bg3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/bg3.jpeg -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/d.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/d.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/e.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/e.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/f.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/f.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/i.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/i.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/q.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/q.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/q.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/q.webp -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/qa.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/qa.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/qw.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/qw.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/r.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/r.png -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/s.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/s.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/smile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/smile.png -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/t.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/t.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/u.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/u.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/u.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/u.jpeg -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/w.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/w.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img/y.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img/y.jpeg -------------------------------------------------------------------------------- /JOKE_GENERATOR/img1/as.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img1/as.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img1/b.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img1/b.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img1/c.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img1/c.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img1/ct.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img1/ct.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img1/n.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img1/n.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img1/v.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img1/v.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img1/x.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img1/x.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img1/z.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img1/z.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img1/za.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img1/za.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img1/zd.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img1/zd.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img1/zf.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img1/zf.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/img1/zs.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/JOKE_GENERATOR/img1/zs.gif -------------------------------------------------------------------------------- /JOKE_GENERATOR/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Document 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
    19 | 20 |
    21 | 22 | 23 | 24 |

    25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /JOKE_GENERATOR/script.js: -------------------------------------------------------------------------------- 1 | var jokes = [ 2 | 3 | "एक लड़का अपनी गर्लफ्रेंड से बोला, तुम्हारी सोच बड़ी होगी तुम कैसे मुझसे प्यार करती हो? उसने जवाब दिया, मैंने सोचा कि तुम्हें एक बार मेरे साथ घूमने के बाद तुम खुद ही समझ जाओगी कि मैं बेवकूफ हूँ।", 4 | "पत्नी: तुम्हारा मुंह इतना काला क्यों है? पति: मुझे बार-बार जहर खिलाने से हो गया है।", 5 | "एक आदमी ने एक दुकान में एक मुर्गी खरीदी और पूछा, बच्चा किस तरह से पैदा करता है? दुकानदार बोला, आप ने मुर्गी खरीदी है या कुछ और? आदमी बोला, नहीं, मुझे एक आदमी चाहिए था जो इसका अंडा बनाता हो।", 6 | "टीचर: अगले हफ्ते आपकी परीक्षा होगी। छात्र: सर, कृपया मुझे पिछले साल की परीक्षा दीजिए। टीचर: क्यों? छात्र: मैंने उस समय उसी टाइम में एक लड़की से प्यार किया था जिस समय परीक्षा थी।" 7 | , "When you finally fix a bug after hours of debugging: 'I am the master of the universe!'", "When you realize you've been coding for 8 hours straight without taking a break: 'I'm not addicted to coding, I can stop anytime I want... after this one last bug fix.'", "When you finish a project and your code works perfectly: 'I have achieved the impossible! I am a coding god!'", "When your code works in testing but breaks in production: 'I guess I'll just have to write another bug fix for my bug fix.'", "When you're working on a project with a tight deadline: 'I don't always code, but when I do, I do it under immense pressure and with limited time.'", "When you finally figure out what's wrong with your code after staring at it for hours: 'I have uncovered the mysteries of the universe!'", "When you see someone else's poorly written code: 'I don't always write perfect code, but when I do, I make sure to judge other people's code.'", "When you accidentally delete a crucial line of code: 'My code! My beautiful code! What have I done?!'", "When you finally get your code to compile after multiple attempts: 'It's not a bug, it's a feature.'", 8 | "When you're trying to explain your code to someone who doesn't understand it: 'It's like trying to explain color to a blind person.'" 9 | , "When you can't stop thinking about that special someone: 'My brain is 90% thoughts of you and 10% thoughts of coding.'", "When you finally find your soulmate: 'I've finally found the missing semicolon in my code.'", "When you're in love and it shows: 'You are the CSS to my HTML.'", "When you're in a long-distance relationship: 'Distance is just a number when you have Git.'", "When you find someone who loves programming as much as you do: 'We can code together forever.'", "When you're coding and your significant other walks in: 'I'm not ignoring you, I'm just in a deep coding trance.'", "When you're so in love you forget to eat: 'I've been coding all day, and all I can think about is you.'", "When you've found the one: 'You're not just my code, you're my compiler.'", "When you're in love with a programmer: 'I'm fluent in C++, but when it comes to you, I'm speechless.'", "When you're in love with a gamer: 'I'm always player two to your player one.'", "When you're in love and your code is finally bug-free: 'Nothing compares to the feeling of love... except maybe a perfectly functioning code.'", "When you're so in love it hurts: 'My heart beats for you like an infinite loop.'", "When you're in love and you just can't hide it: 'My love for you is like an open source project - anyone can see it.'", "When you're in love and you want the whole world to know: 'printf('I love you!')'", "When you're so in love you can't concentrate on coding: 'My love for you is like an infinite recursion - it never ends.'", "When you're in love and it's all you can think about: 'I'd rather be coding with you than coding alone.'", "When you're in love and everything just feels right: 'You complete me like a perfectly executed code.'", "When you're in love and everything just falls into place: 'Our love is like a well-written algorithm - it always produces the right result.'", "When you're in love and it's the best feeling in the world: 'I'd rather debug code with you than live without you.'", 10 | "When you're in love and it's the greatest adventure: 'Life is an adventure, and I want to explore it with you.'" 11 | , "When you've been studying for hours and you still don't understand the material: 'This is why I hate school.'", "When the teacher says 'pop quiz': 'May the odds be ever in your favor.'", "When the teacher assigns a group project: 'Why do we have to work in groups? I hate people.'", "When you get an A on an exam you didn't study for: 'The curve was definitely in my favor.'", "When you're studying and someone asks if you want to hang out: 'I can't, I have to study. But thanks for reminding me of my misery.'", "When you're the first one to finish an exam: 'Either I'm a genius or I missed something important.'", "When you're late to class and the teacher gives you a dirty look: 'I'd rather be sleeping.'", "When you get paired with your crush for a project: 'This is it. This is my chance.'", "When the teacher assigns homework over the weekend: 'I thought weekends were for fun, not for suffering.'", "When you finally finish a group project: 'I did all the work, but at least it's over.'", "When the teacher cancels class: 'Hallelujah! I can finally catch up on my sleep.'", "When you're cramming for an exam and your brain can't take it anymore: 'Error 404: Brain not found.'", "When you're taking a test and the person next to you is breathing too loudly: 'Can you please stop? You're distracting me.'", "When you're trying to stay awake during a boring lecture: 'I'm not sleeping, I'm just resting my eyes.'", "When you're taking a test and you're not sure of the answer: 'Eeny, meeny, miny, moe...'", "When you realize you forgot your homework: 'Well, looks like I'm failing this class.'", "When the teacher says 'I'm not angry, I'm just disappointed': 'I'd rather you be angry.'", "When you finish a presentation and the class claps: 'I'd like to thank my procrastination for making this possible.'", "When you're trying to study but your phone keeps distracting you: 'Why is everything more interesting than studying?'", 12 | "When you realize you have a paper due tomorrow: 'Panic mode activated.'" 13 | 14 | , "Santa: Banta, agar main mar jau toh tum kya karoge? Banta: Main tere qadmon mein jaan de dunga. Santa: Wah, kya dosti hai! Banta: Haan, warna kambakht police itni aasani se mera kya haal karti.", 15 | "Santa: Banta, tu bachpan mein kya banega? Banta: Pehle mein toh doctor banunga. Santa: Fir kya hoga? Banta: Fir mujhe bhi apna kaam chhodna hoga aur doctor ko follow karna hoga.", 16 | "Santa: Banta, tu pichle janam mein kya tha? Banta: Mein truck driver tha. Santa: Toh is janam mein kya hua? Banta: Abhi tak mein steering khinch raha hu.", 17 | "Santa: Banta, tu har cheez mein late kyun aata hai? Banta: Woh mein aapko later batata hu.", 18 | "Santa: Banta, tu kaun sa phone use karta hai? Banta: Nokia ka 1100. Santa: Abhi tak 1100 use karta hai? Tu aur tera phone dono antique pieces ho gaye hai.", 19 | "Santa: Banta, tu khud ko kya samajhta hai? Banta: Mein toh India ka Einstein hun. Santa: Einstein? Matlab tu kya kar leta hai? Banta: Bas, mein bhi unki tarah sar jhuka ke rehta hun.", 20 | "Santa: Banta, agar tu chup rehta toh bahut accha hota. Banta: Tum chup rehne ki practice karo phir mujhe batao.", 21 | "Santa: Banta, tu jab kabhi tatti pe jaata hai toh kya teri kamar nahi dukhti? Banta: Nahi, mere paas accha technique hai. Main table par pair rakh ke jaata hun.", 22 | "Santa: Banta, tu itni badi car kyun khareed ke rakhta hai? Banta: Bhai, main sirf ek gaadi khareedne waala hun. Chhote chhote logon ko koi farak nahi padta.", 23 | "Santa: Banta, tu shakal se toh bahut innocent lagta hai. Banta: Woh toh hai, main innocent hi hun. Santa: Innocent hone ka kya faida hai? Banta: Faayda nahi hai, par mujhe koi shaq nahi karta.", 24 | "Santa: Banta, tu toh apni biwi ko bahut pyar karta hai na? Banta: Haan, bas uska haath pakad ke rakhna hota hai. Kabhi haath chhoot gaya toh phir biwi bacha kya jaye.", 25 | "Santa: Banta, teri biwi bahut chidchidi rehti hai. Banta: Haan yaar, ab toh maine usse apna pura kaam sikhaya hai. Ab woh sirf chidh chidh ke paas baithegi." 26 | , 27 | "Santa: Banta, tu apni biwi ko kaisi izzat deta hai? Banta: Bas yehi kehta hun ki Madam ji aapka order ready hai.", 28 | "Santa: Banta, teri aankhen kitni khoobsurat hai. Banta: Mujhe toh nahi lagta, mein toh chashme waala hun. Santa: Par chashme waale bhi toh khoobsurat hote hai. Banta: Haan, par unki aankhein dikhayi nahi deti.", 29 | "Santa: Banta, tu kitna padha likha hai? Banta: Mein toh graduate hun. Santa: Graduation ka matlab kya hai? Banta: Pata nahi bhai, bas sab log kehte the ki graduation kar lo.", 30 | "Santa: Banta, tu raat ko kya karta hai? Banta: Bas itna hi kehta hun ki Goodnight Siri, Goodnight Google, Goodnight Alexa.", 31 | "Santa: Banta, teri shadi ke baad kya kya change hua? Banta: Bas ek hi change hua ki ab mein apne phone ke wallpaper mein apni biwi ki photo rakhta hun.", 32 | "Santa: Banta, tere ghar mein TV hai? Banta: Haan, ek toh hai. Santa: Toh tu uska use karta hai? Banta: Nahi yaar, woh toh bass chhat ko sambhalne ke kaam aata hai.", 33 | "Santa: Banta, tu aaj kal gym jaata hai? Banta: Haan, woh toh doctor ne mana kiya hai ki khana jyaada khaana band kar diya hai toh wazan kam karne ke liye kuch karna padega.", 34 | "Santa: Banta, tu apne baal kaise rakhta hai? Banta: Main toh aaj-kal wig pehenta hu. Santa: Kyun? Banta: Kyunki unke baal mere baalon se jyaada natural lagte hai.", 35 | "Santa: Banta, tu bahut intelligent hai. Banta: Haan, meri IQ bhi 140 hai. Santa: IQ matlab kya hai? Banta: Pata nahi, par meri biwi kahti hai ki itni intelligent hone ke bawajood bhi mein uske har sawaal ka jawaab nahi de pata.", 36 | "Santa: Banta, teri biwi kaun si cream use karti hai? Banta: Pata nahi yaar, par mere wallet se kuch kaante hamesha kam nahi hote hai." 37 | , 38 | "Pati: Tumhara chehra bilkul solar panel jaisa hai. Pati Patni: Kyun? Pati: Kyunki jab tum mere paas aati ho toh meri life ka energy level badh jaata hai.", 39 | "Pati: Tum mujhse kitna pyaar karti ho? Pati Patni: Jab main tumhe meri zindagi ka hissa kehti hu, toh yeh bilkul sach nahi hai. Tum meri zindagi hi ho.", 40 | "Pati: Kya tumne koi kaam kiya hai aaj? Pati Patni: Haan, maine tumhara chai banaaya hai. Pati: Maine toh kabhi nahi kaha ki tumhe chai banaani chahiye. Pati Patni: Haan, par maine socha ki tum aaj kaam par jaaoge, isliye bana diya.", 41 | "Pati Patni ek dusre se door hote hue bhi baat kar rahe the. Pati: Tumne mere liye kuch khaas kiya hai? Pati Patni: Haan, maine tumhari photo khinch ke Whatsapp status mein lagayi hai.", 42 | "Pati: Tumhari aankhen kitni pyaari hai. Pati Patni: Aaj kal toh bas tumhare paas hi hote hai, isliye.", 43 | "Pati: Main kabhi nahi chahunga ki hum dono ke beech koi problem ho. Pati Patni: Toh phir kya hua? Pati: Kuch nahi, bas yeh sunna tha ki aaj kal tumhaare kharche jyaada ho rahe hai.", 44 | "Pati: Tumhara weight badh gaya hai. Pati Patni: Tum bhi toh theek nahi dikh rahe ho. Pati: Par maine toh kabhi kuch nahi kaha tumhare baare mein. Pati Patni: Haan, par maine kaha hai.", 45 | "Pati Patni ek restaurant mein dinner kar rahe the. Pati: Tumne kya khaya? Pati Patni: Tumhare paise se khaya hai toh bataana padega?", 46 | "Pati: Tumne aaj mere liye kuch banaaya hai? Pati Patni: Haan, ek surprise hai aaj dinner mein. Pati: Kya? Pati Patni: Main khaana order karungi.", 47 | "Pati Patni shopping mall mein hai. Pati: Tum kuch chahiye? Pati Patni: Nahi, bas dekh rahi thi. Pati: Lekin tum toh ab tak yeh bhi nahi dekhi ki kitni lambi line hai billing counter par.", 48 | "Pati Patni ka phone chori ho jaata hai. Pati Patni: Mera phone kahan hai? Pati: Pata nahi, mere paas nahi hai. Pati Patni: Tumne kahi rakh diya hoga. Pati: Nahi yaar, maine toh tumhara phone hi le liya tha." 49 | , "When you spend all night debugging and finally fix the issue:", "When you finally understand that one concept that has been eluding you for weeks:", "When you have a deadline in two hours but your code still won't compile:", "When your code works perfectly in your development environment but breaks in production:", "When you finally finish a project that you've been working on for months:", "When you realize you've been coding for 10 hours straight and forgot to eat:", "When you have to explain your code to someone who isn't a programmer:", "When you're the only one who knows how to fix a bug and everyone keeps bugging you about it:", "When you realize you've been using the wrong variable name the whole time:", "When you finally finish a project and realize you forgot to comment any of your code:", "When you're trying to work but your computer is so slow that you have time to make coffee while it loads:", "When you finally get a good grade on a project that you've been stressing about for weeks:", "When you're trying to learn a new programming language and it feels like you're starting from scratch:", "When you finally get a job offer after months of job searching:", "When your code finally runs without any errors:", "When you realize you've been coding for so long that you forgot what day it is:", "When you're the only one in the group project who actually did any work:", "When you realize you've been using an outdated library this whole time:", "When you finally understand the joke in a programming meme:", 50 | "When someone asks you what you do for a living and you have to explain that you're an engineer:" 51 | , 52 | "Papa beta ek restaurant mein baithe hain, papa kehte hain 'kya khayoge beta?', beta kehta hai 'Jo aapne order kiya hai wahi'.", 53 | "Ek din beta papa ke saath ghumne gaya, papa ne pucha 'beta jaha chaho waha ghum sakte hain', beta bola 'to phir moon par chalte hain'.", 54 | "Papa beta ke padosi se puchte hain 'beta yeh aapki cycle hai?', beta kehta hai 'nahi papa, yeh toh cycle ki tasveer hai'.", 55 | "Papa beta se puchte hain 'beta, ye tumhare mobile mein jo photo hai, ye kiski hai?', beta kehta hai 'papa, ye toh stock photo hai'.", 56 | "Papa beta se puchte hain 'beta, tumhari favourite subject kya hai?', beta kehta hai 'subjectivity papa'.", 57 | "Papa beta ko school chhodne ke liye lekar jaa rahe hain, papa kehte hain 'beta tum kitni der school mein padhte ho?', beta kehta hai 'bas papa, lunch break se pehle'.", 58 | "Ek din beta papa ke saath cricket khelne gaya, papa ne bola 'beta aapko batting ya bowling karna hai?', beta bola 'papa main toh fielding karunga'.", 59 | "Papa beta ko car mein lekar jaa rahe hain, papa kehte hain 'beta seat belt pehno', beta kehta hai 'papa maine toh invisible seat belt pehni hai'.", 60 | "Papa beta se puchte hain 'beta tumhari girlfriend kaisi hai?', beta kehta hai 'papa meri toh coding hi girlfriend hai'.", 61 | "Papa beta ek bike ride par ja rahe hain, papa kehte hain 'beta speed limit ka khayal rakho', beta kehta hai 'papa, maine toh time limit set kar li hai'.", 62 | "Ek din papa beta ko kaafi daant rahe the, beta kehta hai 'papa, aap jaise jaise bura bolte hain, main apni coding skills ko improve kar leta hoon'.", 63 | "Papa beta se puchte hain 'beta, tumhara future plan kya hai?', beta kehta hai 'papa, maine toh apna career kaafi saal pehle hi hack kar liya hai'.", 64 | "Papa beta ek party mein hain, papa kehte hain 'beta dance karoge?', beta kehta hai 'nahi papa, main toh DJ banunga'.", 65 | "Ek din beta papa ko kaafi tang kar raha tha, papa kehte hain 'beta, maine tumhe kaafi daant di hai', beta kehta hai 'papa, woh toh aapka bug tha'.", 66 | "Papa beta se puchte hain 'beta, tumne aaj kya seekha?', beta kehta hai 'papa, maine seekha hai ki zindagi ek endless loop hai'.", 67 | 68 | "Pagal dost se kehte hain 'tumhare paas sabse badi taakat kaunsi hai?', dost kehta hai 'meri pagalpan ki taakat'.", 69 | "Ek din pagal dost ne apni photo khichai, usne bola 'ye photo insta pe daalunga', maine pucha 'kyun?', usne bola 'main khud follow karta hoon'.", 70 | "Pagal dost se puchte hain 'tumhari favourite language kaunsi hai?', dost kehta hai 'pagalpanti meri mother tongue hai'.", 71 | "Ek din main pagal dost ke saath ghumne gaya, usne mujhse kaha 'mere paas tumhari aur meri ticket hai, tumhe apni ticket kahaan hai?', maine kaha 'meri ticket toh tumhare paas hi hai'.", 72 | "Pagal dost kehte hain 'tumhe koi kaam hai?', maine bola 'haan, ek article likhna hai', dost bola 'tu bhi na, saari zindagi likhte hi rahega'.", 73 | "Ek din maine pagal dost ko bola 'chal ek game khelte hain', dost bola 'chalo', maine kaha 'game ka naam hai patience', dost bola 'nahi yaar, mujhe abhi ghar jaana hai'.", 74 | "Pagal dost ko puchte hain 'tu itna kyun udas rehta hai?', dost bola 'duniya itni khubsurat hai, main usse control nahi kar pata'.", 75 | "Ek din maine pagal dost se kaha 'tum itni raat ko kahaan ja rahe ho?', dost bola 'sone'.", 76 | "Pagal dost se puchte hain 'tumhe kya pasand hai?', dost bola 'main pagal hoon, mujhe kuch pasand nahi hai'.", 77 | "Ek din maine pagal dost ko pucha 'tumhare paas kitne followers hai?', dost bola 'followers nahi hai, par coding skills hai'.", 78 | "Pagal dost ko puchte hain 'tumhare paas girlfriend hai?', dost bola 'nahi hai, par meri coding skills hai'.", 79 | "Ek din pagal dost ne apni bike par ride karne ke liye kaha, maine kaha 'par tumhari bike toh break fail hai', dost bola 'oh no, ye toh meri favourite feature hai'.", 80 | "Pagal dost se puchte hain 'tumhari pocket mein kya hai?', dost kehta hai 'meri pagalpan ki bhara hua hai'.", 81 | "Ek din maine pagal dost se kaha 'chal cinema dekhne jaate hain', dost bola 'chal, par tickets toh mere paas nahi hai', maine kaha 'toh kya karoge?', dost bola 'main hero ke role mein apne aap ko imagine kar loonga'.", 82 | "Pagal dost ko puchte hain 'tumhari job kya hai?', dost bola 'mujhe kya pata, main toh pagal hoon'." 83 | ]; 84 | 85 | const jk = document.getElementById("joke"); 86 | const button = document.getElementById("btn"); 87 | 88 | 89 | var gifs=[ 90 | "img/2.gif","img/3.gif","img/4.gif","img/4.jpeg","img/5.gif","img/5.png", 91 | "img/6.gif","img/6.png","img/7.png","img/8.png","img/8.jpeg","img/9.gif", 92 | "img/11.gif","img/14.gif","img/17.gif","img/200w.gif","img/a.gif","img/d.gif" 93 | ,"img/e.gif","img/f.gif","img/i.gif","img/q.gif","img/q.webp","img/qa.gif" 94 | ,"img/qw.gif","img/r.png","img/s.gif","img/t.gif","img/u.gif","img/w.gif" 95 | ,"img/i.gif","img/f.gif","img/d.gif","img/y.jpeg","img/w.gif","img/u.jpeg" 96 | ,"img1/as.gif" ,"img1/b.gif","img1/c.gif","img1/ct.gif","img1/n.gif","img1/n.gif" 97 | ,"img1/v.gif","img1/x.gif","img1/z.gif","img1/za.gif","img1/zd.gif","img1/zf.gif","img1/zs.gif" 98 | ] 99 | const image=document.getElementById("image").src; 100 | 101 | 102 | 103 | 104 | function f() { 105 | let random = Math.floor(Math.random()*jokes.length); 106 | 107 | jk.innerText = jokes[random]; 108 | let no = Math.floor(Math.random()*gifs.length); 109 | 110 | img.src = gifs[no]; 111 | } 112 | 113 | const img = document.createElement('img'); 114 | 115 | 116 | document.body.appendChild(img); 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | -------------------------------------------------------------------------------- /JOKE_GENERATOR/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | 4 | padding: 0; 5 | box-sizing: border-box; 6 | font-size: larger; 7 | /* font-family: 'Times New Roman', Times, serif; */ 8 | font-weight: 700; 9 | color: rgb(0, 0, 0); 10 | text-align: center; 11 | font-family: 'Gajraj One', cursive; 12 | font-family: 'Jost', sans-serif; 13 | 14 | } 15 | body{ 16 | background: url('img/22.jpg') no-repeat ; 17 | 18 | background-size: 100vw auto; 19 | overflow-x: hidden; 20 | position: fixed; 21 | } 22 | #joke{ 23 | color: rgb(0, 0, 0); 24 | text-shadow: 2px 3px 5px #04faf6; 25 | margin: 1vh 8vw; 26 | /* width: 100%; 27 | height: 100vh; 28 | background-color: rgb(141, 251, 255); */ 29 | } 30 | #btn{ 31 | margin-top: 0vh; 32 | /* paddiing: 8px; */ 33 | border-radius: 10px; 34 | /* margin-left:38vw; */ 35 | padding: 1vh 4vw; 36 | 37 | font-family: monospace; 38 | background-color: rgb(222, 148, 148); 39 | color: rgb(19, 32, 209); 40 | transition: 0.5s ease-in-out; 41 | 42 | 43 | } 44 | .smile { 45 | width: 100vw; 46 | 47 | } 48 | #btn:hover{ 49 | box-shadow: 5px 5px 6px #35a292; 50 | transform: scale(1.1) 51 | 52 | } 53 | @media only screen and (max-width: 500px) { 54 | body { 55 | background: url("img/bg3.jpeg") no-repeat ; 56 | backdrop-filter: blur(2px); 57 | background-size: 100vw 100vh ; 58 | } 59 | #joke{ 60 | margin: 0vh 1vw; 61 | } 62 | #btn{ 63 | margin-top: 0vh; 64 | /* margin-left:15vw; */ 65 | } 66 | } 67 | .gif{ 68 | /* background-color: #04faf6; */ 69 | width: 200px; 70 | height: 200px; 71 | /* position:; */ 72 | margin:auto; 73 | 74 | 75 | 76 | } 77 | -------------------------------------------------------------------------------- /Loader/loader.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin:0; 3 | padding:0; 4 | box-sizing:border-box; 5 | } 6 | /* 7 | .container div:nth-child(even){ 8 | background-color:#aaa; 9 | } 10 | .container div:nth-child(odd){ 11 | background-color:#ccc; 12 | }*/ 13 | .container h1{ 14 | width:100%; 15 | height:10vh; 16 | line-height:10vh; 17 | color:#fff; 18 | text-align:center; 19 | background-color:crimson; 20 | } 21 | .box{ 22 | position:relative; 23 | height:45vh; 24 | width:100%; 25 | } 26 | .loader{ 27 | position:absolute; 28 | top:50%; 29 | left:50%; 30 | transform:translate(-50%,-50%); 31 | } 32 | 33 | /* Loader 1*/ 34 | 35 | .load-1{ 36 | width:100px; 37 | height:100px; 38 | background-color:#fff; 39 | border-radius:50%; 40 | border:12px solid #eee; 41 | border-top-color:crimson; 42 | animation:rotate-l1 2s linear infinite; 43 | transform-orign:center center ; 44 | } 45 | /* 46 | @keyframes rotate-l1{ 47 | 0% { 48 | transform: rotate(0); 49 | } 50 | 100%{ 51 | transform: rotate(360deg); 52 | } 53 | } 54 | */ 55 | @keyframes rotate-l1{ 56 | 0% { 57 | transform:translate(-50%,-50%) rotate(0); 58 | } 59 | 100%{ 60 | transform:translate(-50%,-50%) rotate(360deg); 61 | } 62 | } 63 | 64 | /* Loader 2*/ 65 | 66 | .load-2 .bl1,.bl2,.bl3{ 67 | display:inline-block; 68 | height:40px; 69 | width:40px; 70 | border-radius:50%; 71 | animation:blink 1.5s ease-in-out infinite; 72 | transform-orign:0% 50%; 73 | } 74 | .load-2 .bl1{ 75 | background-color:crimson; 76 | animation-delay:0.2s; 77 | } 78 | .load-2 .bl2{ 79 | background-color:blue; 80 | animation-delay:0.4s; 81 | } 82 | .load-2 .bl3{ 83 | background-color:green; 84 | animation-delay:0.6s; 85 | } 86 | @keyframes blink{ 87 | 0%,100%{ 88 | transform:scale(0); 89 | } 90 | 50%{ 91 | transform:scale(1) ; 92 | } 93 | } 94 | 95 | /* Loader 3 */ 96 | 97 | .load-3{ 98 | width:50px; 99 | height:90px; 100 | animation:rotate-l3 2s linear infinite; 101 | transform-orign:center center; 102 | } 103 | .load-3 .b1,.b2{ 104 | height:40px; 105 | width:40px; 106 | border-radius:50%; 107 | margin:0 auto 10px auto; 108 | } 109 | .load-3 .b1{ 110 | background-color:red; 111 | } 112 | .load-3 .b2{ 113 | background-color:hotpink; 114 | } 115 | @keyframes rotate-l3{ 116 | 0% { 117 | transform:translate(-50%,-50%) rotate(0); 118 | } 119 | 100%{ 120 | transform:translate(-50%,-50%) rotate(360deg); 121 | } 122 | } 123 | 124 | /*Loader 4*/ 125 | .load-4{ 126 | height:120px; 127 | width:120px; 128 | display:grid; 129 | 130 | /* grid-template-columns:50px 50px; 131 | grid-template-rows:50px 50px; */ 132 | 133 | grid-template-columns:1fr 1fr; 134 | grid-template-rows:1fr 1fr; 135 | justify-items:space-between; 136 | grid-gap:8px; 137 | animation:rotate-l4 2s linear infinite; 138 | transform-orign:center center; 139 | } 140 | .p1,.p2,.p3,.p4{ 141 | height:50px; 142 | width:50px; 143 | border-radius:50%; 144 | display:inline-block ; 145 | } 146 | .p1{ background-color:hotpink; } 147 | .p2{ background-color:orange; } 148 | .p3{ background-color:red; } 149 | .p4{ background-color:green; } 150 | 151 | @keyframes rotate-l4{ 152 | 0% { 153 | transform:translate(-50%,-50%) rotate(0); 154 | } 155 | 100%{ 156 | transform:translate(-50%,-50%) rotate(360deg); 157 | } 158 | } 159 | 160 | -------------------------------------------------------------------------------- /Loader/loader.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Page Title 5 | 6 | 7 | 8 |
    9 |

    LOADERS

    10 | 11 |
    12 |
    13 |
    14 | 15 |
    16 |
    17 | 18 | 19 | 20 |
    21 |
    22 | 23 |
    24 |
    25 |
    26 |
    27 |
    28 |
    29 | 30 |
    31 |
    32 |
    33 |
    34 |
    35 |
    36 |
    37 |
    38 | 39 |
    40 | 41 | 42 | -------------------------------------------------------------------------------- /PORTFOLIO/bg1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/PORTFOLIO/bg1.png -------------------------------------------------------------------------------- /PORTFOLIO/img/Tesla-clone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/PORTFOLIO/img/Tesla-clone.png -------------------------------------------------------------------------------- /PORTFOLIO/img/calculator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/PORTFOLIO/img/calculator.png -------------------------------------------------------------------------------- /PORTFOLIO/img/chatapp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/PORTFOLIO/img/chatapp.png -------------------------------------------------------------------------------- /PORTFOLIO/img/dateCrush.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/PORTFOLIO/img/dateCrush.png -------------------------------------------------------------------------------- /PORTFOLIO/img/educate girl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/PORTFOLIO/img/educate girl.png -------------------------------------------------------------------------------- /PORTFOLIO/img/img-generator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/PORTFOLIO/img/img-generator.png -------------------------------------------------------------------------------- /PORTFOLIO/img/joke-generator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/PORTFOLIO/img/joke-generator.png -------------------------------------------------------------------------------- /PORTFOLIO/img/konoha-kart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/PORTFOLIO/img/konoha-kart.png -------------------------------------------------------------------------------- /PORTFOLIO/img/landing-page-pet-shop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/PORTFOLIO/img/landing-page-pet-shop.png -------------------------------------------------------------------------------- /PORTFOLIO/img/live-time.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/PORTFOLIO/img/live-time.png -------------------------------------------------------------------------------- /PORTFOLIO/img/login-byphp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/PORTFOLIO/img/login-byphp.png -------------------------------------------------------------------------------- /PORTFOLIO/img/love-calculator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/PORTFOLIO/img/love-calculator.png -------------------------------------------------------------------------------- /PORTFOLIO/img/microsoft-clone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/PORTFOLIO/img/microsoft-clone.png -------------------------------------------------------------------------------- /PORTFOLIO/img/myntra-clone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/PORTFOLIO/img/myntra-clone.png -------------------------------------------------------------------------------- /PORTFOLIO/img/netfrlix clone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/PORTFOLIO/img/netfrlix clone.png -------------------------------------------------------------------------------- /PORTFOLIO/img/obj-move.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/PORTFOLIO/img/obj-move.png -------------------------------------------------------------------------------- /PORTFOLIO/img/proposal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/PORTFOLIO/img/proposal.png -------------------------------------------------------------------------------- /PORTFOLIO/img/robomania-clone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/PORTFOLIO/img/robomania-clone.png -------------------------------------------------------------------------------- /PORTFOLIO/img/rock-paper-scissor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/PORTFOLIO/img/rock-paper-scissor.png -------------------------------------------------------------------------------- /PORTFOLIO/img/sketch-anime.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/PORTFOLIO/img/sketch-anime.png -------------------------------------------------------------------------------- /PORTFOLIO/img/temp-converter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/PORTFOLIO/img/temp-converter.png -------------------------------------------------------------------------------- /PORTFOLIO/img/to-do-app.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/PORTFOLIO/img/to-do-app.png -------------------------------------------------------------------------------- /PORTFOLIO/img/tribute-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/PORTFOLIO/img/tribute-page.png -------------------------------------------------------------------------------- /PORTFOLIO/img/weather-app.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/PORTFOLIO/img/weather-app.png -------------------------------------------------------------------------------- /PORTFOLIO/img1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/PORTFOLIO/img1.png -------------------------------------------------------------------------------- /PORTFOLIO/img2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/PORTFOLIO/img2.png -------------------------------------------------------------------------------- /PORTFOLIO/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | PORTFOLIO WEBSITE 9 | 10 | 11 | 12 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
    23 |
    24 | 27 |
    28 |
  • Home
    • 29 |
  • About
    • 30 |
  • Projects
    • 31 |
  • Services
    • 32 |
  • Contact Me
    • 33 |
    34 | 35 | 36 | 37 | 38 |
    39 |
    40 |
    41 |
    42 |
    45 |

    Hi ,it's Me

    46 |

    I'm Aditya Gaur

    47 | 48 |

    49 | Curious B.Tech Student | Skilled in C++, HTML,CSS and javascript | Learning to Improve Not to Prove 50 |

    51 |
    52 |
    • 53 |
    • 54 |
    • 55 |
    • 56 |
    • 57 |
    58 |
    59 |
    60 |
    61 | 62 | 63 | 64 | 65 |
    66 | 67 |
    68 |
    69 |
    70 |
    71 |
    72 |
    73 |
    74 | image 75 |
    76 |
    77 |

    About Me

    78 |

    An Engineering Enthusiastic Learning to quench the curiosity
    and Exploring different Stuffs of Tech . I enjoy 79 | building, learning Websites and I'm always looking
    for new challenges and opportunities to 80 | grow my skills. 81 | Let's connect and create something great together!

    82 |
    83 | 7408677090
    84 | adgau027@gmail.com 85 |
    86 | 87 |
    88 |
    89 |
    90 |
    91 |
    92 |
    93 |
    94 |
    95 |

    Education

    96 |

    97 | 98 |

    Btech Computer Science & Engineering (Current)

    99 |

    MADAN MOHAN MALAVIYA UNIVERSITY OF TECHNOLOGY ,GORAKHPUR (2022-2026)

    100 |
    101 |
    102 |

    Intermediate School

    103 |

    P.D.ACADEMY SR. SEC. SCHOOL ,DEORIA (PASSING YEAR-2021)

    104 |

    PERCENTAGE - 94.6%

    105 |
    106 |
    107 |

    High School

    108 |

    P.D.ACADEMY SR. SEC. SCHOOL ,DEORIA (PASSING YEAR-2019)

    109 |

    PERCENTAGE - 95.4%

    110 |
    111 |
    112 |
    113 |
    114 |

    TechStack

    115 |
    116 | 144 | 145 |
    146 |
    147 |
    148 |
    149 |

    Services

    150 |
    151 | 152 |
    153 |
    154 |
    155 | 156 |

    Web Development

    157 |

    Have Good Grasp over Development using HTML , CSS & JAVASCRIPT

    158 |
    159 |
    160 | 161 |

    UI/UX

    162 |

    Create a Positive and Attractive User Interface, User Friendly Experience

    163 |
    164 |
    165 | 166 |

    Video Editing

    167 |

    Have Good Grasp over Video Editing on Android using Kinemaster and Capcut

    168 |
    169 |
    170 | 171 |
    172 |
    173 |
    174 |

    Leave Message

    175 |
    176 |
    177 | 178 |
    179 |
    180 |
    181 |
    182 | 183 |
    184 |
    185 |
    186 |
    187 |
    188 | 189 |
    190 |
    191 |
    192 |
      193 |
    • Developer-Aditya Gaur
      • 194 |
    • Call me at- +91 8318881072
      • 195 |
    • Mail me at- adgau027@gmail.com
      • 196 |
    197 |
    198 |
    199 |
    200 | 201 |
    • 202 |
    • 203 |
    • 204 |
    • 205 |
    • 206 |
    207 |
    208 |
    209 |
    210 |

    © 2023 Aditya-All Rights Reserved.

    211 |
    212 |
    213 | 223 | 226 | 227 | 228 | 231 | 232 | 233 | 234 | -------------------------------------------------------------------------------- /PORTFOLIO/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Am10aN16/hacktoberfest2023/7fbde09ba239ddccdaab11fed614737d3b03d2f4/PORTFOLIO/logo2.png -------------------------------------------------------------------------------- /PORTFOLIO/resp.css: -------------------------------------------------------------------------------- 1 | @media(max-width:680px) { 2 | 3 | html { 4 | margin: auto; 5 | width: auto; 6 | } 7 | 8 | body { 9 | overflow-x: hidden; 10 | } 11 | 12 | .logo img { 13 | position: absolute; 14 | z-index: 2; 15 | top: 2vh; 16 | 17 | left: 8vw; 18 | } 19 | 20 | .links { 21 | display: block; 22 | position: relative; 23 | z-index: 10; 24 | top: 9rem; 25 | left: 20%; 26 | /* background-color:#1d252f; */ 27 | height: 15rem; 28 | width: 10rem; 29 | display: none; 30 | } 31 | 32 | .links li { 33 | line-height: 3rem; 34 | } 35 | 36 | #bg { 37 | height: 15vh; 38 | top: 18rem; 39 | } 40 | 41 | @keyframes cyan { 42 | from { 43 | left: 63%; 44 | } 45 | 46 | to { 47 | left: 65%; 48 | } 49 | 50 | } 51 | 52 | .frame img { 53 | height: 25vh; 54 | } 55 | 56 | hr { 57 | margin-left: 9vw; 58 | width: 24rem; 59 | } 60 | 61 | .left { 62 | position: relative; 63 | z-index: 12; 64 | margin-left: 25vw; 65 | } 66 | 67 | .left h3 { 68 | font-size: 17px; 69 | margin-bottom: 1vh; 70 | } 71 | 72 | .left h1 { 73 | font-size: 20px; 74 | margin-bottom: 1vh; 75 | 76 | } 77 | 78 | .left p { 79 | font-size: 9px; 80 | margin-bottom: 1vh; 81 | 82 | } 83 | 84 | #element { 85 | font-size: 25px; 86 | } 87 | 88 | .photo img { 89 | height: 25vh; 90 | } 91 | 92 | .info p { 93 | font-size: 11px; 94 | } 95 | 96 | .icon { 97 | margin-top: 2vh; 98 | } 99 | 100 | .icon i { 101 | font-size: 11px; 102 | } 103 | 104 | .education { 105 | display: block; 106 | 107 | } 108 | 109 | .study { 110 | text-align: center; 111 | width: 100%; 112 | 113 | 114 | } 115 | 116 | .edu h2 { 117 | font-size: 18px; 118 | } 119 | 120 | .edu p { 121 | font-size: 13px; 122 | } 123 | 124 | .tech { 125 | width: 100%; 126 | margin-top: 9rem; 127 | margin-left:3rem; 128 | text-align: center; 129 | 130 | } 131 | .tech ul li{ 132 | margin-left: 18vw; 133 | } 134 | 135 | 136 | .tech h2 { 137 | font-size: 18px; 138 | } 139 | 140 | .bx h2 { 141 | font-size: 15px; 142 | 143 | } 144 | 145 | .bx p { 146 | font-size: 10px; 147 | 148 | } 149 | 150 | .service { 151 | margin-left: 5rem; 152 | } 153 | 154 | .sampark { 155 | width: 86%; 156 | text-align: center; 157 | } 158 | 159 | .sampark input { 160 | width: 10rem; 161 | } 162 | 163 | .sampark textarea { 164 | width: 15rem; 165 | margin-right: -18vw; 166 | } 167 | 168 | #btn { 169 | width: 5rem; 170 | } 171 | 172 | .proj { 173 | display: grid; 174 | grid-template-columns: repeat(1, 1fr); 175 | } 176 | 177 | .cd button { 178 | width: 6rem; 179 | } 180 | .card{ 181 | margin-left: 13vw; 182 | } 183 | 184 | .cd img { 185 | height: 23vh; 186 | } 187 | 188 | #btn-hbg { 189 | display: block; 190 | 191 | } 192 | 193 | 194 | .foot { 195 | margin-left: 15vw; 196 | } 197 | #cnt{ 198 | margin-left: 10vw; 199 | } 200 | .layer{ 201 | width: 50%; 202 | } 203 | 204 | 205 | } 206 | @media (min-width:410px) { 207 | #bg{ 208 | top:24rem; 209 | } 210 | hr{ 211 | width: 30rem; 212 | } 213 | form{ 214 | margin-left: 8rem; 215 | } 216 | .card{ 217 | margin-left:9vw; 218 | } 219 | #about{ 220 | margin-left: 7rem; 221 | } 222 | .base h3{ 223 | margin-left: 5vw; 224 | width: 30rem; 225 | text-align: center; 226 | 227 | } 228 | .education{ 229 | margin-left: 2.5rem; 230 | 231 | } 232 | } 233 | @media (min-width:700px) { 234 | #bg{ 235 | top: 12rem; 236 | 237 | } 238 | hr{ 239 | width: 80rem; 240 | } 241 | .card{ 242 | margin-left: 0; 243 | } 244 | 245 | } -------------------------------------------------------------------------------- /PORTFOLIO/script.js: -------------------------------------------------------------------------------- 1 | var hamburger = document.querySelector('.hide'); 2 | var cross = document.querySelector('.x'); 3 | var bar = document.querySelector('.links'); 4 | let btn1 = document.querySelector('#btn-hbg'); 5 | let btn2 = document.querySelector('#btn-x'); 6 | 7 | let f1 = ()=>{ 8 | bar.style.display="block"; 9 | btn1.style.display="none"; 10 | btn2.style.display="block"; 11 | } 12 | let f2 = ()=>{ 13 | 14 | bar.style.display="none"; 15 | btn1.style.display="block"; 16 | btn2.style.display="none"; 17 | } 18 | 19 | btn1.addEventListener('click',f1); 20 | btn2.addEventListener('click',f2); -------------------------------------------------------------------------------- /PORTFOLIO/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Gajraj+One&family=Jost:wght@800&family=Poppins:ital@1&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | text-decoration: none; 8 | list-style: none; 9 | color: aliceblue; 10 | font-family: 'Dosis', sans-serif; 11 | } 12 | 13 | html { 14 | scroll-behavior: smooth; 15 | } 16 | 17 | body { 18 | background-color: #1d252f; 19 | overflow-x: hidden; 20 | } 21 | 22 | .nav { 23 | width: 100%; 24 | height: 10vh; 25 | display: flex; 26 | justify-content: center; 27 | align-items: center; 28 | position: fixed; 29 | z-index: 2; 30 | top: 0; 31 | /* background-color: rgb(80, 28, 66); */ 32 | 33 | } 34 | 35 | .navbar { 36 | width: 100%; 37 | height: 6vh; 38 | display: flex; 39 | justify-content: space-around; 40 | align-items: center; 41 | /* background-color: rgb(82, 70, 51); */ 42 | } 43 | 44 | .logo { 45 | width: 3vh; 46 | height: 3vh; 47 | /* background-color: rgb(44, 65, 24); */ 48 | } 49 | 50 | .logo img { 51 | width: auto; 52 | height: 5vh; 53 | } 54 | 55 | .links { 56 | display: flex; 57 | width: 40%; 58 | float: right; 59 | justify-content: center; 60 | align-items: center; 61 | font-weight: bold; 62 | margin-top: 2vh; 63 | margin-left: 45vw; 64 | 65 | } 66 | 67 | .links li a { 68 | margin: 1vw; 69 | transition: all .55s; 70 | } 71 | 72 | .links li a:hover { 73 | color: #00E8F8; 74 | 75 | 76 | } 77 | #btn-hbg,#btn-x{ 78 | display: none; 79 | } 80 | 81 | .container { 82 | width: 100%; 83 | height: 99vh; 84 | display: flex; 85 | justify-content: center; 86 | align-items: center; 87 | /* background-color: rgb(29, 51, 70); */ 88 | } 89 | 90 | .box { 91 | width: auto; 92 | height: 60vh; 93 | display: flex; 94 | justify-content: space-around; 95 | align-items: center; 96 | } 97 | 98 | .frame { 99 | margin-top: -5vh; 100 | 101 | } 102 | 103 | .frame img { 104 | width: auto; 105 | height: 25vw; 106 | border-radius: 10px; 107 | } 108 | 109 | hr { 110 | width: 90%; 111 | /* text-align: center; */ 112 | margin: auto; 113 | height: 3px; 114 | border: 0; 115 | background-color: #00E8F8; 116 | 117 | } 118 | 119 | #bg { 120 | width: auto; 121 | height: 45vh; 122 | z-index: -2; 123 | position: absolute; 124 | 125 | left: 55%; 126 | top: 28%; 127 | animation: cyan 3s ease .44s infinite alternate ; 128 | } 129 | /* glow 1s ease-in-out infinite alternate */ 130 | @keyframes cyan { 131 | from{ 132 | left: 54%; 133 | } 134 | to{ 135 | left: 59%; 136 | } 137 | 138 | } 139 | 140 | span { 141 | color: #00E8F8; 142 | } 143 | 144 | span:hover { 145 | text-shadow: 0 0 20px #fff, 0 0 60px #00E8F8, 0 0 70px #00E8F8, 0 0 80px #00E8F8; 146 | 147 | 148 | } 149 | 150 | .left { 151 | margin-right: 26vw; 152 | 153 | } 154 | 155 | #element { 156 | font-size: 25px; 157 | font-weight:700; 158 | } 159 | 160 | .handle { 161 | display: flex; 162 | justify-content: center; 163 | align-items: center; 164 | } 165 | 166 | .handle li { 167 | margin: 1vw; 168 | } 169 | 170 | .handle li i { 171 | font-size: 24px; 172 | transition: all .28s; 173 | color: #00E8F8; 174 | } 175 | 176 | .icon { 177 | font-size: 15px; 178 | } 179 | 180 | .icon i { 181 | margin: 1vh; 182 | font-size: 24px; 183 | transition: all .28s; 184 | color: #00E8F8; 185 | } 186 | 187 | .icon i:hover { 188 | text-shadow: 0 0 20px #fff, 0 0 30px #00E8F8, 0 0 40px #00E8F8, 0 0 50px #00E8F8, 0 0 60px #00E8F8, 0 0 70px #00E8F8, 0 0 80px #00E8F8; 189 | 190 | transform: translateY(-3px); 191 | } 192 | 193 | .info button { 194 | background-color: #1d252f; 195 | border: 1px solid #00E8F8; 196 | padding: 8px 10px; 197 | border-radius: 3px; 198 | margin: 5vh 0vw; 199 | } 200 | 201 | .info button:hover { 202 | animation: glow .55s ease-in-out infinite alternate; 203 | text-shadow: 0 0 20px #fff, 0 0 30px #00E8F8, 0 0 40px #00E8F8, 0 0 50px #00E8F8, 0 0 60px #00E8F8, 0 0 70px #00E8F8, 0 0 80px #00E8F8; 204 | 205 | transform: translateY(-3px); 206 | 207 | } 208 | 209 | @keyframes glow { 210 | from { 211 | background-color: #00E8F8; 212 | color: #1d252f; 213 | transform: translateY(2px); 214 | 215 | } 216 | 217 | to { 218 | background-color: #1d252f; 219 | color: rgb(247, 246, 246); 220 | transform: translateY(-2px); 221 | 222 | } 223 | 224 | } 225 | 226 | .handle li i:hover { 227 | /* color: #00E8F8; */ 228 | text-shadow: 0 0 20px #fff, 0 0 30px #00E8F8, 0 0 40px #00E8F8, 0 0 50px #00E8F8, 0 0 60px #00E8F8, 0 0 70px #00E8F8, 0 0 80px #00E8F8; 229 | 230 | transform: translateY(-3px); 231 | } 232 | 233 | .about { 234 | width: 100%; 235 | height: 110vh; 236 | /* background-color:rgb(72, 72, 74) ; */ 237 | display: flex; 238 | justify-content: center; 239 | align-items: center; 240 | } 241 | 242 | .me { 243 | width: auto; 244 | height: 60vh; 245 | display: flex; 246 | justify-content: space-between; 247 | align-items: center; 248 | } 249 | 250 | .photo, 251 | .info { 252 | margin: 5vw; 253 | } 254 | 255 | .info h1 { 256 | margin-bottom: 2vh; 257 | } 258 | 259 | .photo img { 260 | width: auto; 261 | height: 20rem; 262 | margin-bottom: 10vh; 263 | } 264 | 265 | .education { 266 | width: 100%; 267 | height: 100vh; 268 | display: flex; 269 | justify-content: space-between; 270 | align-items: center; 271 | /* background-color: rgb(46, 26, 84); */ 272 | } 273 | 274 | .study { 275 | width: 50%; 276 | margin-left: 7vw; 277 | 278 | } 279 | 280 | .edu { 281 | margin: 4vh; 282 | font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 283 | } 284 | 285 | .edu h2 { 286 | margin: 1vh 0px; 287 | } 288 | 289 | .services { 290 | width: 100%; 291 | height: 75vh; 292 | display: flex; 293 | justify-content: center; 294 | align-items: center; 295 | } 296 | 297 | .service { 298 | /* display: grid; 299 | grid-template-columns: repeat(3,1fr); */ 300 | display: flex; 301 | justify-content: center; 302 | align-items: center; 303 | } 304 | 305 | .bx { 306 | width: 33%; 307 | height: 30vh; 308 | /* background-color: antiquewhite; */ 309 | margin: 0vh 10vw; 310 | } 311 | .bx i{ 312 | color:#00E8F8; 313 | font-size: 23px; 314 | margin-bottom: 3vh; 315 | } 316 | .bx h2{ 317 | margin-bottom: 1vh; 318 | font-family: Arial, Helvetica, sans-serif; 319 | } 320 | 321 | .tech { 322 | width: 50%; 323 | } 324 | #msg{ 325 | margin-top: -16vh; 326 | position: relative; 327 | z-index: 2; 328 | } 329 | 330 | .tech ul { 331 | margin: auto; 332 | margin-top: 5vh; 333 | } 334 | .tech ul li{ 335 | display: flex; 336 | margin-bottom:3vh ; 337 | } 338 | .tech i{ 339 | font-size: 23px; 340 | margin:0px 1vw; 341 | color: #08edfd; 342 | } 343 | 344 | 345 | .projects { 346 | width: auto; 347 | margin-top: 5vh; 348 | 349 | 350 | } 351 | 352 | .proj { 353 | width: auto; 354 | 355 | display: grid; 356 | grid-template-columns: repeat(3, 1fr); 357 | } 358 | 359 | 360 | .cd img { 361 | width: auto; 362 | height: 27vh; 363 | display: block; 364 | border-radius: 0.5rem; 365 | transition: all .44s; 366 | filter: blur(5px); 367 | } 368 | 369 | 370 | 371 | .cd img:hover { 372 | transform: scale(1.1); 373 | filter: blur(0px); 374 | } 375 | .layer{ 376 | position: absolute; 377 | font-weight: 400; 378 | /* background:linear-gradient(black , #00E8F8) ; */ 379 | 380 | font-family:'Courier New', Courier, monospace; 381 | width: 30%; 382 | margin-top: -20vh; 383 | height: 5%; 384 | 385 | } 386 | .layer h1{ 387 | color: #0509fc; 388 | font-size: 25px; 389 | 390 | } 391 | .layer p{ 392 | color: #ff0202; 393 | text-shadow: 4px 3px 6px rgb(0, 0, 0); 394 | font-family:Arial, Helvetica, sans-serif; 395 | font-weight: 700; 396 | } 397 | 398 | 399 | 400 | .card { 401 | display: flex; 402 | justify-content: center; 403 | align-items: center; 404 | /* background-color: rgb(36, 36, 87); */ 405 | text-align: center; 406 | width: auto; 407 | height: 50vh; 408 | } 409 | 410 | .card button { 411 | background-color: #1d252f; 412 | border: 1px solid #00E8F8; 413 | padding: 8px 10px; 414 | border-radius: 3px; 415 | 416 | margin: 2vh auto; 417 | width: 6vw; 418 | transition: all .35s ease; 419 | } 420 | 421 | .card button:hover { 422 | background-color: #00E8F8; 423 | transform: translateY(-5px); 424 | text-shadow: 0 0 20px #fff, 0 0 30px #00E8F8, 0 0 40px #00E8F8, 0 0 50px #00E8F8, 0 0 60px #00E8F8, 0 0 70px #00E8F8, 0 0 80px #00E8F8; 425 | 426 | } 427 | 428 | .footer { 429 | /* background-color: rgb(51, 54, 53); */ 430 | width: 100%; 431 | display: grid; 432 | align-content: space-between; 433 | justify-items: center; 434 | height: 35vh; 435 | 436 | } 437 | 438 | .foot { 439 | display: flex; 440 | justify-content: space-evenly; 441 | align-items: center; 442 | } 443 | /* #verti{ 444 | display:block; 445 | } */ 446 | #vert i:hover{ 447 | text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073; 448 | 449 | } 450 | .baya, 451 | .daya { 452 | height: 40vh; 453 | width: 50vw; 454 | display: flex; 455 | justify-content: center; 456 | align-items: center; 457 | } 458 | 459 | .contact { 460 | width: 100%; 461 | height: 90vh; 462 | display: flex; 463 | justify-content: center; 464 | align-items: center; 465 | 466 | } 467 | 468 | .msg h1 { 469 | margin: auto; 470 | text-align: center; 471 | margin-top: 8vh; 472 | } 473 | 474 | .sampark { 475 | width: auto; 476 | height: 50vh; 477 | /* background-color: #d96666; */ 478 | } 479 | 480 | .sampark input, 481 | textarea { 482 | background-color: #1d252f; 483 | color: #f5f3f3; 484 | padding: 7px; 485 | margin: 10px; 486 | width: 15vw; 487 | border: 0; 488 | 489 | } 490 | 491 | #btn { 492 | background-color: #1d252f; 493 | border: 1px solid #00E8F8; 494 | padding: 8px 10px; 495 | border-radius: 3px; 496 | 497 | margin: auto; 498 | width: 6vw; 499 | margin-left: 13vw; 500 | } 501 | 502 | #btn:hover { 503 | text-shadow: 0 0 20px #fff, 0 0 30px #00E8F8, 0 0 40px #00E8F8, 0 0 50px #00E8F8, 0 0 60px #00E8F8, 0 0 70px #00E8F8, 0 0 80px #00E8F8; 504 | background-color: #00E8F8; 505 | transform: translateY(-5px); 506 | 507 | } 508 | .base h3{ 509 | color: #00E8F8; 510 | text-shadow: 0 0 20px #fff, 0 0 50px #00E8F8, 0 0 80px #00E8F8; 511 | font-family:'Courier New', Courier, monospace; 512 | margin: 3vh; 513 | } 514 | 515 | 516 | /* .glow{ 517 | font-size: 80px; 518 | color: #fff; 519 | text-align: center; 520 | animation: glow 1s ease-in-out infinite alternate; 521 | } 522 | 523 | @-webkit-keyframes glow { 524 | from { 525 | text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073; 526 | } 527 | 528 | to { 529 | text-shadow: 0 0 20px #fff, 0 0 30px #00E8F8, 0 0 40px #00E8F8, 0 0 50px #00E8F8, 0 0 60px #00E8F8, 0 0 70px #00E8F8, 0 0 80px #00E8F8; 530 | } 531 | } */ -------------------------------------------------------------------------------- /Password Generator/password.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | Password Generator 12 | 41 | 42 | 43 |
    46 |
    49 |

    52 | Password Generator 53 |

    54 | 55 |
    56 | 62 | 69 |
    70 | 71 |
    72 |
    73 |

    Password Length

    74 | 0 75 |
    76 | 86 |
    87 |
    88 | 89 | 90 |
    91 |
    92 | 93 | 94 |
    95 |
    96 | 97 | 98 |
    99 |
    100 | 101 | 102 |
    103 |
    104 |
    105 |

    Strength

    106 |
    110 |
    111 |
    112 | 113 | 119 |
    120 |
    121 | 122 | 123 | 124 | -------------------------------------------------------------------------------- /Password Generator/password.js: -------------------------------------------------------------------------------- 1 | // Variables to access HTML 2 | let content = document.querySelector("[password-display]"); 3 | const copyMsg = document.querySelector("[datacopy-msg]"); 4 | const copyButton = document.querySelector("[copy-button]"); 5 | 6 | let passwordNo = document.querySelector("[pass-len]"); 7 | let slideTag = document.querySelector("[slider]"); 8 | 9 | let uppercase = document.querySelector("#uppercase"); 10 | let lowerCase = document.querySelector("#lowercase"); 11 | let numberInput = document.querySelector("#number"); 12 | let symbol = document.querySelector("#symbol"); 13 | 14 | let indicator = document.querySelector("[strength-indicator]"); 15 | 16 | const generate = document.querySelector("#generate"); 17 | 18 | 19 | 20 | 21 | let passWord = ""; 22 | let passWordLen = 10; // Default 23 | let color = '#b4b4b4'; 24 | 25 | handleSlider(); // Call for first time after reload page 26 | function handleSlider(){ 27 | slideTag.value = passWordLen; 28 | passwordNo.textContent = passWordLen; 29 | } 30 | 31 | slideTag.addEventListener('input', (event)=>{ 32 | passWordLen = event.target.value; 33 | handleSlider(); 34 | }) 35 | 36 | indicatorfun(color); //call 37 | indicatorfun(color); 38 | function indicatorfun(color){ 39 | indicator.style.backgroundColor = color; 40 | indicator.style.boxShadow = "100px 200px 2px color"; 41 | 42 | } 43 | 44 | // Universal formula to get any random no. [min, max} 45 | function getRandomInt(min, max){ 46 | return Math.floor( Math.random()*(max-min) ) + min ; 47 | } 48 | 49 | function getRandomNumber(){ 50 | return getRandomInt(0, 9); 51 | } 52 | 53 | function getRandomLowerCase(){ 54 | return String.fromCharCode(getRandomInt(97, 123)); 55 | } 56 | 57 | function getRandomUpperCase(){ 58 | return String.fromCharCode(getRandomInt(65, 91)); 59 | } 60 | 61 | const symbolArr = "\|<`(>,.?{~!@#[+-=^&*)/$%_}]"; 62 | function getRandomSymbol(){ 63 | return symbolArr.charAt((getRandomInt(0, symbolArr.length))); 64 | } 65 | 66 | // Calculation of strength of a password and calls for indicator 67 | function calcStrength(){ 68 | let upperVar = uppercase.checked; 69 | let lowerVar = lowerCase.checked; 70 | let numberVar = number.checked; 71 | let symbolVar = symbol.checked; 72 | 73 | // Own Logic 74 | if(upperVar && lowerVar && numberVar && symbolVar){ 75 | indicatorfun('#3cb371'); 76 | }else if((upperVar && lowerVar && numberVar) || (upperVar && lowerVar && symbolVar) || (upperVar && numberVar && symbolVar)){ 77 | indicatorfun('#3cb371') 78 | }else if((upperVar && lowerVar && !numberVar && !symbolVar) || (upperVar && !lowerVar && !numberVar && symbolVar) || (!upperVar && !lowerVar && numberVar && symbolVar) || (!upperVar && lowerVar && numberVar && !symbolVar)){ 79 | indicatorfun('#ffa500'); 80 | }else{ 81 | indicatorfun('#ff0000'); 82 | } 83 | } 84 | 85 | 86 | // Clipboard API fetched function. [WriteText] 87 | async function copyToClipboard(){ 88 | try{ 89 | await navigator.clipboard.writeText(content.textContent); 90 | copyMsg.textContent = "Copied"; 91 | } 92 | catch(e){ 93 | copyMsg.textContent = "Failed to copy"; 94 | } 95 | copyMsg.classList.remove("hidden"); 96 | // For disappering 97 | setTimeout(()=>{ 98 | copyMsg.classList.add("hidden"); 99 | }, 2000); 100 | } 101 | 102 | copyButton.addEventListener('click', (event) =>{ 103 | if(content.value) copyToClipboard(); // only is password is generated 104 | }); 105 | 106 | 107 | // For final output + suffle array - [Protection algo] 108 | // function suffleArr(array){ 109 | // let pass = ""; 110 | // for(let i = array.length-1; i>0; i--){ 111 | // let randomInd = getRandomInt(0,array.length); 112 | // let temp = array[randomInd]; 113 | // array[randomInd] = array[i]; 114 | // array[i] = temp; 115 | // pass = array[i] + pass ; 116 | // } 117 | // return pass; 118 | // } 119 | 120 | 121 | // Actual Brain 122 | function generatePassword(){ 123 | let arr = []; 124 | passWord = ""; 125 | if(uppercase.checked){ 126 | passWord+= getRandomUpperCase(); 127 | arr.push(getRandomUpperCase); 128 | } 129 | if(lowerCase.checked){ 130 | passWord+= getRandomLowerCase(); 131 | arr.push(getRandomLowerCase); 132 | } 133 | if(numberInput.checked){ 134 | passWord+= getRandomNumber(); 135 | arr.push(getRandomNumber); 136 | } 137 | if(symbol.checked){ 138 | passWord+= getRandomSymbol(); 139 | arr.push(getRandomSymbol); 140 | } 141 | // If any check box is not checked. 142 | if(passWord.length<=0) { 143 | content.placeholder = "Choose atleast one box"; 144 | return ; 145 | } 146 | 147 | for(let i=passWord.length; i 2 | 3 | 4 | 5 | 6 | CSS | Pulse animation 7 | 8 | 9 | 51 | 52 | 53 | 54 |
    55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /clock.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: rgb(255, 255, 255); 3 | padding: 0; 4 | margin: 0; 5 | } 6 | 7 | .clock{ 8 | width: 300px; 9 | height: 300px; 10 | border-radius: 50%; 11 | background-color: rgb(252, 230, 209); 12 | margin: 100px auto 0px auto; 13 | position: relative; 14 | border:20px solid rgb(254, 133, 19); 15 | 16 | } 17 | .center{ 18 | background-color: #000; 19 | position: absolute; 20 | left: calc(50% - 10px); 21 | top: calc(50% - 10px); 22 | width: 20px; 23 | height: 20px; 24 | border-radius: 50%; 25 | z-index: 20; 26 | } 27 | .hourHand{ 28 | width: 10px; 29 | height: 75px; 30 | background-color: #000; 31 | transform-origin: bottom center; 32 | border-radius: 4px; 33 | position: absolute; 34 | top: 75px; 35 | left: 145px; 36 | z-index: 10; 37 | transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); 38 | transform: rotate(360deg); 39 | 40 | } 41 | .minuteHand{ 42 | width: 5px; 43 | height: 120px; 44 | background-color: #000; 45 | transform-origin: bottom center; 46 | border-radius: 4px; 47 | position: absolute; 48 | top: 30px; 49 | left: 147px; 50 | z-index: 9; 51 | transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); 52 | transform: rotate(90deg); 53 | 54 | } 55 | .secondHand{ 56 | width: 2px; 57 | height: 120px; 58 | background-color:red; 59 | transform-origin: bottom center; 60 | border-radius: 4px; 61 | position: absolute; 62 | top: 30px; 63 | left: 149px; 64 | transition: all 0.06s; 65 | transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); 66 | z-index: 8; 67 | transform: rotate(360deg); 68 | 69 | } 70 | .time{ 71 | position: absolute; 72 | top: 45%; 73 | left: 10%; 74 | border: 1px solid #fff8dc; 75 | background-color: #fff; 76 | padding: 5px; 77 | display: block; 78 | box-shadow: inset 0px 2px 5px rgba(0,0,0,.4); 79 | border-radius: 5px; 80 | min-width: 70px; 81 | height: 15px; 82 | 83 | } 84 | .time small{ 85 | color:red; 86 | transition: all 0.05s; 87 | transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); 88 | } 89 | 90 | .clock ul{ 91 | list-style: none; 92 | padding: 0; 93 | 94 | } 95 | .clock ul li{ 96 | position: absolute; 97 | width:20px; 98 | height:20px; 99 | text-align: center; 100 | line-height: 20px; 101 | font-size: 10px; 102 | color:red; 103 | } 104 | .clock ul li:nth-child(1){ 105 | right: 22%; 106 | top:6.5%; 107 | } 108 | .clock ul li:nth-child(2){ 109 | right: 6%; 110 | top:25%; 111 | } 112 | .clock ul li:nth-child(3){ 113 | right: 1%; 114 | top:calc(50% - 10px); 115 | color:#000; 116 | font-size: 20px; 117 | font-weight: bold; 118 | } 119 | .clock ul li:nth-child(4){ 120 | right: 6%; 121 | top:69%; 122 | } 123 | .clock ul li:nth-child(5){ 124 | right: 22%; 125 | top:84%; 126 | } 127 | .clock ul li:nth-child(6){ 128 | right: calc(50% - 10px); 129 | top:calc(99% - 20px); 130 | color:#000; 131 | font-size: 20px; 132 | font-weight: bold; 133 | } 134 | .clock ul li:nth-child(7){ 135 | left: 22%; 136 | top:84%; 137 | } 138 | .clock ul li:nth-child(8){ 139 | left: 6%; 140 | top:69%; 141 | } 142 | .clock ul li:nth-child(9){ 143 | left: 1%; 144 | top:calc(50% - 10px); 145 | color:#000; 146 | font-size: 20px; 147 | font-weight: bold; 148 | } 149 | .clock ul li:nth-child(10){ 150 | left: 6%; 151 | top:25%; 152 | } 153 | .clock ul li:nth-child(11){ 154 | left: 22%; 155 | top:6.5%; 156 | } 157 | .clock ul li:nth-child(12){ 158 | right: calc(50% - 10px); 159 | top:1%; 160 | color:#000; 161 | font-size: 20px; 162 | font-weight: bold; 163 | } 164 | 165 | 166 | 167 | 168 | -------------------------------------------------------------------------------- /clock.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Animated Clock 8 | 9 | 10 |
    11 |
    12 |
    13 |
    14 |
    15 | 29 |
    30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | blob-effect 8 | 9 | 10 | 11 |
    12 | 13 | 14 | 15 | 16 | 17 |
    18 | 19 | 20 | -------------------------------------------------------------------------------- /index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |

    Hello

    12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /index3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | toggle switch 7 | 8 | 9 | 10 |
    11 | 12 | 15 |
    16 |
    17 | 18 | -------------------------------------------------------------------------------- /pulse.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | padding: 0; 4 | background: #262626; 5 | } 6 | .pulse{ 7 | position: absolute; 8 | top: 50%; 9 | left: 50%; 10 | transform: translate(-50%, -50%); 11 | width: 80px; 12 | height: 80px; 13 | background: #58ea00; 14 | color: #fff; 15 | border-radius: 50%; 16 | text-align: center; 17 | line-height: 80px; 18 | font-size: 30px; 19 | } 20 | .pulse:before, 21 | .pulse:after{ 22 | content: ''; 23 | display: block; 24 | position: absolute; 25 | border: 50%; 26 | border: 1px solid #58ea00; 27 | left: -20px; 28 | right: -20px; 29 | top: -20px; 30 | bottom: -20px; 31 | border-radius: 50%; 32 | animation: animate 1.5s linear infinite; 33 | } 34 | 35 | @keyframes animate{ 36 | 0%{ 37 | transform: scale(0.5); 38 | opacity: 0; 39 | } 40 | 50%{ 41 | opacity: 1; 42 | } 43 | 100%{ 44 | transform: scale(1.2); 45 | opacity: 0; 46 | } 47 | } -------------------------------------------------------------------------------- /pulse.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Pulse Effect 9 | 10 | 11 |
    12 |
    13 | 14 | -------------------------------------------------------------------------------- /square.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 23 | 24 | 25 | 26 |
    27 | 28 | 29 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | color: white; 5 | } 6 | body{ 7 | height: 100vh; 8 | width: 100%; 9 | background-color: black; 10 | display: grid; 11 | place-items: center; 12 | } 13 | .blob{ 14 | position: relative; 15 | width: 300px; 16 | height: 300px; 17 | /* background-color: aquamarine; */ 18 | display: grid; 19 | place-items: center; 20 | place-content: center; 21 | 22 | } 23 | .blob span:nth-child(1){ 24 | position:absolute; 25 | top: 0px; 26 | left: 0px; 27 | width: 100%; 28 | height: 100%; 29 | border: 2px solid #a9ff68; 30 | border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; 31 | transform: 0.5s; 32 | animation: rotate-blob 5s linear infinite; 33 | 34 | } 35 | 36 | .blob:hover span:nth-child(1){ 37 | background: #122ae7 ; 38 | border: none; 39 | 40 | } 41 | .blob span:nth-child(2){ 42 | position: absolute; 43 | top: 0px; 44 | left: 0px; 45 | width: 100%; 46 | height: 100%; 47 | border: 2px solid #a9ff68; 48 | border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; 49 | transition: 0.5s; 50 | animation: rotate-blob 4s linear infinite; 51 | } 52 | 53 | .blob:hover span:nth-child(2){ 54 | background: #45e21a; 55 | border: none; 56 | } 57 | 58 | .blob span:nth-child(3){ 59 | position: absolute; 60 | top: 0px; 61 | left: 0px; 62 | width: 100%; 63 | height: 100%; 64 | border: 2px solid #a9ff68; 65 | border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; 66 | transition: 0.5s; 67 | animation: rotate-blob2 10s linear infinite; 68 | } 69 | .blob:hover span:nth-child(3){ 70 | background: #be19cd; 71 | border: none; 72 | } 73 | 74 | 75 | .blob span:nth-child(4){ 76 | position: absolute; 77 | top: 0px; 78 | left: 0px; 79 | margin-top: 40px; 80 | margin-left: 70px; 81 | width: 150px; 82 | height: 200px; 83 | border: 2px solid #e05f0f; 84 | border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; 85 | transition: 0.2s; 86 | animation: rotate-blob2 3s linear infinite; 87 | } 88 | 89 | .blob:hover span:nth-child(4){ 90 | background: #17d802; 91 | border: none; 92 | } 93 | 94 | 95 | @keyframes rotate-blob{ 96 | 0%{ 97 | transform: rotate(0deg); 98 | 99 | } 100 | 101 | 100%{ 102 | transform: rotate(360deg); 103 | } 104 | } 105 | @keyframes rotate-blob2{ 106 | 0%{ 107 | transform: rotate(360deg); 108 | 109 | } 110 | 100%{ 111 | transform: rotate(0deg); 112 | } 113 | } 114 | 115 | /* 3d toggle switch */ 116 | 117 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap'); 118 | 119 | :root { 120 | --sz: 10vmin; 121 | --on: #03A9F4; 122 | --of: #fff0; 123 | --gr: #666666; 124 | --tr: all 0.5s ease 0s; 125 | --lg: var(--of); 126 | } 127 | 128 | * { 129 | box-sizing: border-box; 130 | transition: var(--tr); 131 | } 132 | 133 | body { 134 | margin: 0; 135 | padding: 0; 136 | width: 100vw; 137 | height: 100vh; 138 | overflow: hidden; 139 | display: flex; 140 | align-items: center; 141 | justify-content: center; 142 | background: linear-gradient(45deg, #202837, #1f2425); 143 | background: linear-gradient(135deg, #1c232f, #1b212f, #090c10); 144 | font-family: 'Roboto', Arial, Helvetica, serif; 145 | } 146 | 147 | body:before, body:after { 148 | content: ""; 149 | position: absolute; 150 | width: 100%; 151 | height: 100%; 152 | background: 153 | repeating-conic-gradient(#0002 0.000095%, #fff0 .0005%, #fff0 .005%, #fff0 .0005%), 154 | repeating-conic-gradient(#0002 0.00001%, #fff0 .00009%, #fff0 .00075%, #fff0 .000025%); 155 | opacity: 0.75; 156 | filter: blur(0.75px); 157 | } 158 | 159 | .content { 160 | position: relative; 161 | width: calc(var(--sz) * 4); 162 | height: calc(var(--sz) * 2); 163 | display: flex; 164 | align-items: center; 165 | justify-content: center; 166 | } 167 | 168 | input { 169 | display: none; 170 | } 171 | 172 | label[for=btn] { 173 | position: absolute; 174 | width: calc(var(--sz) * 4); 175 | height: calc(var(--sz) * 2); 176 | background: linear-gradient(0deg, #121720, #0d1217); 177 | border-radius: var(--sz); 178 | box-shadow: 0 0 calc(var(--sz) / 50) calc(var(--sz) / 50) #0006, 0 -4px calc(var(--sz) / 10) calc(var(--sz) / 500) #0b0b10, 0 0px calc(var(--sz) / 10) calc(var(--sz) / 50) #b9e1ff88, 0 -4px calc(var(--sz) / 5) calc(var(--sz) / 50) #15182fcc; 179 | } 180 | 181 | .thumb { 182 | position: absolute; 183 | width: calc(calc(var(--sz) * 2) - calc(var(--sz) / 8)); 184 | height: calc(calc(var(--sz) * 2) - calc(var(--sz) / 8)); 185 | top: calc(calc( var(--sz) / 10) + calc(var(--sz) / -20)); 186 | left: calc(calc( var(--sz) / 10) + calc(var(--sz) / -30)); 187 | background: 188 | radial-gradient(circle at 48% 50%, #fff0 calc(var(--sz) / 1.05), var(--lg) calc(var(--sz) / 0.99) ), 189 | radial-gradient(circle at 40% 50%, #fff0 calc(var(--sz) / 0.95), var(--lg) calc(var(--sz) / 0.75)), 190 | linear-gradient(180deg, #283349, #17212f); 191 | border-radius: var(--sz); 192 | box-shadow: 193 | calc(var(--sz) / -50) calc(var(--sz) / 50) calc(var(--sz) / 30) 0 #fff2 inset, 194 | 0 0 calc(var(--sz) / 10) calc(var(--sz) / 50) #000c, 195 | 0 calc(var(--sz) / 3) calc(var(--sz) / 3) 0 #000d; 196 | cursor: pointer; 197 | display: flex; 198 | align-items: center; 199 | justify-content: center; 200 | z-index: 1; 201 | overflow: hidden; 202 | } 203 | 204 | #btn:checked + label .thumb { 205 | --lg: var(--on); 206 | transition: var(--tr); 207 | left: calc(calc(100% - calc(calc(var(--sz) * 2) - calc(var(--sz) / 3))) - calc(calc( var(--sz) / 10) + calc(var(--sz) / 5.75))); 208 | 209 | } 210 | 211 | .thumb:before { 212 | content: ""; 213 | position: absolute; 214 | width: calc(var(--sz) / 0.5); 215 | height: calc(var(--sz) / 0.5); 216 | background: radial-gradient(circle at 45% 50%, #fff0 calc(var(--sz) / 1), var(--lg) calc(var(--sz) / 0.95)); 217 | filter: blur(1px); 218 | } 219 | 220 | .light { 221 | position: absolute; 222 | width: calc(var(--sz) * 1); 223 | height: calc(var(--sz) / 1.75); 224 | right: calc(var(--sz) * -2.75); 225 | display: flex; 226 | justify-content: center; 227 | z-index: 1; 228 | background: #121212; 229 | position: relative; 230 | width: calc(var(--sz) / 1.75); 231 | height: calc(var(--sz) / 1.75); 232 | border-radius: var(--sz); 233 | box-shadow: 234 | 0 0px calc(var(--sz) / 50) calc(var(--sz) / 50) #0008, 235 | 0 -4px calc(var(--sz) / 10) calc(var(--sz) / 500) #000, 236 | 0 2px calc(var(--sz) / 10) calc(var(--sz) / 500) #fff8, 237 | 0 0px calc(var(--sz) / 20) calc(var(--sz) / 25) #000; 238 | display: flex; 239 | align-items: center; 240 | justify-content: center; 241 | transition: var(--tr); 242 | } 243 | 244 | .light:before { 245 | content: ""; 246 | transition: var(--tr); 247 | width: calc(100% - calc(var(--sz) / 15)); 248 | height: calc(100% - calc(var(--sz) / 15)); 249 | position: absolute; 250 | background: radial-gradient(circle at 50% 32%, #fff5 0 calc(var(--sz) / 20), #000 calc(var(--sz) / 3) calc(var(--sz) / 3)); 251 | border-radius: var(--sz); 252 | box-shadow: 253 | 0 0 calc(var(--sz) / 3) 0 #003ef520, 254 | 0 0 calc(var(--sz) / 3) calc(var(--sz) / 20) #003ef520 inset; 255 | } 256 | 257 | #btn:checked + label + .light:before { 258 | --lg: var(--on); 259 | transition: var(--tr); 260 | box-shadow: 261 | 0 0 calc(var(--sz) / 2.5) 0 var(--lg), 262 | 0 0 calc(var(--sz) / 3) calc(var(--sz) / 20) var(--lg) inset, 263 | 0 calc(var(--sz) / -20) calc(var(--sz) / 10) calc(var(--sz) / 10) #000c inset; 264 | background: radial-gradient(circle at 50% 32%, #fff 0 calc(var(--sz) / 20), var(--lg) calc(var(--sz) / 3) calc(var(--sz) / 3)); 265 | } 266 | -------------------------------------------------------------------------------- /toggle.css: -------------------------------------------------------------------------------- 1 | 2 | /* no margin so the background is shown full page */ 3 | html, 4 | body { 5 | margin: 0 auto; 6 | } 7 | 8 | body { 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | height: 100vh; 13 | } 14 | 15 | /* a background used instead of body to change background color */ 16 | .background { 17 | position: absolute; 18 | width: 100vw; 19 | height: 100vh; 20 | background: #cccccc; 21 | z-index: -1; 22 | transition: all 0.5s; 23 | } 24 | 25 | input[type="checkbox"] { 26 | height: 0; 27 | width: 0; 28 | visibility: hidden; 29 | } 30 | 31 | label { 32 | cursor: pointer; 33 | text-indent: -9999px; 34 | width: 200px; 35 | height: 100px; 36 | background: #fff; 37 | display: block; 38 | border-radius: 100px; 39 | position: relative; 40 | transition: all 0.5s; 41 | } 42 | 43 | /* a dummy div that allows it to rotate opposite to the label, normally this would be in label:after */ 44 | .s { 45 | position: absolute; 46 | right: 50.1vw; 47 | width: 85px; 48 | height: 85px; 49 | background: #cccccc; 50 | border-radius: 90px; 51 | transition: 0.5s; 52 | transform-origin: 105% 50%; 53 | pointer-events: none; 54 | } 55 | 56 | /* label rotates clockwise */ 57 | input:checked + label { 58 | transform: rotate(180deg); 59 | } 60 | 61 | /* dummy switch goes anti-clockwise */ 62 | input:checked ~ .s { 63 | transform: rotate(-180deg); 64 | background: #000000; 65 | } 66 | 67 | /* can't change the body here so this is why background was created */ 68 | input:checked ~ .background { 69 | background: #000000; 70 | } 71 | -------------------------------------------------------------------------------- /toggle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 3D Toggle Switch 8 | 9 | 10 | 11 | 12 |
    13 |
    14 | 15 | --------------------------------------------------------------------------------