Valentine

index.jade

body
  .main
    .heart.blue(data-partner="red")
      img(src="https://res.cloudinary.com/nathanj-me/image/upload/v1423892510/blue-heart_sl7idf.svg" alt="heart")

    .heart.red(data-partner="blue")
      img(src="https://res.cloudinary.com/nathanj-me/image/upload/v1423892510/red-heart_b9gpbs.svg" alt="heart")
    
    .heart.green(data-partner="green")
      img(src="https://res.cloudinary.com/nathanj-me/image/upload/v1423892510/green-heart_qjavwx.svg" alt="heart")
    
    q#blue Even if you prove to me that you have the blemishes you think you have, it cannot appall me any, because with them, you will still be better, and nobler, and lovelier than anyone I have known.
    q#red For I do love you… as the dew loves the flowers; as the birds love the sunshine; as the wavelets love the breeze, as mothers love their first-born; as memory loves old faces; as the yearning tides love the moon; as the angels love the pure in heart…
    q#green What we will lose of youth, we will make up in love, so that the account is squared, and to nobody’s disadvantage. I love you, my darling, and this my love will increase, step by step as tooth by tooth falls out, mile-stoning my way down to the great mystery and the Sweet Bye & Bye.
    h1 Suzanne
    
  .close

script.js

(function($){

  $(function(){

    var $heart  = $('.heart'),
        $h1     = $('h1'),
        $q      = $('q'),
        $close  = $('.close');

    function showQuote(){
      var $this = $(this);
      $q = $('q#' + $this.data('partner'));
      $close.show();
      $h1.removeClass('show').addClass('hide');
      $this.siblings('.heart').addClass('shrink');
      $q.slideDown();
    }

    function hideQuote(){
      var $this = $(this);
      $this.hide();
      $h1.removeClass('hide').addClass('show');
      $heart.removeClass('shrink');
      $q.slideUp();
    }

    $heart.on('click', showQuote);
    $close.on('click', hideQuote);

  });

})(jQuery);

style.scss

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

$blue: #8ab7d5;
$red: #d79a9c;
$green: #8acec9;
$white: #efefef;
$white50: rgba(255, 255, 255, 0.5);
$white0: rgba(255, 255, 255, 0);
$black60: rgba(0, 0, 0, 0.6);
$black40: rgba(0, 0, 0, 0.4);

@mixin radialColor($color) {
	background: #{$color} radial-gradient(80% 80%, $white50 0%, $white0 50%);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html {
  font-size: 10px;
  font-family: lato;
  font-weight: 300;
  color: $black40;
}
body {
	background: $white;
}
.main {
	position: absolute;
	padding: 20px;
	width: 100%;
	min-height: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	align-content: center;

	@media screen and (min-width: 800px) {
		margin-left: -400px;
		width: 800px;
		left: 50%;
	}
}
@keyframes beat {
	4% {
		padding: 0;
	}
	34% {
		padding: 7px;
	}
	38% {
		padding: 0;
	}
	to {
		padding: 7px;
	}
}
.heart {
	padding: 7px;
	width: 200px;
	height: 200px;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;	
	margin: 2rem;
	border-radius: 50%;
	border: 5px solid $white50;
	text-align: center;
	cursor: pointer;
	transition: all .25s ease-out;
	animation-duration: .75s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-out;

	&:hover {
		animation-name: beat;
		background: transparent;
	}

	img {
		// max-width: 200px; // Firefox & Safari Only
		// max-height: 200px; // Firefox & Safari Only
		// width: 200px; // Chrome Only
		// height: 200px; // Chrome Only
		min-width: 100%; // All Three
		min-width: 100%; // All Three
	}
}
.blue {
	flex-order: 1;
	@include radialColor($blue);
}
.red {
	flex-order: 2;
	@include radialColor($red);
}
.green {
	flex-order: 3;
	@include radialColor($green);
}
.no-animate {
	animation-name: none;
}
h1 {
	flex-basis: 100%;
	margin: 2rem 0 0;
	font-size: 7rem;
	font-weight: 100;
	text-align: center;
	text-transform: uppercase;
	transition: opacity .25s ease-out;
}
q {
	display: none;
	flex-basis: 100%;
	color: $black60;
	font-size: 2.4rem;
	text-align: center;
	line-height: 1.4;
}
.shrink {
	margin: 0;
	padding: 0;
	width: 0;
	height: 0;
	border: 0;
}
.hide {
	opacity: 0;
}
.show {
	opacity: 1;
}
.close {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	cursor: pointer;
}

Valentine.markdown

Valentine

A Pen by iAmNathanJ on CodePen.

License.