<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 ---------->
<div class='background'>
<div class='container'>
<div class='outer'>
<div class='outer-corner'></div><div class='outer-content'>Contact</div></div>
<div class='main'>
<div class='pd'><p class='st'>Phone</p><a href='tel:0000'>07411222333</a><p class='st'>Email</p><a href='mailto:scott@smhutch.co.uk'>scott@smhutch.co.uk</a><p class='st'>Twitter</p><a href='https://twitter.com/SMHutcheson'>@SMHutcheson</a></div>
<div class='map'></div>
<div class='img'></div>
<div class='main-outer'></div>
</div>
</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700);
* {
font-family: "Roboto";
}
a {
text-decoration: none;
color: #444;
font-weight: 300;
}
.background {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: #225faa;
background: linear-gradient(135deg, #BEF4F7 0%, #f7c1be 100%);
overflow: scroll;
perspective: 1000px;
}
.container {
width: 90%;
max-width: 500px;
margin: 150px auto;
transform: rotateX(20deg);
}
.outer {
font-weight: 100;
text-transform: uppercase;
letter-spacing: 0.2em;
text-shadow: 0px 2px 1px #aaa;
font-size: 2em;
position: relative;
background-color: rgba(255, 255, 255, 0.6);
padding: 40px;
box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.2);
}
.outer .outer-content {
z-index: 1;
}
.outer .outer-corner {
height: 40px;
width: 40px;
border-right: 5px solid rgba(255, 255, 255, 0.5);
border-top: 5px solid white;
position: absolute;
right: -30px;
top: -30px;
}
.main {
background: linear-gradient(to bottom, transparent, white 40px);
transform: translateY(-40px);
box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.2);
position: relative;
}
.main p {
margin: 0px;
font-weight: 300;
}
.main p.st {
margin-top: 20px;
margin-bottom: 5px;
font-weight: 700;
}
.main p.st:first-of-type {
margin-top: 0px;
}
.main .pd {
padding: 40px;
}
.main .map {
width: 200px;
height: 200px;
background: url("https://s32.postimg.org/rienefced/Ultra_Light_with_Labels_Snazzy_Maps_Free_Sty.png");
background-size: 220%;
-webkit-filter: contrast(100%);
position: absolute;
right: -20px;
top: 20px;
box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.2);
}
.main .img {
position: absolute;
bottom: 0;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
background: url(https://images.unsplash.com/photo-1452110040644-6751c0c95836?crop=entropy&dpr=2&fit=crop&fm=jpg&h=825&ixjsv=2.1.0&ixlib=rb-0.3.5&q=50&w=1450);
background-size: cover;
width: 100%;
height: 10px;
}
.main .main-outer {
height: 40px;
width: 40px;
border-left: 5px solid rgba(255, 255, 255, 0.5);
border-bottom: 5px solid white;
position: absolute;
left: -30px;
bottom: -30px;
}
