<div class="container">
   <div class="row">
      <div class="col-md-5 col-md-offset-3 col-sm-6 col-sm-offset-3">
         <div class="card">
            <div class="header header-primary">
               
               <div class="image"><img src="https://scontent-amt2-1.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/c0.7.1080.1080/916521_744773762325141_1940601733_n.jpg?ig_cache_key=MTE2NDc5MDAwMjQ2ODc3NDk4OQ%3D%3D.2.c" alt="Alex">
               </div>
               
               <div class="description">
                  <h1>Alex Tkachov</h1>
                  <p>UI Front-End Developer</p>
                  <p>Web-Designer</p>
                  <div class="line"></div>
               </div>
               
               <div class="social-line">
                  <a href="https://www.behance.net/alextkachov" target="_blank" class="btn btn-simple btn-just-icon"><i class="fa fa-behance"></i></a>
                  <a href="https://codepen.io/alexpopovich/" target="_blank" class="btn btn-simple btn-just-icon"><i class="fa fa-codepen"></i></a>
                  <a href="https://github.com/SimpleAlex" target="_blank" class="btn btn-simple btn-just-icon"><i class="fa fa-github"></i></a>
               </div>
               <div class="btn btn-twitter"><a href="https://twitter.com/simply_aalex" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @simply_aalex</a>
               </div>
               
            </div>
         </div>
      </div>
   </div>
</div>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800');

// Variables
$bg: url("https://i.pinimg.com/originals/70/07/18/7007180c6df58bb247ae8be97f292450.jpg") no-repeat center;
$font: 'Open Sans', sans-serif;
$white: #fff;
$black: #000;
$border: #1565C0;
$selection: #FDD835;

::selection {
   background: $selection;
   color: $black;
}

* {
   margin: 0;
   padding: 0;
   font-family: $font;
   text-decoration: none;
   list-style-type: none;
   outline: none;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   -o-box-sizing: border-box;
   box-sizing: border-box;
}

img {
   max-width: 100%;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   -o-user-select: none;
   user-select: none;
}

html, body {
   height: 100%;
}

body {
   background: $bg;
   background-size: cover;
}

.card {
   background: #fff;
   text-align: center;
   margin: 30px auto;
   border-radius: 5px;
   box-shadow: 1px 1px 10px 1px $black;
   .header {
      position: relative;
      padding: 20px;
      .image {
         width: 200px;
         margin: 0 auto;
         img {
         border: 3px solid $border;
         border-radius: 100%;
         }
      }
      .description {
         position: relative;
         h1 {
            font-weight: bold;
            font-size: 1.5em;
            letter-spacing: 0.1em;
         }
         p {
            color: #455A64;
            line-height: 100%;
         }
         .line {
            width: 100%;
            position: absolute;
            border: 1px solid $border;
            margin-top: 5px;
         }
      }
      .social-line {
         position: relative;
         top: 10px;
         a i.fa {
            font-size: 1.5em;
         }
      }
      .btn-twitter {
         margin-top: 10px;
      }
   }
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css
  2. https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.