<div class="col-md-6">
<div class="main-container">
  <nav>
    <div class="dropdown">
      <button class="btn btn-default btn-sm dropdown-toggle btn-over btn-override" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-bars" id="menu-icon"></i></button>
      <ul class="dropdown-menu dropdown-menu-right">
        <li><a class="dropdown-item bold" href="#"><strong>Share Profile</strong></a></li>
        <li role="separator" class="divider"></li>
        <li><a class="dropdown-item" href="#"><i class="fa fa-facebook"></i> Facebook</a></li>
        <li><a class="dropdown-item" href="#"><i class="fa fa-twitter"></i> Twitter</a></li>
        <li><a class="dropdown-item" href="#"><i class="fa fa-github"></i> Github</a></li>
        <li><a class="dropdown-item" href="#"><i class="fa fa-codepen"></i> Codepen</a></li>
      </ul>
    </div>
  </nav>

  <div class="row">
    <div class="col-md-2"><div class="user-img"></div></div>
    <div class="col-md-10">
      <h1 class="user-name">S. N. Goenka</h1>
      <h4 class="user-title">Teacher of Vipassanā meditation</h4>
      <div class="row">
        <div class="col-md-6 sm-top-bot-pad"><i class="fa fa-phone-square"></i> Contact: 1+ 987-576-4321</div>
        <div class="col-md-6 sm-top-bot-pad"><i class="fa fa-envelope"></i> Email: sn.goenka@vipassana.com</div>
        <div class="col-md-6 sm-top-bot-pad"><i class="fa fa-map-marker"></i> Address: 123 Fairview Way </div>
        <div class="col-md-6 sm-top-bot-pad"><i class="fa fa-building"></i> Country: Burma</div>
      </div>
      <div class="row med-top-bot-pad">
        <button type="button" class="btn btn-default btn-xs rt-mar"><i class="fa fa-heart"></i> Button Information</button>
        <button type="button" class="btn btn-default btn-xs rt-mar"><i class="fa fa-paper-plane"></i> Button Information</button>
        <button type="button" class="btn btn-info btn-xs"><i class="fa fa-star"></i> Button Information</button>
      </div>
    </div>
  </div>
</div>

<div class="skill-container">
  <h4>Skills</h4>
  <div id="flex-layout">
    <section>
      <div class="flex-container">
        <ul>
          <li class="skill-item">
            <span class="divot"><i class="fa fa-pencil"></i></span>
            <h4>Photoshop</h4>
            <p>Add your experience plus more information.</p>
          </li>
          <li class="skill-item">
            <span class="divot"><i class="fa fa-pencil"></i></span>
            <h4>HTML5</h4>
            <p>Add your experience plus more information.</p>
          </li>
          <li class="skill-item">
            <span class="divot"><i class="fa fa-pencil"></i></span>
            <h4>CSS3</h4>
            <p>Add your experience plus more information.</p>
          </li>
        </ul>
      </div>
    </section>
  </div>
</div>
</div>

@import "compass/css3";
body {
  padding: 2em;
  background-color: #e1e1e1;
  font-family: Open Sans;
  color: #666 !important;
}
.main-container {
  background-color: #fff;
  .user-title {
    width: 90%;
    padding-bottom: 1em; 
    border-bottom: 1px solid #999;
  }
}
.dropdown-item {
  color: #333 !important;
  i { text-align: center; }
  &.bold { 
    font-weight: 700;
    padding-bottom: 0;
    &:hover{ background: transparent; cursor: default; }
  }
}
nav {
  float: right;
  .btn-override {
    background: #f2f2f2;
    border: 0 !important;
    border-radius: 0 !important;
  }
  #menu-icon {
    color: #aaa;
    font-size: 2em !important;
    padding: .5em .4em;
  }
}
// I am aware some of these overrides may not be necessary.
// As I get more acquainted with bootstrap docs, I am sure I would find
// a more structured convention to control padding and margin.
.row {
  margin: 0 !important;
  padding: 0 !important;
}
.btn-default     { color: #666 !important; }
.sm-top-bot-pad  { padding: .3em 0; }
.med-top-bot-pad { padding: 1.3em 0 !important; }
.med-top-pad     { padding-top: 1em; }
.med-pad-all     { padding: 1em 0 1.5em !important; }
.rt-mar          { margin-right: 2em; }
.col-md-6 i { width: 1.5em; text-align: center; }
.col-md-6:nth-of-type(4) i { padding-left: 1px } // TODO: I've notice quite a few font-awesome icons do line up horizontally, even with text align.
.user-name { margin-top: 0 !important; }
.user-img {
  -webkit-clip-path: circle(40px at center);
  clip-path: circle(40px at center);
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/7/79/SNG.gif);
  background-postition:  left -20px top -20px;;
  background-size: 98%;
  background-repeat: no-repeat;
  height: 90px;
  width: 90px;
  margin: 4em 0 0 5px
}
.skill-container {
  @extend .main-container;
  background-color: transparent;
  h4 { padding-left: .5em; }
}
.skill-item {
  position: relative;
  padding: 2em;
  h4 { padding-left: 0 !important; font-weight: 700; }
  p { font-size: .9em; }
  .divot {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-right: 60px solid #f1f1f1;
    border-bottom: 60px solid transparent;
    transition: border-color .2s;
    &:hover {
      border-right-color: #ccc;
      cursor: pointer;
      i { opacity:  9; } }
    i {
      position: absolute;
      font-size: 20px;
      margin: 7px 0 0 30px;
      float: right;
      color: #337ab7;
      opacity:  .7;
    }
  }
}
// Flex Styles: 
#flex-layout {
  @include display-flex;
  @include flex-wrap(wrap);
  section{
    @include flex(1 0 100%);
  }
  div.flex-container {
    $flex-legacy-enabled: true;
    ul {
      padding: 0;
      margin: -.5em;
      min-width: 100%; /* fix for old Firefox */
      @include display-flex(flex);
    }
    li {
      background: #fff;
      margin: .5em;
      display: inline-block; /* non-flexbox browsers */
      @include flex(1 1 30%);
    }
    $flex-legacy-enabled: false;
  }
}