CSS Birthday Card

CSS Birthday Card
0

#1

hi guys, i need some feedback on my side project, A birthday card for my sister
i wanna know how it looks but its not responsive
sooo here is the link,

https://codepen.io/HIC/full/PyKXRy/

give me any feedback or just an advice


#2

Hi there!

First of all, what a lovely card you have made :smiley: :heart:

Some feedback:

  • Right now the text starts behind the card and it kind of ruins your nice letter display, is there anyway to start the text when clicking on the button?

  • The card when closed keeps changing size and jumping around.

  • You also see white lines here and there at the borders.

I tried css before and I do not think it is so easy to make all these “objects” work together, maybe I’m just looking at details too much and a general view would miss these things. But work hard and good luck, hope this helped! :smiley:


#3

WOW that’s amazing! I wish I could do that, but I’m just learning Jquery. It looks like you fixed a lot of the issues mentioned…or maybe I just don’t notice them…but there is one thing that might wreck the effect. When you view it on anything other than full screen the heart starts to move out of the card. and the text starts to write out of the card.

I wish I had a solution for this but I have been playing around with exact positioned animations as well and I haven’t been able to find away to specify exact coordinates with another object when the screen changes. So just make sure your sis sees it on a full screen LOL. Either way it’s super impressive with or without that fix. …and if you do find a way to get animations exact on changing screens please let me know!


#4

hi, check out again i tried to fix them and thanks for your feedback
:sparkling_heart::sparkling_heart:


#5

Is it the same link?
The text still starts before pressing the button, if you just wait some seconds and then open it you will see that.
Isn’t there some rest or pause function you can use for the text generator in the event listeners when clicking on the button?
Maybe it is too hard, I don’t really know since I kind of just started with the web area. :confused:


#6

Hey works great on my phone and it was the small screen that was messing up before. So great job! Now I’m curious, how did you solve the having specific coordinate in a dynamic space problem for your animation?


#7

hi,
i use “%” to make it responsive and for heart i use vw so the width is responsive


#8

but its not fully responsive…