如何修改我的面板

Question

有一个小组：

我工作了一个小时才能完成这个小组，有人可以帮助我或指导我如何做到这一点？我正在使用模板来修改它，但不知道该怎么做。

以下是代码：

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
/*@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');*/

body {
  margin: 10px;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.0/bootstrap-table.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.0/bootstrap-table.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <div class="panel panel-primary event-primary">
        <div class="panel-heading"><h2><a href="#">Title</a></h2></div>
        <div class="panel-body nopadding">
          <img src="https://placehold.it/400x150" alt="event image" class="img-responsive"/>
          <div class="row nopadding">
            <div class="col-sm-6 nopadding">
              <time class="start pink">
                Start <span class="day">20</span>
                <span class="month">Apr</span>
                <span class="year">2016</span>
              </time>
            </div>
            <div class="col-sm-6 nopadding">
              <time class="end purple">
                End <span class="day">20</span>
                <span class ="month">Apr</span>
                <span class="year">2016</span>
              </time>
            </div>
          </div>
        </div>
        <div class="panel-footer panel-primary">
          <p>Short description of event would go here.
          </p>
          <a href="http://ulurudaytours.com.au/" class="btn btn-success">Invest</a>
        </div>
      </div>
    </div>
  </div>
</div>

JSFiddle：https://jsfiddle.net/edmbz4L2/