Happy Mothers Day

happy-mothers-day.markdown

Happy Mothers Day

E-card for my mom

A Pen by Jonathan P Christie on CodePen.

License.

index.html

<div id='container'>
<h1>Happy Mothers Day!</h1>
<div id='flower'>
    <img id="im"align='middle' src='https://i.imgur.com/uT2EtCe.png'/>
  </div>
</div>
<div id="hideaway">Dear Mom,</br>
  <p>Nothing makes me happier than being your son. Seeing you this saturday graduating is just proof of who you are as person to me and to others. Wise, Witty, and loving are all words I use to describe you. No other person inspires me to do more good in the world and you are the true embodiment of sticktoitiveness. This past year has been tough for me and you have always been there. You inspire me to do well in school and to also look past high school at the bigger and better things in life. My goal in life is to have your approval and one day and to see me as great of a person as I see you.</p></br>
  Love Your Son,</br>
<img id='sign' src='https://i.imgur.com/IrQ7xe3.png'>
</div>

script.js

$(document).ready(function(){
  $('#im').click(function(){
    $("#hideaway").toggle("slow");
  })
})

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import url(https://fonts.googleapis.com/css?family=Lato:100,300);

body{
  background:#ff6b6b;
  color:white;
  font-family: 'Lato', sans-serif;
  font-weight:100;
}
h1{
  font-size:4em;
  text-align:center;
  font-family:"lato";
  font-weight:100;
}

img{
  width:250px;
  margin:auto;
  transition: all 0.2s;
  display:block;
}
#flower{
  width:250px;
  margin:auto;
}
#flower:hover{
  opacity:0.15;
  cursor:pointer;
  transition: all 1s;

}
#hint{
  text-align:center;
  padding:25px;
  margin:auto;
}
#container{
  margin-top:auto;
  margin-bottom:auto;
}
#hideaway{
  display:none;
  width:700px;
  margin:auto;
  text-align:left;
  transition: all 1s;
}
a{
  color:white;
}
a:link {
  text-decoration:none;
  color:whie;
}
#hide{
  text-align:center;
  boder-style:solid;
  border-color:white;
  border-radius: 5px;
  border-width:2px;
}
#sign{
  float:left;
  width:200px;
  padding:20px;
  display:inline-block;
}