<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<head>
<meta charset="UTF-8"/>
<link href='https://fonts.googleapis.com/css?family=Domine:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<div class="info-card-container">
<div class="info-card">
<div class="info-card__image-exposure info-card__content">
<div class="info-card__image-exposure--blend">
</div>
<div class="info-card__image-exposure__item">
</div>
</div>
<div class="info-card__bio info-card__content">
<h2 class="info-card__bio--title">John Legend</h2>
<p class="info-card__bio--copy">John Roger Stephens (born December 28, 1978), better
known by his stage name John Legend, is an American
singer, songwriter and actor. He has won ten Grammy
Awards, one Golden Globe, and one Academy Award. In
2007, Legend received the Hal David Starlight Award
from the Songwriters Hall of Fame.</p>
<p class="info-card__bio--copy">Prior to the release of Legend's debut album, his
career gained momentum through a series of
successful collaborations with multiple established
artists. He sang in Magnetic Man's "Getting Nowhere,"
Kanye West's "All of the Lights", on Slum Village's
"Selfish", and Dilated Peoples' "This Way". Other
artists included Jay Z's "Encore", and he sang
backing vocals on Alicia Keys' 2003 song "You Don't
Know My Name", the Kanye West remix of Britney
Spears' "Me Against the Music", and Fort Minor's
"High Road". Legend played piano on Lauryn Hill's
"Everything Is Everything".</p>
</div>
<span class="close"></span>
</div>
</div>
</div>
</body>
</html>
/***** Info Card Component *****/
/*******************************/
html {
font-size: 62.5%;
}
body {
font-size: 1.4rem;
}
/* =14px */
h1 {
font-size: 2.4rem;
}
/* =24px */
.info-card-container {
width: 100%;
min-height: 100%;
height: 83rem;
overflow: hidden;
background: -webkit-linear-gradient(left, #0C1B23 0%, #0C1B23 70%, #fff 70%, #fff 100%);
background: linear-gradient(to right, #0C1B23 0%, #0C1B23 70%, #fff 70%, #fff 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$white', endColorstr='$white',GradientType=1 );
/* IE6-9 */
position: relative;
}
.info-card {
min-width: 80%;
max-width: 90rem;
min-height: 70%;
height: 70rem;
margin: 0 auto;
position: relative;
background-color: #fff;
box-shadow: 0.01rem 0.01rem 1rem #0C1B23;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.info-card__content {
float: left;
height: 100%;
position: relative;
overflow: hidden;
}
.info-card__image-exposure {
width: 45%;
}
.info-card__bio {
width: 40%;
padding: 5rem;
height: auto;
font-family: 'Domine', serif;
}
.info-card__bio--title {
color: #141D1D;
font-size: 3.5rem;
font-weight: 300;
}
.info-card__bio--copy {
color: #9da09f;
line-height: 2;
}
.info-card__image-exposure__item {
background-image: url("http://s21.postimg.org/asn53rlg7/john_legend.png");
background-color: #fff;
background-position: 80% 50%;
background-repeat: no-repeat;
height: 100%;
width: 100%;
display: inline-block;
position: absolute;
opacity: 0.9;
}
.info-card__image-exposure--blend {
background-image: url("http://s23.postimg.org/lcnfbeesr/blend1.jpg");
background-repeat: no-repeat;
background-color: #fff;
mix-blend-mode: soft-light;
background-position: -5rem;
width: 100%;
height: 100%;
z-index: 1;
position: absolute;
-webkit-animation: blendAnimate 30s linear infinite;
animation: blendAnimate 30s linear infinite;
}
.close {
width: 2rem;
height: 0.25rem;
background-color: #000;
position: absolute;
top: 2.5rem;
right: 2rem;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
cursor: pointer;
}
.close:before {
content: '';
display: block;
width: 2rem;
height: 0.25rem;
background: #000;
position: absolute;
top: 0;
right: 0;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
@-webkit-keyframes blendAnimate {
0% {
background-position: 0;
}
50% {
background-position: 100% 100%;
}
100% {
background-position: 0;
}
}
@keyframes blendAnimate {
0% {
background-position: 0;
}
50% {
background-position: 100% 100%;
}
100% {
background-position: 0;
}
}
