"Profile Panel "
Bootstrap 3.3.0 Snippet by ndang17

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="http://www.nandangonline.web.id/assets/custom.css" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> <div class="container" style="margin-top:50px;"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-6"> <div class="row" style="color:#fff;background-color:#34AADC;padding:15px;"> <div class="col-md-12"> <div class="col-md-3" style="text-align:center;"> <h3 class="hd" style="margin-top:5px;margin-bottom:15px;">Founder</h3> <img src="http://www.nandangonline.web.id/img/nandang/profile.png" class="img-circle" style="border:3px solid #2C99C2;" width="100px" height="100px"> <p class="hd" >Nandang Mulyadi</p> </div> <div class="col-md-9"> <center><h3 class="hd" style="margin-top:5px;margin-bottom:15px;">My Profile</h3></center> <p class="ctn" style="font-size:1.1em;"><abbr title="Phone" style="border-bottom: 1px dotted #FFF;"> <em>Web Designer di Pusat Sistem Informasi (PSI) Universitas Dian Nuswantoro Semarang </em></abbr> </p> <p class="ctn" style="color:#fff;font-size:0.8em;">Provinsi Jawa Tengah, Indonesia | Jaringan Komputer</p> <p class="ctn" style="color:#fff;font-size:0.8em;"> <em><i class="fa fa-angle-double-right"></i> Laboratorium FIK ( Asisten Jaringan )</em><br> <em><i class="fa fa-angle-double-right"></i> Pusat Sistem Informasi ( PSI )</em> </p> <div class="col-md-10"> <span class="hd" >Connect with me :</span> <a href="https://www.facebook.com/nandangm17" target="_blank"><i class="fa fa-facebook" style="padding-right:5px;padding-left:5px;color:#fff;"></i></a> <a href="https://twitter.com/Nandang_171" target="_blank"><i class="fa fa-twitter" style="padding-right:5px;color:#fff;"></i></a> <a href="https://plus.google.com/u/0/+NandangMulyadi_WD17" target="_blank"><i class="fa fa-google-plus" style="padding-right:5px;color:#fff;"></i></a> <a href="" target="_blank"><i class="fa fa-instagram" style="padding-right:5px;color:#fff;"></i></a> <a href="https://www.linkedin.com/profile/view?id=AAIAABUaMlEBTtJjVdghrWCQsuWIgGp8M6I0MOQ&trk=nav_responsive_tab_profile" target="_blank"><i class="fa fa-linkedin" style="padding-right:5px;color:#fff;"></i></a> <br> <i class="fa fa-whatsapp"></i> <span class="ctn" style="font-size:0.8em;"><em> 0856 4250 1307</em></span> </div> <div class="col-md-2"> <!-- BEGIN: Powered by Supercounters.com --> <center> <script type="text/javascript" src="http://widget.supercounters.com/hit.js"></script><script type="text/javascript">sc_hit(1153017,16,5);</script><br><noscript><a href="http://www.supercounters.com">Tumblr Hit Counter</a></noscript> </center> <!-- END: Powered by Supercounters.com --> </div> </div> </div> </div> <div class="row" style="background-color:#2C99C2;margin-left:10px;margin-right:10px;color:#fff;"> <div class="col-md-12" style="margin-top:10px;"> <div class="col-md-4 kontn kontn-net" style="border-right: none;"> <a href="" style="color:#fff;" class="hd" > <i class="fa fa-usb fa-2x"></i><br> Networking </a> </div> <div class="col-md-4 kontn kontn-web" style=""> <a href="" style="color:#fff;" class="hd" > <i class="fa fa-code fa-2x"></i><br> Web </a> </div> <div class="col-md-4 kontn kontn-mul" style="border-left: none;"> <a href="" style="color:#fff;" class="hd" > <i class="fa fa-smile-o fa-2x"></i><br> Multymedia </a> </div> </div> </div> <br> <a class="btn btn-default" style="width:100%;" href="http://www.nandangonline.web.id/"><strong>Full Screen</strong></a> </div> </div> </div>
body { /*background : url('http://www.nandangonline.web.id/img/nandang/nandang.png') no-repeat center center fixed; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%;*/ /*background-image: url('http://www.nandangonline.web.id/img/nandang/pt.gif');*/ background-color: #eaeaea; } .hd { font-family: 'Oswald', sans-serif; } .ctn { font-family: 'Merriweather', serif; } div.kontn { text-align:center; border-right:1px dashed #fff; border-left:1px dashed #fff; padding-bottom:5px; -webkit-transition : 0.2s; -moz-transition : 0.2s; -o-transition : 0.2s; transition : 0.2s; height: 60px; } div.kontn a { text-decoration: none; } div.kontn-net:hover{ border-bottom:5px solid #DC3434; cursor: pointer; } div.kontn-web:hover{ border-bottom:5px solid yellow; cursor: pointer; } div.kontn-mul:hover{ border-bottom:5px solid green; cursor: pointer; }

Related: See More


Questions / Comments: