├── README.md ├── img ├── shape-of-you.mp3 ├── vector.jpg ├── happy.svg ├── balloon.svg ├── heart.svg ├── music-note.svg └── smiling.svg ├── customize.json ├── package.json ├── style └── style.css ├── index.html └── script └── main.js /README.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /img/shape-of-you.mp3: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /img/vector.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joelxgalarza/valentines/HEAD/img/vector.jpg -------------------------------------------------------------------------------- /customize.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Kayla,", 3 | "greetingText": "My love,", 4 | "wishText": "May you do me the honors, and be my valentines? 💝💐", 5 | "imagePath": "img/vector.jpg" 6 | } 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "happy-Valentine", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "devDependencies": { 7 | "browser-sync": "^2.18.13", 8 | "run-script-os": "^1.0.2" 9 | }, 10 | "scripts": { 11 | "start": "run-script-os", 12 | "start:win32": "browser-sync start --server --files '**/*.css, **/*.html, **/*.js, !node_modules/**/*' --directory --port 7777 --browser \"C:\\Program Files\\Firefox Developer Edition\\firefox.exe\"", 13 | "//": "Hello! If you are having trouble running this command. Try changing Firefox Developer Edition to FirefoxDeveloperEdition", 14 | "start:darwin:linux": "browser-sync start --server --files '**/*.css, **/*.html, **/*.js, !node_modules/**/*' --directory --port 7777", 15 | "test": "echo \"Error: no test specified\" && exit 1" 16 | }, 17 | "repository": { 18 | "type": "git", 19 | "url": "git+https://github.com/faahim/happy-birthday.git" 20 | }, 21 | "keywords": [ 22 | "Happy", 23 | "Birthday" 24 | ], 25 | "author": "Afiur Rahman Fahim", 26 | "modification": "GovindCodes", 27 | "license": "MIT", 28 | "bugs": { 29 | "url": "https://github.com/faahim/happy-birthday/issues" 30 | }, 31 | "homepage": "https://github.com/faahim/happy-birthday#readme", 32 | "dependencies": {} 33 | } 34 | -------------------------------------------------------------------------------- /img/happy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 9 | 12 | 13 | 16 | 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 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /img/balloon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 10 | 13 | 14 | 17 | 18 | 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 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /img/heart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 11 | 15 | 19 | 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 | 48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /img/music-note.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 11 | 14 | 15 | 17 | 18 | 19 | 21 | 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 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /img/smiling.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /style/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | font-family: "Work Sans", sans-serif; 8 | } 9 | 10 | .container { 11 | height: 100vh; 12 | width: 100vh; 13 | margin: 0 auto; 14 | text-align: center; 15 | visibility: hidden; 16 | position: relative; 17 | overflow: hidden; 18 | } 19 | 20 | .container div.six { 21 | top: 10vh; 22 | z-index: 1; 23 | } 24 | 25 | .container div.seven, 26 | .container div.eight { 27 | width: 100vw; 28 | height: 100vh; 29 | position: fixed; 30 | top: 0; 31 | } 32 | 33 | .container > div { 34 | position: absolute; 35 | left: 0; 36 | right: 0; 37 | top: 20vh; 38 | } 39 | 40 | .one { 41 | font-size: 4.5rem; 42 | } 43 | 44 | .one > img { 45 | vertical-align: middle; 46 | margin-bottom: 10px; 47 | max-width: 100%; 48 | height: auto; 49 | } 50 | 51 | .two { 52 | font-size: 1.2rem; 53 | font-weight: lighter; 54 | } 55 | 56 | .three { 57 | font-size: 3rem; 58 | } 59 | 60 | .four .text-box { 61 | width: 600px; 62 | margin: 0 auto; 63 | border: 3px solid #aaa; 64 | border-radius: 5px; 65 | padding: 10px; 66 | position: relative; 67 | } 68 | 69 | .text-box p { 70 | margin: 0; 71 | text-align: left; 72 | } 73 | 74 | .text-box span { 75 | visibility: hidden; 76 | } 77 | 78 | .text-box .fake-btn { 79 | position: absolute; 80 | right: 5px; 81 | bottom: 5px; 82 | color: #fff; 83 | background-color: rgb(21, 161, 237); 84 | padding: 5px 8px; 85 | border-radius: 3px; 86 | } 87 | 88 | .five p { 89 | font-size: 2rem; 90 | position: absolute; 91 | left: 0; 92 | right: 0; 93 | } 94 | 95 | .idea-3 strong { 96 | padding: 3px 5px; 97 | border-radius: 3px; 98 | display: inline-block; 99 | } 100 | 101 | .five .idea-5 { 102 | font-size: 4rem; 103 | } 104 | 105 | .idea-5 span, 106 | .idea-6 span, 107 | .wish-hbd span { 108 | display: inline-block; 109 | } 110 | 111 | .idea-6 span { 112 | font-size: 15rem; 113 | } 114 | 115 | .six { 116 | position: relative; 117 | } 118 | 119 | .six img { 120 | display: inline-block; 121 | max-width: 45%; 122 | height: auto; 123 | } 124 | 125 | .six .hat { 126 | position: absolute; 127 | width: 80px; 128 | top: -35px; 129 | left: 41.5%; 130 | /* transform: scale(0.1); */ 131 | } 132 | 133 | .baloons img { 134 | display: inline-block; 135 | position: absolute; 136 | width: 200px; 137 | } 138 | 139 | .baloons img:nth-child(even) { 140 | left: 10%; 141 | } 142 | 143 | .baloons img:nth-child(odd) { 144 | right: 10%; 145 | } 146 | 147 | .baloons img:nth-child(3n + 0) { 148 | left: 30%; 149 | } 150 | 151 | .eight svg { 152 | width: 25px; 153 | position: absolute; 154 | top: 0; 155 | left: 0; 156 | visibility: hidden; 157 | z-index: -1; 158 | } 159 | 160 | .eight svg:nth-child(1) { 161 | top: 7vh; 162 | left: 5vw; 163 | fill: #bd6ecf; 164 | } 165 | 166 | .eight svg:nth-child(2) { 167 | top: 23vh; 168 | left: 35vw; 169 | fill: #7dd175; 170 | } 171 | 172 | .eight svg:nth-child(3) { 173 | top: 33vh; 174 | left: 23vw; 175 | fill: #349d8b; 176 | } 177 | 178 | .eight svg:nth-child(4) { 179 | top: 43vh; 180 | left: 57vw; 181 | fill: #347a9d; 182 | } 183 | 184 | .eight svg:nth-child(5) { 185 | top: 68vh; 186 | left: 7vw; 187 | fill: #c66053; 188 | } 189 | 190 | .eight svg:nth-child(6) { 191 | top: 42vh; 192 | left: 77vw; 193 | fill: #bfaa40; 194 | } 195 | 196 | .eight svg:nth-child(7) { 197 | top: 68vh; 198 | left: 83vw; 199 | fill: #e3bae8; 200 | } 201 | 202 | .eight svg:nth-child(8) { 203 | top: 86vh; 204 | left: 37vw; 205 | fill: #8762cb; 206 | } 207 | 208 | .eight svg:nth-child(9) { 209 | top: 94vh; 210 | left: 87vw; 211 | fill: #9a90da; 212 | } 213 | 214 | .wish-hbd { 215 | font-size: 3em; 216 | margin: 0; 217 | /* text-transform: uppercase; */ 218 | } 219 | 220 | .wish h5 { 221 | font-weight: lighter; 222 | font-size: 2rem; 223 | margin: 10px 0 0; 224 | } 225 | 226 | .nine p { 227 | font-size: 2rem; 228 | font-weight: lighter; 229 | } 230 | 231 | #replay { 232 | z-index: 3; 233 | cursor:auto; 234 | border: solid #bd6ecf 2px; 235 | padding: 5px 236 | } 237 | 238 | /* Media Queries */; 239 | @media screen and (max-height: 1000px) { 240 | .six .hat { 241 | left: 40%; 242 | } 243 | } 244 | 245 | @media screen and (max-height: 800px) { 246 | .six .hat { 247 | left: 37%; 248 | } 249 | } 250 | 251 | @media screen and (max-height: 700px) { 252 | .six .hat { 253 | left: 32%; 254 | } 255 | } 256 | 257 | @media screen and (max-height: 850px) and (max-width: 450px) { 258 | .six .hat { 259 | left: 32%; 260 | } 261 | } 262 | 263 | @media screen and (max-width: 500px) { 264 | .container { 265 | width: 90%; 266 | } 267 | 268 | .four .text-box { 269 | width: 90%; 270 | } 271 | 272 | .text-box .fake-btn { 273 | right: 5px; 274 | bottom: -38px; 275 | } 276 | 277 | .idea-5 span { 278 | display: block; 279 | } 280 | 281 | .idea-6 span { 282 | font-size: 10rem; 283 | } 284 | 285 | .six .hat { 286 | width: 50px; 287 | top: -20px; 288 | } 289 | 290 | .wish-hbd { 291 | font-size: 2.3em; 292 | } 293 | 294 | .wish h5 { 295 | font-size: 1.4rem; 296 | } 297 | 298 | .nine p { 299 | font-size: 1.5rem; 300 | font-weight: lighter; 301 | } 302 | } 303 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Kayla, Mi Amor 8 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |

19 | Dear 20 | xyz 21 |

22 |

My love!

23 |
24 |
25 |

It is almost our first Valentines day 👉👈

26 |
27 |
28 |
29 |

30 | happy valentines day or whateva! Yappity yap yap... 31 |

32 |

Send

33 |
34 |
35 |
36 |

That's what someone could've done

37 |

But I tried to make you something special.

38 |

39 | Using what i'm good at (coding) ;). 40 |

41 |

Because,

42 |

43 | A special girl deserves a special proposal 44 | :) 45 |

46 |

47 | S 48 | O 49 |

50 |
51 |
52 | 53 |
54 |

MYKINDBEAUTIFULSMARTSEXYANDCARINGPOOKIEBEAR

55 |
kuch kuch
56 |
57 |
58 |
59 |
60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 92 | 93 | 94 | 95 |
96 |
97 |
98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 |
126 |
127 |

Okay, now call me back and tell me if you liked it.

128 |

Or click, if you want to watch it again.

129 |

:)

130 |
131 |
132 | 133 | 134 | 146 | 147 | 148 | 149 | 153 | 154 | 155 | 156 | 157 | -------------------------------------------------------------------------------- /script/main.js: -------------------------------------------------------------------------------- 1 | // Animation Timeline 2 | const animationTimeline = () => { 3 | // Spit chars that needs to be animated individually 4 | const textBoxChars = document.getElementsByClassName("hbd-chatbox")[0]; 5 | const hbd = document.getElementsByClassName("wish-hbd")[0]; 6 | 7 | textBoxChars.innerHTML = `${textBoxChars.innerHTML 8 | .split("") 9 | .join("")}${hbd.innerHTML 12 | .split("") 13 | .join("")} { 273 | tl.restart(); 274 | }); 275 | }; 276 | 277 | // Import the data to customize and insert them into page 278 | const fetchData = () => { 279 | fetch("customize.json") 280 | .then((data) => data.json()) 281 | .then((data) => { 282 | Object.keys(data).map((customData) => { 283 | if (data[customData] !== "") { 284 | if (customData === "imagePath") { 285 | document 286 | .getElementById(customData) 287 | .setAttribute("src", data[customData]); 288 | } else { 289 | document.getElementById(customData).innerText = data[customData]; 290 | } 291 | } 292 | }); 293 | }); 294 | }; 295 | 296 | // Run fetch and animation in sequence 297 | const resolveFetch = () => { 298 | return new Promise((resolve, reject) => { 299 | fetchData(); 300 | resolve("Fetch done!"); 301 | }); 302 | }; 303 | 304 | resolveFetch().then(animationTimeline()); 305 | --------------------------------------------------------------------------------