Birthday message

In this example below you will see how to do a Birthday message with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by a_tinker, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright a_tinker ©
  • HTML
  • CSS
  • JavaScript
    
<div id = 'maincard' class = 'text-center'><h3>Happy Birthday Dad!</h3><img id = 'cake' src = 'http://us2aprajahmundry.com/images/20130629_65902am_Vanilla-Cakes.jpg'/><div id = 'leftside'><h3>Hippo Birdy!</h3><p class = 'lato'>You're an awesome dad.</br> No, seriously. You talk to me and you're nice. Wow, that sounds really stupid. But I love you so much!</p><p>xoxo, Abby</p></div><div id = 'pageline'></div><div id = 'rightside'><p class  = 'x10 text-center'>You biker you. :) </p><img id = 'bike' src = 'https://www.bikesandhikesla.com/sites/default/files/uploads/2012/09/1523651.jpeg'/><p class = 'x10 text-center lato'>Have a nice time and a nice trip!</p></div></div>

/*Downloaded from https://www.codeseek.co/a_tinker/birthday-message-JdXGpp */
    #maincard{
  width: 200px;
  margin-left: 30%;
  height: 300px;
  border: 2px solid #333;
  margin-top: 10px;
  font-family: Nothing You Could Do;
  
}
P{
  font-size: 16px;
}
.lato{
  font-family: Lato;
}
#leftside{
  visibility: hidden;

  width: 198px;
  height: 300px;
  margin-top: -300px;
  z-index: 5;
  position: relative;
  font-family: inherit;
 padding-left: 5px;
  padding-right: 5px;
}
#rightside{
   visibility: hidden;
  
  width: 198px;
  height: 300px;
  margin-top: -300px;
  margin-left: 200px;
  z-index: 5;
  position: relative;
  font-family: inherit;
}
#pageline{
  width: 5px;
  height: 300px;
  background-color: #333;
  z-index: 4;
  position: relative;
  margin-top: -317px;
  margin-left: 200px;
  visibility: hidden;
}
#cake{
  transform: scale(0.5, 0.5);
  -webkit-transform: scale(0.5, 0.5);
  -moz-transform: scale(0.5, 0.5);
  margin-left: -50px;
  margin-top: -60px;
}
#bike{
 width: 180px;
  
}
.x10{
  margin: 10px;
}
#maincard:hover{
  &{
    width: 400px;
    transition: all 2s ease out;
  }
  #cake{
    visibility: hidden;
    
  }
  &>h3{
    visibility: hidden;
    transition: all 3s ease out;
  }
  #pageline{
    visibility: visible;
  }
  #rightside, #leftside{
    visibility: visible;
    
  }
}



/*Downloaded from https://www.codeseek.co/a_tinker/birthday-message-JdXGpp */
    

Comments