-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
1 lines (1 loc) · 2.86 KB
/
index.html
1
<!DOCTYPE html><html lang="en"><title>❤️ from Dan to you!</title ><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><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=Cairo&display=swap" rel="stylesheet" /><style>.heart-container{ display: flex; justify-content: center; align-items: center; height: 100%;} .heart{ background-color: red; display: inline-block; height: 100px; width: 100px; margin: 0 10px; transform: rotate(-45deg); animation: heartbeat 1s ease-in-out infinite;} .heart:before, .heart:after{ content: ""; background-color: red; border-radius: 50%; height: 100px; position: absolute; width: 100px;} .heart:before{ top: -50px; left: 0;} .heart:after{ left: 50px; top: 0;} @keyframes heartbeat{ 0%{ transform: scale(1) rotate(-45deg);} 20%{ transform: scale(1.25) translateX(5%) translateY(5%) rotate(-45deg);} 40%{ transform: scale(1.5) translateX(9%) translateY(10%) rotate(-45deg);}} .circle-1, .circle-2, .circle-3::before{ position: absolute; border-radius: 50%; z-index: -1;} .circle-1{ width: 20vw; height: 20vw; background-color: rgba(188, 58, 128, 0.2); top: 51vh; left: 3vw;} .circle-2{ width: 22vw; height: 22vw; background-color: rgba(52, 87, 178, 0.2); top: -25vh; left: 35vw;} .circle-3{ position: absolute; overflow: hidden; width: 45vw; height: 45vw; bottom: 0; right: 0;} .circle-3::before{ content: ""; transform: translate(40%, 40%); height: 100%; width: 100%; background-color: rgba(52, 87, 178, 0.2);} .text-container{ position: absolute; left: 50%; bottom: 0;} .text{ position: absolute; color: #fff; font-size: 1.5em; user-select: none; pointer-events: none; animation: rotation 7.5s linear infinite;} @keyframes rotation{ 0%{ transform: rotate(360deg);} 100%{ transform: rotate(0deg);}} span{ position: absolute; top: -150px; display: inline-block; transform-origin: 0 150px;} @media (max-width: 600px){ .circle-2{ top: -5vw;} .circle-3{ bottom: -10vw;}} </style><body style=" height: 100vh; width: 100vw; background-color: #ffadad; font-family: 'Cairo', sans-serif; overflow: hidden; margin: 0; " ><div class="heart-container"><div class="heart"></div></div><div class="circle-1"></div><div class="circle-2"></div><div class="circle-3"></div><div class="text-container"><h2 class="text"><span>H</span><span>A</span><span>P</span><span>P</span><span>Y</span ><span>-</span><span style="color: red">V</span><span style="color: red">A</span ><span style="color: red">L</span><span>-</span><span>F</span><span>R</span ><span>O</span><span>M</span><span style="color: red">-</span><span>M</span ><span>E</span><span style="color: red">-</span></h2></div><script>const el=document.querySelectorAll("span"); for (let i=0; i < el.length; i++){ el[i].style.transform="rotate(" + i * 20 + "deg";} </script></body></html>