├── .DS_Store ├── silence.mp3 ├── assets ├── audio.mp3 ├── images │ ├── shape.png │ ├── telkom.png │ ├── mas-agus.png │ ├── mas-pras.png │ └── indihome-fiber.png ├── js │ └── script.js └── css │ └── style.css ├── LICENSE ├── README.md └── index.html /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bagusindrayana/indibubur/HEAD/.DS_Store -------------------------------------------------------------------------------- /silence.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bagusindrayana/indibubur/HEAD/silence.mp3 -------------------------------------------------------------------------------- /assets/audio.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bagusindrayana/indibubur/HEAD/assets/audio.mp3 -------------------------------------------------------------------------------- /assets/images/shape.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bagusindrayana/indibubur/HEAD/assets/images/shape.png -------------------------------------------------------------------------------- /assets/images/telkom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bagusindrayana/indibubur/HEAD/assets/images/telkom.png -------------------------------------------------------------------------------- /assets/images/mas-agus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bagusindrayana/indibubur/HEAD/assets/images/mas-agus.png -------------------------------------------------------------------------------- /assets/images/mas-pras.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bagusindrayana/indibubur/HEAD/assets/images/mas-pras.png -------------------------------------------------------------------------------- /assets/images/indihome-fiber.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bagusindrayana/indibubur/HEAD/assets/images/indihome-fiber.png -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Bagus Indrayana 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | source asset 2 | - music from [https://www.youtube.com/watch?v=jbf7hmTSR2s](https://www.youtube.com/watch?v=jbf7hmTSR2s) (convert to music with [https://ytmp3.cc/](https://ytmp3.cc/)) 3 | - original shape [https://pngtree.com/freepng/blue-wavy-shapes-on-transparent-background_4147313.html](https://pngtree.com/freepng/blue-wavy-shapes-on-transparent-background_4147313.html) 4 | - image of mas agus [https://frankenstein45.com/wp-content/uploads/2020/06/mas-agus-indihome-viral_paket-phoenix.jpg](https://frankenstein45.com/wp-content/uploads/2020/06/mas-agus-indihome-viral_paket-phoenix.jpg) (di potong/crop) 5 | - image of mas pras [https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DhLvGeLrL6z4&psig=AOvVaw0-XOkFYRV7N6z5Zr5BkYvZ&ust=1593682560283000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCLjO8M3gq-oCFQAAAAAdAAAAABAJ](https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DhLvGeLrL6z4&psig=AOvVaw0-XOkFYRV7N6z5Zr5BkYvZ&ust=1593682560283000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCLjO8M3gq-oCFQAAAAAdAAAAABAJ) (di potong/crop) 6 | - logo by [https://www.indihome.co.id/](https://www.indihome.co.id/) 7 | 8 | tanpa mengurangi rasa hormat terhadap Mas Agus & Mas Pras serta pihak IndiHome konten web ini hanyalah bertujuan untuk hiburan semata atas viralnya iklan indihome yang di bintangi Mas Agus & Mas Pras 9 | -------------------------------------------------------------------------------- /assets/js/script.js: -------------------------------------------------------------------------------- 1 | var i = 0; 2 | var i2 = 0; 3 | var txt = '*Syarat & Ketentuan Berlaku'; 4 | var speed = 100; 5 | var audio = document.getElementById("player"); 6 | 7 | function showMain(){ 8 | 9 | 10 | document.getElementById("bg-shape").style.display = 'block'; 11 | 12 | var main = document.getElementsByClassName("flex-container"); 13 | for (let x = 0; x < main.length; x++) { 14 | const e = main[x]; 15 | e.style.display = 'flex'; 16 | 17 | 18 | } 19 | 20 | var main2 = document.getElementsByClassName("wrapper"); 21 | for (let x = 0; x < main2.length; x++) { 22 | const e = main2[x]; 23 | e.style.display = 'block'; 24 | 25 | 26 | } 27 | audio.play(); 28 | 29 | 30 | } 31 | 32 | 33 | audio.onended = function() { 34 | audio.currentTime = 0; 35 | audio.play(); 36 | 37 | masAgus(); 38 | 39 | }; 40 | setInterval(function(){ 41 | 42 | if(audio.currentTime >= 15.5){ 43 | masPrass(); 44 | if(i2 > txt.length){ 45 | i2 = 0; 46 | document.getElementById("skb-pras").innerHTML = ""; 47 | setTimeout(typeWriter2, 2000); 48 | } 49 | } 50 | 51 | 52 | }, 1000); 53 | 54 | 55 | 56 | 57 | function typeWriter() { 58 | if (i < txt.length) { 59 | document.getElementById("skb").innerHTML += txt.charAt(i); 60 | i++; 61 | setTimeout(typeWriter, speed); 62 | } 63 | } 64 | 65 | 66 | function typeWriter2() { 67 | if (i2 < txt.length) { 68 | document.getElementById("skb-pras").innerHTML += txt.charAt(i2); 69 | i2++; 70 | setTimeout(typeWriter2, speed); 71 | } 72 | } 73 | 74 | 75 | audio.onplay = function() { 76 | showMain(); 77 | i = 0; 78 | i2 = txt.length+1; 79 | document.getElementById("skb").innerHTML = ""; 80 | setTimeout(typeWriter, 2000); 81 | }; 82 | 83 | 84 | isAutoplaySupported = function(callback) { 85 | if (typeof callback !== 'function') { 86 | console.log('isAutoplaySupported: Callback must be a function!'); 87 | return false; 88 | } 89 | if (!sessionStorage.autoplaySupported) { 90 | 91 | audio.autoplay = true; 92 | audio.src = window.location.origin+"/assets/audio.mp3"; 93 | audio.load(); 94 | audio.style.display = 'none'; 95 | audio.playing = false; 96 | audio.play(); 97 | 98 | audio.onplay = function() { 99 | this.playing = true; 100 | showMain(); 101 | i = 0; 102 | i2 = txt.length+1; 103 | document.getElementById("skb").innerHTML = ""; 104 | setTimeout(typeWriter, 2000); 105 | }; 106 | audio.oncanplay = function() { 107 | if (audio.playing) { 108 | sessionStorage.autoplaySupported = 'true'; 109 | callback(true); 110 | } else { 111 | sessionStorage.autoplaySupported = 'false'; 112 | callback(false); 113 | } 114 | }; 115 | } else { 116 | if (sessionStorage.autoplaySupported === 'true') { 117 | callback(true); 118 | } else { 119 | callback(false); 120 | } 121 | } 122 | } 123 | 124 | isAutoplaySupported(function(supported) { 125 | if (supported) { 126 | console.log('HTML5 Audio Autoplay Supported!'); 127 | 128 | audio.autoplay = true; 129 | audio.src = window.location.origin+"/assets/audio.mp3"; 130 | audio.load(); 131 | audio.style.display = 'none'; 132 | audio.playing = false; 133 | document.getElementById("player").classList.remove("hide"); 134 | document.getElementById("player").classList.add("show"); 135 | audio.play(); 136 | audio.oncanplay = function() { 137 | document.getElementById("player").classList.remove("show"); 138 | document.getElementById("player").classList.add("hide"); 139 | }; 140 | } else { 141 | 142 | console.log('HTML5 Audio Autoplay Not Supported :('); 143 | alert("Ops browsermu enggak ijinin autoplay jadi silahkan play manual musiknya") 144 | 145 | } 146 | }); 147 | 148 | 149 | function masPrass(){ 150 | document.getElementById("paket-mas-agus").classList.add("transition-paket-mas-agus"); 151 | document.getElementById("mas-agus").classList.add("transition-mas-agus"); 152 | document.getElementById("bg-shape").classList.add("shape-transition"); 153 | 154 | document.getElementById("mas-pras").classList.remove("hide"); 155 | document.getElementById("mas-pras").classList.add("transition-mas-prass"); 156 | document.getElementById("paket-mas-pras").classList.remove("hide"); 157 | document.getElementById("paket-mas-pras").classList.add("transition-paket-mas-pras"); 158 | 159 | 160 | document.getElementById("bagian-mas-agus").classList.add("bagian-mas-agus-transition"); 161 | 162 | document.getElementById("bagian-mas-pras").classList.remove("hide"); 163 | document.getElementById("bagian-mas-pras").classList.add("bagian-mas-pras-transition"); 164 | } 165 | 166 | function masAgus(){ 167 | document.getElementById("paket-mas-agus").classList.remove("transition-paket-mas-agus"); 168 | document.getElementById("mas-agus").classList.remove("transition-mas-agus"); 169 | document.getElementById("bg-shape").classList.remove("shape-transition"); 170 | 171 | document.getElementById("mas-pras").classList.add("hide"); 172 | document.getElementById("mas-pras").classList.remove("transition-mas-prass"); 173 | document.getElementById("paket-mas-pras").classList.add("hide"); 174 | document.getElementById("paket-mas-pras").classList.remove("transition-paket-mas-pras"); 175 | 176 | 177 | document.getElementById("bagian-mas-agus").classList.remove("bagian-mas-agus-transition"); 178 | 179 | document.getElementById("bagian-mas-pras").classList.add("hide"); 180 | document.getElementById("bagian-mas-pras").classList.remove("bagian-mas-pras-transition"); 181 | 182 | 183 | } 184 | 185 | 186 | 187 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Mas Agus & Mas Pras - IndiHome 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |

19 |
20 |
21 | 22 |
23 |
24 |
25 | IndiHome 26 | Paket Phoenix 27 | 28 | Tetap dekat dengan telepon jernih
29 | dan internet cepat 30 | 31 |
32 | 33 |
34 | IndiHome 35 | Paket Streamix 36 | 37 | Nikmati keseruan bersama keluarga
dengan internet cepat dan
tayangan TV populer 38 | 39 |
40 | 41 |
42 |
43 | 44 |
45 |
46 | 47 |
48 | 49 |
50 |
51 | 52 | 53 | 58 | 64 | 65 | 66 | 67 | 72 | 78 | 79 | 80 | 81 | 86 | 92 | 93 | 94 | 95 | 100 | 106 | 107 |
54 | IndiHome 55 | Paket Phoenix 56 | 10 Mbps 57 | 59 | 60 | Rp.280.000 61 | /Bulan 62 | 63 |
68 | IndiHome 69 | Paket Phoenix 70 | 20 Mbps 71 | 73 | 74 | Rp.345.000 75 | /Bulan 76 | 77 |
82 | IndiHome 83 | Paket Phoenix 84 | 50 Mbps 85 | 87 | 88 | Rp.575.000 89 | /Bulan 90 | 91 |
96 | IndiHome 97 | Paket Phoenix 98 | 100 Mbps 99 | 101 | 102 | Rp.935.000 103 | /Bulan 104 | 105 |
108 | 109 |
110 | 111 |
112 |
113 |
114 | Mas Agus - 081515XXXXXX / 082328XXXXXX 115 | mas agus 116 |
117 | 118 | 119 |
120 | Mas Pras - 081515XXXXXX / 082328XXXXXX 121 | mas pras 122 |
123 |
124 | 125 | 126 | 131 | 137 | 138 | 139 | 140 | 145 | 151 | 152 | 153 | 154 | 159 | 165 | 166 | 167 | 168 | 173 | 179 | 180 |
127 | IndiHome 128 | Paket Streamix 129 | 10 Mbps 130 | 132 | 133 | Rp.320.000 134 | /Bulan 135 | 136 |
141 | IndiHome 142 | Paket Streamix 143 | 20 Mbps 144 | 146 | 147 | Rp.385.000 148 | /Bulan 149 | 150 |
155 | IndiHome 156 | Paket Streamix 157 | 50 Mbps 158 | 160 | 161 | Rp.615.000 162 | /Bulan 163 | 164 |
169 | IndiHome 170 | Paket Streamix 171 | 100 Mbps 172 | 174 | 175 | Rp.975.000 176 | /Bulan 177 | 178 |
181 | 182 |
183 | 184 |
185 |
186 | 187 | 188 | 189 |
190 | 191 | 192 | 193 | 196 | 197 | 198 | 199 | -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | padding: 0; 8 | width: 100%; 9 | overflow: hidden; 10 | } 11 | 12 | .main { 13 | display: none; 14 | } 15 | 16 | 17 | 18 | .shake { 19 | animation: shake 1.5s; 20 | animation-iteration-count: infinite; 21 | } 22 | 23 | @keyframes shake { 24 | 0% { transform: translate(1px, 1px) rotate(0deg); } 25 | 10% { transform: translate(-2px, -3px) rotate(-1deg); } 26 | 20% { transform: translate(-4px, 1px) rotate(1deg); } 27 | 30% { transform: translate(4px, 3px) rotate(0deg); } 28 | 40% { transform: translate(2px, -2px) rotate(1deg); } 29 | 50% { transform: translate(-1px, 2px) rotate(-1deg); } 30 | 60% { transform: translate(-4px, 2px) rotate(0deg); } 31 | 70% { transform: translate(4px, 2px) rotate(-1deg); } 32 | 80% { transform: translate(-2px, -2px) rotate(1deg); } 33 | 90% { transform: translate(2px, 3px) rotate(0deg); } 34 | 100% { transform: translate(1px, -2px) rotate(-1deg); } 35 | } 36 | 37 | .muncul-2-detik { 38 | animation: muncul-2-detik 4s; 39 | } 40 | 41 | @keyframes muncul-2-detik { 42 | 0% { opacity: 0; } 43 | 50% { opacity: 0; } 44 | 100% { opacity: 1; } 45 | } 46 | 47 | @keyframes muncul-telepon-mas-agus { 48 | 0% { transform: translate(800px, 0px); } 49 | 70% { transform: translate(800px, 0px); } 50 | 100% { transform: translate(0px, 0px); } 51 | } 52 | 53 | .wrapper { 54 | display: none; 55 | width: 80%; 56 | margin: auto; 57 | padding: 0; 58 | z-index: 99; 59 | } 60 | 61 | .left { 62 | float: left; 63 | } 64 | 65 | .right { 66 | float: right; 67 | } 68 | 69 | .header { 70 | width: 100%; 71 | } 72 | 73 | .middle { 74 | margin: auto; 75 | } 76 | 77 | 78 | .flex-container { 79 | width: 100%; 80 | height: 100%; 81 | padding: 0; 82 | margin: 0; 83 | display: none; 84 | align-items: center; 85 | justify-content: center; 86 | } 87 | .row { 88 | width: auto; 89 | border: 1px solid blue; 90 | } 91 | .flex-item { 92 | padding: 5px; 93 | margin: auto; 94 | 95 | text-align: center; 96 | } 97 | 98 | .align-left { 99 | text-align: left; 100 | } 101 | 102 | .indihome { 103 | font-size: 40px; 104 | font-weight: bold; 105 | display: block; 106 | line-height: 1; 107 | } 108 | 109 | .paket-phoenix { 110 | font-size: 40px; 111 | font-weight: bold; 112 | color: red; 113 | display: block; 114 | line-height: 1; 115 | } 116 | 117 | .telkom-logo { 118 | width: 100px; 119 | } 120 | 121 | .indihome-fiber-logo { 122 | width: 150px; 123 | } 124 | 125 | .daftar-paket { 126 | text-align: left; 127 | 128 | } 129 | 130 | 131 | 132 | .daftar-paket span { 133 | display: block; 134 | } 135 | 136 | .nama-paket { 137 | color: red; 138 | font-size: 20px !important; 139 | font-weight: bold; 140 | } 141 | 142 | .kecepatan { 143 | color: black; 144 | font-size: 15px !important; 145 | font-weight: bold; 146 | } 147 | 148 | .paket { 149 | width: 60%; 150 | float: left; 151 | } 152 | 153 | .right { 154 | float: right !important; 155 | } 156 | 157 | .mas-agus { 158 | width: 20%; 159 | /* float:right; */ 160 | display: inline-block; 161 | text-align: right; 162 | bottom: 0; 163 | right: 0; 164 | position:fixed; 165 | } 166 | 167 | .daftar-harga { 168 | 169 | text-align: right; 170 | } 171 | 172 | .moto { 173 | display: block; 174 | } 175 | 176 | 177 | 178 | .harga { 179 | font-size: 25px; 180 | color: red; 181 | } 182 | 183 | .harga small { 184 | font-size: 15px; 185 | } 186 | 187 | .harga .month { 188 | font-size: 10px; 189 | display: block; 190 | color: black; 191 | } 192 | 193 | table { 194 | margin-top: 20px; 195 | } 196 | 197 | table tr td { 198 | padding: 5px 0px; 199 | } 200 | 201 | .mas-agus img { 202 | animation: mas-agus 2s; 203 | width: 100%; 204 | bottom: 0; 205 | margin: 0; 206 | /* width: 300px; */ 207 | 208 | } 209 | 210 | @keyframes mas-agus { 211 | 0% { 212 | transform: translate(300px, 0px); 213 | opacity: 0; 214 | 215 | } 216 | 100% { transform: translate(0px, 0px);opacity: 1; } 217 | } 218 | 219 | #skb { 220 | font-weight: bold; 221 | } 222 | 223 | #skb-pras { 224 | font-weight: bold; 225 | } 226 | 227 | table tr { 228 | animation: muncul-2-detik 4s; 229 | } 230 | 231 | .nomor-telepon { 232 | position: absolute; 233 | bottom: 30px; 234 | right: 30px; 235 | width: 100%; 236 | padding: 10px; 237 | background-color: orange; 238 | z-index: 99; 239 | text-align: left; 240 | font-weight: bold; 241 | transform: translate(0px, 0px); 242 | animation: muncul-telepon-mas-agus 6s ; 243 | border-radius: 10px; 244 | font-size: 12px; 245 | } 246 | 247 | #player { 248 | width: 50%; 249 | position: fixed; 250 | margin:auto; 251 | bottom: 0; 252 | left: 0; 253 | right: 0; 254 | } 255 | 256 | .hide { 257 | visibility: hidden !important; 258 | display:none !important; 259 | } 260 | 261 | .show { 262 | visibility: visible !important; 263 | display:block !important; 264 | } 265 | 266 | .mas-agus.transition-mas-agus { 267 | display: none; 268 | } 269 | 270 | .transition-mas-agus { 271 | display: none; 272 | animation: transition-mas-agus 1s forwards; 273 | } 274 | 275 | @keyframes transition-mas-agus { 276 | 0% { 277 | display: block; 278 | transform: translate(0px, 0px); 279 | opacity: 1; 280 | 281 | } 282 | 100% { transform: translate(300px, 0px);opacity: 0;display: none; } 283 | } 284 | 285 | .transition-paket-mas-agus { 286 | display: none; 287 | animation: transition-paket-mas-agus 1s forwards; 288 | } 289 | 290 | .paket.transition-paket-mas-agus { 291 | display: none; 292 | } 293 | 294 | @keyframes transition-paket-mas-agus { 295 | 0% { 296 | display: block; 297 | transform: translate(0px, 0px); 298 | opacity: 1; 299 | 300 | } 301 | 100% { transform: translate(-300px, 0px);opacity: 0;display: none; } 302 | } 303 | 304 | 305 | #bg-shape { 306 | width: 100%; 307 | height: 100vh; 308 | position: absolute; 309 | z-index: -1; 310 | background-image: url('../images/shape.png'); 311 | background-position-y: 50vh; 312 | background-repeat: no-repeat; 313 | background-attachment: fixed; 314 | display: none; 315 | } 316 | 317 | .shape-transition { 318 | 319 | animation: shape-transition 2s forwards; 320 | 321 | } 322 | 323 | @keyframes shape-transition { 324 | 0% { 325 | 326 | opacity: 1; 327 | 328 | } 329 | 40% { 330 | opacity: 0; 331 | transform:scaleX(1); 332 | } 333 | 334 | 50% { 335 | 336 | transform:scaleX(-1); 337 | } 338 | 100% { opacity: 1;transform:scaleX(-1); } 339 | } 340 | 341 | .mas-pras { 342 | width: 20%; 343 | /* float: left; */ 344 | display: inline-block; 345 | text-align: left; 346 | bottom: 0; 347 | left: 0; 348 | position:fixed; 349 | } 350 | 351 | .mas-pras img { 352 | width: 100%; 353 | bottom: 0; 354 | margin: 0; 355 | } 356 | 357 | .transition-mas-prass { 358 | animation: transition-mas-prass 1s forwards; 359 | } 360 | 361 | @keyframes transition-mas-prass { 362 | 0% { 363 | transform: translate(-300px, 0px); 364 | opacity: 0; 365 | 366 | } 367 | 100% { transform: translate(0px, 0px);opacity: 1; } 368 | } 369 | 370 | .transition-paket-mas-pras { 371 | animation: transition-paket-mas-prass 1s forwards; 372 | } 373 | 374 | @keyframes transition-paket-mas-prass { 375 | 0% { 376 | transform: translate(300px, 0px); 377 | opacity: 0; 378 | 379 | } 380 | 100% { transform: translate(0px, 0px);opacity: 1; } 381 | } 382 | 383 | .mas-pras .nomor-telepon { 384 | position: absolute; 385 | bottom: 120px; 386 | left: 30px !important; 387 | width: 100%; 388 | padding: 10px; 389 | background-color: orange; 390 | z-index: 999; 391 | text-align: right; 392 | font-weight: bold; 393 | transform: translate(0px, 0px); 394 | animation: muncul-telepon-mas-pras 6s ; 395 | border-radius: 10px; 396 | font-size: 12px; 397 | } 398 | 399 | @keyframes muncul-telepon-mas-pras { 400 | 0% { transform: translate(-800px, 0px); } 401 | 70% { transform: translate(-800px, 0px); } 402 | 100% { transform: translate(0px, 0px); } 403 | } 404 | 405 | 406 | 407 | .bagian-mas-agus-transition { 408 | animation: bagian-mas-agus-transition 1s forwards; 409 | display: none; 410 | } 411 | 412 | #bagian-mas-agus.bagian-mas-agus-transition { 413 | display: none; 414 | } 415 | 416 | @keyframes bagian-mas-agus-transition { 417 | 0% { transform: translate(0, 0px);display: block; } 418 | 100% { transform: translate(800px, 0px);display: none; } 419 | } 420 | 421 | .bagian-mas-pras-transition { 422 | animation: bagian-mas-pras-transition 2s; 423 | transform: translate(0px, 0px); 424 | } 425 | 426 | @keyframes bagian-mas-pras-transition { 427 | 428 | 0% { transform: translate(-400px, 0px); } 429 | 100% { transform: translate(0px, 0px); } 430 | } 431 | 432 | .skb { 433 | margin: 50px; 434 | } 435 | 436 | /* Small devices (portrait tablets and large phones, 600px and up) */ 437 | @media only screen and (max-width: 600px) { 438 | .telkom-logo { 439 | width: 90px; 440 | } 441 | 442 | .indihome-fiber-logo { 443 | width: 120px; 444 | } 445 | 446 | .indihome { 447 | font-size: 25px; 448 | font-weight: bold; 449 | display: block; 450 | line-height: 1; 451 | } 452 | 453 | .paket-phoenix { 454 | font-size: 25px; 455 | font-weight: bold; 456 | color: red; 457 | display: block; 458 | line-height: 1; 459 | } 460 | 461 | .moto { 462 | font-size: 12px; 463 | } 464 | 465 | .mas-agus { 466 | width: 50%; 467 | } 468 | 469 | .mas-pras { 470 | width: 50%; 471 | } 472 | 473 | .skb { 474 | margin: 0; 475 | } 476 | 477 | .nama-paket { 478 | color: red; 479 | font-size:20px !important; 480 | font-weight: bold; 481 | } 482 | 483 | .kecepatan { 484 | color: black; 485 | font-size: 15px !important; 486 | font-weight: bold; 487 | } 488 | 489 | .mas-agus .nomor-telepon { 490 | position: absolute; 491 | bottom: 20px; 492 | 493 | 494 | } 495 | 496 | .mas-pras .nomor-telepon { 497 | position: absolute; 498 | bottom: 20px; 499 | left: 20px !important; 500 | width: 100%; 501 | padding: 5px; 502 | 503 | } 504 | 505 | #player { 506 | width: 100%; 507 | } 508 | } 509 | 510 | /* Medium devices (landscape tablets, 768px and up) */ 511 | @media only screen and (min-width: 768px) { 512 | .telkom-logo { 513 | width: 100px; 514 | } 515 | 516 | .indihome-fiber-logo { 517 | width: 150px; 518 | } 519 | } 520 | 521 | /* Large devices (laptops/desktops, 992px and up) */ 522 | @media only screen and (min-width: 992px) { 523 | .telkom-logo { 524 | width: 130px; 525 | } 526 | 527 | .indihome-fiber-logo { 528 | width: 180px; 529 | } 530 | } 531 | 532 | 533 | @media only screen and (min-width: 1200px) { 534 | .telkom-logo { 535 | width: 150px; 536 | } 537 | 538 | .indihome-fiber-logo { 539 | width: 200px; 540 | } 541 | } 542 | 543 | @media only screen and (min-width: 1920px) { 544 | .telkom-logo { 545 | width: 200px; 546 | } 547 | 548 | .indihome-fiber-logo { 549 | width: 250px; 550 | } 551 | 552 | .nama-paket { 553 | color: red; 554 | font-size:30px !important; 555 | font-weight: bold; 556 | } 557 | 558 | .kecepatan { 559 | color: black; 560 | font-size: 25px !important; 561 | font-weight: bold; 562 | } 563 | 564 | .indihome { 565 | font-size: 45px; 566 | font-weight: bold; 567 | display: block; 568 | line-height: 1; 569 | } 570 | 571 | .paket-phoenix { 572 | font-size: 45px; 573 | font-weight: bold; 574 | color: red; 575 | display: block; 576 | line-height: 1; 577 | } 578 | } --------------------------------------------------------------------------------