"contact"
Bootstrap 3.0.0 Snippet by MohamedSamiKhiari

<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; }

Related: See More


Questions / Comments: