Untitled
unknown
plain_text
a year ago
4.2 kB
3
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Happy Birthday</title> <!-- CSS --> <style> body { display: flex; align-items: center; justify-content: center; height: 100vh; background-color: #239ac2; } .birthdayCard { position: relative; width: 250px; height: 350px; cursor: pointer; transform-style: preserve-3d; transform: perspective(2500px); transition: 1s; } .birthdayCard:hover { transform: perspective(2500px) rotate(5deg); box-shadow: inset 100px 20px 100px rgba(0, 0, 0, 0.2), 0 10px 100px rgba(0, 0, 0, 0.5); } .birthdayCard:hover .cardFront { transform: rotateY(-160deg); } .birthdayCard:hover .happy { visibility: hidden; } .cardFront { position: relative; background-color: #fff; width: 250px; height: 350px; overflow: hidden; transform-origin: left; box-shadow: inset 100px 20px 100px rgba(0, 0, 0, 0.2), 30px 0 50px rgba(0, 0, 0, 0.4); transition: 0.6s; } .happy { font-family: Tahoma, sans-serif; text-align: center; margin: 30px; background-image: linear-gradient(120deg, #ffd856 0%, #f98c6e 100%); transition: 0.1s; } .balloons { position: absolute; } .balloon-1, .balloon-2, .balloon-3, .balloon-4 { position: absolute; width: 85px; height: 95px; border-radius: 50%; } .balloon-1 { background-color: rgba(255, 40, 90, 0.7); left: -10px; top: 50px; } .balloon-2 { background-color: rgba(9, 215, 160, 0.7); left: 50px; top: 20px; } .balloon-3 { background-color: rgba(255, 186, 26, 0.7); left: 110px; top: 50px; } .balloon-4 { background-color: rgba(12, 122, 159, 0.7); left: 170px; top: 50px; } .balloon-1::before, .balloon-2::before, .balloon-3::before, .balloon-4::before { content: ""; position: absolute; width: 1px; height: 155px; background-color: #ffc848; top: 95px; left: 43px; } .balloon-1::after, .balloon-2::after, .balloon-3::after, .balloon-4::after { content: ""; position: absolute; border-right: 7px solid transparent; border-left: 7px solid transparent; top: 94px; left: 37px; } .balloon-1::after { border-bottom: 10px solid #ff3e6b; } .balloon-2::after { border-bottom: 10px solid #04b183; } .balloon-3::after { border-bottom: 10px solid #ffc94c; } .balloon-4::after { border-bottom: 10px solid #13a9bd; } .cardInside { position: absolute; background-color: #fff; width: 250px; height: 350px; z-index: -1; left: 0; top: 0; box-shadow: inset 100px 20px 100px rgba(0, 0, 0, 0.2); } p { font-family: "Brush Script MT", cursive; margin: 40px; color: #333; } .name { position: absolute; left: 150px; top: 200px; color: #333; } .back { font-family: Tahoma, sans-serif; color: #333; text-align: center; margin: 30px; outline-color: #333; outline-style: dotted; } </style> </head> <body> <div class="birthdayCard"> <div class="cardFront"> <h3 class="happy">HAPPY BIRTHDAY</h3> <div class="balloons"> <div class="balloon-1"></div> <div class="balloon-2"></div> <div class="balloon-3"></div> <div class="balloon-4"></div> </div> </div> <div class="cardInside"> <h3 class="back">HAPPY BIRTHDAY</h3> <p>Dear Friend,</p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis expedita debitis esse quaerat adipisci iste illum placeat incidunt reprehenderit laudantium! </p> <p class="name">xxx</p> </div> </div> </body> </html>
Editor is loading...
Leave a Comment