| <html> |
| <meta charset="UTF-8" /><meta |
| content="width=device-width, initial-scale=1, user-scalable=1, minimum-scale=1, maximum-scale=5" |
| name="viewport" |
| /><meta content="IE=edge" http-equiv="X-UA-Compatible" /> |
|
|
| <link |
| rel="icon" |
| type="image/svg+xml" |
| href="/icon.jpg" |
| /> |
| <link |
| rel="apple-touch-icon" |
| href="/icon.jpg" |
| /> |
|
|
| <link rel="preconnect" href="https://fonts.googleapis.com" /> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> |
| <link |
| href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap" |
| rel="stylesheet" |
| /> |
| <link |
| href="https://fonts.googleapis.com/css2?family=Caveat&display=swap" |
| rel="stylesheet" |
| /> |
| <link |
| href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700&display=swap" |
| rel="stylesheet" |
| /> |
|
|
| |
| |
| |
| <script |
| src="https://kit.fontawesome.com/4f3ce16e3e.js" |
| crossorigin="anonymous" |
| ></script> |
|
|
| <script src="https://unpkg.com/typeit@8.7.0/dist/index.umd.js"></script> |
| |
| <script src="https://unpkg.com/scrollreveal"></script> |
|
|
| <head> |
| <title>Aku Buat Khusus Buat Kamu</title> |
| <meta name="description" content="Web Khusus Buat Kamu" /> |
| </head> |
| <style> |
| :root { |
| --gaya-font: "Quicksand", sans-serif; |
| --gaya-font2: "Nunito Sans", sans-serif; |
| --gaya-font3: "Caveat", cursive; |
| } |
| body { |
| overflow: hidden; |
| background: #000; |
| font-family: var(--gaya-font); |
| margin: 0; |
| } |
| body::before { |
| content: "\00A9 IkyyOFC | Diki P.W."; |
| color: white; |
| opacity: 0.5; |
| font-size: 10px; |
| position: fixed; |
| bottom: 25px; |
| right: 25px; |
| z-index: 150; |
| } |
| @keyframes jj { |
| 0% { |
| transform: scale(1.2); |
| } |
| 50% { |
| transform: scale(1.5); |
| } |
| 100% { |
| transform: scale(1); |
| } |
| } |
| @keyframes rto { |
| from { |
| transform: scale(1); |
| } |
| to { |
| transform: scale(1.1); |
| } |
| } |
| #counter { |
| position: fixed; |
| color: white; |
| font-size: 11px; |
| top: 20px; |
| left: 20px; |
| z-index: 999; |
| } |
| |
| section { |
| position: relative; |
| z-index: 99; |
| padding: 0; |
| height: 100vh; |
| display: flex; |
| flex-direction: column; |
| align-items: left; |
| text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.8); |
| border-top: 1px solid #fff; |
| } |
| section { |
| background: #000; |
| background-image: var(--bg); |
| background-attachment: fixed; |
| background-position: center; |
| background-repeat: no-repeat; |
| background-size: cover; |
| } |
| section.first { |
| border-top: 0 solid #fff; |
| } |
| section.first > img { |
| opacity: 0; |
| } |
| section:nth-child(even) { |
| color: white; |
| } |
| section:nth-child(odd) { |
| color: white; |
| } |
| section > :first-child { |
| margin-top: 150px; |
| } |
| |
| .stiker { |
| margin-left: auto; |
| margin-right: auto; |
| box-shadow: 0 4px 30px rgba(255, 255, 255, 0.3); |
| backdrop-filter: blur(5px); |
| -webkit-backdrop-filter: blur(5px); |
| width: 90px; |
| height: 90px; |
| background: rgba(255, 255, 255, 0.7); |
| border: 1px solid rgba(255, 255, 255, 0.3); |
| border-radius: 50%; |
| padding: 10px; |
| margin-bottom: 20px; |
| transition: all 0.85s ease; |
| } |
| section .wp img { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| padding: 0; |
| background: none; |
| border: none; |
| } |
| section .wp::after { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: rgba(0, 0, 0, 0.7); |
| } |
| #stikerakhir { |
| margin-top: -60px; |
| } |
| #stikerdua { |
| display: none; |
| } |
| |
| h1 { |
| font-size: 2rem; |
| } |
| .lingkar { |
| font-weight: 400; |
| border-bottom: 1px solid #ff0900; |
| } |
| h1, |
| h2, |
| h3, |
| h4, |
| h5 { |
| margin: 0; |
| text-align: center; |
| margin: 1rem 0; |
| } |
| p { |
| color: white; |
| font-size: 15px; |
| font-family: var(--gaya-font2); |
| line-height: 1.5em; |
| text-align: center; |
| } |
| a { |
| color: white; |
| text-decoration: none; |
| transition: all 0.3s ease-in-out; |
| &:hover, |
| &:focus, |
| &:active { |
| color: #f1e8d9; |
| } |
| } |
| #hsatu { |
| transition: all 0.3s ease; |
| } |
| #judulakhir { |
| z-index: 100; |
| font-size: 24px; |
| font-family: var(--gaya-font3); |
| transition: all 0.5s ease; |
| } |
| #teksnimasisatu, |
| #teksnimasi, |
| #kalimatakhir, |
| #palingakhir { |
| z-index: 100; |
| margin-right: auto; |
| margin-left: auto; |
| font-size: 15px; |
| font-family: var(--gaya-font2); |
| } |
| #teksnimasisatu, |
| #teksnimasi { |
| text-align: center; |
| margin-left: 70px; |
| margin-right: 70px; |
| } |
| #teksnimasi { |
| font-size: 17px; |
| } |
| .tipeA { |
| font-family: var(--gaya-font); |
| } |
| |
| svg { |
| vertical-align: middle; |
| width: 22px; |
| height: 22px; |
| fill: #fff; |
| } |
| .menu { |
| position: fixed; |
| bottom: 15vh; |
| width: 100%; |
| z-index: 999; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| transition: all 1s ease; |
| } |
| .tombol { |
| background-color: rgba(255, 255, 255, 0.25); |
| border-radius: 50px; |
| overflow: hidden; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| width: 45px; |
| height: 45px; |
| -webkit-transition: all 0.2s ease-out; |
| transition: all 0.2s ease-out; |
| } |
| .tombol svg { |
| margin: auto; |
| fill: #fff; |
| } |
| |
| #Tombol, |
| #TombolWA { |
| position: relative; |
| opacity: 0; |
| margin-left: auto; |
| margin-right: auto; |
| display: flex; |
| align-items: left; |
| list-style: none; |
| transition: all 1s ease; |
| } |
| #Tombol a, |
| #TombolWA a { |
| cursor: pointer; |
| display: inline-flex; |
| align-items: center; |
| margin: 0; |
| margin: 10px; |
| transition: all 0.2s ease; |
| padding: 10px; |
| outline: 0; |
| border: 1px solid white; |
| border-radius: 8px; |
| line-height: 15px; |
| background: rgba(0, 0, 0, 0.5); |
| color: white; |
| font-size: 13px; |
| font-weight: 700; |
| white-space: nowrap; |
| overflow: hidden; |
| box-shadow: rgba(255, 255, 255, 0.15) 0px 7px 29px 0px; |
| z-index: 1; |
| } |
| |
| .overlay { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| background: #000; |
| z-index: 100; |
| } |
| .loading-message { |
| font-size: 13px; |
| text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.8); |
| color: white; |
| text-align: center; |
| } |
| |
| #counter { |
| position: fixed; |
| color: white; |
| font-size: 11px; |
| top: 20px; |
| left: 20px; |
| z-index: 999; |
| } |
| .fa-heart { |
| opacity: 0.3; |
| color: white; |
| font-size: 20px; |
| position: fixed; |
| animation: heartMove linear 1; |
| top: -10vh; |
| z-index: 999; |
| } |
| @keyframes heartMove { |
| 0% { |
| transform: translateY(-10vh); |
| } |
| 100% { |
| transform: translateY(100vh); |
| } |
| } |
| </style> |
| <body> |
| <div class="overlay"> |
| <div class="loading-message"> |
| sabar yaa babee<br />masih loading, jaringanmu jelek |
| mungkin:v<br />awokawokawok |
| </div> |
| </div> |
|
|
| <audio |
| src="/angel.mp3" |
| id="linkmp3" |
| class="sembunyi" |
| ></audio> |
|
|
| <section class="first" onclick="playaud()"> |
| <div class="wp"> |
| <img |
| id="imgsatu" |
| src="https://feeldreams.github.io/pics/awan/1.jpg" |
| /> |
| </div> |
| <img |
| id="first_stiker" |
| class="stiker fade-in" |
| src="https://feeldreams.github.io/bunga.gif" |
| /> |
| <h2 class="title">hawloooo babeeee!</h2> |
| <h4 class="title"><i>aku mau bilang sesuatu 😏</i></h4> |
| <p class="slide-up"><i>scroll kebawah babee!!</i></p> |
| </section> |
|
|
| <section> |
| <div class="wp"> |
| <img |
| id="imgtiga" |
| src="https://feeldreams.github.io/pics/awan/3.jpg" |
| /> |
| </div> |
| <img |
| class="stiker fade-in" |
| src="https://feeldreams.github.io/pusn.gif" |
| /> |
| <h3 class="title"> |
| why do stars still shine<br />even though far away? |
| </h3> |
| <p id="teksnimasisatu"> |
| cause like my feels for you, it finally gets here even if i |
| gotta wait for a long time. |
| </p> |
| </section> |
|
|
| <section> |
| <div class="wp"> |
| <img |
| id="imgdua" |
| src="https://feeldreams.github.io/pics/awan/2.jpg" |
| /> |
| </div> |
| <img |
| class="stiker fade-in" |
| src="https://feeldreams.github.io/cilukba.gif" |
| /> |
| <h3 class="title"> |
| anyway<br />aku ada pertanyaan 😼<br />tapi jangan terlalu |
| dipikirin yaa!!! |
| </h3> |
| </section> |
|
|
| <section> |
| <div class="wp"> |
| <img |
| id="imglima" |
| src="https://feeldreams.github.io/pics/awan/3.jpg" |
| /> |
| </div> |
| <img |
| id="stikersatu" |
| class="stiker fade-in" |
| src="https://feeldreams.github.io/bwa2.gif" |
| /> |
| <img id="stikerdua" src="https://feeldreams.github.io/weee.gif" /> |
| <h3 id="teksnimasi"> |
| babe, you look super cute.<br />can you send me a pic?<br />can |
| I get a pic? |
| </h3> |
| <div id="Tombol"> |
| <a id="By" onClick="fungsimau()">YES!!</a> |
| <a id="Bn" onClick="fungsigamau()">NO!!</a> |
| </div> |
| </section> |
|
|
| <section id="iniakhir"> |
| <div class="wp" id="wpakhir"> |
| <img src="https://feeldreams.github.io/pics/awan/6.jpg" /> |
| </div> |
| <img |
| id="stikerakhir" |
| class="stiker fade-in" |
| src="https://feeldreams.github.io/cilukba.gif" |
| /> |
| <img |
| id="stikerakhir2" |
| style="display: none" |
| src="https://feeldreams.github.io/emawh.gif" |
| /> |
| <h1 id="judulakhir"></h1> |
| <p id="kalimatakhir"></p> |
| <p id="palingakhir"></p> |
| <div id="TombolWA"> |
| <a onClick="menuju()">chat aku yaa babee</a> |
| </div> |
| </section> |
|
|
| <div id="initom" class="menu"> |
| <a class="tombol" onclick="tes()"> |
| <svg |
| xmlns="http://www.w3.org/2000/svg" |
| width="16" |
| height="16" |
| fill="currentColor" |
| class="bi bi-arrow-down" |
| viewBox="0 0 16 16" |
| > |
| <path |
| fill-rule="evenodd" |
| d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z" |
| /> |
| </svg> |
| </a> |
| </div> |
|
|
| <script> |
| function hapus(){counter.style.display="none"} |
| function keatas(){window.scrollTo(0, 0);} |
| |
| var date = new Date(); |
| var days = ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"]; |
| var months = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"]; |
| var hours = date.getHours(); |
| var minutes = date.getMinutes(); |
| |
| |
| if (hours < 10) {hours = "0" + hours;} |
| if (minutes < 10) {minutes = "0" + minutes;} |
| |
| var day = days[date.getDay()]; |
| var dateNum = date.getDate(); |
| var month = months[date.getMonth()]; |
| var year = date.getFullYear(); |
| |
| console.log(hours + "." + minutes + " WIB - " + day + ", " + dateNum + " " + month + " " + year); |
| |
| var element = document.querySelector("body");var watermark = document.createElement("div"); |
| |
| |
| watermark.textContent = day + ", " + dateNum + " " + month + " " + year; |
| watermark.style = "color:white;opacity:.5;font-size:10px;position:fixed;bottom:25px;left:25px;z-index:150"; |
| element.appendChild(watermark); |
| |
| |
| |
| const body = document.querySelector("body"); audio = new Audio('' + linkmp3.src); function berjatuhan() {const heart = document.createElement("div"); heart.className = "fas fa-heart"; heart.style.left = (Math.random() * 90)+"vw"; heart.style.animationDuration = (Math.random()*3)+2+"s"; body.appendChild(heart);} setInterval(function name(params) {var heartArr = document.querySelectorAll(".fa-heart"); if (heartArr.length > 100) {heartArr[0].remove()}},100); |
| |
| initeksnimasisatu = teksnimasisatu.innerHTML;teksnimasisatu.innerHTML=""; |
| function katateksnimasisatu(){ |
| new TypeIt("#teksnimasisatu", { |
| strings: ["" + initeksnimasisatu], startDelay: 50, speed: 50, cursor: true, |
| afterComplete: function(){ |
| teksnimasisatu.innerHTML = initeksnimasisatu; |
| setTimeout(smn,200); |
| },}).go(); |
| } |
| |
| initeksnimasi = teksnimasi.innerHTML;teksnimasi.innerHTML=""; |
| function katateksnimasi(){ |
| new TypeIt("#teksnimasi", { |
| strings: ["" + initeksnimasi], startDelay: 50, speed: 60, cursor: true, |
| afterComplete: function(){ |
| teksnimasi.innerHTML = initeksnimasi; |
| setTimeout(muncultombol,200); |
| },}).go(); |
| } |
| function gantistikerdua(){ |
| stikersatu.style="opacity:0;transform:scale(0)"; |
| setTimeout(gantifotostikerdua,300); |
| } |
| function gantifotostikerdua(){stikersatu.src=stikerdua.src;stikersatu.style="";} |
| |
| fungsi=0;fungsiklik=0;skrg=1; |
| function tes(){ |
| if(fungsi==0){ |
| playaud(); |
| initom.style="opacity:0;bottom:0;"; |
| window.scrollBy({top: tinggi,behavior: 'smooth'}); |
| fungsi = 1; |
| skrg++; |
| if(skrg==2){setTimeout(katateksnimasisatu,2300)}; |
| if(skrg!=2 && skrg<4){setTimeout(smn,700);} |
| if(skrg==4){setTimeout(katateksnimasi,500);setTimeout(gantistikerdua,2300);} |
| } |
| } |
| function smn(){fungsi=0;initom.style="";} |
| initom.style="opacity:0;bottom:0;transition:none"; |
| |
| function muncultombol(){fungtom=1;Tombol.style="opacity:1;transform:scale(1)";} |
| function fungsimau(){ |
| fungsi=0;tes(); |
| teksjudulakhir = "mwehehehee thanksss babeeee >~<"; |
| tekskalimatakhir = "hey babe, you know why<br>i wanna see your pic?<br><br><br>cause you're so super cute, pretty, and sweet."; |
| tekspalingakhir = "love you more babe <3"; |
| pesanwhatsapp = "waitt babee aku send pap nyaa"; |
| } |
| function fungsigamau(){ |
| fungsi=0;tes(); |
| teksjudulakhir = "babeee??? :("; |
| tekskalimatakhir = "agak sedih sihh<br>gagal buat dapetin pap kamu :')"; |
| tekspalingakhir = "but gapapa, walaupun gak dapet pap,<br>masih bisa liat kamu disekolah tiap hari :)"; |
| pesanwhatsapp = "lain kali yaa babee aku send;" |
| } |
| |
| function aksiakhir() { |
| if(fungsiklik==0){ |
| |
| fungsiklik=1; |
| setTimeout(katajudul,100) |
| } |
| } |
| |
| function katajudul(){ |
| new TypeIt("#judulakhir", { |
| strings: ["" + teksjudulakhir], startDelay: 50, speed: 50, cursor: true, |
| afterComplete: function(){ |
| judulakhir.innerHTML = teksjudulakhir; |
| setTimeout(katakata,400); |
| },}).go(); |
| } |
| function katakata(){ |
| new TypeIt("#kalimatakhir", { |
| strings: ["" + tekskalimatakhir], startDelay: 50, speed: 48, cursor: true, |
| afterComplete: function(){ |
| kalimatakhir.innerHTML = tekskalimatakhir; |
| judulakhir.style="opacity:0;transform:scale(0);"; |
| setTimeout(teksmuncul,350); |
| setInterval(berjatuhan,200); |
| setTimeout(kataakhir,1000); |
| },}).go(); |
| } |
| function teksmuncul(){ |
| judulakhir.innerHTML="I Love You"; |
| judulakhir.style="font-family:var(--gaya-font3);font-size:27px"; |
| |
| stikerakhir.style="opacity:0;transform:scale(0)"; |
| setTimeout(gantifotoakhir,300); |
| } |
| function jjteksnim(){judulakhir.style.animation="rto .8s infinite alternate";} |
| function gantifotoakhir(){stikerakhir.src=stikerakhir2.src;stikerakhir.style="";} |
| function kataakhir(){ |
| new TypeIt("#palingakhir", { |
| strings: ["" + tekspalingakhir], startDelay: 50, speed: 50, cursor: true, |
| afterComplete: function(){ |
| palingakhir.innerHTML = tekspalingakhir; |
| setTimeout(muncultombol2,500); |
| },}).go(); |
| } |
| function muncultombol2(){fungtom2=1;TombolWA.style="opacity:1;transform:scale(1)";} |
| function menuju(){if(fungtom2==1){window.location = "https://api.whatsapp.com/send?phone=6287866255637&text=" + pesanwhatsapp;}} |
| |
| let tinggi = iniakhir.offsetHeight; |
| console.log(tinggi); |
| |
| fungsiAud=0;function playaud(){if(fungsiAud==0){fungsiAud=1;audio.play();}} |
| |
| window.addEventListener("load", (event) => { |
| window.scrollTo(0, 0); |
| setTimeout(keatas,500); |
| |
| var overlay = document.querySelector(".overlay"); |
| overlay.style.display = "none"; |
| initom.style=""; |
| first_stiker.style="opacity:1;transition:all 2s ease"; |
| ScrollReveal({ reset: true }); |
| ScrollReveal().reveal(".show-once", { reset: false}); |
| ScrollReveal().reveal(".title", {duration: 2500,origin: "top",distance: "50px", easing: "cubic-bezier(0.5, 0, 0, 1)", rotate: { x: 20, z: -10 }}); |
| ScrollReveal().reveal(".fade-in", {delay: 200, duration: 2500,move: 0}); |
| ScrollReveal().reveal(".scaleUp", {duration: 2500, scale: 0.85}); |
| ScrollReveal().reveal(".flip", {delay: 200, duration: 2000, rotate: { x: 20, z: 20}}); |
| ScrollReveal().reveal(".slide-right", {duration: 1000,origin: "left",distance: "300px",easing: "ease-in-out"}); |
| ScrollReveal().reveal(".slide-up", {duration: 1500, origin: "bottom", distance: "100px", easing: "cubic-bezier(.37,.01,.74,1)", opacity: 0, scale: 0.5}); |
| |
| document.addEventListener('scroll', function(e) { |
| let documentHeight = document.body.scrollHeight; |
| let currentScroll = window.scrollY + window.innerHeight; |
| |
| let modifier = 200; |
| if(currentScroll + modifier > documentHeight) { |
| console.log('Sudah sampai bawah!'); |
| initom.style="opacity:0;bottom:0"; |
| setTimeout(aksiakhir,10); |
| } else { |
| |
| } |
| }) |
| }); |
| |
| |
| |
| function setCookie(name, value, days) { |
| var expires = ""; |
| if (days) { |
| var date = new Date(); |
| date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); |
| expires = "; expires=" + date.toUTCString(); |
| } |
| document.cookie = name + "=" + (value || "") + expires + "; path=/"; |
| } |
| |
| function getCookie(name) { |
| var nameEQ = name + "="; |
| var ca = document.cookie.split(';'); |
| for (var i = 0; i < ca.length; i++) { |
| var c = ca[i]; |
| while (c.charAt(0) == ' ') c = c.substring(1, c.length); |
| if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); |
| } |
| return null; |
| } |
| </script> |
| </body> |
| </html> |
|
|
