"Simple Contact Card"
Bootstrap 3.0.0 Snippet by harunpehlivan

<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 ----------> <body> <div class="card"> <div class="photo"></div> <div class="banner"></div> <ul> <li><b>HARUN PEHLİVAN</b></li> <li><a href="https://harunpehlivantebimtebitagem.carrd.co" target="_blank"> FOUNDER,CEO BLOGGER</a></li> </ul> <button class="contact" id="main-button">click to get in touch</button> <div class="social-media-banner"> <a href="https://www.twitter.com/HTERCUMANP"><i class="fa fa-twitter"></i></a> <a href="https://facebook.com/profile.php?id=100008152065270"><i class="fa fa-facebook"></i></a> <a href="https://instagram.com/harunpehlivantebimtebitagem"><i class="fa fa-instagram"></i></a> <a href="https://www.linkedin.com/in/harun-pehlivan-0aa34252"><i class="fa fa-linkedin"></i></a> </div> <form class="email-form"> <input id="name" type="text" placeholder="name"> <input id="email" type="text" placeholder="email"> <textarea id="comment" type="text" placeholder="comment"></textarea> <button class="contact">send</button> </form> </div> </body>
html { overflow-x: hidden; } body { font-family: 'Lato', sans-serif; margin: 0; background-color: white; } a { text-decoration: none; } .card { z-index: 1; position: relative; width: 300px; height:400px; margin: 0 auto; margin-top:100px; background-color: white; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; /* -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1); box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.2); */ } .card.active { height:490px; } .banner { z-index: 2; position: relative; margin-top: -154px; width:100%; height:150px; background-image: url("https://tebm.files.wordpress.com/2017/07/cropped-arge-proje-egitim-esnasc4b1nda-hallerim-1.jpg?w=1000&h="); background-size: cover; border-bottom: solid 1px lightgrey; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; } .banner.active { height: 0; } .photo { z-index: 3; position: relative; border-radius: 50%; height: 150px; width: 150px; background-color: white; margin: 0 auto; background-image: url("https://udemy-images.udemy.com/user/200_H/388551_6f04_77.jpg"); background-size: cover; background-position: 50% 50%; top:75px; -webkit-box-shadow: inset 0px 0px 5px 1px rgba(0,0,0,0.3); -moz-box-shadow: inset 0px 0px 5px 1px rgba(0,0,0,0.3); box-shadow: inset 0px 0px 5px 1px rgba(0,0,0,0.3); -webkit-transition: top 0.7s ease-in-out, background 0.15s ease; -moz-transition: top 0.7s ease-in-out, background 0.15s ease; -o-transition: top 0.7s ease-in-out, background 0.15s ease; -ms-transition: top 0.7s ease-in-out, background 0.15s ease; } .photo.active { top:-80px; } .card ul { list-style: none; text-align: center; padding-left: 0; margin-top:87px; margin-bottom:30px; font-size: 20px; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; } .card ul.active { opacity:0; visibility: hidden; } .card i { font-size: 25px; display: inline-block; margin-top:10px; margin-left: 40px; margin-right: 150px; width: 300px;; text-align: left; color: #C7D0E1; } button.contact { margin: 0 auto; text-align: center; margin-top: -15px; width: 100%; height: 35px; display: block; border:none; background-color: transparent; font-family: inherit; color: white; background-color: #C7D0E1; font-size:12px; text-transform: uppercase; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; } button.contact:hover { cursor: pointer; background-color:#979da8; } button.contact:focus { outline: 0; } .social-media-banner { width: 300px; height: 50px; margin-top: 25px; text-align: center; position: absolute; -webkit-transition: all 1.5s ease-in-out; -moz-transition: all 1.5s ease-in-out; -o-transition: all 1.5s ease-in-out; -ms-transition: all 1.5 ease-in-out; } .social-media-banner.active { opacity:0; visibility: hidden; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; } .social-media-banner a i { display: inline; width: auto; margin-right:15px; margin-left: 10px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; } .social-media-banner a i:hover { color:#979da8; } .email-form { height: 0; overflow: hidden; /* background-color: #C7D0E1;*/ width: 300px; z-index:-1; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .email-form.active { height: 310px; z-index: 3; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .email-form input { width: 200px; text-transform: capitalize; /* background-color: #a4acbc;*/ margin: 0 auto; font-family: inherit; border: 1px solid #dadee5; /* border: 1px solid black;*/ margin-top: 35px; height: 30px; display: block; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; } .email-form input:focus,.email-form textarea:focus { /* border: none;*/ border: 1px solid grey; outline: none; } ::-webkit-input-placeholder { font-size: 12px; text-transform: uppercase; text-align: center; /* color: black;*/ } .email-form textarea { width: 200px; text-transform: capitalize; background-color: white; margin: 0 auto; display: block; margin-top:40px; border: 1px solid #dadee5; font-family: inherit; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; } .email-form button { margin-top: 60px; }
$(document).ready(function() { $('.contact').click(function (e) { $('.card').toggleClass('active'); $('.banner').toggleClass('active'); $('.photo').toggleClass('active'); $('.social-media-banner').toggleClass('active'); $('.email-form').toggleClass('active'); var buttonText = $('button.contact#main-button').text(); if (buttonText === 'back') { buttonText = 'click to get in touch'; $('button.contact#main-button').text(buttonText); } else { buttonText = 'back'; $('button.contact#main-button').text(buttonText); } }); }); //turn on to make the photo follow mouse // $(document).ready(function() // { // $(document).mousemove(function( event ) // { // var docWidth = $(document).width(); // var docHeight = $(document).height(); // var xValue = (event.clientX/docWidth)*100; // var yValue = (event.clientY/docHeight)*100; // $('.photo').css('background-position', xValue+'%,'+yValue+'%'); // }); // });

Related: See More


Questions / Comments: