<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <br><br><br><br> <div class="container" style="text-align:center; background:#D7CDCC;margin-top:20px"> <h1>HARUN PEHLİVAN SOCİAL MEDİA</h1> <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <a href="mailto:trcmnhp@hotmail.com" class="social_button email"><span><i class="fa fa-envelope"></i></span><p>HOTMAİL</p></a> <a href="mailto:tercumanbilisimmerkizi@gmail.com" class="social_button email"><span><i class="fa fa-envelope"></i></span><p>GMAİL</p></a> <a href="mailto:harun.pehlivan@yandex.com" class="social_button email"><span><i class="fa fa-envelope"></i></span><p>YANDEX</p></a> <a href="https://www.behance.net/harunpehlivan" class="social_button behance"><span><i class="fa fa-behance"></i></span><p>BEHANCE</p></a> </div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <a href="https://github.com/harunpehlivan" class="social_button github"><span><i class="fa fa-github"></i></span><p>GİTHUB</p></a> <a href="https://gitlab.com/harunpehlivan" class="social_button github"><span><i class="fa fa-gitlab"></i></span><p>GİTLAB</p></a> </div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <a href="https://www.linkedin.com/in/harun-pehlivan-0aa34252" class="social_button linkedin"><span><i class="fa fa-linkedin"></i></span><p>LİNKEDİN</p></a> <a href="https://www.xing.com/profile/HARUN_PEHLIVAN" class="social_button xing"><span><i class="fa fa-xing"></i></span><p>XİNG</p></a> </div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <a href="https://stackoverflow.com/users/2246893/harunpehlivantebimtebitagem" class="social_button stackoverflow"><span><i class="fa fa-stack-overflow"></i></span><p>STACK OVERFLOW</p></a> <a href="https://open.spotify.com/user/21g6q24dgxix3pudhtdafv2xy" class="social_button spotify"><span><i class="fa fa-spotify"></i></span><p>SPOTİFY</p></a> <a href="https://soundcloud.com/harun-pehl-van" class="social_button soundcloud"><span><i class="fa fa-soundcloud"></i></span><p>SOUCLOUD</p></a> </div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <a href="https://codepen.io/harunpehlivan" class="social_button codepen"><span><i class="fa fa-codepen"></i></span><p>CODEPEN</p></a> </div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <a href="https://facebook.com/100008152065270" class="social_button facebook"><span><i class="fa fa-facebook"></i></span><p>FACEBOOK</p></a> </div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <a href="http://plus.google.com/111320383727376607540" class="social_button google-plus"><span><i class="fa fa-google-plus"></i></span><p>GOOGLE +</p></a> </div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <a href="https://www.instagram.com/harunpehlivantebimtebitagem/" class="social_button instagram"><span><i class="fa fa-instagram"></i></span><p>INSTAGRAM</p></a> </div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <a href="https://twitter.com/HTERCUMANP" class="social_button twitter"><span><i class="fa fa-twitter"></i></span><p>TWİTTER</p></a> </div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <a href="https://www.youtube.com/user/harunpehlivan1" class="social_button youtube"><span><i class="fa fa-youtube"></i></span><p>YOUTUBE</p></a> </div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <a href="https://tr.pinterest.com/harunpehlivanit/" class="social_button pinterest"><span><i class="fa fa-pinterest"></i></span><p>PİNTEREST</p></a> </div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <a href="https://tr.foursquare.com/htercumanp" class="social_button foursquare"><span><i class="fa fa-foursquare"></i></span><p>Foursquare</p></a> </div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <a href="https://www.flickr.com/people/harunpehlivan/" class="social_button flickr"><span><i class="fa fa-flickr"></i></span><p>FLİCKR</p></a> </div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <a href="https://www.slideshare.net/harunpehlivan581" class="social_button slideshare"><span><i class="fa fa-slideshare"></i></span><p>SLİDESHARE</p></a> </div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <a href="https://dribbble.com/harunpehlivan" class="social_button dribbble"><span><i class="fa fa-dribbble"></i></span><p>DRİBBBLE</p></a> </div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <a href="https://harunpehlivan.blogspot.com/" class="social_button rss"><span><i class="fa fa-rss"></i></span><p>BLOGSPOT</p></a> <a href="http://apps.appmakr.com/harunpehlivan" class="social_button android"><span><i class="fa fa-android"></i></span><p>ANDROİD</p></a> </div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <a href="live:trcmnhp" class="social_button skype"><span><i class="fa fa-skype"></i></span><p>SKYPE</p></a> <a href="https://harunpehlivan-blog.tumblr.com/" class="social_button tumblr"><span><i class="fa fa-tumblr"></i></span><p>TUMBİR</p></a> </div><div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> <a href="http://harunpehlivan.mobapp.at" class="social_button apple"><span><i class="fa fa-apple"></i></span><p>APPLE</p></a> </div> <footer> Coded by <a href="https://codepen.io/harunpehlivan/full/VRZvym" target="_blank">HARUN PEHLİVAN</a> using FontAwesome 4.6.3 and Bootstrap 3.3.7 </footer> </div>

.social_button { text-align: center; display: inline-block; height: 40px; line-height: 40px; min-width: 250px; position: relative; background-color: rgb(0, 0, 0); color: rgb(255, 255, 255); text-transform: none; margin-bottom: 14px; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.7); box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.7); text-decoration: none; &:link { text-decoration: none; color: white; } &:visited { text-decoration: none; color: white; } &:active { text-decoration: none; } &:hover { text-decoration: none; color: #401C69; } p { font-size: 18px; } span { position: absolute; left: 0; width: 50px; font-size: 30px; -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-right: 1px solid rgba(0, 0, 0, 0.15); text-decoration: none; } } .social_button.email { background: #2A3D45; &:hover {color: #FFC688;} } .social_button.twitter { background: #00acee; &:hover {color: #FFC688;} } .social_button.facebook { background: #3b5998; &:hover {color: #E4AF48;} } .social_button.google-plus { background: #db4a39; &:hover {color: #74D088;} } .social_button.linkedin { background: #0e76a8; &:hover {color: #FF8D09;} } .social_button.youtube { background: #c4302b; &:hover {color: #6BCA71;} } .social_button.github { background: #171515; &:hover {color: #FFD6B8;} } .social_button.codepen { background: #636363; &:hover {color: #FFF3B0;} } .social_button.android { background: #a4c639; &:hover {color: #FDAEE9;} } .social_button.skype { background: #00aff0; &:hover {color: #FF8500;} } .social_button.dropbox { background: #3d9ae8; &:hover {color: #FFAA35;} } .social_button.foursquare { background: #25a0ca; &:hover {color: #FF9627;} } .social_button.apple { background: #cdcdcd; &:hover {color: black;} } .social_button.dribbble { background: #ea4c89; &:hover {color: #A5F14E;} } .social_button.instagram { background: #3f729b; &:hover {color: #F0B057;} } .social_button.pinterest { background: #c8232c; &:hover {color: #A0FC96;} } .social_button.stackoverflow { background: #ef8236; &:hover {color: #B7FDF3;} } .social_button.flickr { background: #ff0084; &:hover {color: #F1FFD8;} }