Bootstrap Snippet Profile Panel using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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="https://media-exp1.licdn.com/dms/image/C5603AQG8h-Wvhxyp5A/profile-displayphoto-shrink_400_400/0/1580097560121?e=1620259200&v=beta&t=ziWecgtO3sr4E9Isi6s6kdllc8TvQBXvwUJ_rIDP1_I" 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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Profile Panel "
Bootstrap 3.3.0 Snippet by ndang17

Related: See More

Questions / Comments:

"Profile Panel " Bootstrap 3.3.0 Snippet by ndang17

Related: See More

Questions / Comments:

"Profile Panel "
Bootstrap 3.3.0 Snippet by ndang17