├── assest ├── bedug.webp ├── gambar │ ├── bg.jpg │ └── pintumobile.png └── suara │ └── takbiran.mp3 ├── css └── style.css ├── index.html ├── js └── script.js └── renovate.json /assest/bedug.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bagussatoto/Ucapan-Lebaran-2024/bbe715f6a0afb517a3415cb86c7bf45eac4c5c19/assest/bedug.webp -------------------------------------------------------------------------------- /assest/gambar/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bagussatoto/Ucapan-Lebaran-2024/bbe715f6a0afb517a3415cb86c7bf45eac4c5c19/assest/gambar/bg.jpg -------------------------------------------------------------------------------- /assest/gambar/pintumobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bagussatoto/Ucapan-Lebaran-2024/bbe715f6a0afb517a3415cb86c7bf45eac4c5c19/assest/gambar/pintumobile.png -------------------------------------------------------------------------------- /assest/suara/takbiran.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bagussatoto/Ucapan-Lebaran-2024/bbe715f6a0afb517a3415cb86c7bf45eac4c5c19/assest/suara/takbiran.mp3 -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | .door { 3 | height: 100%; 4 | width: 100%; 5 | position: relative; 6 | overflow: hidden; 7 | } 8 | 9 | body { 10 | font-size: 10pt; 11 | width: 100%; 12 | height: 100%; 13 | background-size: cover; 14 | overflow-x: hidden !important; 15 | } 16 | 17 | .kotakteks { 18 | top: 45%; 19 | width: 100%; 20 | position: absolute; 21 | left: calc(50% - 50%); 22 | text-align: center; 23 | } 24 | 25 | .kotakutama { 26 | overflow-y: hidden; 27 | width: 100%; 28 | height: 100%; 29 | background-image: url('/assest/gambar/bg.jpg'); 30 | background-position: center; 31 | background-size: cover; 32 | background-repeat: no-repeat; 33 | } 34 | 35 | .kotakutama .bedug { 36 | width: 30%; 37 | position: absolute; 38 | bottom: 0; 39 | } 40 | 41 | .door { 42 | position: absolute; 43 | top: 0; 44 | left: 0; 45 | right: 0; 46 | bottom: 0; 47 | z-index: 18796; 48 | } 49 | 50 | .door .left, 51 | .door .right { 52 | font-size: 10pt; 53 | display: inline-block; 54 | width: calc(50% - 2.5px); 55 | height: 100%; 56 | background-image: url('https://img.freepik.com/free-vector/ramadan-kareem-wishes-greeting-with-mosque-door_1017-30695.jpg'); 57 | background-repeat: no-repeat; 58 | background-size: cover; 59 | background-position: center; 60 | } 61 | 62 | .door .left { 63 | float: left; 64 | border-right: solid 2.5px #ab6b21; 65 | } 66 | 67 | .door .right { 68 | float: right; 69 | border-left: solid 2.5px #ab6b21; 70 | } 71 | 72 | .enter { 73 | cursor: pointer; 74 | display: block; 75 | top: 0; 76 | left: 0; 77 | right: 0; 78 | bottom: 0; 79 | height: 30px; 80 | width: 100px; 81 | text-align: center; 82 | line-height: 30px; 83 | border-radius: 5px; 84 | z-index: 18797; 85 | position: absolute; 86 | padding: 5px 10px; 87 | margin: auto; 88 | background: #ab6b21; 89 | color: #fff; 90 | border: solid 3px #fff; 91 | font-weight: bold; 92 | } 93 | 94 | .enter:hover { 95 | background: #fff; 96 | color: #ab6b21; 97 | border: solid 3px #ab6b21; 98 | } 99 | 100 | .ml10 { 101 | position: relative; 102 | font-weight: 900; 103 | font-size: 2.6em; 104 | color: #fff; 105 | } 106 | 107 | .ml10 .letter { 108 | display: inline-block; 109 | line-height: 1em; 110 | transform-origin: 0 0; 111 | } 112 | 113 | @media (min-width: 290px) and (max-width: 670px) { 114 | 115 | .door .left { 116 | float: left; 117 | border-right: solid 2.5px #005870; 118 | } 119 | 120 | .door .right { 121 | float: right; 122 | border-left: solid 2.5px #005870; 123 | } 124 | 125 | .enter { 126 | cursor: pointer; 127 | display: block; 128 | top: 0; 129 | left: 0; 130 | right: 0; 131 | bottom: 0; 132 | height: 30px; 133 | width: 100px; 134 | text-align: center; 135 | line-height: 30px; 136 | border-radius: 5px; 137 | z-index: 18797; 138 | position: absolute; 139 | padding: 5px 10px; 140 | margin: auto; 141 | background: #005870; 142 | color: #fff; 143 | border: solid 3px #fff; 144 | font-weight: bold; 145 | } 146 | 147 | .enter:hover { 148 | background: #fff; 149 | color: #005870; 150 | border: solid 3px #005870; 151 | } 152 | 153 | .door .left, 154 | .door .right { 155 | font-size: 10pt; 156 | display: inline-block; 157 | width: calc(50% - 2.5px); 158 | height: 100%; 159 | background-image: url('/assest/gambar/pintumobile.png'); 160 | background-repeat: no-repeat; 161 | background-size: cover; 162 | background-position: center; 163 | } 164 | 165 | .kotakutama { 166 | overflow-y: hidden; 167 | width: 100%; 168 | height: 100%; 169 | background-image: url('/assest/gambar/bg.jpg'); 170 | background-position: center; 171 | background-size: 300% 100%; 172 | background-repeat: no-repeat; 173 | } 174 | 175 | .kotakutama .bedug { 176 | width: 80%; 177 | position: absolute; 178 | bottom: 0; 179 | left: 5%; 180 | } 181 | 182 | .kotakteks { 183 | top: 50%; 184 | width: 100%; 185 | position: absolute; 186 | left: calc(50% - 50%); 187 | text-align: center; 188 | } 189 | 190 | .ml10 { 191 | position: relative; 192 | font-weight: 900; 193 | font-size: 1.6em; 194 | color: #fff; 195 | } 196 | 197 | .ml10 .letter { 198 | display: inline-block; 199 | line-height: 1em; 200 | transform-origin: 0 0; 201 | } 202 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Selamat Hari Raya Idul Fitri 1445H 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
YUK DIBUKA
19 |
20 |
21 |
22 |
23 |
24 |
25 |

26 | 27 | SELAMAT MERAYAKAN 28 | 29 |
30 | 31 | HARI RAYA IDUL FITRI 1445H 32 |

33 |
34 | 35 | 36 |
37 | 38 | 39 | 40 | 41 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /js/script.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function () { 2 | $(".enter").click(function () { 3 | unlock($(".enter")); 4 | const audio = new Audio("assest/suara/takbiran.mp3"); 5 | audio.play(); 6 | }); 7 | }); 8 | 9 | function open(left, right, button) { 10 | TweenLite.to(left, 1.5, { 11 | width: 0 12 | }); 13 | TweenLite.to(right, 1.5, { 14 | width: 0 15 | }); 16 | TweenLite.to(button, 1.5, { 17 | "margin-left": "-60px", 18 | onComplete: function () { 19 | // Remove doors and button 20 | left.parent().remove(); 21 | button.remove(); 22 | } 23 | }); 24 | } 25 | 26 | function unlock(el) { 27 | TweenLite.to(el, 0.5, { 28 | transform: "rotate(90deg)", 29 | onComplete: function () { 30 | open($(".door .left"), $(".door .right"), el); 31 | } 32 | }) 33 | 34 | var textWrapper = document.querySelector('.ml10 .letter'); 35 | textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "$&"); 36 | 37 | var textWrapperxa = document.querySelector('.ml10 .letterz'); 38 | textWrapperxa.innerHTML = textWrapperxa.textContent.replace(/\S/g, "$&"); 39 | 40 | anime.timeline({loop: true}) 41 | .add({ 42 | targets: '.ml10 .letter', 43 | rotateY: [-90, 0], 44 | duration: 9000, 45 | delay: 1500 46 | }).add({ 47 | targets: '.ml10', 48 | opacity: 0, 49 | duration: 1000, 50 | easing: "easeOutExpo", 51 | delay: 100000000000000000000 52 | }) 53 | 54 | 55 | 56 | .add({ 57 | targets: '.ml10 .letterz', 58 | rotateY: [-90, 0], 59 | duration: 9000, 60 | delay: 1500 61 | }).add({ 62 | targets: '.ml10', 63 | opacity: 0, 64 | duration: 1000, 65 | easing: "easeOutExpo", 66 | delay: 100000000000000000000 67 | }); 68 | } 69 | 70 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "config:base" 4 | ] 5 | } 6 | --------------------------------------------------------------------------------