├── challange ├── js │ └── index.js ├── index.haml ├── index.html ├── scss │ └── style.scss └── css │ └── style.css ├── message ├── css │ └── style.css ├── js │ └── index.js └── index.html ├── gallary ├── 1.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── 6.jpg ├── wallpaper-377921-c.jpg └── index.html ├── hbd ├── css │ └── style.css ├── index.html └── js │ └── index.js ├── README.md ├── index.html ├── js └── index.js ├── game ├── css │ └── style.css ├── scss │ └── style.scss ├── index.html └── js │ └── index.js ├── css └── style.css ├── stylus └── style.stylus └── errorr └── index.html /challange/js/index.js: -------------------------------------------------------------------------------- 1 | // ⟁ \\ -------------------------------------------------------------------------------- /message/css/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background : black; 3 | } -------------------------------------------------------------------------------- /gallary/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxonicOfficial/Wish-Her/HEAD/gallary/1.jpg -------------------------------------------------------------------------------- /gallary/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxonicOfficial/Wish-Her/HEAD/gallary/2.jpg -------------------------------------------------------------------------------- /gallary/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxonicOfficial/Wish-Her/HEAD/gallary/3.jpg -------------------------------------------------------------------------------- /gallary/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxonicOfficial/Wish-Her/HEAD/gallary/4.jpg -------------------------------------------------------------------------------- /gallary/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxonicOfficial/Wish-Her/HEAD/gallary/5.jpg -------------------------------------------------------------------------------- /gallary/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxonicOfficial/Wish-Her/HEAD/gallary/6.jpg -------------------------------------------------------------------------------- /gallary/wallpaper-377921-c.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HaxonicOfficial/Wish-Her/HEAD/gallary/wallpaper-377921-c.jpg -------------------------------------------------------------------------------- /hbd/css/style.css: -------------------------------------------------------------------------------- 1 | canvas { 2 | position: absolute; 3 | top: 0; 4 | left: 0; 5 | } 6 | p { 7 | margin: 0 0; 8 | position: absolute; 9 | font: 16px Verdana; 10 | color: #eee; 11 | height: 25px; 12 | top: calc( 100vh - 30px ); 13 | text-shadow: 0 0 2px white; 14 | } 15 | p a { 16 | text-decoration: none; 17 | color: #aaa; 18 | } 19 | span { 20 | font-size: 11px; 21 | } 22 | p > a:first-of-type { 23 | font-size: 20px; 24 | } 25 | body { 26 | overflow: hidden; 27 | } -------------------------------------------------------------------------------- /challange/index.haml: -------------------------------------------------------------------------------- 1 | %main 2 | %div 3 | %div 4 | %span 404 error 5 | %span page not found 6 | %svg{:viewBox => "0 0 200 600"} 7 | %polygon{:points => "118.302698 8 59.5369448 66.7657528 186.487016 193.715824 14 366.202839 153.491505 505.694344 68.1413353 591.044514 200 591.044514 200 8"} 8 | %svg.crack{:viewBox => "0 0 200 600"} 9 | %polyline{:points => "118.302698 8 59.5369448 66.7657528 186.487016 193.715824 14 366.202839 153.491505 505.694344 68.1413353 591.044514"} 10 | %div 11 | %svg{:viewBox => "0 0 200 600"} 12 | %polygon{:points => "118.302698 8 59.5369448 66.7657528 186.487016 193.715824 14 366.202839 153.491505 505.694344 68.1413353 591.044514 0 591.044514 0 8"} 13 | %div 14 | %span sorry about that! 15 | %span 16 | %a 17 | %b return home? -------------------------------------------------------------------------------- /message/js/index.js: -------------------------------------------------------------------------------- 1 | this.$dom = {}; 2 | this.$dom.animatedText = document.createElement('div'); 3 | this.text = "THIS IS MESSAGE SECTION OF THIS WEBSITE.DEMO MESSAGE- Your custom message"; // MESSAGE AREA , THIS CAN BE CHANGED FROM YOUR MESSAGE :) 4 | this.$dom.container = document.getElementById('container'); 5 | this.$dom.container.appendChild(this.$dom.animatedText); 6 | animateText(); 7 | function animateText(){ 8 | var arrayOfLetters = this.text.split(""); 9 | var animatedSpan = []; 10 | arrayOfLetters.forEach(function(item){ 11 | var span = document.createElement('span'); 12 | span.innerHTML = item; 13 | animatedSpan.push(span); 14 | span.style.opacity = 0; 15 | span.style.color = 'white'; 16 | this.$dom.animatedText.appendChild(span); 17 | }); 18 | TweenMax.staggerTo(animatedSpan, .2,{ 19 | opacity : 1, 20 | delay : 2 21 | },0.05); 22 | } 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Wish-Her 2 | A demo website, which can be used to which someone special on special occasions like birthday, anniversaries etc 3 | 4 | # Directions 5 | This is a open source webpage collection. You can fork it and make changes as per your need. 6 | Please don't use it for commercial purposes. 7 | 8 | Finally, This project is live at https://haxonicofficial.github.io/Wish-Her/ 9 | 10 | # Fork it | Star it 11 | Re-use it but please give credits :) 12 | 13 | # Contribute 14 | You can help me to modify this project by mapping custom-data-entries to a Restful-API like data.json. Make a new branch and perform pull-request. If it will be worthy, i'll add it to master-branch 15 | 16 | # NOTE - 17 | GitHub server doesnt allow JavaScript to load directly, So go to the right end of URL and click on "Load-Unsafe-Scripts". 18 | 19 | 20 | # Follow me 21 | LinkedIn - https://www.linkedin.com/in/haxonic/ 22 | 23 | GitHub - https://github.com/HaxonicOfficial 24 | 25 | Facebook - https://www.facebook.com/Haxonic1337 26 | 27 | Instagram - https://www.instagram.com/haxonic7/ 28 | 29 | -------------------------------------------------------------------------------- /hbd/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Happy birthday ${name}! 6 | 7 | 8 | 9 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 |

Heartiest Wishes from__ ${Sender Name} =============> CLICK HERE <=============

47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /challange/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ANSWER ME! 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |
21 | I HATE YOU 22 | 23 | 24 | then click here   25 | 26 | 27 |
28 | 29 | 30 | 31 |
32 | 33 | 34 | 35 |
36 | 37 | 38 | 39 |
40 | I LOVE YOU 41 | 42 | 43 | then click here  44 | 45 | 46 |
47 |
48 |
49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /message/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | MESSAGE 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Dear ABC, 16 | ­

_

17 |
18 | 19 | 20 | 21 | 22 | 63 |
64 |

CLICK BELOW --

65 | 66 | 67 |
68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Her_Name 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |

17 |
18 | 19 | Your 20 | smile is wonder 21 | 22 | 23 | We will 24 | never let it fade 25 | 26 |

27 | 28 | 29 | 30 | 71 |
72 |

CLICK BELOW --

73 | 74 | 75 |
76 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /js/index.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | setTimeout(function() { 3 | $('h1').addClass('zoom'); 4 | $('h1 .initial').addClass('transInStart'); 5 | $('h1 .underlay').addClass('show'); 6 | setTimeout(function() { 7 | $('h1 .initial').removeClass('transInStart'); 8 | $('h1 .underlay').removeClass('show'); 9 | },50); 10 | setTimeout(function() { 11 | $('h1 .initial').removeClass('transInStart').addClass('transInMid'); 12 | $('h1 .underlay').addClass('show'); 13 | },125); 14 | setTimeout(function() { 15 | $('h1 .initial').removeClass('transInMid').addClass('transInFin'); 16 | $('h1 .underlay').removeClass('show'); 17 | },175); 18 | 19 | setTimeout(function() { 20 | $('h1 .final').addClass('transInStart'); 21 | $('h1 .underlay').addClass('show'); 22 | },3500); 23 | setTimeout(function() { 24 | $('h1 .final').removeClass('transInStart') 25 | $('h1 .underlay').removeClass('show'); 26 | },3550); 27 | setTimeout(function() { 28 | $('h1 .final').addClass('transInStepOne'); 29 | $('h1 .underlay').addClass('show'); 30 | },3650); 31 | setTimeout(function() { 32 | $('h1 .initial').addClass('transOutStart'); 33 | $('h1 .final').removeClass('transInStepOne').addClass('transInStepTwo'); 34 | $('h1 .underlay').removeClass('show'); 35 | },3750); 36 | setTimeout(function() { 37 | $('h1 .final').removeClass('transInStepTwo').addClass('transInStepThree'); 38 | $('h1 .final span').first().addClass('show'); 39 | },3900); 40 | setTimeout(function() { 41 | $('h1 .final').removeClass('transInStepThree'); 42 | $('h1 .underlay').addClass('show'); 43 | },3975); 44 | setTimeout(function() { 45 | $('h1 .initial').removeClass('transOutStart').addClass('transOutFin'); 46 | $('h1 .final').removeClass('transInStepThree'); 47 | $('h1 .final span:nth-child(2)').addClass('show'); 48 | $('h1 .underlay').removeClass('show'); 49 | },4050); 50 | 51 | }, 4000); 52 | }); -------------------------------------------------------------------------------- /game/css/style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Londrina+Solid|Nunito:400,300); 2 | * { 3 | box-sizing: border-box; 4 | } 5 | 6 | html, body { 7 | height: 100%; 8 | } 9 | 10 | body { 11 | background: #323232; 12 | } 13 | 14 | a { 15 | color: #53BDFF; 16 | text-decoration: none; 17 | font-size: 14px; 18 | } 19 | a:hover { 20 | color: #86d1ff; 21 | } 22 | 23 | .hangman { 24 | font-family: "Londrina Solid", cursive; 25 | margin: 0 auto; 26 | text-align: center; 27 | padding: 10px; 28 | } 29 | 30 | h1 { 31 | font-size: 50px; 32 | margin-bottom: 20px; 33 | color: #53BDFF; 34 | font-weight: 300; 35 | } 36 | 37 | p { 38 | margin-bottom: 20px; 39 | color: gray; 40 | line-height: 1.3; 41 | } 42 | 43 | @keyframes letteranim { 44 | 50% { 45 | transform: translateY(-5px) scale(1.05); 46 | } 47 | } 48 | .letter { 49 | display: inline-block; 50 | color: transparent; 51 | border-bottom: 5px solid #53BDFF; 52 | margin: 0 10px; 53 | font-size: 50px; 54 | padding: 10px; 55 | transition: .5s; 56 | text-transform: uppercase; 57 | } 58 | 59 | .word { 60 | display: block; 61 | white-space: nowrap; 62 | } 63 | 64 | .correct { 65 | color: #53BDFF; 66 | text-shadow: 1px 2px 0 #20a9ff; 67 | animation: letteranim .3s ease; 68 | } 69 | 70 | .guessForm { 71 | margin: 20px auto 0; 72 | } 73 | .guessForm input, .guessForm .guessButton { 74 | font-family: "Londrina Solid", cursive; 75 | } 76 | .guessForm input[type="text"] { 77 | outline: none; 78 | padding: 10px; 79 | font-size: 30px; 80 | margin-bottom: 20px; 81 | margin-right: 5px; 82 | border: 1px solid #aaa; 83 | color: gray; 84 | } 85 | .guessForm .guessButton { 86 | border: none; 87 | font-size: 30px; 88 | padding: 10px 20px; 89 | cursor: pointer; 90 | background: #53BDFF; 91 | color: white; 92 | transition: .3s; 93 | margin: 10px 0; 94 | text-shadow: 1px 2px 0 #20a9ff; 95 | } 96 | .guessForm .guessButton:hover { 97 | background: #20a9ff; 98 | } 99 | 100 | .wrongLetters { 101 | font-size: 20px; 102 | } 103 | .wrongLetters p { 104 | margin-bottom: 10px; 105 | } 106 | .wrongLetters li { 107 | display: inline-block; 108 | font-size: 40px; 109 | background: #ff4d4d; 110 | text-shadow: 1px 2px 0 red; 111 | padding: 10px; 112 | color: white; 113 | text-transform: uppercase; 114 | margin-right: 10px; 115 | animation: letteranim .3s ease; 116 | } 117 | 118 | .message { 119 | display: none; 120 | padding: 20px; 121 | position: absolute; 122 | top: 110px; 123 | left: 0; 124 | right: 0; 125 | bottom: 0; 126 | width: 100%; 127 | /* height: 100%; */ 128 | background: #0091ec; 129 | z-index: 12402402; 130 | } 131 | .message h1 { 132 | display: none; 133 | color: white; 134 | text-shadow: 1px 2px 0 #ccc; 135 | } 136 | .message .highlight { 137 | color: yellow; 138 | text-transform: capitalize; 139 | } 140 | .message .text { 141 | color: white; 142 | font-size: 30px; 143 | display: none; 144 | } 145 | .message .text p { 146 | color: white; 147 | } 148 | .message .text .highlight { 149 | font-size: 40px; 150 | } 151 | .message .muted { 152 | margin: 20px auto; 153 | color: #86d1ff; 154 | } 155 | 156 | .button { 157 | display: none; 158 | margin: 10px 0; 159 | border: none; 160 | font-size: 30px; 161 | padding: 10px 20px; 162 | cursor: pointer; 163 | background: #34cd39; 164 | color: white; 165 | transition: .3s; 166 | text-shadow: 1px 2px 0 #2EB933; 167 | font-family: "Londrina Solid", cursive; 168 | } 169 | .button:hover { 170 | background: #71dc75; 171 | } 172 | -------------------------------------------------------------------------------- /game/scss/style.scss: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Londrina+Solid|Nunito:400,300); 2 | $blue: #53BDFF; 3 | $green: #2EB933; 4 | $drk-blue: darken($blue, 10%); 5 | * { 6 | box-sizing: border-box; 7 | } 8 | html, body { 9 | height: 100%; 10 | } 11 | body { 12 | background: rgb(50,50,50); 13 | 14 | } 15 | 16 | a { 17 | color: $blue; 18 | text-decoration: none; 19 | font-size: 14px; 20 | &:hover { 21 | color: lighten($blue, 10%); 22 | } 23 | } 24 | .hangman { 25 | font-family: "Londrina Solid", cursive; 26 | margin: 0 auto; 27 | text-align: center; 28 | padding: 10px; 29 | } 30 | 31 | h1 { 32 | font-size: 50px; 33 | margin-bottom: 20px; 34 | color: $blue; 35 | font-weight: 300; 36 | } 37 | 38 | p { 39 | margin-bottom: 20px; 40 | color: gray; 41 | line-height: 1.3; 42 | 43 | } 44 | @keyframes letteranim { 45 | 50% { 46 | transform: translateY(-5px) scale(1.05); 47 | } 48 | } 49 | 50 | .letter { 51 | display: inline-block; 52 | color: transparent; 53 | border-bottom: 5px solid $blue; 54 | margin: 0 10px; 55 | font-size: 50px; 56 | padding: 10px; 57 | transition: .5s; 58 | text-transform: uppercase; 59 | 60 | 61 | } 62 | .word { 63 | display: block; 64 | white-space: nowrap; 65 | } 66 | 67 | .correct { 68 | color: $blue; 69 | text-shadow: 1px 2px 0 $drk-blue; 70 | animation: letteranim .3s ease; 71 | } 72 | 73 | .guessForm { 74 | margin: 20px auto 0; 75 | input, .guessButton { 76 | font-family: "Londrina Solid", cursive; 77 | } 78 | input[type="text"] { 79 | outline: none; 80 | padding: 10px; 81 | font-size: 30px; 82 | margin-bottom: 20px; 83 | margin-right: 5px; 84 | border: 1px solid #aaa; 85 | color: gray; 86 | } 87 | 88 | .guessButton { 89 | border: none; 90 | font-size: 30px; 91 | padding: 10px 20px; 92 | cursor: pointer; 93 | background: $blue; 94 | color: white; 95 | transition: .3s; 96 | margin: 10px 0; 97 | text-shadow: 1px 2px 0 $drk-blue; 98 | &:hover { 99 | background: $drk-blue; 100 | } 101 | } 102 | } 103 | 104 | .wrongLetters { 105 | font-size: 20px; 106 | p { 107 | margin-bottom: 10px; 108 | } 109 | li { 110 | display: inline-block; 111 | font-size: 40px; 112 | background:lighten(red,15%); 113 | text-shadow: 1px 2px 0 red; 114 | padding: 10px; 115 | color: white; 116 | text-transform: uppercase; 117 | margin-right: 10px; 118 | animation: letteranim .3s ease; 119 | } 120 | } 121 | 122 | .message { 123 | display: none; 124 | padding: 20px; 125 | position: absolute; 126 | top: 110px; 127 | left: 0; 128 | right: 0; 129 | bottom: 0; 130 | width: 100%; 131 | /* height: 100%; */ 132 | background: darken($drk-blue, 10%); 133 | z-index: 12402402; 134 | 135 | h1 { 136 | display: none; 137 | color: white; 138 | text-shadow: 1px 2px 0 #ccc; 139 | } 140 | 141 | .highlight { 142 | color: yellow; 143 | text-transform: capitalize; 144 | } 145 | 146 | .text { 147 | color: white; 148 | font-size: 30px; 149 | display: none; 150 | p { 151 | color: white; 152 | } 153 | .highlight { 154 | font-size: 40px; 155 | } 156 | } 157 | .muted { 158 | margin: 20px auto; 159 | color: lighten($blue, 10%); 160 | } 161 | } 162 | 163 | .button { 164 | display: none; 165 | margin: 10px 0; 166 | border: none; 167 | font-size: 30px; 168 | padding: 10px 20px; 169 | cursor: pointer; 170 | background: lighten($green, 5%); 171 | color: white; 172 | transition: .3s; 173 | text-shadow: 1px 2px 0 $green; 174 | font-family: "Londrina Solid", cursive; 175 | &:hover { 176 | background: lighten($green, 20%); 177 | 178 | } 179 | } -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | width: 100vw; 3 | height: 100vh; 4 | background: #101010; 5 | color: #fff; 6 | overflow: hidden; 7 | } 8 | body .background { 9 | background: url("http://updates.eveonline.com/kvd74o0q2fjg/6LSX4DQNTGA2gkaAoUyyGm/dc6ba3c2210c2385b76ca444543167cf/SUMMER_-_FLEET_BOOSTS_REWORKb412.jpg?w=1920&fm=jpg&fl=progressive") center center no-repeat; 10 | background-size: cover; 11 | position: absolute; 12 | top: 0; 13 | left: 0; 14 | opacity: 0.3; 15 | width: 100%; 16 | height: 100%; 17 | } 18 | h1 { 19 | position: absolute; 20 | width: 100%; 21 | top: 30%; 22 | text-align: center; 23 | text-transform: uppercase; 24 | letter-spacing: 30px; 25 | transform: scale(1.2); 26 | } 27 | h1.zoom { 28 | transform: scale(1); 29 | transition: 10s ease-out; 30 | } 31 | h1 .underlay { 32 | position: absolute; 33 | width: 70%; 34 | height: 0px; 35 | box-shadow: 0 0 5px 3px rgba(255,255,255,0.2), 0 0 5px 3px rgba(255,255,255,0.2) inset; 36 | left: 50%; 37 | transform: translate3d(-50%, 17px, 0); 38 | opacity: 0; 39 | transition: 0.2s linear; 40 | border-radius: 50%; 41 | } 42 | h1 .underlay.show { 43 | width: 20%; 44 | opacity: 1; 45 | height: 14px; 46 | transform: translate3d(-50%, 10px, 0); 47 | transition: 0s linear; 48 | } 49 | h1 > span { 50 | position: absolute; 51 | top: 0; 52 | left: 0; 53 | width: 100%; 54 | display: block; 55 | } 56 | h1 > span span { 57 | display: inline-block; 58 | background: #fff; 59 | margin-right: -38px; 60 | padding: 0 20px 0 35px; 61 | transition: 0.1s linear; 62 | box-shadow: 0px 0px 0vw 0vw rgba(80,90,255,0); 63 | text-shadow: 1px 1px 20px rgba(255,255,255,0.5); 64 | } 65 | h1 > span.initial span { 66 | opacity: 0; 67 | } 68 | h1 > span.initial.transInStart span:nth-child(2), 69 | h1 > span.initial.transInStart span:nth-child(3) { 70 | opacity: 1; 71 | box-shadow: 0px 0px 15vw 15vw rgba(80,90,255,0.2); 72 | transition: 0s linear; 73 | } 74 | h1 > span.initial.transInMid span { 75 | opacity: 1; 76 | transition: 0s linear; 77 | box-shadow: 0px 0px 15vw 15vw rgba(80,90,255,0.2); 78 | } 79 | h1 > span.initial.transInMid span:nth-child(1) { 80 | transition-delay: 0.125s; 81 | } 82 | h1 > span.initial.transInMid span:nth-child(2) { 83 | transition-delay: 0.075s; 84 | } 85 | h1 > span.initial.transInMid span:nth-child(3) { 86 | transition-delay: 0s; 87 | } 88 | h1 > span.initial.transInFin span { 89 | opacity: 1; 90 | background: rgba(255,255,255,0); 91 | transition: 0.05s linear; 92 | } 93 | h1 > span.initial.transInFin span:nth-child(1) { 94 | transition-delay: 0.2s; 95 | } 96 | h1 > span.initial.transInFin span:nth-child(2) { 97 | transition-delay: 0.1s; 98 | } 99 | h1 > span.initial.transInFin span:nth-child(3) { 100 | transition-delay: 0s; 101 | } 102 | h1 > span.initial.transOutStart span:nth-child(1) { 103 | opacity: 0; 104 | transition: 0s linear; 105 | } 106 | h1 > span.initial.transOutFin span:nth-child(1), 107 | h1 > span.initial.transOutFin span:nth-child(2) { 108 | opacity: 0; 109 | transition: 0s linear; 110 | } 111 | h1 > span.final span { 112 | opacity: 0; 113 | } 114 | h1 > span.final span.show { 115 | box-shadow: 0px 0px 0vw 0vw !important; 116 | background: transparent !important; 117 | opacity: 1 !important; 118 | } 119 | h1 > span.final span.show:nth-child(2) { 120 | padding: 0 35px 0 20px; 121 | } 122 | h1 > span.final.transInStart span { 123 | opacity: 1; 124 | box-shadow: 0px 0px 15vw 15vw rgba(80,90,255,0.2); 125 | transition: 0s linear; 126 | } 127 | h1 > span.final.transInStepOne span:nth-child(1), 128 | h1 > span.final.transInStepOne span:nth-child(2) { 129 | opacity: 1; 130 | box-shadow: 0px 0px 15vw 15vw rgba(80,90,255,0.2); 131 | transition: 0s linear; 132 | } 133 | h1 > span.final.transInStepTwo span { 134 | opacity: 0; 135 | box-shadow: 0px 0px 0vw 0vw; 136 | background: transparent; 137 | transition: 0s linear; 138 | } 139 | h1 > span.final.transInStepTwo span:nth-child(1) { 140 | transition-delay: 0.075s; 141 | } 142 | h1 > span.final.transInStepTwo span:nth-child(2) { 143 | transition-delay: 0s; 144 | } 145 | h1 > span.final.transInStepTwo span:nth-child(1) { 146 | opacity: 1; 147 | } 148 | h1 > span.final.transInStepThree span:nth-child(2) { 149 | opacity: 1; 150 | box-shadow: 0px 0px 15vw 15vw rgba(80,90,255,0.2); 151 | transition: 0s linear; 152 | } 153 | -------------------------------------------------------------------------------- /stylus/style.stylus: -------------------------------------------------------------------------------- 1 | body { 2 | width:100vw; 3 | height:100vh; 4 | background:#101010; 5 | color:#fff; 6 | overflow:hidden; 7 | 8 | .background { background:url(http://updates.eveonline.com/kvd74o0q2fjg/6LSX4DQNTGA2gkaAoUyyGm/dc6ba3c2210c2385b76ca444543167cf/SUMMER_-_FLEET_BOOSTS_REWORKb412.jpg?w=1920&fm=jpg&fl=progressive) center center no-repeat; 9 | background-size:cover; 10 | position:absolute; 11 | top:0; 12 | left:0; 13 | opacity:0.3; 14 | width:100%; 15 | height:100%; 16 | } 17 | } 18 | 19 | h1 { 20 | position:absolute; 21 | width:100%; 22 | top:30%; 23 | text-align:center; 24 | text-transform:uppercase; 25 | letter-spacing:30px; 26 | transform:scale(1.2) 27 | 28 | &.zoom { 29 | transform:scale(1); 30 | transition:10s ease-out; 31 | } 32 | 33 | .underlay { 34 | position:absolute; 35 | width:70%; 36 | height:0px; 37 | box-shadow:0 0 5px 3px rgba(255,255,255,0.2), 0 0 5px 3px rgba(255,255,255,0.2) inset; 38 | left:50%; 39 | transform:translate3d(-50%, 17px, 0); 40 | opacity:0; 41 | transition:0.2s linear; 42 | border-radius:50%; 43 | 44 | &.show { 45 | width:20%; 46 | opacity:1; 47 | height:14px; 48 | transform:translate3d(-50%, 10px, 0); 49 | transition:0s linear; 50 | } 51 | } 52 | 53 | & > span { 54 | position:absolute; 55 | top:0; 56 | left:0; 57 | width:100%; 58 | display:block; 59 | 60 | 61 | span { 62 | display:inline-block; 63 | background:rgba(255,255,255,1); 64 | margin-right:-38px; 65 | padding:0 20px 0 35px; 66 | transition:0.1s linear; 67 | box-shadow: 0px 0px 0vw 0vw rgba(80,90,255,0); 68 | text-shadow:1px 1px 20px rgba(255,255,255,0.5); 69 | } 70 | 71 | &.initial { 72 | 73 | span { 74 | opacity:0; 75 | } 76 | 77 | &.transInStart { 78 | 79 | span:nth-child(2), span:nth-child(3) { 80 | opacity:1; 81 | box-shadow: 0px 0px 15vw 15vw rgba(80,90,255,0.2); 82 | transition:0s linear; 83 | } 84 | } 85 | 86 | &.transInMid { 87 | 88 | span { 89 | opacity:1; 90 | transition:0s linear; 91 | box-shadow: 0px 0px 15vw 15vw rgba(80,90,255,0.2); 92 | 93 | &:nth-child(1) {transition-delay:0.125s;} 94 | &:nth-child(2) {transition-delay:0.075s;} 95 | &:nth-child(3) {transition-delay:0s;} 96 | } 97 | } 98 | 99 | &.transInFin { 100 | 101 | span { 102 | opacity:1; 103 | background:rgba(255,255,255,0); 104 | transition:0.05s linear; 105 | 106 | &:nth-child(1) {transition-delay:0.2s;} 107 | &:nth-child(2) {transition-delay:0.1s;} 108 | &:nth-child(3) {transition-delay:0s;} 109 | } 110 | } 111 | 112 | &.transOutStart { 113 | 114 | span:nth-child(1) { 115 | opacity:0; 116 | transition:0s linear; 117 | } 118 | } 119 | 120 | &.transOutFin { 121 | 122 | span:nth-child(1), span:nth-child(2) { 123 | opacity:0; 124 | transition:0s linear; 125 | } 126 | } 127 | } 128 | 129 | 130 | 131 | 132 | 133 | 134 | &.final { 135 | 136 | span { 137 | opacity:0; 138 | 139 | &.show { 140 | box-shadow: 0px 0px 0vw 0vw !important; 141 | background:transparent !important; 142 | opacity:1 !important; 143 | 144 | &:nth-child(2) { 145 | padding:0 35px 0 20px; 146 | } 147 | } 148 | } 149 | 150 | &.transInStart { 151 | span { 152 | opacity:1; 153 | box-shadow: 0px 0px 15vw 15vw rgba(80,90,255,0.2); 154 | transition:0s linear; 155 | } 156 | } 157 | 158 | &.transInStepOne { 159 | span:nth-child(1), span:nth-child(2) { 160 | opacity:1; 161 | box-shadow: 0px 0px 15vw 15vw rgba(80,90,255,0.2); 162 | transition:0s linear; 163 | } 164 | } 165 | 166 | &.transInStepTwo { 167 | span { 168 | opacity:0; 169 | box-shadow: 0px 0px 0vw 0vw; 170 | background:transparent; 171 | transition:0s linear; 172 | 173 | &:nth-child(1) {transition-delay:0.075s;} 174 | &:nth-child(2) {transition-delay:0s;} 175 | 176 | &:nth-child(1) { 177 | opacity:1; 178 | } 179 | } 180 | } 181 | 182 | &.transInStepThree { 183 | span { 184 | &:nth-child(2) { 185 | opacity:1; 186 | box-shadow: 0px 0px 15vw 15vw rgba(80,90,255,0.2); 187 | transition:0s linear; 188 | } 189 | } 190 | } 191 | } 192 | } 193 | } -------------------------------------------------------------------------------- /challange/scss/style.scss: -------------------------------------------------------------------------------- 1 | $grey: #343434; 2 | $red: #F04F54; 3 | $green: #43CB9D; 4 | 5 | $p: 12px; 6 | $f: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; 7 | 8 | $easeOutExpo: cubic-bezier(0.190, 1.000, 0.220, 1.000); 9 | 10 | *, *:before, *:after { box-sizing: border-box; } 11 | * { -webkit-tap-highlight-color: rgba(0,0,0,0); transform-style: preserve-3d; } 12 | *:focus { outline: none!important; } 13 | body, html { height: 100%; } 14 | 15 | body { 16 | display: flex; 17 | align-items: center; 18 | align-content: center; 19 | justify-content: center; 20 | padding: $p; 21 | background: $grey; 22 | color: white; 23 | font-family: $f; 24 | font-size: 24px; 25 | text-rendering: optimizeLegibility; 26 | -webkit-font-smoothing: antialiased; 27 | } 28 | 29 | ::selection { 30 | background: none; 31 | } 32 | 33 | a { 34 | display: block; 35 | cursor: pointer; 36 | animation: pulseColor 1000ms linear 3100ms forwards; 37 | font-weight: 500; 38 | &:hover, &:focus { 39 | b { 40 | color: $red; 41 | } 42 | } 43 | &:active { 44 | b { 45 | color: $green; 46 | } 47 | } 48 | } 49 | 50 | svg { 51 | width: 50px; 52 | height: auto; 53 | } 54 | 55 | .crack { 56 | position: relative; 57 | z-index: 4; 58 | margin-left: -50px; 59 | polyline { 60 | fill: none; 61 | stroke: $red; 62 | stroke-width: 10px; 63 | stroke-linecap: round; 64 | stroke-linejoin: round; 65 | stroke-dasharray: 1649.099; 66 | stroke-dashoffset: 1649.099; 67 | animation: drawStroke 1500ms ease-out 500ms forwards; 68 | } 69 | } 70 | 71 | main { 72 | display: flex; 73 | align-items: center; 74 | align-content: center; 75 | justify-content: center; 76 | > div { 77 | display: flex; 78 | align-items: center; 79 | align-content: center; 80 | position: relative; 81 | overflow: hidden; 82 | svg { 83 | position: relative; 84 | z-index: 1; 85 | polygon { 86 | fill: $grey; 87 | } 88 | } 89 | span { 90 | display: block; 91 | position: relative; 92 | z-index: 0; 93 | padding: 0 $p; 94 | line-height: 1.4; 95 | } 96 | &:first-child { 97 | text-align: right; 98 | z-index: 1; 99 | span { 100 | &:first-child { 101 | opacity: 0; 102 | transform: translateX(100%); 103 | animation: translateLeft 1000ms linear 1250ms forwards; 104 | } 105 | &:last-child { 106 | opacity: 0; 107 | transform: translateX(100%); 108 | animation: translateLeft 1000ms linear 1450ms forwards; 109 | } 110 | } 111 | svg { 112 | polygon { 113 | animation: removeFill 10ms ease-out 1600ms forwards; 114 | } 115 | } 116 | } 117 | &:last-child { 118 | z-index: 0; 119 | margin-left: -50px; 120 | span { 121 | &:first-child { 122 | opacity: 0; 123 | transform: translateX(-100%); 124 | animation: translateRight 1000ms linear 1650ms forwards; 125 | } 126 | &:last-child { 127 | opacity: 0; 128 | transform: translateX(-100%); 129 | animation: translateRight 1000ms linear 1850ms forwards; 130 | } 131 | } 132 | } 133 | } 134 | } 135 | 136 | @keyframes drawStroke { 137 | 0% { stroke-dashoffset: 1649.099; } 138 | 100% { stroke-dashoffset: 0; } 139 | } 140 | 141 | @keyframes removeFill { 142 | 0% { fill: rgba($grey, 1); } 143 | 100% { fill: rgba($grey, 0); } 144 | } 145 | 146 | @keyframes pulseColor { 147 | 0% { color: white; } 148 | 25% { color: $green; } 149 | 50% { color: white; } 150 | 75% { color: $green; } 151 | 100% { color: white; } 152 | } 153 | 154 | /* https://goo.gl/v323yz */ 155 | @keyframes translateLeft { 156 | 0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 150, 0, 0, 1); opacity: 1; } 157 | 7.61% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 69.561, 0, 0, 1); } 158 | 11.41% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 39.355, 0, 0, 1); } 159 | 15.12% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 17.801, 0, 0, 1); } 160 | 18.92% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.02, 0, 0, 1); } 161 | 22.72% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -5.661, 0, 0, 1); } 162 | 30.23% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -10.852, 0, 0, 1); } 163 | 50.25% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.282, 0, 0, 1); } 164 | 70.27% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.519, 0, 0, 1); } 165 | 100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1; } 166 | } 167 | 168 | /* https://goo.gl/p1Hnde */ 169 | @keyframes translateRight { 170 | 0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -150, 0, 0, 1); opacity: 1; } 171 | 7.61% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -69.561, 0, 0, 1); } 172 | 11.41% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -39.355, 0, 0, 1); } 173 | 15.12% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -17.801, 0, 0, 1); } 174 | 18.92% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -3.02, 0, 0, 1); } 175 | 22.72% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 5.661, 0, 0, 1); } 176 | 30.23% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 10.852, 0, 0, 1); } 177 | 50.25% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.282, 0, 0, 1); } 178 | 70.27% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.519, 0, 0, 1); } 179 | 100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1; } 180 | } -------------------------------------------------------------------------------- /game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Quick-Puzzle Game 6 | 7 | 8 | 9 | 10 | 11 | 186 | 187 | 188 | 189 | 190 | 191 | 192 |
193 |
194 |
195 | 196 |
197 |

WELCOME TO WORD GUESSING GAME :P

198 |

#HINT: A SIX DIGIT WORD, NAME OF A CUTE GIRL. AS THIS IS A DEMO WEBSITE, ANSWER IS "SWEETY"

199 |

#Procedure: Enter one letter only once and click on Guess. Letters should be in UPPER-CASE.

200 |
201 |
202 |
203 |
204 |

205 |

206 | 207 | 208 |
209 |
210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | -------------------------------------------------------------------------------- /game/js/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * SPOILER ALERT! 3 | * WORDS FOR THE GAME ARE IN THIS FILE ;) 4 | * ©2014 Nate Wiley -- MIT License 5 | Sounds from http://soundfxnow.com, and http://www.soundjay.com 6 | Fonts from Google Fonts 7 | */ 8 | (function($, window, undefined){ 9 | 10 | Hangman = { 11 | init: function(words){ 12 | this.words = words, 13 | this.hm = $(".hangman"), 14 | this.msg = $(".message"), 15 | this.msgTitle = $(".title"), 16 | this.msgText = $(".text"), 17 | this.restart = $(".restart"), 18 | this.wrd = this.randomWord(), 19 | this.correct = 0, 20 | this.guess = $(".guess"), 21 | this.wrong = $(".wrong"), 22 | this.wrongGuesses = [], 23 | this.rightGuesses = [], 24 | this.guessForm = $(".guessForm"), 25 | this.guessLetterInput = $(".guessLetter"), 26 | this.goodSound = new Audio("https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/goodbell.mp3"), 27 | this.badSound = new Audio("https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/bad.mp3"), 28 | this.winSound = new Audio("https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/win.mp3"), 29 | this.loseSound = new Audio("https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/lose.mp3"), 30 | this.setup(); 31 | }, 32 | 33 | 34 | setup: function(){ 35 | this.binding(); 36 | this.sounds(); 37 | this.showGuess(this.wrongGuesses); 38 | this.showWrong(); 39 | 40 | }, 41 | 42 | 43 | sounds: function(){ 44 | this.badSound.volume = .4; 45 | this.goodSound.volume = .4; 46 | this.winSound.volume = .8; 47 | this.loseSound.volume = .4; 48 | 49 | }, 50 | 51 | 52 | binding: function(){ 53 | this.guessForm.on("submit", $.proxy(this.theGuess, this)); 54 | this.restart.on("click", $.proxy(this.theRestart, this)); 55 | }, 56 | 57 | 58 | 59 | 60 | 61 | theRestart: function(e){ 62 | e.preventDefault(); 63 | 64 | this.reset(); 65 | }, 66 | 67 | 68 | theGuess: function(e){ 69 | e.preventDefault(); 70 | var guess = this.guessLetterInput.val(); 71 | if(guess.match(/[a-zA-Z]/) && guess.length == 1){ 72 | if($.inArray(guess, this.wrongGuesses) > -1 || $.inArray(guess, this.rightGuesses) > -1){ 73 | 74 | this.guessLetterInput.val("").focus(); 75 | } 76 | else if(guess) { 77 | var foundLetters = this.checkGuess(guess); 78 | if(foundLetters.length > 0){ 79 | this.setLetters(foundLetters); 80 | 81 | this.guessLetterInput.val("").focus(); 82 | } else { 83 | this.wrongGuesses.push(guess); 84 | if(this.wrongGuesses.length == 10){ 85 | this.lose(); 86 | } else { 87 | this.showWrong(this.wrongGuesses); 88 | 89 | } 90 | this.guessLetterInput.val("").focus(); 91 | } 92 | } 93 | } else { 94 | this.guessLetterInput.val("").focus(); 95 | } 96 | }, 97 | 98 | randomWord: function(){ 99 | return this._wordData(this.words[ Math.floor(Math.random() * this.words.length)] ); 100 | }, 101 | 102 | 103 | showGuess: function(){ 104 | var frag = ""; 109 | this.guess.html(frag); 110 | }, 111 | 112 | 113 | showWrong: function(wrongGuesses){ 114 | if(wrongGuesses){ 115 | var frag = ""; 121 | } 122 | else { 123 | frag = ""; 124 | } 125 | 126 | this.wrong.html(frag); 127 | }, 128 | 129 | 130 | checkGuess: function(guessedLetter){ 131 | var _ = this; 132 | var found = []; 133 | $.each(this.wrd.letters, function(key, val){ 134 | if(guessedLetter == val.letter.toUpperCase()){ 135 | found.push(val); 136 | _.rightGuesses.push(val.letter); 137 | } 138 | }); 139 | return found; 140 | 141 | }, 142 | 143 | 144 | setLetters: function(letters){ 145 | var _ = this; 146 | _.correct = _.correct += letters.length; 147 | $.each(letters, function(key, val){ 148 | var letter = $("li[data-pos=" +val.pos+ "]"); 149 | letter.html(val.letter); 150 | letter.addClass("correct"); 151 | 152 | if(_.correct == _.wrd.letters.length){ 153 | _.win(); 154 | } 155 | }); 156 | }, 157 | 158 | 159 | _wordData: function(word){ 160 | 161 | return { 162 | letters: this._letters(word), 163 | word: word.toUpperCase(), 164 | totalLetters: word.length 165 | }; 166 | }, 167 | 168 | 169 | hideMsg: function(){ 170 | this.msg.hide(); 171 | this.msgTitle.hide(); 172 | this.restart.hide(); 173 | this.msgText.hide(); 174 | }, 175 | 176 | 177 | showMsg: function(){ 178 | var _ = this; 179 | _.msg.show("blind", function(){ 180 | _.msgTitle.show("bounce", "slow", function(){ 181 | _.msgText.show("slide", function(){ 182 | _.restart.show("fade"); 183 | }); 184 | 185 | }); 186 | 187 | }); 188 | }, 189 | 190 | 191 | reset: function(){ 192 | this.hideMsg(); 193 | this.init(this.words); 194 | this.hm.find(".guessLetter").focus(); 195 | 196 | }, 197 | 198 | 199 | _letters: function(word){ 200 | var letters = []; 201 | for(var i=0; i"+ this.wrd.word +""); 234 | this.msgText.html("Don't worry, TRY AGAIN by reloading the page, or proceed to the 3 Dimensional Space :p "); 235 | this.showMsg(); 236 | } 237 | 238 | }; 239 | 240 | var wordList = ["SWEETY"]; 241 | 242 | Hangman.init(wordList); 243 | 244 | })(jQuery, window); 245 | -------------------------------------------------------------------------------- /gallary/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 66 |
67 |
68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 7 82 | 2 83 | 3 84 | 4 85 | 5 86 | 6 87 |
88 |
89 | 90 | 310 | 311 | -------------------------------------------------------------------------------- /hbd/js/index.js: -------------------------------------------------------------------------------- 1 | var w = c.width = window.innerWidth, 2 | h = c.height = window.innerHeight, 3 | ctx = c.getContext( '2d' ), 4 | 5 | hw = w / 2, // half-width 6 | hh = h / 2, 7 | 8 | opts = { 9 | strings: [ 'HAPPY', 'BIRTHDAY','SWEETY' ], 10 | charSize: 30, 11 | charSpacing: 35, 12 | lineHeight: 40, 13 | 14 | cx: w / 2, 15 | cy: h / 2, 16 | 17 | fireworkPrevPoints: 10, 18 | fireworkBaseLineWidth: 5, 19 | fireworkAddedLineWidth: 8, 20 | fireworkSpawnTime: 200, 21 | fireworkBaseReachTime: 30, 22 | fireworkAddedReachTime: 30, 23 | fireworkCircleBaseSize: 20, 24 | fireworkCircleAddedSize: 10, 25 | fireworkCircleBaseTime: 30, 26 | fireworkCircleAddedTime: 30, 27 | fireworkCircleFadeBaseTime: 10, 28 | fireworkCircleFadeAddedTime: 5, 29 | fireworkBaseShards: 5, 30 | fireworkAddedShards: 5, 31 | fireworkShardPrevPoints: 3, 32 | fireworkShardBaseVel: 4, 33 | fireworkShardAddedVel: 2, 34 | fireworkShardBaseSize: 3, 35 | fireworkShardAddedSize: 3, 36 | gravity: .1, 37 | upFlow: -.1, 38 | letterContemplatingWaitTime: 360, 39 | balloonSpawnTime: 20, 40 | balloonBaseInflateTime: 10, 41 | balloonAddedInflateTime: 10, 42 | balloonBaseSize: 20, 43 | balloonAddedSize: 20, 44 | balloonBaseVel: .4, 45 | balloonAddedVel: .4, 46 | balloonBaseRadian: -( Math.PI / 2 - .5 ), 47 | balloonAddedRadian: -1, 48 | }, 49 | calc = { 50 | totalWidth: opts.charSpacing * Math.max( opts.strings[0].length, opts.strings[1].length ) 51 | }, 52 | 53 | Tau = Math.PI * 2, 54 | TauQuarter = Tau / 4, 55 | 56 | letters = []; 57 | 58 | ctx.font = opts.charSize + 'px Verdana'; 59 | 60 | function Letter( char, x, y ){ 61 | this.char = char; 62 | this.x = x; 63 | this.y = y; 64 | 65 | this.dx = -ctx.measureText( char ).width / 2; 66 | this.dy = +opts.charSize / 2; 67 | 68 | this.fireworkDy = this.y - hh; 69 | 70 | var hue = x / calc.totalWidth * 360; 71 | 72 | this.color = 'hsl(hue,80%,50%)'.replace( 'hue', hue ); 73 | this.lightAlphaColor = 'hsla(hue,80%,light%,alp)'.replace( 'hue', hue ); 74 | this.lightColor = 'hsl(hue,80%,light%)'.replace( 'hue', hue ); 75 | this.alphaColor = 'hsla(hue,80%,50%,alp)'.replace( 'hue', hue ); 76 | 77 | this.reset(); 78 | } 79 | Letter.prototype.reset = function(){ 80 | 81 | this.phase = 'firework'; 82 | this.tick = 0; 83 | this.spawned = false; 84 | this.spawningTime = opts.fireworkSpawnTime * Math.random() |0; 85 | this.reachTime = opts.fireworkBaseReachTime + opts.fireworkAddedReachTime * Math.random() |0; 86 | this.lineWidth = opts.fireworkBaseLineWidth + opts.fireworkAddedLineWidth * Math.random(); 87 | this.prevPoints = [ [ 0, hh, 0 ] ]; 88 | } 89 | Letter.prototype.step = function(){ 90 | 91 | if( this.phase === 'firework' ){ 92 | 93 | if( !this.spawned ){ 94 | 95 | ++this.tick; 96 | if( this.tick >= this.spawningTime ){ 97 | 98 | this.tick = 0; 99 | this.spawned = true; 100 | } 101 | 102 | } else { 103 | 104 | ++this.tick; 105 | 106 | var linearProportion = this.tick / this.reachTime, 107 | armonicProportion = Math.sin( linearProportion * TauQuarter ), 108 | 109 | x = linearProportion * this.x, 110 | y = hh + armonicProportion * this.fireworkDy; 111 | 112 | if( this.prevPoints.length > opts.fireworkPrevPoints ) 113 | this.prevPoints.shift(); 114 | 115 | this.prevPoints.push( [ x, y, linearProportion * this.lineWidth ] ); 116 | 117 | var lineWidthProportion = 1 / ( this.prevPoints.length - 1 ); 118 | 119 | for( var i = 1; i < this.prevPoints.length; ++i ){ 120 | 121 | var point = this.prevPoints[ i ], 122 | point2 = this.prevPoints[ i - 1 ]; 123 | 124 | ctx.strokeStyle = this.alphaColor.replace( 'alp', i / this.prevPoints.length ); 125 | ctx.lineWidth = point[ 2 ] * lineWidthProportion * i; 126 | ctx.beginPath(); 127 | ctx.moveTo( point[ 0 ], point[ 1 ] ); 128 | ctx.lineTo( point2[ 0 ], point2[ 1 ] ); 129 | ctx.stroke(); 130 | 131 | } 132 | 133 | if( this.tick >= this.reachTime ){ 134 | 135 | this.phase = 'contemplate'; 136 | 137 | this.circleFinalSize = opts.fireworkCircleBaseSize + opts.fireworkCircleAddedSize * Math.random(); 138 | this.circleCompleteTime = opts.fireworkCircleBaseTime + opts.fireworkCircleAddedTime * Math.random() |0; 139 | this.circleCreating = true; 140 | this.circleFading = false; 141 | 142 | this.circleFadeTime = opts.fireworkCircleFadeBaseTime + opts.fireworkCircleFadeAddedTime * Math.random() |0; 143 | this.tick = 0; 144 | this.tick2 = 0; 145 | 146 | this.shards = []; 147 | 148 | var shardCount = opts.fireworkBaseShards + opts.fireworkAddedShards * Math.random() |0, 149 | angle = Tau / shardCount, 150 | cos = Math.cos( angle ), 151 | sin = Math.sin( angle ), 152 | 153 | x = 1, 154 | y = 0; 155 | 156 | for( var i = 0; i < shardCount; ++i ){ 157 | var x1 = x; 158 | x = x * cos - y * sin; 159 | y = y * cos + x1 * sin; 160 | 161 | this.shards.push( new Shard( this.x, this.y, x, y, this.alphaColor ) ); 162 | } 163 | } 164 | 165 | } 166 | } else if( this.phase === 'contemplate' ){ 167 | 168 | ++this.tick; 169 | 170 | if( this.circleCreating ){ 171 | 172 | ++this.tick2; 173 | var proportion = this.tick2 / this.circleCompleteTime, 174 | armonic = -Math.cos( proportion * Math.PI ) / 2 + .5; 175 | 176 | ctx.beginPath(); 177 | ctx.fillStyle = this.lightAlphaColor.replace( 'light', 50 + 50 * proportion ).replace( 'alp', proportion ); 178 | ctx.beginPath(); 179 | ctx.arc( this.x, this.y, armonic * this.circleFinalSize, 0, Tau ); 180 | ctx.fill(); 181 | 182 | if( this.tick2 > this.circleCompleteTime ){ 183 | this.tick2 = 0; 184 | this.circleCreating = false; 185 | this.circleFading = true; 186 | } 187 | } else if( this.circleFading ){ 188 | 189 | ctx.fillStyle = this.lightColor.replace( 'light', 70 ); 190 | ctx.fillText( this.char, this.x + this.dx, this.y + this.dy ); 191 | 192 | ++this.tick2; 193 | var proportion = this.tick2 / this.circleFadeTime, 194 | armonic = -Math.cos( proportion * Math.PI ) / 2 + .5; 195 | 196 | ctx.beginPath(); 197 | ctx.fillStyle = this.lightAlphaColor.replace( 'light', 100 ).replace( 'alp', 1 - armonic ); 198 | ctx.arc( this.x, this.y, this.circleFinalSize, 0, Tau ); 199 | ctx.fill(); 200 | 201 | if( this.tick2 >= this.circleFadeTime ) 202 | this.circleFading = false; 203 | 204 | } else { 205 | 206 | ctx.fillStyle = this.lightColor.replace( 'light', 70 ); 207 | ctx.fillText( this.char, this.x + this.dx, this.y + this.dy ); 208 | } 209 | 210 | for( var i = 0; i < this.shards.length; ++i ){ 211 | 212 | this.shards[ i ].step(); 213 | 214 | if( !this.shards[ i ].alive ){ 215 | this.shards.splice( i, 1 ); 216 | --i; 217 | } 218 | } 219 | 220 | if( this.tick > opts.letterContemplatingWaitTime ){ 221 | 222 | this.phase = 'balloon'; 223 | 224 | this.tick = 0; 225 | this.spawning = true; 226 | this.spawnTime = opts.balloonSpawnTime * Math.random() |0; 227 | this.inflating = false; 228 | this.inflateTime = opts.balloonBaseInflateTime + opts.balloonAddedInflateTime * Math.random() |0; 229 | this.size = opts.balloonBaseSize + opts.balloonAddedSize * Math.random() |0; 230 | 231 | var rad = opts.balloonBaseRadian + opts.balloonAddedRadian * Math.random(), 232 | vel = opts.balloonBaseVel + opts.balloonAddedVel * Math.random(); 233 | 234 | this.vx = Math.cos( rad ) * vel; 235 | this.vy = Math.sin( rad ) * vel; 236 | } 237 | } else if( this.phase === 'balloon' ){ 238 | 239 | ctx.strokeStyle = this.lightColor.replace( 'light', 80 ); 240 | 241 | if( this.spawning ){ 242 | 243 | ++this.tick; 244 | ctx.fillStyle = this.lightColor.replace( 'light', 70 ); 245 | ctx.fillText( this.char, this.x + this.dx, this.y + this.dy ); 246 | 247 | if( this.tick >= this.spawnTime ){ 248 | this.tick = 0; 249 | this.spawning = false; 250 | this.inflating = true; 251 | } 252 | } else if( this.inflating ){ 253 | 254 | ++this.tick; 255 | 256 | var proportion = this.tick / this.inflateTime, 257 | x = this.cx = this.x, 258 | y = this.cy = this.y - this.size * proportion; 259 | 260 | ctx.fillStyle = this.alphaColor.replace( 'alp', proportion ); 261 | ctx.beginPath(); 262 | generateBalloonPath( x, y, this.size * proportion ); 263 | ctx.fill(); 264 | 265 | ctx.beginPath(); 266 | ctx.moveTo( x, y ); 267 | ctx.lineTo( x, this.y ); 268 | ctx.stroke(); 269 | 270 | ctx.fillStyle = this.lightColor.replace( 'light', 70 ); 271 | ctx.fillText( this.char, this.x + this.dx, this.y + this.dy ); 272 | 273 | if( this.tick >= this.inflateTime ){ 274 | this.tick = 0; 275 | this.inflating = false; 276 | } 277 | 278 | } else { 279 | 280 | this.cx += this.vx; 281 | this.cy += this.vy += opts.upFlow; 282 | 283 | ctx.fillStyle = this.color; 284 | ctx.beginPath(); 285 | generateBalloonPath( this.cx, this.cy, this.size ); 286 | ctx.fill(); 287 | 288 | ctx.beginPath(); 289 | ctx.moveTo( this.cx, this.cy ); 290 | ctx.lineTo( this.cx, this.cy + this.size ); 291 | ctx.stroke(); 292 | 293 | ctx.fillStyle = this.lightColor.replace( 'light', 70 ); 294 | ctx.fillText( this.char, this.cx + this.dx, this.cy + this.dy + this.size ); 295 | 296 | if( this.cy + this.size < -hh || this.cx < -hw || this.cy > hw ) 297 | this.phase = 'done'; 298 | 299 | } 300 | } 301 | } 302 | function Shard( x, y, vx, vy, color ){ 303 | 304 | var vel = opts.fireworkShardBaseVel + opts.fireworkShardAddedVel * Math.random(); 305 | 306 | this.vx = vx * vel; 307 | this.vy = vy * vel; 308 | 309 | this.x = x; 310 | this.y = y; 311 | 312 | this.prevPoints = [ [ x, y ] ]; 313 | this.color = color; 314 | 315 | this.alive = true; 316 | 317 | this.size = opts.fireworkShardBaseSize + opts.fireworkShardAddedSize * Math.random(); 318 | } 319 | Shard.prototype.step = function(){ 320 | 321 | this.x += this.vx; 322 | this.y += this.vy += opts.gravity; 323 | 324 | if( this.prevPoints.length > opts.fireworkShardPrevPoints ) 325 | this.prevPoints.shift(); 326 | 327 | this.prevPoints.push( [ this.x, this.y ] ); 328 | 329 | var lineWidthProportion = this.size / this.prevPoints.length; 330 | 331 | for( var k = 0; k < this.prevPoints.length - 1; ++k ){ 332 | 333 | var point = this.prevPoints[ k ], 334 | point2 = this.prevPoints[ k + 1 ]; 335 | 336 | ctx.strokeStyle = this.color.replace( 'alp', k / this.prevPoints.length ); 337 | ctx.lineWidth = k * lineWidthProportion; 338 | ctx.beginPath(); 339 | ctx.moveTo( point[ 0 ], point[ 1 ] ); 340 | ctx.lineTo( point2[ 0 ], point2[ 1 ] ); 341 | ctx.stroke(); 342 | 343 | } 344 | 345 | if( this.prevPoints[ 0 ][ 1 ] > hh ) 346 | this.alive = false; 347 | } 348 | function generateBalloonPath( x, y, size ){ 349 | 350 | ctx.moveTo( x, y ); 351 | ctx.bezierCurveTo( x - size / 2, y - size / 2, 352 | x - size / 4, y - size, 353 | x, y - size ); 354 | ctx.bezierCurveTo( x + size / 4, y - size, 355 | x + size / 2, y - size / 2, 356 | x, y ); 357 | } 358 | 359 | function anim(){ 360 | 361 | window.requestAnimationFrame( anim ); 362 | 363 | ctx.fillStyle = '#111'; 364 | ctx.fillRect( 0, 0, w, h ); 365 | 366 | ctx.translate( hw, hh ); 367 | 368 | var done = true; 369 | for( var l = 0; l < letters.length; ++l ){ 370 | 371 | letters[ l ].step(); 372 | if( letters[ l ].phase !== 'done' ) 373 | done = false; 374 | } 375 | 376 | ctx.translate( -hw, -hh ); 377 | 378 | if( done ) 379 | for( var l = 0; l < letters.length; ++l ) 380 | letters[ l ].reset(); 381 | } 382 | 383 | for( var i = 0; i < opts.strings.length; ++i ){ 384 | for( var j = 0; j < opts.strings[ i ].length; ++j ){ 385 | letters.push( new Letter( opts.strings[ i ][ j ], 386 | j * opts.charSpacing + opts.charSpacing / 2 - opts.strings[ i ].length * opts.charSize / 2, 387 | i * opts.lineHeight + opts.lineHeight / 2 - opts.strings.length * opts.lineHeight / 2 ) ); 388 | } 389 | } 390 | 391 | anim(); 392 | 393 | window.addEventListener( 'resize', function(){ 394 | 395 | w = c.width = window.innerWidth; 396 | h = c.height = window.innerHeight; 397 | 398 | hw = w / 2; 399 | hh = h / 2; 400 | 401 | ctx.font = opts.charSize + 'px Verdana'; 402 | }) 403 | -------------------------------------------------------------------------------- /challange/css/style.css: -------------------------------------------------------------------------------- 1 | *, *:before, *:after { 2 | box-sizing: border-box; 3 | } 4 | 5 | * { 6 | -webkit-tap-highlight-color: transparent; 7 | -webkit-transform-style: preserve-3d; 8 | transform-style: preserve-3d; 9 | } 10 | 11 | *:focus { 12 | outline: none !important; 13 | } 14 | 15 | body, html { 16 | height: 100%; 17 | } 18 | 19 | body { 20 | display: -webkit-box; 21 | display: -ms-flexbox; 22 | display: flex; 23 | -webkit-box-align: center; 24 | -ms-flex-align: center; 25 | align-items: center; 26 | -ms-flex-line-pack: center; 27 | align-content: center; 28 | -webkit-box-pack: center; 29 | -ms-flex-pack: center; 30 | justify-content: center; 31 | padding: 12px; 32 | background: #000000; 33 | color: white; 34 | font-family: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; 35 | font-size: 24px; 36 | text-rendering: optimizeLegibility; 37 | -webkit-font-smoothing: antialiased; 38 | } 39 | 40 | ::-moz-selection { 41 | background: none; 42 | } 43 | 44 | ::selection { 45 | background: none; 46 | } 47 | 48 | a { 49 | display: block; 50 | cursor: pointer; 51 | -webkit-animation: pulseColor 1000ms linear 3100ms forwards; 52 | animation: pulseColor 1000ms linear 3100ms forwards; 53 | font-weight: 500; 54 | } 55 | a:hover b, a:focus b { 56 | color: #F04F54; 57 | } 58 | a:active b { 59 | color: #43CB9D; 60 | } 61 | 62 | svg { 63 | width: 50px; 64 | height: auto; 65 | } 66 | 67 | .crack { 68 | position: relative; 69 | z-index: 4; 70 | margin-left: -50px; 71 | } 72 | .crack polyline { 73 | fill: none; 74 | stroke: #F04F54; 75 | stroke-width: 10px; 76 | stroke-linecap: round; 77 | stroke-linejoin: round; 78 | stroke-dasharray: 1649.099; 79 | stroke-dashoffset: 1649.099; 80 | -webkit-animation: drawStroke 1500ms ease-out 500ms forwards; 81 | animation: drawStroke 1500ms ease-out 500ms forwards; 82 | } 83 | 84 | main { 85 | display: -webkit-box; 86 | display: -ms-flexbox; 87 | display: flex; 88 | -webkit-box-align: center; 89 | -ms-flex-align: center; 90 | align-items: center; 91 | -ms-flex-line-pack: center; 92 | align-content: center; 93 | -webkit-box-pack: center; 94 | -ms-flex-pack: center; 95 | justify-content: center; 96 | } 97 | main > div { 98 | display: -webkit-box; 99 | display: -ms-flexbox; 100 | display: flex; 101 | -webkit-box-align: center; 102 | -ms-flex-align: center; 103 | align-items: center; 104 | -ms-flex-line-pack: center; 105 | align-content: center; 106 | position: relative; 107 | overflow: hidden; 108 | } 109 | main > div svg { 110 | position: relative; 111 | z-index: 1; 112 | } 113 | main > div svg polygon { 114 | fill: #000000; 115 | } 116 | main > div span { 117 | display: block; 118 | position: relative; 119 | z-index: 0; 120 | padding: 0 12px; 121 | line-height: 1.4; 122 | } 123 | main > div:first-child { 124 | text-align: right; 125 | z-index: 1; 126 | } 127 | main > div:first-child span:first-child { 128 | opacity: 0; 129 | -webkit-transform: translateX(100%); 130 | transform: translateX(100%); 131 | -webkit-animation: translateLeft 1000ms linear 1250ms forwards; 132 | animation: translateLeft 1000ms linear 1250ms forwards; 133 | } 134 | main > div:first-child span:last-child { 135 | opacity: 0; 136 | -webkit-transform: translateX(100%); 137 | transform: translateX(100%); 138 | -webkit-animation: translateLeft 1000ms linear 1450ms forwards; 139 | animation: translateLeft 1000ms linear 1450ms forwards; 140 | } 141 | main > div:first-child svg polygon { 142 | -webkit-animation: removeFill 10ms ease-out 1600ms forwards; 143 | animation: removeFill 10ms ease-out 1600ms forwards; 144 | } 145 | main > div:last-child { 146 | z-index: 0; 147 | margin-left: -50px; 148 | } 149 | main > div:last-child span:first-child { 150 | opacity: 0; 151 | -webkit-transform: translateX(-100%); 152 | transform: translateX(-100%); 153 | -webkit-animation: translateRight 1000ms linear 1650ms forwards; 154 | animation: translateRight 1000ms linear 1650ms forwards; 155 | } 156 | main > div:last-child span:last-child { 157 | opacity: 0; 158 | -webkit-transform: translateX(-100%); 159 | transform: translateX(-100%); 160 | -webkit-animation: translateRight 1000ms linear 1850ms forwards; 161 | animation: translateRight 1000ms linear 1850ms forwards; 162 | } 163 | 164 | @-webkit-keyframes drawStroke { 165 | 0% { 166 | stroke-dashoffset: 1649.099; 167 | } 168 | 100% { 169 | stroke-dashoffset: 0; 170 | } 171 | } 172 | 173 | @keyframes drawStroke { 174 | 0% { 175 | stroke-dashoffset: 1649.099; 176 | } 177 | 100% { 178 | stroke-dashoffset: 0; 179 | } 180 | } 181 | @-webkit-keyframes removeFill { 182 | 0% { 183 | fill: #000000; 184 | } 185 | 100% { 186 | fill: rgba(52, 52, 52, 0); 187 | } 188 | } 189 | @keyframes removeFill { 190 | 0% { 191 | fill: #000000; 192 | } 193 | 100% { 194 | fill: rgba(52, 52, 52, 0); 195 | } 196 | } 197 | @-webkit-keyframes pulseColor { 198 | 0% { 199 | color: white; 200 | } 201 | 25% { 202 | color: #43CB9D; 203 | } 204 | 50% { 205 | color: white; 206 | } 207 | 75% { 208 | color: #43CB9D; 209 | } 210 | 100% { 211 | color: white; 212 | } 213 | } 214 | @keyframes pulseColor { 215 | 0% { 216 | color: white; 217 | } 218 | 25% { 219 | color: #43CB9D; 220 | } 221 | 50% { 222 | color: white; 223 | } 224 | 75% { 225 | color: #43CB9D; 226 | } 227 | 100% { 228 | color: white; 229 | } 230 | } 231 | /* https://goo.gl/v323yz */ 232 | @-webkit-keyframes translateLeft { 233 | 0% { 234 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 150, 0, 0, 1); 235 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 150, 0, 0, 1); 236 | opacity: 1; 237 | } 238 | 7.61% { 239 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 69.561, 0, 0, 1); 240 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 69.561, 0, 0, 1); 241 | } 242 | 11.41% { 243 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 39.355, 0, 0, 1); 244 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 39.355, 0, 0, 1); 245 | } 246 | 15.12% { 247 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 17.801, 0, 0, 1); 248 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 17.801, 0, 0, 1); 249 | } 250 | 18.92% { 251 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.02, 0, 0, 1); 252 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.02, 0, 0, 1); 253 | } 254 | 22.72% { 255 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -5.661, 0, 0, 1); 256 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -5.661, 0, 0, 1); 257 | } 258 | 30.23% { 259 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -10.852, 0, 0, 1); 260 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -10.852, 0, 0, 1); 261 | } 262 | 50.25% { 263 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.282, 0, 0, 1); 264 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.282, 0, 0, 1); 265 | } 266 | 70.27% { 267 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.519, 0, 0, 1); 268 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.519, 0, 0, 1); 269 | } 270 | 100% { 271 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 272 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 273 | opacity: 1; 274 | } 275 | } 276 | @keyframes translateLeft { 277 | 0% { 278 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 150, 0, 0, 1); 279 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 150, 0, 0, 1); 280 | opacity: 1; 281 | } 282 | 7.61% { 283 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 69.561, 0, 0, 1); 284 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 69.561, 0, 0, 1); 285 | } 286 | 11.41% { 287 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 39.355, 0, 0, 1); 288 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 39.355, 0, 0, 1); 289 | } 290 | 15.12% { 291 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 17.801, 0, 0, 1); 292 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 17.801, 0, 0, 1); 293 | } 294 | 18.92% { 295 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.02, 0, 0, 1); 296 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.02, 0, 0, 1); 297 | } 298 | 22.72% { 299 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -5.661, 0, 0, 1); 300 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -5.661, 0, 0, 1); 301 | } 302 | 30.23% { 303 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -10.852, 0, 0, 1); 304 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -10.852, 0, 0, 1); 305 | } 306 | 50.25% { 307 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.282, 0, 0, 1); 308 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.282, 0, 0, 1); 309 | } 310 | 70.27% { 311 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.519, 0, 0, 1); 312 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.519, 0, 0, 1); 313 | } 314 | 100% { 315 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 316 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 317 | opacity: 1; 318 | } 319 | } 320 | /* https://goo.gl/p1Hnde */ 321 | @-webkit-keyframes translateRight { 322 | 0% { 323 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -150, 0, 0, 1); 324 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -150, 0, 0, 1); 325 | opacity: 1; 326 | } 327 | 7.61% { 328 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -69.561, 0, 0, 1); 329 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -69.561, 0, 0, 1); 330 | } 331 | 11.41% { 332 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -39.355, 0, 0, 1); 333 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -39.355, 0, 0, 1); 334 | } 335 | 15.12% { 336 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -17.801, 0, 0, 1); 337 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -17.801, 0, 0, 1); 338 | } 339 | 18.92% { 340 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -3.02, 0, 0, 1); 341 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -3.02, 0, 0, 1); 342 | } 343 | 22.72% { 344 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 5.661, 0, 0, 1); 345 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 5.661, 0, 0, 1); 346 | } 347 | 30.23% { 348 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 10.852, 0, 0, 1); 349 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 10.852, 0, 0, 1); 350 | } 351 | 50.25% { 352 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.282, 0, 0, 1); 353 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.282, 0, 0, 1); 354 | } 355 | 70.27% { 356 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.519, 0, 0, 1); 357 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.519, 0, 0, 1); 358 | } 359 | 100% { 360 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 361 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 362 | opacity: 1; 363 | } 364 | } 365 | @keyframes translateRight { 366 | 0% { 367 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -150, 0, 0, 1); 368 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -150, 0, 0, 1); 369 | opacity: 1; 370 | } 371 | 7.61% { 372 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -69.561, 0, 0, 1); 373 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -69.561, 0, 0, 1); 374 | } 375 | 11.41% { 376 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -39.355, 0, 0, 1); 377 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -39.355, 0, 0, 1); 378 | } 379 | 15.12% { 380 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -17.801, 0, 0, 1); 381 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -17.801, 0, 0, 1); 382 | } 383 | 18.92% { 384 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -3.02, 0, 0, 1); 385 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -3.02, 0, 0, 1); 386 | } 387 | 22.72% { 388 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 5.661, 0, 0, 1); 389 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 5.661, 0, 0, 1); 390 | } 391 | 30.23% { 392 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 10.852, 0, 0, 1); 393 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 10.852, 0, 0, 1); 394 | } 395 | 50.25% { 396 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.282, 0, 0, 1); 397 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.282, 0, 0, 1); 398 | } 399 | 70.27% { 400 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.519, 0, 0, 1); 401 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.519, 0, 0, 1); 402 | } 403 | 100% { 404 | -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 405 | transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 406 | opacity: 1; 407 | } 408 | } 409 | -------------------------------------------------------------------------------- /errorr/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 46 | 47 | HATE-ERROR 404 48 | 269 | 270 | 271 | 272 |
273 | 274 |
275 |
276 | 

277 |       	 <!DOCTYPE html>
278 |       <html>
279 |           <style>
280 |          * {
281 |       		        everything:awesome;
282 |       }
283 |            </style>
284 |        <body>
285 |                     ERROR 404!
286 |       				YOU DONT HATE ME <3
287 |       				<!--NOW GO BACK, 😂 LOL .-->
288 |       		
289 |        
290 | 
291 | 
292 | 
293 |
294 |
295 | 296 |
297 | 298 |  </body> 299 | 300 |
301 | </html> 302 | 303 |
304 |
305 | 306 | 307 | 308 | 309 | 310 |

311 |
312 | 313 | 314 |

CLICK BELOW --

315 | 316 | 317 |
318 |

319 | 320 | --------------------------------------------------------------------------------