├── color.txt ├── .gitattributes ├── resources ├── sfx │ ├── door.mp3 │ ├── hbd.mp3 │ ├── blast.mp3 │ ├── switch.mp3 │ └── haunted-bgm.mp3 └── img │ ├── nature.jpg │ ├── nature.png │ ├── Asset 1-100.png │ └── SVG │ ├── Asset 1.png │ ├── Asset 10.png │ ├── Asset 11.png │ ├── Asset 12.png │ ├── Asset 13.png │ ├── Asset 2.png │ ├── Asset 4.png │ ├── Asset 5.png │ ├── Asset 6.png │ ├── Asset 7.png │ ├── Asset 8.jpg │ ├── Asset 9.jpg │ ├── Asset 9.png │ ├── Asset 14.webp │ ├── Asset 2.svg │ ├── Asset 5.svg │ ├── Asset 10.svg │ ├── Asset 9.svg │ ├── Asset 12.svg │ ├── Asset 6.svg │ ├── Asset 4.svg │ ├── Asset 11.svg │ ├── Asset 8.svg │ ├── Asset 1.svg │ └── Asset 7.svg ├── README.md ├── attributions.txt ├── css ├── test.css └── styles.css ├── js └── animation.js └── index.html /color.txt: -------------------------------------------------------------------------------- 1 | bg #141852 2 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /resources/sfx/door.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TharukRenuja/Happy-Birthday-Card/HEAD/resources/sfx/door.mp3 -------------------------------------------------------------------------------- /resources/sfx/hbd.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TharukRenuja/Happy-Birthday-Card/HEAD/resources/sfx/hbd.mp3 -------------------------------------------------------------------------------- /resources/img/nature.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TharukRenuja/Happy-Birthday-Card/HEAD/resources/img/nature.jpg -------------------------------------------------------------------------------- /resources/img/nature.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TharukRenuja/Happy-Birthday-Card/HEAD/resources/img/nature.png -------------------------------------------------------------------------------- /resources/sfx/blast.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TharukRenuja/Happy-Birthday-Card/HEAD/resources/sfx/blast.mp3 -------------------------------------------------------------------------------- /resources/sfx/switch.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TharukRenuja/Happy-Birthday-Card/HEAD/resources/sfx/switch.mp3 -------------------------------------------------------------------------------- /resources/img/Asset 1-100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TharukRenuja/Happy-Birthday-Card/HEAD/resources/img/Asset 1-100.png -------------------------------------------------------------------------------- /resources/img/SVG/Asset 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TharukRenuja/Happy-Birthday-Card/HEAD/resources/img/SVG/Asset 1.png -------------------------------------------------------------------------------- /resources/img/SVG/Asset 10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TharukRenuja/Happy-Birthday-Card/HEAD/resources/img/SVG/Asset 10.png -------------------------------------------------------------------------------- /resources/img/SVG/Asset 11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TharukRenuja/Happy-Birthday-Card/HEAD/resources/img/SVG/Asset 11.png -------------------------------------------------------------------------------- /resources/img/SVG/Asset 12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TharukRenuja/Happy-Birthday-Card/HEAD/resources/img/SVG/Asset 12.png -------------------------------------------------------------------------------- /resources/img/SVG/Asset 13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TharukRenuja/Happy-Birthday-Card/HEAD/resources/img/SVG/Asset 13.png -------------------------------------------------------------------------------- /resources/img/SVG/Asset 2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TharukRenuja/Happy-Birthday-Card/HEAD/resources/img/SVG/Asset 2.png -------------------------------------------------------------------------------- /resources/img/SVG/Asset 4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TharukRenuja/Happy-Birthday-Card/HEAD/resources/img/SVG/Asset 4.png -------------------------------------------------------------------------------- /resources/img/SVG/Asset 5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TharukRenuja/Happy-Birthday-Card/HEAD/resources/img/SVG/Asset 5.png -------------------------------------------------------------------------------- /resources/img/SVG/Asset 6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TharukRenuja/Happy-Birthday-Card/HEAD/resources/img/SVG/Asset 6.png -------------------------------------------------------------------------------- /resources/img/SVG/Asset 7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TharukRenuja/Happy-Birthday-Card/HEAD/resources/img/SVG/Asset 7.png -------------------------------------------------------------------------------- /resources/img/SVG/Asset 8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TharukRenuja/Happy-Birthday-Card/HEAD/resources/img/SVG/Asset 8.jpg -------------------------------------------------------------------------------- /resources/img/SVG/Asset 9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TharukRenuja/Happy-Birthday-Card/HEAD/resources/img/SVG/Asset 9.jpg -------------------------------------------------------------------------------- /resources/img/SVG/Asset 9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TharukRenuja/Happy-Birthday-Card/HEAD/resources/img/SVG/Asset 9.png -------------------------------------------------------------------------------- /resources/sfx/haunted-bgm.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TharukRenuja/Happy-Birthday-Card/HEAD/resources/sfx/haunted-bgm.mp3 -------------------------------------------------------------------------------- /resources/img/SVG/Asset 14.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TharukRenuja/Happy-Birthday-Card/HEAD/resources/img/SVG/Asset 14.webp -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HBD-Template v0.2 2 | 3 | This is a template for a birthday card. In this version an additional haunted hallway scene has been added. **Only mobile portrait view is available.** 4 |
5 | 6 | [Preview](https://anshumanmahato.github.io/Happy-Birthday-Card/) 7 | 8 | ## Credits 9 | 10 | - [AnshumanMahato](https://github.com/AnshumanMahato) 11 | 12 | - [AsmSafone](https://github.com/AsmSafone) 13 | -------------------------------------------------------------------------------- /attributions.txt: -------------------------------------------------------------------------------- 1 | Pattern vector created by mokoland - www.freepik.com 2 | Business vector created by freepik - www.freepik.com 3 | Christmas vector created by freepik - www.freepik.com 4 | Background vector created by brgfx - www.freepik.com 5 | Halloween vector created by vectorpouch - www.freepik.com 6 | -------------------------------------------------------------------------------- /resources/img/SVG/Asset 2.svg: -------------------------------------------------------------------------------- 1 | Asset 2 -------------------------------------------------------------------------------- /resources/img/SVG/Asset 5.svg: -------------------------------------------------------------------------------- 1 | Asset 5 -------------------------------------------------------------------------------- /css/test.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | /* ============================================== Candle 5 | */ 6 | 7 | .velas { 8 | background: #ffffff; 9 | border-radius: 0.625rem; 10 | position: absolute; 11 | top: 70%; 12 | left: 50%; 13 | /* margin-left: -0.15rem; 14 | margin-top: -0.520833333125‬rem; */ 15 | width: 1.5%; 16 | height: 12%; 17 | /* transform: translateY(-300px); */ 18 | backface-visibility: hidden; 19 | /* animation: in 500ms 6s ease-out forwards; */ 20 | } 21 | .velas:after, 22 | .velas:before { 23 | background: rgba(255, 0, 0, 0.4); 24 | content: ""; 25 | position: absolute; 26 | width: 100%; 27 | height: 5%; 28 | } 29 | .velas:after { 30 | top: 25%; 31 | left: 0; 32 | } 33 | .velas:before { 34 | top: 45%; 35 | left: 0; 36 | } 37 | 38 | /* ============================================== Fire 39 | */ 40 | 41 | .fuego { 42 | border-radius: 100%; 43 | position: absolute; 44 | top: -50%; 45 | left: 60%; 46 | /* transform: translate(50% 100%); */ 47 | margin-left: -2.6px; 48 | width: 100%; 49 | height: 40%; 50 | } 51 | .fuego:nth-child(1) { 52 | animation: fuego 2s 6.5s infinite; 53 | } 54 | .fuego:nth-child(2) { 55 | animation: fuego 1.5s 6.5s infinite; 56 | } 57 | .fuego:nth-child(3) { 58 | animation: fuego 1s 6.5s infinite; 59 | } 60 | .fuego:nth-child(4) { 61 | animation: fuego 0.5s 6.5s infinite; 62 | } 63 | .fuego:nth-child(5) { 64 | animation: fuego 0.2s 6.5s infinite; 65 | } 66 | 67 | /* ============================================== Animation Fire 68 | */ 69 | 70 | @keyframes fuego { 71 | 0%, 100% { 72 | background: rgba(254, 248, 97, 0.5); 73 | box-shadow: 0 0 250% 62.5% rgba(248, 233, 209, 0.2); 74 | transform: scale(1); 75 | } 76 | 50% { 77 | background: rgba(255, 50, 0, 0.1); 78 | box-shadow: 0 0 250% 125% rgba(248, 233, 209, 0.2); 79 | transform: scale(0); 80 | } 81 | } 82 | 83 | @keyframes in { 84 | to { 85 | transform: translateY(0); 86 | } 87 | } 88 | 89 | -------------------------------------------------------------------------------- /resources/img/SVG/Asset 10.svg: -------------------------------------------------------------------------------- 1 | Asset 10 -------------------------------------------------------------------------------- /js/animation.js: -------------------------------------------------------------------------------- 1 | //jshint esversion:6 2 | 3 | let button = document.querySelector(".btn"), 4 | blackbox = document.querySelector(".blackbox"), 5 | giftbox = document.querySelector(".giftbox"), 6 | hallway = document.querySelector(".hallway"), 7 | room = document.querySelector(".empty-room"), 8 | whitebox = document.querySelector(".whitebox"); 9 | 10 | // These are the text elements that hold messages to be displayed in the respective screes 11 | 12 | let blackText = document.querySelectorAll(".bb-text"), // msgs in the dark room scene 13 | giftText = document.querySelectorAll(".gift-text"), // msgs in the gift scene 14 | hallText = document.querySelectorAll(".hall-text"), // msgs in the hallway scene 15 | roomText = document.querySelectorAll(".room-text"); // msgs in empty room scene 16 | 17 | //Elements in the card page 18 | 19 | let frames = document.querySelectorAll(".frame"), // this one has the message frame in [0] and card fram in [1] 20 | msg = document.querySelector(".text-frame p"); // the Message para 21 | 22 | //Sfx files 23 | 24 | let light = document.querySelector(".switch-aud"), 25 | blast = document.querySelector(".blast-aud"), 26 | door = document.querySelector(".door-aud"), 27 | haunt = document.querySelector(".haunt-aud"), 28 | music = document.querySelector(".hbd-aud"); 29 | 30 | // readMsg() displays the paras in each scene successively. It takes an array of the para elements as input. 31 | 32 | let readMsg = (text) => { 33 | 34 | for(let i = 0; i < text.length; i++) { // this loop goes through all the text msg paras 35 | setTimeout(() => { // A timeout of 5s ia applied to all text elements so that appear successively one after the other 36 | 37 | text[i].classList.add("read"); // this adds a fadeIn-fadeOut animation to elements 38 | if(i === text.length - 1){ // this ensures that the button appears only after the last text is displayed. 39 | button.style.display = "inline-block"; 40 | document.querySelector(".btn-ref").style.display = "block"; 41 | } 42 | 43 | },5000*i); 44 | 45 | } 46 | }; 47 | 48 | // transition() is animation for change from one scene to another. It takes the current scene div element as input.qq 49 | 50 | let transition = (currentScene) => { 51 | currentScene.classList.add("fade-in"); 52 | currentScene.style.opacity = "0"; 53 | button.style.display = "none"; 54 | document.querySelector(".btn-ref").style.display = "none"; 55 | }; 56 | 57 | //Animation Code 58 | 59 | /* 60 | In the beginning, the black page appears signifying a dark room and after displaying the msg paras 61 | one by one, a button(bulb) appears and the user is asked to click the button to swith on the lights. 62 | */ 63 | 64 | document.querySelector(".btn-ref p").innerHTML = "Click the Light Bulb."; 65 | 66 | readMsg(blackText); 67 | 68 | button.addEventListener("click",function(){ 69 | 70 | if(button.classList.contains("switch")) { 71 | 72 | /* 73 | When the switch is pressed, the black div will wipe out and the backgroung scene with no 74 | elements will appear, signifying that the lights are turned on and the room is empty. Then 75 | the msg will be displayed after which, the user will be asked to move out and the button with 76 | door icon will appear. 77 | */ 78 | 79 | light.play(); 80 | transition(blackbox); 81 | document.querySelector(".btn-ref p").innerHTML = "Click the Door"; 82 | setTimeout(function() { 83 | button.classList.add("door-out"); 84 | button.classList.remove("switch"); 85 | blackbox.style.display = "none"; 86 | readMsg(roomText); 87 | },4000); 88 | } 89 | 90 | else if(button.classList.contains("door-out")) { 91 | 92 | /* 93 | when the door is pressed, scene changes to cemetry. Again, the msg will be displayed, after 94 | which, the user will be asked to come inside and the button with door will appear again. 95 | */ 96 | 97 | door.play(); 98 | transition(room); 99 | setTimeout(function() { 100 | haunt.play(); 101 | haunt.loop = true; 102 | button.classList.add("door-in"); 103 | button.classList.remove("door-out"); 104 | room.style.display = "none"; 105 | readMsg(hallText); 106 | },4000); 107 | } 108 | 109 | else if(button.classList.contains("door-in")) { 110 | 111 | /* 112 | when the door is pressed, scene changes to the gift room. Again, the msg will be displayed, after 113 | which, the user will be asked to open the gift and the button with gift will appear. 114 | */ 115 | 116 | door.play(); 117 | transition(hallway); 118 | document.querySelector(".btn-ref p").innerHTML = "Click the Gift"; 119 | setTimeout(function() { 120 | button.classList.add("gift"); 121 | button.classList.remove("door-in"); 122 | hallway.style.display = "none"; 123 | readMsg(giftText); 124 | },4000); 125 | } 126 | 127 | else if(button.classList.contains("gift")) { 128 | 129 | /* 130 | when the gift is pressed, the gift scene vanishes and the white div fades slowly giving a sense 131 | of explosion. After that, the message frame appears and moves up until the message completes. Then, 132 | the message frame fades away and the card appears. 133 | */ 134 | 135 | haunt.pause(); 136 | blast.play(); 137 | giftbox.style.display = "none"; 138 | transition(whitebox); 139 | 140 | music.loop = true; 141 | music.play(); 142 | 143 | frames[1].style.display = "block"; 144 | 145 | setTimeout(() => { 146 | frames[1].classList.add("appear"); 147 | frames[1].style.opacity = "1"; 148 | msg.classList.add("move-up"); 149 | },1500); 150 | 151 | setTimeout(() => { 152 | msg.style.transform = "translateY(-100%)"; 153 | whitebox.style.display = "none"; 154 | },5000); 155 | 156 | setTimeout(() => { 157 | document.querySelector(".text-frame").classList.add("fade-in"); 158 | document.querySelector(".text-frame").style.opacity = '0'; 159 | },88000); 160 | 161 | setTimeout(() => { 162 | frames[1].style.display = "none"; 163 | frames[0].style.display = "block"; 164 | frames[0].classList.add("appear"); 165 | frames[0].style.opacity = "1"; 166 | },91000); 167 | 168 | } 169 | 170 | }); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Natours - Outdoors is where life happens 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 40 | 44 | 48 | 52 | 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 |

May your soul rest in peace

81 |

W

82 |
83 |
84 |
85 |
86 |

87 | We do not get to choose our families, but we do get to choose our friends. You have 88 | been closer than family to me. On this day of your birth, I wish you every happiness 89 | and blessing. Congratulations! You grew up one more year. Soon, you'll be 25, then 30, 90 | then 35, then 40 and so on. And, if things go right for you then, in the meantime, 91 | you'll be achieving your goals, getting married, have kids, see your kids getting married 92 | and have grandchildren. And if you are lucky enough, you'll see your grandchildren marry 93 | as well. And then eventually, you'll die. But mind you, these will only happen if things 94 | go right for you. Things might go wrong for you, and maybe some night you might get highly 95 | drunk and jump off the terrace of a building thinking it's a swimming pool down there and 96 | die pitifully. No matter what, but eventually, you're going to die. And today, you are 97 | officially one year closer to your death. Being a friend of yours, I would like to express 98 | my condolence upon your death. But maybe, by the time you die, we might not be in contact 99 | with one another. So today, in the name of your oncoming death, I wholeheartedly express 100 | my grief in advance... 101 |

102 |
103 |
104 |
105 | 106 |
107 | 108 |
109 |

Wow! That was something weird.

110 |

Hey look! There's a gift for you

111 |

C'mon let's open it and see what's in there

112 |
113 | 114 |
115 | 116 |

Bro!

117 |

I know the moon looks really beautiful,

118 |

but, things are creepy here.

119 |

I think we should go back inside.

120 |
121 | 122 |
123 |

Ok! Why is it so empty here?

124 |

You know what, let's move outside.

125 |

See if anyone's over there...

126 |
127 | 128 |
129 |

Hey!

130 |

Why is it so dark here?

131 |

Abinash! Can you please switch on the lights?

132 |
133 | 134 |
135 |

136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | -------------------------------------------------------------------------------- /resources/img/SVG/Asset 9.svg: -------------------------------------------------------------------------------- 1 | Asset 9 -------------------------------------------------------------------------------- /resources/img/SVG/Asset 12.svg: -------------------------------------------------------------------------------- 1 | Asset 11 -------------------------------------------------------------------------------- /css/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | 7 | html{ 8 | font-size: 10px; 9 | } 10 | 11 | html, 12 | body { 13 | background-image:url("../resources/img/SVG/Asset\ 14.webp"); 14 | background-position: top; 15 | background-repeat: no-repeat; 16 | background-size: 200vw 200vw; 17 | color: #fff; 18 | font-family: 'Courgette', cursive; 19 | } 20 | 21 | p { 22 | font-size: 2.4rem; 23 | } 24 | 25 | .content { 26 | position: absolute; 27 | overflow-x: hidden; 28 | height: 100vh; 29 | width: 100vw; 30 | } 31 | 32 | body::after { 33 | background-color: rgb(0, 0, 0); 34 | content: ' '; 35 | display: block; 36 | position: absolute; 37 | left: 0; 38 | top: 0; 39 | width: 100%; 40 | height: 100%; 41 | z-index: -1; 42 | opacity: 0.5; 43 | background-repeat: no-repeat; 44 | background-position: 50% 0; 45 | -ms-background-size: cover; 46 | -o-background-size: cover; 47 | -moz-background-size: cover; 48 | -webkit-background-size: cover; 49 | background-size: cover; 50 | } 51 | .decoration { 52 | position: relative; 53 | height: 60vh; 54 | width: 100vw; 55 | overflow: hidden; 56 | } 57 | 58 | .balloon{ 59 | position: absolute; 60 | height: 60vh; 61 | width: 90vw; 62 | top: -2%; 63 | 64 | } 65 | 66 | .balloon-left { 67 | left: -45%; 68 | background-image: url("../resources/img/SVG/Asset\ 4.svg"); 69 | background-size: 100%; 70 | background-position: top right; 71 | content: "."; 72 | background-repeat: no-repeat; 73 | animation: balloon-move 4s linear 0s infinite; 74 | } 75 | 76 | .balloon-right { 77 | right: -45%; 78 | background-image: url("../resources/img/SVG/Asset\ 6.svg"); 79 | background-size: 100%; 80 | background-position: top left; 81 | content: "."; 82 | background-repeat: no-repeat; 83 | animation: balloon-move 4s linear 0s infinite reverse; 84 | 85 | } 86 | 87 | .flag { 88 | position: absolute; 89 | height: 60vh; 90 | width: 65vw; 91 | top: 35%; 92 | } 93 | 94 | .flag-left { 95 | left: -10%; 96 | background-image: url("../resources/img/SVG/Asset\ 2.svg"); 97 | background-size: 100%; 98 | content: "."; 99 | background-repeat: no-repeat; 100 | 101 | } 102 | 103 | .flag-right { 104 | right: -10%; 105 | background-image: url("../resources/img/SVG/Asset\ 5.svg"); 106 | background-size: 100%; 107 | content: "."; 108 | background-repeat: no-repeat; 109 | 110 | } 111 | 112 | .frame { 113 | position: relative; 114 | width: 100vw; 115 | transform: translate(0 ,-40%); 116 | text-align: center; 117 | opacity: 0; 118 | display: none; 119 | } 120 | 121 | .img-back { 122 | position: relative; 123 | display: inline-block; 124 | background-color: #ffa8dc; 125 | height:50vw; 126 | width: 50vw; 127 | border-radius: 50%; 128 | } 129 | 130 | .bd-pic { 131 | position: absolute; 132 | height: 83.33333333%; 133 | width: 83.33333333%; 134 | border-color: #fff; 135 | border-style: dotted; 136 | border-radius: 50%; 137 | top: 50%; 138 | left: 50%; 139 | transform: translate(-50%,-50%) ; 140 | } 141 | 142 | .cap { 143 | position: absolute; 144 | height: 33.33333333%; 145 | top: -15%; 146 | left: 50%; 147 | } 148 | 149 | .confetti { 150 | position: absolute; 151 | top: 50%; 152 | left: 50%; 153 | transform: translate(-50%,-50%); 154 | height: 150%; 155 | width: 150%; 156 | } 157 | 158 | .cake { 159 | position: absolute; 160 | top: 90%; 161 | left: 50%; 162 | transform: translate(-50%,-50%); 163 | height: 70%; 164 | width: 70%; 165 | } 166 | 167 | .HBD-text { 168 | position: absolute; 169 | display: inline-block; 170 | width: 65%; 171 | /* height: 100%; */ 172 | top: 85%; 173 | left: 50%; 174 | transform: translate(-50%,60%); 175 | } 176 | 177 | 178 | .HBD { 179 | font-size: 2.4rem; 180 | padding: 0; 181 | } 182 | 183 | .name { 184 | font-size: 3.2rem; 185 | padding: 0; 186 | } 187 | 188 | .text-frame { 189 | position: relative; 190 | transform: translateY(30%); 191 | display: inline-block; 192 | overflow-y: hidden; 193 | height: 40vh; 194 | width:70vw 195 | } 196 | 197 | .text-frame p { 198 | position: absolute; 199 | top: 50%; 200 | transform: translateY(0%); 201 | } 202 | 203 | 204 | .blackbox, 205 | .whitebox, 206 | .giftbox, 207 | .empty-room { 208 | text-align: center; 209 | position: absolute; 210 | height: 100vh; 211 | width: 100vw; 212 | } 213 | 214 | .blackbox { 215 | background-color: #000; 216 | } 217 | 218 | .whitebox { 219 | background-color: #fff; 220 | } 221 | 222 | .giftbox, 223 | .empty-room { 224 | background-color: #141852 225 | ; 226 | } 227 | 228 | .switch, 229 | .gift, 230 | .door-in, 231 | .door-out { 232 | position: absolute; 233 | display: none; 234 | height: 20vw; 235 | width: 20vw; 236 | top: 60%; 237 | left: 50%; 238 | background-repeat: no-repeat; 239 | background-size: contain; 240 | background-position: center; 241 | animation: heart-beat 2s linear 0s infinite alternate; 242 | } 243 | 244 | .switch { 245 | background-image: url("../resources/img/SVG/Asset\ 10.svg"); 246 | } 247 | 248 | .gift { 249 | background-image: url("../resources/img/SVG/Asset\ 9.svg"); 250 | } 251 | 252 | .door-in, 253 | .door-out { 254 | background-image: url("../resources/img/SVG/Asset\ 12.svg"); 255 | } 256 | 257 | .btn-ref { 258 | position: absolute; 259 | top:90%; 260 | left: 50%; 261 | text-align: center; 262 | transform: translateX(-50%); 263 | color:#fff; 264 | display: none; 265 | } 266 | 267 | .btn-ref p { 268 | font-size: 1.8rem; 269 | } 270 | 271 | .bb-text, 272 | .gift-text, 273 | .hall-text, 274 | .room-text { 275 | display: inline-block; 276 | text-align: center; 277 | position: absolute; 278 | width: 80vw; 279 | top: 20%; 280 | left: 50%; 281 | transform: translateX(-50%); 282 | opacity:0; 283 | font-size: 3.2rem; 284 | } 285 | 286 | .hallway{ 287 | overflow: hidden; 288 | } 289 | 290 | .hall{ 291 | height: 100%; 292 | position: absolute; 293 | top:50%; 294 | left:50%; 295 | transform: translate(-50%,-50%); 296 | 297 | } 298 | 299 | 300 | /* =======================Animation===================== */ 301 | 302 | .hidden { 303 | display: none; 304 | } 305 | .fade-in { 306 | animation: fade 2s ease-in 0s; 307 | } 308 | 309 | .appear { 310 | animation: fade 2s linear 0s 1 reverse; 311 | } 312 | 313 | .read { 314 | animation: read 4s linear 0s; 315 | } 316 | 317 | .move-up { 318 | animation: move-up 80s linear 3s; 319 | } 320 | 321 | 322 | @keyframes fade { 323 | 0% { 324 | opacity: 1; 325 | } 326 | 100% { 327 | opacity: 0; 328 | } 329 | } 330 | 331 | @keyframes read { 332 | 0% { 333 | opacity: 0; 334 | } 335 | 336 | 25% { 337 | opacity: 1; 338 | } 339 | 340 | 75% { 341 | opacity: 1; 342 | } 343 | 344 | 100% { 345 | opacity: 0; 346 | } 347 | } 348 | 349 | @keyframes heart-beat { 350 | 0% { 351 | transform: translate(-50%,-50%) scale(1,1); 352 | } 353 | 354 | 50% { 355 | transform: translate(-50%,-50%) scale(1.25,1.25); 356 | } 357 | 358 | 100% { 359 | transform: translate(-50%,-50%) scale(1,1); 360 | } 361 | } 362 | 363 | @keyframes balloon-move { 364 | 0% { 365 | transform: translateY(0) rotate(0); 366 | } 367 | 25% { 368 | transform: translateY(5%) rotate(3deg); 369 | } 370 | 50% { 371 | transform: translateY(0) rotate(0); 372 | } 373 | 75% { 374 | transform: translateY(-5%) rotate(-3deg); 375 | } 376 | 100% { 377 | transform: translateY(0) rotate(0); 378 | } 379 | } 380 | 381 | @keyframes move-up { 382 | 0% { 383 | transform: translateY(0); 384 | } 385 | 386 | 100% { 387 | transform: translateY(-100%); 388 | } 389 | } 390 | 391 | 392 | 393 | /*** Media Queries ***/ 394 | @media only screen and (max-width:330px) { 395 | html { 396 | font-size: 8px; 397 | } 398 | } 399 | 400 | @media only screen and (min-width:420px) { 401 | html { 402 | font-size: 11px; 403 | } 404 | 405 | } 406 | 407 | @media only screen and (min-width:480px) { 408 | html { 409 | font-size: 13px; 410 | } 411 | 412 | } 413 | 414 | @media only screen and (min-width:550px) { 415 | html { 416 | font-size: 15px; 417 | } 418 | 419 | } 420 | 421 | @media only screen and (min-width:640px) { 422 | html { 423 | font-size: 17px; 424 | } 425 | 426 | } 427 | 428 | -------------------------------------------------------------------------------- /resources/img/SVG/Asset 6.svg: -------------------------------------------------------------------------------- 1 | Asset 6 -------------------------------------------------------------------------------- /resources/img/SVG/Asset 4.svg: -------------------------------------------------------------------------------- 1 | Asset 4 -------------------------------------------------------------------------------- /resources/img/SVG/Asset 11.svg: -------------------------------------------------------------------------------- 1 | Asset 11 -------------------------------------------------------------------------------- /resources/img/SVG/Asset 8.svg: -------------------------------------------------------------------------------- 1 | Asset 1 -------------------------------------------------------------------------------- /resources/img/SVG/Asset 1.svg: -------------------------------------------------------------------------------- 1 | Asset 1 -------------------------------------------------------------------------------- /resources/img/SVG/Asset 7.svg: -------------------------------------------------------------------------------- 1 | Asset 7 --------------------------------------------------------------------------------