<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="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lykmapipo/themify-icons@0.1.2/css/themify-icons.css"> <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-4"> <div class="profile-bar"> <div class="contents"> <img src="https://gravatar.com/avatar/cd62d88a83461e0b1daa8f2fa31c4dcb?s=512&d=https://codepen.io/assets/avatars/user-avatar-512x512-6e240cf350d2f1cc07c2bed234c3a3bb5f1b237023c204c782622e80d6b212ba.png" alt="UserAvatar"> <p class="profile-name">Good Job, John!</p> <p class="profile-description">You haven't miss any task this week!</p> <div class="buttons"> <ul> <li> <a href="#"><i class="ti-panel"></i><span> Settings</span></a> </li> <li> <a href="#"><i class="ti-user"></i><span> Profile</span></a> </li> <li> <a href="#"><i class="ti-power-off"></i><span> Logout</span></a> </li> </ul> </div> </div> </div> </div> </div> </div>

body{ font-family: 'Lato', sans-serif; padding: 50px; } .profile-bar{ background-image: url(https://i.pinimg.com/originals/ae/84/18/ae8418bc8397210c37ba7fc802dbc020.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; max-height: 100%; max-width: 100%; color: #eee; } .profile-bar .contents{ background-color: rgba(0,0,0,0.65); } .profile-bar .contents img{ display: block; width: 70px; margin: auto; padding-top: 25px; } .profile-bar .contents .profile-name{ text-align: center; margin: 10px 0px; font-size: 18px; font-weight: 300; } .profile-bar .contents .profile-description{ text-align: center; margin: 10px 0px; font-weight: 300; } .profile-bar .contents .buttons{ text-align: center; background-color: rgba(31,45,61,.7); } .profile-bar .contents .buttons ul{ list-style: none; -webkit-padding-start: 0; } .profile-bar .contents .buttons ul li{ display: inline-block; margin: 15px 20px; } .profile-bar .contents .buttons ul li a{ color: #eee; font-size: 32px; display: block; text-decoration: none; opacity: 0.7; transition: 0.2s all linear; } .profile-bar .contents .buttons ul li a:hover{ opacity: 1; transition: 0.2s all linear; } .profile-bar .contents .buttons ul li a span{ font-size: 14px; display: block; }