A Pen by WENDYSGORE on CodePen.
Created
February 13, 2024 20:29
-
-
Save WENDYSGORE/e56a4e4c8be9fd3399810ff588bfc913 to your computer and use it in GitHub Desktop.
PA MI AMORCITO
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Carta de San Valentín</title> | |
| <link rel="stylesheet" href="./style.css"> | |
| </head> | |
| <body> | |
| <div class="valentines-day"> | |
| <div class="envelope"></div> | |
| <div class="heart"></div> | |
| <div class="text"> PARA: <br> DAVID SEVERINO </div> | |
| <div class="front"></div> | |
| </div> | |
| <div id="card"> | |
| <div class="side one"></div> | |
| <div class="side two"> | |
| <h2>Para mi amorcito</h2> | |
| <p>Querido David... </p> | |
| <p>Tienes un culito muy hermoso, podria dormir noche tras noche sobre el... </p> | |
| <p>Quiero vivir contigo y tener tu culo de sombrero toda la eternidad... te ama: la wendys</p> | |
| </div> | |
| </div> | |
| <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> | |
| <script src="./script.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function(){ | |
| // Al cargar la página, ocultamos las cortinas | |
| $('.left-curtain').css('width', '0%'); | |
| $('.right-curtain').css('width', '0%'); | |
| $('.valentines-day').click(function(){ | |
| // Animación de desvanecimiento de los elementos del sobre | |
| $('.envelope').css({'animation':'fall 3s linear 1', '-webkit-animation':'fall 3s linear 1'}); | |
| $('.envelope').fadeOut(800, function() { | |
| // Ocultar elementos dentro de .valentines-day | |
| $('.valentines-day .heart, .valentines-day .text, .valentines-day .front').hide(); | |
| // Hacer visible la carta con una animación ondulante | |
| $('#card').css({'visibility':'visible', 'opacity': 0, 'transform': 'scale(0.1)'}); | |
| $('#card').animate({'opacity': 1}, {duration: 1000, step: function(now, fx) { | |
| var scale = 1 + Math.sin(now * Math.PI) * 0.1; // Calculamos la escala basada en la función seno | |
| $(this).css('transform', 'scale(' + scale + ')'); | |
| }}); // Animación de ondulación | |
| }); | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url('https://fonts.googleapis.com/css?family=Sacramento'); | |
| #card { | |
| height:500px; | |
| width:800px; | |
| margin:5em auto; | |
| position: fixed; | |
| top: -15px; | |
| left: 25%; | |
| display:flex; | |
| visibility:hidden; | |
| } | |
| #card h2 { | |
| font-size:3em; | |
| margin:0; | |
| color:pink; | |
| text-align: center; | |
| } | |
| #card p { | |
| font-size: 1.5em; | |
| text-align: justify; | |
| padding-left: 30px; /* Espacio en blanco a la izquierda */ | |
| padding-right: 30px; /* Espacio en blanco a la derecha */ | |
| } | |
| .side { | |
| background:#eee; | |
| height:550px; | |
| width:400px; | |
| /* border:1px solid red; */ | |
| padding:10px; | |
| } | |
| .side.one { | |
| width:320px; | |
| transform:skew(10deg,20deg); | |
| background:linear-gradient(90deg, #fff, #fff 40%, #ddd); | |
| } | |
| .side.two { | |
| transform:skew(10deg,-15deg); | |
| background:linear-gradient(-90deg, #fff, #fff 40%, #f0f0f0); | |
| } | |
| body { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100vh; | |
| font-family: 'Sacramento', cursive; | |
| background-color: #f1e3d3; | |
| overflow: hidden; | |
| } | |
| .valentines-day { | |
| position: relative; | |
| cursor: pointer; | |
| } | |
| .envelope { | |
| position: relative; | |
| filter: drop-shadow(0 0 25px rgba(0,0,0,.3)); | |
| } | |
| .envelope:before { | |
| content:""; | |
| position: absolute; | |
| width:254px; | |
| height:254px; | |
| background-color: #ff9494; | |
| transform: rotate(-45deg); | |
| border-radius: 0 15px 0 0; | |
| left:-37px; | |
| top:-82px; | |
| } | |
| .envelope:after { | |
| content:""; | |
| position: absolute; | |
| background-color: #ff9494; | |
| width:360px; | |
| height:225px; | |
| left:-90px; | |
| top:45px; | |
| } | |
| .heart { | |
| position: relative; | |
| background-color: #e01911; | |
| display: inline-block; | |
| height: 180px; | |
| top:50px; | |
| left:0; | |
| transform: rotate(-45deg); | |
| width:180px; | |
| filter: drop-shadow(0 -10px 25px rgba(0,0,0,.3)); | |
| transition: .5s; | |
| } | |
| .heart:before, .heart:after { | |
| content:""; | |
| background-color: #e01911; | |
| border-radius:50%; | |
| height: 180px; | |
| width: 180px; | |
| position: absolute; | |
| } | |
| .heart:before { | |
| top:-100px; | |
| left:0;} | |
| .heart:after { | |
| left:100px; | |
| top:0;} | |
| .front { | |
| position: absolute; | |
| width:0; | |
| height:0; | |
| border-right: 190px solid #fbd2d2; | |
| border-top: 113px solid transparent; | |
| border-bottom: 113px solid transparent; | |
| top:44px; | |
| left:80px; | |
| z-index:4; | |
| } | |
| .front:before { | |
| content:""; | |
| position: absolute; | |
| width:0; | |
| height:0; | |
| border-left: 190px solid #fbd2d2; | |
| border-top: 113px solid transparent; | |
| border-bottom: 113px solid transparent; | |
| top:-113px; | |
| left:-170px; | |
| } | |
| .front:after { | |
| width:0; | |
| height:0; | |
| position: absolute; | |
| content:""; | |
| border-bottom: 150px solid #fce7e9; | |
| border-right:180px solid transparent; | |
| border-left: 180px solid transparent; | |
| top:-36px; | |
| left:-170px; | |
| } | |
| .text { | |
| position: absolute; | |
| font-family: arial; | |
| letter-spacing:5px; | |
| text-align: center; | |
| color: white; | |
| z-index:2; | |
| top:80px; | |
| left:15px; | |
| transition: .5s; | |
| } | |
| .valentines-day:hover .heart { | |
| transform: translateY(-50px) rotate(-45deg); | |
| } | |
| .valentines-day:hover .text { | |
| transform: translateY(-50px); | |
| } |
Te amo mucho aliyaah 🥺
Te amo mucho mi princesa 👑😻
Te kiero musho baby 🥺💓
Te Kelo bebé 🥹💓
Te amo con toda mi vida 🥹🥹💗
Eres todo 🌌 lo que busque 🥹 en una mujer como TU 🫵🏻🥹 mi vida 💓
Hoy 31 de diciembre te digo 🫵🏻🥺
Te amo...💓
Quieres ser mi novia 🥺💓
🥹🥑☃️💓
DOCTYPE html>
<title>Carta de San Valentín</title> PARA:
DAVID SEVERINO
DAVID SEVERINO
Para mi amorcito
Querido David...
Tienes un culito muy hermoso, podria dormir noche tras noche sobre el...
Quiero vivir contigo y tener tu culo de sombrero toda la eternidad... te ama: la wendys
DOCTYPE html>
<title>Carta de San Valentín</title> PARA:
DAVID SEVERINO
DAVID SEVERINO
Para mi amorcito
Querido David...
Tienes un culito muy hermoso, podria dormir noche tras noche sobre el...
Quiero vivir contigo y tener tu culo de sombrero toda la eternidad... te ama: la wendys
<title>Carta de San Valentín</title>hhhy### DOCTYPE html>
PARA:
DAVID SEVERINO
DAVID SEVERINO
Para mi amorcito
Querido David...
Tienes un culito muy hermoso, podria dormir noche tras noche sobre el...
Quiero vivir contigo y tener tu culo de sombrero toda la eternidad... te ama: la wendys
Muaaaaaaaaaa
Hermosa
Vida
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Te amo con mi vida