<!DOCTYPE html>
<html lang="en">

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Review Mbak Hima <title>Review Mbak Hima</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

body {
font-family: 'Poppins', sans-serif;
background-color: #fef4f4;
background-image: url(./gam1.jpeg);
background-size: 100%;
text-align: center;
padding: 20px;
color: #333;
}
body::before {
opacity: 0.5;
}
h1 {
color: #ff0000;
font-size: 2.5em;
text-shadow: 2px 2px #ffc2d1;
margin-bottom: 20px;
}
.review-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.review-box {
padding: 20px;
border-radius: 15px;
border: #ff0000 solid;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
max-width: 750px;
margin: 10px auto;
opacity: 0;
animation: fadeIn 1s forwards;
display: none;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
#text1 {
background-color: #ffe6e9;
color: #ff6b81;
}
#text2 {
background-color: #fff1e6;
color: #ffa07a;
}
#text3 {
background-color: #fef5ff;
color: #ff8c94;
}
#text4 {
background-color: #fce1f3;
color: #ff69b4;
}
p {
font-size: 1.2em;
margin: 0;
line-height: 1.8;
}
button {
background-color: #ff6b81;
border: none;
padding: 12px 24px;
font-size: 1.4em;
cursor: pointer;
color: white;
border-radius: 50px;
transition: background-color 0.3s, transform 0.3s;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
margin-top: 20px;
}
button:hover {
background-color: #ff85a1;
transform: scale(1.05);
}

/* Love-shaped image */
.heart-img {
width: 500px;
height: 500px;
margin: 20px auto;
display: none;
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 50% 84%, 18% 100%, 0% 38%);
animation: fadeIn 1s ease-in-out;
}

.hidden {
display: none;
}

@media (max-width: 768px) {
h1 {
font-size: 2em;
}
p {
font-size: 1.2em;
}
button {
font-size: 1.2em;
padding: 10px 20px;
}
}
</style>



Review Singkat Tentang Mbak Hima 🐀



<!-- Gambar berbentuk love di bawah judul -->
<img src="./Hima.jpeg" class="heart-img" id="heartImg" alt="Heart Image">

<div class="review-container">
<div class="review-box" id="text1">
<p class="review-text"></p>
</div>
<div class="review-box" id="text2">
<p class="review-text"></p>
</div>
<div class="review-box" id="text3">
<p class="review-text"></p>
</div>
<div class="review-box" id="text4">
<p class="review-text"></p>
</div>

<button id="startBtn" onclick="startTyping()">Klik Disini</button>
</div>

<script>
function typeText(textElement, text, callback) {
let i = 0;
textElement.querySelector('p').innerHTML = "";
textElement.style.display = 'block';
const interval = setInterval(() => {
if (i < text.length) {
textElement.querySelector('p').innerHTML += text.charAt(i);
i++;
} else {
clearInterval(interval);
if (callback) {
setTimeout(callback, 1000);
}
}
}, 50);
}

function startTyping() {
document.getElementById("startBtn").style.display = 'none';
typeText(document.getElementById("text1"), "Okee kita review singkat selama 7 hari bersama mbak hima ygy, untuk kenyamanan sih 95% yaaa, untuk kesopanan beehh aku beri nilai gede yakni 5%πŸ₯°πŸ₯°", function() {
typeText(document.getElementById("text2"), "Untuk kerandoman, kelucuan, keimutan, dan pemalakan 99%, klo yg 100% sih ngeselinnya. Jadi kesimpulannya ini sangat worth it ygy🐀🐀.", function() {
typeText(document.getElementById("text3"), "Makasih banyak kepada mbak hima karena saya sangat puas dgn semua pelayanan nya.. gk nyangka bgt bisa ketemu orang se random iniπŸ˜‡πŸ˜‡.", function() {
typeText(document.getElementById("text4"), "Tapi pliss semoga jasa chat nya sepi terus yaa biar chat ku gk tenggelem soalnya kata mamah ini wajib langganan sih ><", function() {
fadeOutTextsAndShowImage();
});
});
});
});
}

function fadeOutTextsAndShowImage() {
const reviewBoxes = document.querySelectorAll('.review-box');
let delay = 0;

reviewBoxes.forEach((box) => {
setTimeout(() => {
box.style.animation = "fadeOut 1s forwards";
}, delay);
delay += 500;
});

setTimeout(() => {
document.getElementById("heartImg").style.display = 'block';
}, (reviewBoxes.length * 500) + 1000);
}
</script>