├── script.js ├── index.html └── style.css /script.js: -------------------------------------------------------------------------------- 1 | function clickButton(){ 2 | const upin = document.querySelectorAll('.upin'); 3 | const ipin = document.querySelectorAll('.ipin'); 4 | const loveAnimation = document.querySelectorAll('.love-animation'); 5 | 6 | const button = document.querySelector('.btn'); 7 | const borderDiv = document.querySelector('.border'); 8 | 9 | upin.forEach((nodelist) => { 10 | nodelist.classList.toggle('transition-out'); 11 | }); 12 | 13 | ipin.forEach((nodelist) => { 14 | nodelist.classList.toggle('transition-out'); 15 | }); 16 | 17 | button.classList.toggle('transition-out'); 18 | 19 | setTimeout(() => { 20 | upin.forEach((nodelist) => { 21 | nodelist.classList.toggle('hide'); 22 | nodelist.classList.toggle('transition-out'); 23 | }); 24 | 25 | ipin.forEach((nodelist) => { 26 | nodelist.classList.toggle('hide'); 27 | nodelist.classList.toggle('transition-out'); 28 | }); 29 | 30 | button.classList.toggle('hide'); 31 | borderDiv.classList.toggle('border-t-red-soft'); 32 | borderDiv.classList.toggle('px-5'); 33 | borderDiv.classList.toggle('py-2'); 34 | button.classList.toggle('transition-out'); 35 | 36 | 37 | loveAnimation.forEach((nodelist) => { 38 | nodelist.classList.toggle('hide'); 39 | nodelist.classList.toggle('love'); 40 | }); 41 | }, 1500) 42 | 43 | 44 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Upin & Ipin 8 | 9 | 10 | 11 |

12 | 30 | 48 |

49 |

50 |

U

51 |

P

52 |

I

53 |

N

54 |

55 |

56 |

&

57 |

58 |

59 |

I

60 |

P

61 |

I

62 |

N

63 |

64 |

65 |

66 |

67 | 70 |

71 | 72 |

73 | 74 | 75 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | .h-full{ 7 | height: 100vh; 8 | } 9 | 10 | .flex-row{ 11 | display: flex; 12 | flex-direction: row; 13 | } 14 | 15 | .flex-col{ 16 | display: flex; 17 | flex-direction: column; 18 | } 19 | 20 | .center{ 21 | justify-content: center; 22 | align-items: center; 23 | } 24 | 25 | .my-3{ 26 | margin-top: 15px; 27 | margin-bottom: 15px; 28 | } 29 | 30 | .px-5{ 31 | padding-left: 30px; 32 | padding-right: 30px; 33 | } 34 | 35 | .py-2{ 36 | padding-top: 10px; 37 | padding-bottom: 10px; 38 | } 39 | 40 | .text-md{ 41 | font-size: 18px; 42 | } 43 | 44 | .text-xxl{ 45 | font-size: 56px; 46 | } 47 | 48 | .color-white{ 49 | color: #fefefe; 50 | } 51 | 52 | .bg-white{ 53 | background-color: #fefefe; 54 | } 55 | 56 | .color-red-pastel{ 57 | color: #fe7f6c; 58 | } 59 | 60 | .bg-red-pastel{ 61 | background-color: #fe7f6c; 62 | } 63 | 64 | .color-red-soft{ 65 | color: #fec1b2; 66 | } 67 | 68 | .bg-red-soft{ 69 | background-color: #fec1b2; 70 | } 71 | 72 | .color-red-solid{ 73 | color: #f70424; 74 | } 75 | 76 | .bg-red-solid{ 77 | background-color: #f70424; 78 | } 79 | 80 | .border-red-pastel{ 81 | border: 2px solid #fe7f6c; 82 | } 83 | 84 | .border-red-soft{ 85 | border: 2px solid #fec1b2; 86 | } 87 | 88 | .border-white{ 89 | border: 2px solid #fefefe; 90 | } 91 | 92 | .rounded-xl{ 93 | border-radius: 24px; 94 | } 95 | 96 | .btn{ 97 | cursor: pointer; 98 | } 99 | 100 | .btn:hover{ 101 | border: 2px solid #fec1b2; 102 | color: #fec1b2; 103 | background-color: #fefefe; 104 | transition: 0.5s; 105 | } 106 | 107 | .upin, .ipin{ 108 | display: flex; 109 | opacity: 1; 110 | } 111 | 112 | .hide{ 113 | display: none; 114 | } 115 | 116 | .transition-out{ 117 | animation: fadeOut 1.5s normal; 118 | } 119 | 120 | .absolute{ 121 | position: relative; 122 | } 123 | 124 | .static { 125 | position: static; 126 | } 127 | 128 | @keyframes fadeOut { 129 | 0%{ 130 | opacity: 1; 131 | } 132 | 20%{ 133 | opacity: 0.75; 134 | } 135 | 40%{ 136 | opacity: 0.5; 137 | } 138 | 60%{ 139 | opacity: 0.25; 140 | } 141 | 80%{ 142 | opacity: 0.1; 143 | } 144 | 100%{ 145 | opacity: 0.05; 146 | } 147 | } 148 | 149 | .love{ 150 | position: absolute; 151 | display: flex; 152 | z-index: 1; 153 | padding: 0 20px; 154 | } 155 | 156 | .border-t-red-soft{ 157 | border-top: 2px solid #fec1b2; 158 | margin-top: 23px; 159 | } 160 | 161 | /* .love span{ 162 | position: relative; 163 | width: 10px; 164 | height: 10px; 165 | background-color: #f70424; 166 | margin: 0 20px; 167 | } */ 168 | 169 | .heart { 170 | z-index : 999; 171 | position : relative; 172 | top: -60vh; 173 | display: flex; 174 | margin: 0 40px; 175 | animation: rainy 10s linear infinite; 176 | animation-duration: calc(45s / var(--i)); 177 | } 178 | .heart:before, 179 | .heart:after { 180 | content : ""; 181 | background-color : #f70424; 182 | position : absolute; 183 | height : 20px; 184 | width : 35px; 185 | border-radius : 15px 0px 0px 15px; 186 | } 187 | .heart:before { 188 | transform : rotate(45deg); 189 | } 190 | .heart:after { 191 | left : 10.5px; 192 | transform : rotate(135deg); 193 | } 194 | 195 | @keyframes rainy { 196 | 0%{ 197 | transform: translateY(-60vh) scale(1); 198 | } 199 | 70%{ 200 | transform: translateY(100vh) scale(1); 201 | } 202 | 100%{ 203 | transform: translateY(100vh) scale(0); 204 | } 205 | } --------------------------------------------------------------------------------

U

P

I

N

&

I

P

I

N

Klink Untuk Perubahan