├── ogimage.png ├── Screenshot.JPG ├── asset ├── bear.gif ├── bg.webp ├── lagu.mp3 ├── uwu.gif ├── script.js └── style.css ├── favicon ├── favicon.ico ├── favicon-16x16.png ├── favicon-32x32.png ├── mstile-150x150.png ├── apple-touch-icon.png ├── android-chrome-192x192.png ├── android-chrome-512x512.png ├── apple-touch-icon-57x57.png ├── apple-touch-icon-60x60.png ├── apple-touch-icon-72x72.png ├── apple-touch-icon-76x76.png ├── apple-touch-icon-114x114.png ├── apple-touch-icon-120x120.png ├── apple-touch-icon-144x144.png ├── apple-touch-icon-152x152.png ├── apple-touch-icon-180x180.png ├── browserconfig.xml ├── site.webmanifest └── safari-pinned-tab.svg ├── LICENSE ├── README.md └── index.html /ogimage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wafarifki/ValentineDayScript/HEAD/ogimage.png -------------------------------------------------------------------------------- /Screenshot.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wafarifki/ValentineDayScript/HEAD/Screenshot.JPG -------------------------------------------------------------------------------- /asset/bear.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wafarifki/ValentineDayScript/HEAD/asset/bear.gif -------------------------------------------------------------------------------- /asset/bg.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wafarifki/ValentineDayScript/HEAD/asset/bg.webp -------------------------------------------------------------------------------- /asset/lagu.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wafarifki/ValentineDayScript/HEAD/asset/lagu.mp3 -------------------------------------------------------------------------------- /asset/uwu.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wafarifki/ValentineDayScript/HEAD/asset/uwu.gif -------------------------------------------------------------------------------- /favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wafarifki/ValentineDayScript/HEAD/favicon/favicon.ico -------------------------------------------------------------------------------- /favicon/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wafarifki/ValentineDayScript/HEAD/favicon/favicon-16x16.png -------------------------------------------------------------------------------- /favicon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wafarifki/ValentineDayScript/HEAD/favicon/favicon-32x32.png -------------------------------------------------------------------------------- /favicon/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wafarifki/ValentineDayScript/HEAD/favicon/mstile-150x150.png -------------------------------------------------------------------------------- /favicon/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wafarifki/ValentineDayScript/HEAD/favicon/apple-touch-icon.png -------------------------------------------------------------------------------- /favicon/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wafarifki/ValentineDayScript/HEAD/favicon/android-chrome-192x192.png -------------------------------------------------------------------------------- /favicon/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wafarifki/ValentineDayScript/HEAD/favicon/android-chrome-512x512.png -------------------------------------------------------------------------------- /favicon/apple-touch-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wafarifki/ValentineDayScript/HEAD/favicon/apple-touch-icon-57x57.png -------------------------------------------------------------------------------- /favicon/apple-touch-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wafarifki/ValentineDayScript/HEAD/favicon/apple-touch-icon-60x60.png -------------------------------------------------------------------------------- /favicon/apple-touch-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wafarifki/ValentineDayScript/HEAD/favicon/apple-touch-icon-72x72.png -------------------------------------------------------------------------------- /favicon/apple-touch-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wafarifki/ValentineDayScript/HEAD/favicon/apple-touch-icon-76x76.png -------------------------------------------------------------------------------- /favicon/apple-touch-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wafarifki/ValentineDayScript/HEAD/favicon/apple-touch-icon-114x114.png -------------------------------------------------------------------------------- /favicon/apple-touch-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wafarifki/ValentineDayScript/HEAD/favicon/apple-touch-icon-120x120.png -------------------------------------------------------------------------------- /favicon/apple-touch-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wafarifki/ValentineDayScript/HEAD/favicon/apple-touch-icon-144x144.png -------------------------------------------------------------------------------- /favicon/apple-touch-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wafarifki/ValentineDayScript/HEAD/favicon/apple-touch-icon-152x152.png -------------------------------------------------------------------------------- /favicon/apple-touch-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wafarifki/ValentineDayScript/HEAD/favicon/apple-touch-icon-180x180.png -------------------------------------------------------------------------------- /favicon/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /favicon/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Valentine Day Script", 3 | "short_name": "Valentine Day Script", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 wafarifki 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /asset/script.js: -------------------------------------------------------------------------------- 1 | $('.tombol').click(function() { 2 | // animate content 3 | $('.halaman').addClass('animate_content'); 4 | $('.dalemnya_halaman').fadeOut(100).delay(2800).fadeIn(); 5 | 6 | setTimeout(function() { 7 | $('.halaman').removeClass('animate_content'); 8 | }, 3200); 9 | 10 | //remove fadeIn class after 1500ms 11 | setTimeout(function() { 12 | $('.halaman').removeClass('fadeIn'); 13 | }, 1100); 14 | }); 15 | 16 | 17 | $('.tombol2').click(function() { 18 | // animate content 19 | $('.halaman').addClass('animate_content'); 20 | $('.dalemnya_halaman').fadeOut(100).delay(2800).fadeIn(); 21 | 22 | setTimeout(function() { 23 | $('.halaman').removeClass('animate_content'); 24 | }, 3200); 25 | 26 | //remove fadeIn class after 1500ms 27 | setTimeout(function() { 28 | $('.halaman').removeClass('fadeIn'); 29 | }, 1100); 30 | 31 | }); 32 | 33 | 34 | $('.kehome').click(function() { 35 | setTimeout(function() { 36 | $('.home').addClass('fadeIn'); 37 | }, 1100); 38 | 39 | PuterLagu(); 40 | }); 41 | 42 | 43 | $('.kehalaman2').click(function() { 44 | setTimeout(function() { 45 | $('.halaman2').addClass('fadeIn'); 46 | }, 1100); 47 | 48 | // Delay 4 detik sebelum memulai fungsi JalaninTeks() 49 | setTimeout(JalaninTeks, 4000); 50 | PuterLagu(); 51 | }); 52 | 53 | var i = 0; 54 | var txt = "Ribuan malam ku termenung sendiri, Menunggu seseorang untuk memelukku, Lewati ratusan mimpi tersimpan dalam sanubari, Sendiri di tengah kegelapan yang semu. Terimakasih engkau telah hadir untukku,\nmenemani kesepianku dan telah menjadi penerang dalam gelapku, I Love You"; 55 | var speed = 200; 56 | 57 | function JalaninTeks() { 58 | if (i < txt.length) { 59 | document.getElementById("tekss").innerHTML += txt.charAt(i); 60 | i++; 61 | setTimeout(JalaninTeks, speed); 62 | } 63 | }; 64 | 65 | 66 | function PuterLagu() { 67 | var lagu = document.getElementById("lagu"); 68 | return lagu.paused ? lagu.play() : lagu.pause(); 69 | }; 70 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ValentineDayScript 2 | I have created a Simple Valentine's Day HTML Script, free and used for learning. 3 | 4 | # Demo Site 5 | https://wafarifki.github.io/ValentineDayScript/ 6 | 7 | # ScreenShoot 8 | 9 | 10 | # Configuration 11 | 12 | 1. **Fork this Repository**: Visit the GitHub repository you want to fork, then click on the "Fork" button in the top-right corner. This will create a copy of the repository in your own GitHub account. 13 | 14 | 2. **Edit index.php**: After forking the repository, navigate to the `index.php` file in your forked repository. Locate line 49, which contains `Hai Caren`, and make your desired changes. 15 | 16 | 3. **Commit Changes**: After editing the file, scroll down to the bottom of the page, where you'll see a section titled "Commit changes". Enter a summary of the changes you made in the "Summary" field, then click on the "Commit changes" button. 17 | 18 | 4. **Publish on GitHub Pages**: Once you've committed your changes, you can enable GitHub Pages to publish your site. To do this, go to the "Settings" tab of your repository. Scroll down to the "GitHub Pages" section, then select the branch you want to use (typically `main` or `master`) from the dropdown menu. After selecting the branch, click on the "Save" button. 19 | 20 | 5. **Access Your Site**: After enabling GitHub Pages, you'll see a URL where your site is published. It will be in the format `https://.github.io/`. You can share this URL with others to view your site. 21 | 22 | 23 | # Let's connect with me! 24 |

25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 |

33 | -------------------------------------------------------------------------------- /favicon/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.11, written by Peter Selinger 2001-2013 9 | 10 | 12 | 27 | 29 | 31 | 32 | 33 | 36 | 37 | 38 | 39 | 40 | 41 | 43 | 45 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Valentine Day HTML Script 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | Valentine Day - a Day With Love 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 |
40 |
41 |
42 |
43 |
44 |
45 | 46 |
47 | Valentine Day HTML Script 48 |
49 | Hai Sayang, 50 |
51 |
52 | 53 | 54 | 55 | 56 |
57 |
58 |
59 |
60 |
61 |
62 | 63 | 64 |
65 |
66 |
67 |
68 |
69 | Valentine Day HTML Script 70 |
71 |

Hai Ayang Selamat Datang, Selamat hari valentine, Yuk klik mulai.

72 |
73 | 74 |
75 |
76 | 77 | 78 | 79 | 80 |
81 |
82 |
83 |
84 |
85 |
86 | 87 | 88 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /asset/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | :before, 3 | :after { 4 | box-sizing: border-box; 5 | padding: 0; 6 | margin: 0; 7 | } 8 | 9 | .hide { 10 | display: none; 11 | } 12 | 13 | .tengah { 14 | position: relative; 15 | margin: 8% auto; 16 | background-image: url('bg.webp'); 17 | background-position: center; 18 | background-size: 100%; 19 | background-repeat: repeat; 20 | border-radius: 14px; 21 | padding: 70px 10px 10px 10px; 22 | text-align: center; 23 | height: 470px; 24 | width: 330px; 25 | align-items: center; 26 | align-content: center; 27 | color: #c87941; 28 | } 29 | 30 | .tengah2 { 31 | position: relative; 32 | margin: 8% auto; 33 | background-image: url('bg.webp'); 34 | background-position: center; 35 | background-size: 100%; 36 | background-repeat: repeat; 37 | border-radius: 14px; 38 | padding: 40px 12px 20px 12px; 39 | text-align: center; 40 | height: 470px; 41 | width: 330px; 42 | align-items: center; 43 | align-content: center; 44 | color: #c87941; 45 | } 46 | 47 | .tengah2 span { 48 | font-weight: 400; 49 | font-family: sans-serif; 50 | } 51 | 52 | .uwu { 53 | width: 70%; 54 | height: auto; 55 | } 56 | 57 | .uwu2 { 58 | margin-top: 26px; 59 | width: 70%; 60 | height: auto; 61 | } 62 | 63 | .inputnama { 64 | width: 80%; 65 | padding: 8px; 66 | border: 2px solid #c87941; 67 | background: #f9f9f9; 68 | color: #c87941; 69 | border-radius: 8px; 70 | outline: none !important; 71 | font-weight: bold; 72 | font-family: sans-serif; 73 | } 74 | 75 | .inputnama::placeholder { 76 | color: #c87941; 77 | } 78 | 79 | .tombol { 80 | margin-top: 10px; 81 | width: 80%; 82 | padding: 8px; 83 | border: 2px solid #c87941; 84 | background: #f9f9f9; 85 | color: #c87941; 86 | border-radius: 8px; 87 | outline: none !important; 88 | font-weight: bold; 89 | font-family: sans-serif; 90 | } 91 | 92 | .tombol:hover { 93 | cursor: pointer; 94 | border: 2px solid #c87941; 95 | background: #c87941; 96 | color: #f9f9f9; 97 | } 98 | 99 | .tombol2 { 100 | margin-top: 10px; 101 | width: 80%; 102 | padding: 8px; 103 | border: 2px solid #ea97ad; 104 | background: #f9f9f9; 105 | color: #ea97ad; 106 | border-radius: 8px; 107 | outline: none !important; 108 | font-weight: bold; 109 | font-family: sans-serif; 110 | } 111 | 112 | .tombol2:hover { 113 | cursor: pointer; 114 | border: 2px solid #ea97ad; 115 | background: #ea97ad; 116 | color: #f9f9f9; 117 | } 118 | 119 | .kembali { 120 | width: 100%; 121 | position: absolute; 122 | left: 0; 123 | padding: 10px; 124 | font-size: 24px; 125 | top: 10px; 126 | text-align: left; 127 | } 128 | 129 | .footer { 130 | width: 100%; 131 | position: absolute; 132 | left: 0; 133 | font-size: 30px; 134 | bottom: 10px; 135 | text-align: center; 136 | } 137 | 138 | .footer .kiri { 139 | margin-left: 10px; 140 | } 141 | 142 | .halaman { 143 | background: #6d326d; 144 | font-family: OpenSans-Regular, sans-serif; 145 | position: fixed; 146 | top: 0; 147 | right: 0; 148 | bottom: 0; 149 | left: 0; 150 | height: 100%; 151 | width: 100%; 152 | margin: auto auto; 153 | overflow: hidden; 154 | } 155 | 156 | .halaman .dalemnya_halaman { 157 | color: #fff; 158 | font-weight: 300; 159 | text-align: center; 160 | } 161 | 162 | .halaman h1 { 163 | font-weight: 300; 164 | margin-top: 200px; 165 | margin-bottom: 30px; 166 | } 167 | 168 | .halaman .btn_nav { 169 | background: #002a32; 170 | border-radius: 30px; 171 | border: none; 172 | color: #fff; 173 | cursor: pointer; 174 | font-family: inherit; 175 | font-size: 15px; 176 | font-weight: bold; 177 | text-transform: uppercase; 178 | letter-spacing: 1px; 179 | margin-bottom: 20px; 180 | padding: 17px 30px; 181 | width: 146px; 182 | } 183 | 184 | .halaman .btn_nav:focus, 185 | .halaman .btn_nav:active { 186 | outline: none; 187 | } 188 | 189 | .halaman a { 190 | text-decoration: none; 191 | color: #fff; 192 | } 193 | 194 | .halaman a:hover { 195 | text-decoration: underline; 196 | } 197 | 198 | .animate_content { 199 | animation: animate 3s ease; 200 | } 201 | 202 | .fadeIn { 203 | z-index: 10; 204 | } 205 | 206 | .home { 207 | background: #c87941; 208 | } 209 | 210 | .halaman2 { 211 | background: #ea97ad; 212 | } 213 | 214 | @media only screen and (max-width: 767px) { 215 | .dalemnya_halaman h1 { 216 | margin-top: 100px; 217 | } 218 | } 219 | 220 | @-moz-keyframes animate { 221 | 10% { 222 | transform: scale(1, 0.002); 223 | } 224 | 35% { 225 | transform: scale(0.2, 0.002); 226 | opacity: 1; 227 | } 228 | 50% { 229 | transform: scale(0.2, 0.002); 230 | opacity: 0; 231 | } 232 | 85% { 233 | transform: scale(1, 0.002); 234 | opacity: 1; 235 | } 236 | 100% { 237 | transform: scale(1, 1); 238 | } 239 | } 240 | 241 | @-webkit-keyframes animate { 242 | 10% { 243 | transform: scale(1, 0.002); 244 | } 245 | 35% { 246 | transform: scale(0.2, 0.002); 247 | opacity: 1; 248 | } 249 | 50% { 250 | transform: scale(0.2, 0.002); 251 | opacity: 0; 252 | } 253 | 85% { 254 | transform: scale(1, 0.002); 255 | opacity: 1; 256 | } 257 | 100% { 258 | transform: scale(1, 1); 259 | } 260 | } 261 | 262 | @-o-keyframes animate { 263 | 10% { 264 | transform: scale(1, 0.002); 265 | } 266 | 35% { 267 | transform: scale(0.2, 0.002); 268 | opacity: 1; 269 | } 270 | 50% { 271 | transform: scale(0.2, 0.002); 272 | opacity: 0; 273 | } 274 | 85% { 275 | transform: scale(1, 0.002); 276 | opacity: 1; 277 | } 278 | 100% { 279 | transform: scale(1, 1); 280 | } 281 | } 282 | 283 | @keyframes animate { 284 | 10% { 285 | transform: scale(1, 0.002); 286 | } 287 | 35% { 288 | transform: scale(0.2, 0.002); 289 | opacity: 1; 290 | } 291 | 50% { 292 | transform: scale(0.2, 0.002); 293 | opacity: 0; 294 | } 295 | 85% { 296 | transform: scale(1, 0.002); 297 | opacity: 1; 298 | } 299 | 100% { 300 | transform: scale(1, 1); 301 | } 302 | } 303 | 304 | @media (min-width: 300px) and (max-width: 649px) { 305 | .tengah { 306 | position: relative; 307 | margin: 25% auto; 308 | background-image: url('bg.webp'); 309 | background-position: center; 310 | background-size: 100%; 311 | background-repeat: repeat; 312 | border-radius: 14px; 313 | padding: 50px 10px 10px 10px; 314 | text-align: center; 315 | height: 470px; 316 | width: 330px; 317 | align-items: center; 318 | align-content: center; 319 | color: #c87941; 320 | } 321 | 322 | .tengah2 { 323 | position: relative; 324 | margin: 25% auto; 325 | background-image: url('bg.webp'); 326 | background-position: center; 327 | background-size: 100%; 328 | background-repeat: repeat; 329 | border-radius: 14px; 330 | padding: 35px 10px 10px 10px; 331 | text-align: center; 332 | height: 470px; 333 | width: 330px; 334 | align-items: center; 335 | align-content: center; 336 | color: #ea97ad; 337 | } 338 | } 339 | 340 | @media (min-width: 360px) and (max-width: 749px) { 341 | .tengah { 342 | position: relative; 343 | margin: 15% auto; 344 | background-image: url('bg.webp'); 345 | background-position: center; 346 | background-size: 100%; 347 | background-repeat: repeat; 348 | border-radius: 14px; 349 | padding: 50px 10px 10px 10px; 350 | text-align: center; 351 | height: 470px; 352 | width: 330px; 353 | align-items: center; 354 | align-content: center; 355 | color: #c87941; 356 | } 357 | 358 | .tengah2 { 359 | position: relative; 360 | margin: 15% auto; 361 | background-image: url('bg.webp'); 362 | background-position: center; 363 | background-size: 100%; 364 | background-repeat: repeat; 365 | border-radius: 14px; 366 | padding: 35px 10px 10px 10px; 367 | text-align: center; 368 | height: 470px; 369 | width: 330px; 370 | align-items: center; 371 | align-content: center; 372 | color: #ea97ad; 373 | } 374 | } 375 | --------------------------------------------------------------------------------