<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<!--
Follow me on
Dribbble: https://dribbble.com/supahfunk
Twitter: https://twitter.com/supahfunk
Codepen: https://codepen.io/supah/
-->
<div class="box">
<figure>
<img src="https://static.pexels.com/photos/9694/pexels-photo-large.jpeg" alt="jelly" />
</figure>
<div class="cat">
Inspiration</div>
<h2>
Exploring visual<br>
trends in<br>
contemporaneity
</h2>
<div class="cta">
<a class="btn">Read more</a>
</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Playfair+Display:900);
body, html {
overflow: hidden;
height: 100%;
background-image: -webkit-linear-gradient(315deg, #02e4fd, #011e62);
background-image: linear-gradient(135deg, #02e4fd, #011e62);
position: relative;
z-index: 1;
}
body:before, html:before {
content: '';
width: 80%;
height: 100%;
background: #131313;
position: absolute;
left: 50%;
-webkit-transform: skewX(-40deg) translateX(-50%);
transform: skewX(-40deg) translateX(-50%);
}
.box {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-25%, -50%);
transform: translate(-25%, -50%);
background-image: -webkit-linear-gradient(left, #292b2a, #222222);
background-image: linear-gradient(90deg, #292b2a, #222222);
color: #fff;
padding: 40px 80px 60px 120px;
max-width: 390px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.box figure {
width: 65%;
height: 75%;
background: #005FBE;
position: absolute;
z-index: 1;
left: 0;
-webkit-transform: translateX(-80%);
transform: translateX(-80%);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
overflow: hidden;
opacity: .95;
}
.box figure img {
width: 100%;
height: auto;
-webkit-transform: scale(1.6);
transform: scale(1.6);
}
.box .cat {
font-family: sans-serif;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0 0 20px;
}
.box h2 {
font-family: 'Playfair Display', serif;
font-size: 40px;
line-height: 1.1;
background-image: -webkit-linear-gradient(left, #6bbdff, #6c5ad4);
background-image: linear-gradient(90deg, #6bbdff, #6c5ad4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0 0 40px;
}
.box .cta .btn {
font-family: sans-serif;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
padding: 10px 20px;
border-radius: 20px;
background-image: -webkit-linear-gradient(bottom, #006bd5, #2faaf0);
background-image: linear-gradient(0deg, #006bd5, #2faaf0);
box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.2), 0 5px 15px rgba(108, 90, 210, 0.4);
cursor: pointer;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.box .cta .btn:hover {
box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(108, 90, 210, 0.4);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3);
}
