How can i modify my panel - css

Question

There is a panel:
I am working for an hour to get this panel done, can someone please help me or guide me how can I do this? I am using template to modify it, but not sure how to do it.
Here is the code until now:
/* 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>Title</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>
Invest
</div>
</div>
</div>
</div>
</div>
JSFiddle: https://jsfiddle.net/edmbz4L2/