Professional Development code

gistfile1.html

HTML:

<!-- Professional Development Example -->
<li class="col-xs-12 col-sm-6 col-md-4 col-lg-3 no-padding list-container">  
  <div class="widget-content" id="portlet-id-{{::portlet.nodeId}}">
    <div>
      <div class="widget-title">
        <h4>My Professional Development</h4>
      </div>
      <div class="widget-body">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Search courses and events">
          <span class="input-group-btn">
            <button class="btn btn-primary" type="button"><i class="fa fa-search"></i></button>
          </span>
        </div>
        <div class="row">
          <div class="col-xs-5 col-xs-offset-1 center">
            <div class="btn btn-primary rounded icon-button">
              <a href ><i class="fa fa-at"></i></a>
            </div>
            <p>All Courses and Events</p>
          </div>
          <div class="col-xs-5 center">
            <div class="btn btn-primary rounded icon-button">
              <a href><i class="fa fa-envelope-o"></i></a>
            </div>
            <p>My Transcript</p>
          </div>
        </div>
      </div>
      <a class="btn btn-default launch-app-button" href="{{::portlet.url}}" target="{{::portlet.target}}">See All</a>
    </div>
  </div>
</li>

CSS: 
.my-uw .rounded {
  border-radius:1000px;
}
.my-uw .input-group .btn {
  margin:0px 0px;
}
.input-group input {
  border:0px solid transparent;
}
.widget-body .input-group {
  margin:10px;
  .fa {
    font-size:18px;
  }
}
.widget-body .icon-button-div {
  padding:0px;
  text-align:center;
  p {
    font-size:12px;
    font-weight: bold;
    margin:0px;
  }
}
.widget-body .icon-button {
  width:55px;
  height:54px;
  border-radius:1000px;
  padding-top:17px;
  margin:0px auto 3px;

  a .fa {
    color:#fff;
    font-size:24px;
  }
}