"Profile Css"
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 ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <div id="social"> <ul> <li id="HTERCUMANP"><i class="fa fa-twitter"></i></li> <li id="100008152065270"><i class="fa fa-facebook"></i></li> <li id="harunpehlivantebimtebitagem"><i class="fa fa-instagram"></i></li> <li id="111320383727376607540"><i class="fa fa-google-plus"></i></li> <li id="in/harun-pehlivan-0aa34252"><i class="fa fa-linkedin "></i></li> </ul> <div id="logo2"> <img src="http://images.ticiz.com/2603690_w0_h120_hnn1i...bv9ettdv9dsbugw0py.png" /> </div> </div> <div class="profile"> <div id="avatar"> <img src="http://www.doyoubuzz.com/var/users/_/2016/11/15/18/1300826/avatar/1253797/avatar_cp_630.jpg?t=1505286021" /> </div> <div id="cover"></div> <div id="cover2"></div> <div id="info"> <ul> <li id="username"><span>HARUN PEHLİVAN</span></li> <li><i class="fa fa-map-marker"></i>AMASYA TR</li> <li><i class="fa fa-globe"></i> harunpehlivantebimtebitagem.ml</li> <li><i class="fa fa-phone"></i> +90 358 417 62 30 </li> </ul> </div> <div class="clear"></div> <div id="logo"> <img src="http://images.ticiz.com/2603690_w0_h120_hnn1i...bv9ettdv9dsbugw0py.png" /> </div> </div>
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans'); body{padding: 0; margin: 0; background: #eee;} html{height: 100%; position: relative;} *{padding: 0; margin: 0; list-style-type: none; box-sizing: border-box; font-family: 'Josefin Sans', sans-serif;} .clear{clear: both;} #social{ float: left; padding: 5px; width: 80px; height: 500px; text-align: center; margin: 15px -0 0 10px; background: rgba(0,165,215,1); background: -moz-linear-gradient(45deg, rgba(0,165,215,1) 0%, rgba(0,125,163,1) 100%); background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(0,165,215,1)), color-stop(100%, rgba(0,125,163,1))); background: -webkit-linear-gradient(45deg, rgba(0,165,215,1) 0%, rgba(0,125,163,1) 100%); background: -o-linear-gradient(45deg, rgba(0,165,215,1) 0%, rgba(0,125,163,1) 100%); background: -ms-linear-gradient(45deg, rgba(0,165,215,1) 0%, rgba(0,125,163,1) 100%); background: linear-gradient(45deg, rgba(0,165,215,1) 0%, rgba(0,125,163,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a5d7', endColorstr='#007da3', GradientType=1 ); box-shadow: 1px 0 3px 2px rgba(0, 0, 0, 0.2) ; } #social li{ margin: 5px auto; font-size: 2em; color: #fff; padding: 5px; border: 1px solid rgba(255, 255, 255, 0.4); height: 60px; line-height: 1.7; cursor: pointer; } #logo2{ width: 60px; margin: 100px auto 0 auto; } #logo2 img{ width: 80% } .profile{ width: 300px; height: 500px; position: relative; overflow: hidden; background: #fff; margin: 15px auto 15px 10px; box-shadow: 1px 0 3px 2px rgba(0, 0, 0, 0.2) ; float: left } #cover{ width: 150%; height: 100%; position: absolute; transform: rotate(60deg); top: -55%; left: -20%; background: rgba(0,165,215,1); background: -moz-linear-gradient(45deg, rgba(0,165,215,1) 0%, rgba(0,125,163,1) 100%); background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(0,165,215,1)), color-stop(100%, rgba(0,125,163,1))); background: -webkit-linear-gradient(45deg, rgba(0,165,215,1) 0%, rgba(0,125,163,1) 100%); background: -o-linear-gradient(45deg, rgba(0,165,215,1) 0%, rgba(0,125,163,1) 100%); background: -ms-linear-gradient(45deg, rgba(0,165,215,1) 0%, rgba(0,125,163,1) 100%); background: linear-gradient(45deg, rgba(0,165,215,1) 0%, rgba(0,125,163,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a5d7', endColorstr='#007da3', GradientType=1 ); } #cover:before{ content: ""; position: absolute; border-width: 150px 20px 30px 30px; border-style: solid; border-color: #0381a8 transparent transparent transparent; top: 70%; left: 95.92%; transform: rotate(11.4deg); } #cover2{ border-style: solid; border-width: 40px 80px 40px 40px; border-color: transparent transparent #057091 transparent; position: absolute; top: 229.5px; left: 77px; transform: rotate(-37.4deg); } #cover2:before{ content: ""; border-style: solid; border-width: 20px 24.2px 20px 20px; border-color: transparent transparent #00A4D7 transparent; position: absolute; top: 18.9px; left: -60.2px; transform: rotate(-39.3deg); } #shadow{ clear: both; height: 10px; bottom: 200px; overflow: hidden; margin: 356px 0 0 0 } #shadow img{ width: 80%; height: 10px; padding: 0 0px 0 20px; opacity: 0.5; } #info{ margin: 360px auto; width: 90%; border-top: 1px solid #ccc; padding: 10px 0 0 0; } #info ul{ } #info li{ padding: 2px 0 2px 10px; margin: 3px auto; font-size: 10pt; } #username{ text-align: center; font-size: 1.5em!important; line-height: 1; font-weight: bold; } #avatar{ width: 120px; height: 120px; position: absolute; z-index: 1; border: solid 5px rgba(0, 0, 0, 0.2); border-radius: 50%; overflow: hidden; margin: 20px; cursor: pointer; transition: .3s; } #info i{ font-size: 14pt; margin: 0 5px; color: #057091 } #avatar img{ width: 100%; } #avatar:hover{ border: solid 3px rgba(255, 255, 255, 0.6); } #logo{ position: absolute; top: 20px; right: 23px; } #logo img{ width: 110px; opacity: 0.6; } #twitter:hover{ background-color: #1DB5F6; } #twitter i{ transition: .5s; } #twitter:hover > i{ transform: scale(1.3); transition: .5s; } #facebook:hover{ background-color: #4267B2; } #facebook i{ transition: .5s; } #facebook:hover > i{ transform: scale(1.3); transition: .5s; } #instagram:hover{ background-color: #E23F5F; } #instagram i{ transition: .5s; } #instagram:hover > i{ transform: scale(1.3); transition: .5s; } #google-plus:hover{ background-color: #DC4A38; } #google-plus i{ transition: .5s; } #google-plus:hover > i{ transform: scale(1.3); transition: .5s; } #linkedin:hover{ background-color: #0077B5; } #linkedin i{ transition: .5s; } #linkedin:hover > i{ transform: scale(1.3); transition: .5s; }

Related: See More


Questions / Comments: