├── heart.png ├── app.js ├── style.css └── index.html /heart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mujahidinfo/propose/HEAD/heart.png -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | const parentElement = document.getElementById("parentElement"); 2 | const showMassage = document.getElementById("showMassage"); 3 | const changeColor = document.body.style; 4 | 5 | propose = () => { 6 | parentElement.style.display = "none"; 7 | showMessage.style.display = "block"; 8 | changeColor.background = 9 | "linear-gradient(116.82deg, #ff94e7 0%, #27cbff 100%)"; 10 | }; 11 | 12 | // Animate Text with Anim JS 13 | var textWrapper = document.querySelector(".ml6 .letters"); 14 | textWrapper.innerHTML = textWrapper.textContent.replace( 15 | /\S/g, 16 | "$&" 17 | ); 18 | 19 | anime 20 | .timeline({ loop: true }) 21 | .add({ 22 | targets: ".ml6 .letter", 23 | translateY: ["1.1em", 0], 24 | translateZ: 0, 25 | duration: 750, 26 | delay: (el, i) => 50 * i, 27 | }) 28 | .add({ 29 | targets: ".ml6", 30 | opacity: 0, 31 | duration: 1000, 32 | easing: "easeOutExpo", 33 | delay: 1000, 34 | }); 35 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | html { 2 | height: 100%; 3 | } 4 | body { 5 | background: linear-gradient(117deg, #ff41f7 0%, rgba(255, 73, 73, 0.81) 100%); 6 | } 7 | h1 { 8 | text-align: center; 9 | color: white; 10 | font-size: 72px; 11 | font-weight: 700; 12 | text-transform: uppercase; 13 | } 14 | .btn { 15 | color: gray; 16 | background-color: white; 17 | border: none; 18 | border-radius: 50px; 19 | width: 200px; 20 | height: 50px; 21 | margin: 25px 10px; 22 | font-weight: bold; 23 | } 24 | .btn:hover { 25 | background-color: #ff4690; 26 | border: 2px solid white; 27 | } 28 | @media (max-width: 1148px) { 29 | h1 { 30 | font-size: 50px; 31 | } 32 | .btn { 33 | width: 150px; 34 | height: 40px; 35 | } 36 | } 37 | @media (max-width: 795px) { 38 | h1 { 39 | font-size: 40px; 40 | } 41 | } 42 | #showMessage { 43 | display: none; 44 | } 45 | #showMessage h1 { 46 | font-size: 50px; 47 | } 48 | /* Animate Text */ 49 | .ml6 { 50 | position: relative; 51 | } 52 | 53 | .ml6 .text-wrapper { 54 | position: relative; 55 | display: inline-block; 56 | padding-top: 0.2em; 57 | padding-right: 0.05em; 58 | padding-bottom: 0.1em; 59 | overflow: hidden; 60 | } 61 | 62 | .ml6 .letter { 63 | display: inline-block; 64 | line-height: 1em; 65 | } 66 | 67 | /* Footer */ 68 | footer { 69 | color: #fff; 70 | } 71 | footer a { 72 | color: white; 73 | text-decoration: none; 74 | } 75 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Propose 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |
19 | 20 |
21 |

Will you be my Wife🥰?

22 |
23 |
24 | 25 |
26 |
27 |
28 | 29 |

30 | 31 | I Love you! 32 | 33 |

34 |
35 |
36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | --------------------------------------------------------------------------------