<aside class="col-lg-4 col-md-4 col-12 mt-5 mt-md-0">
<div class="mb-5">
<h3 class="mb-4">Event Information</h3>
<!--map-->
<div id="mapid"></div>
</div>
<!-- address -->
<!--crad-->
<div class="card mb-4">
<!--card body-->
<div class="card-body p-4">
<div class="mb-4">
<i class="fas fa-map-marker-alt icon-shape icon-lg
bg-light-secondary rounded-circle text-secondary"></i>
</div>
<!--content-->
<h4 class="h5">Address</h4>
<p class="mb-0">American Airlines Arena 601 Biscayne
Boulevard. Miami, FL, 33132, USA</p>
</div>
</div>
<!-- Transport -->
<!--card-->
<div class="card mb-4">
<!--card body-->
<div class="card-body p-4">
<div class="mb-4">
<i class="fas fa-taxi icon-shape icon-lg bg-light-warning
rounded-circle text-warning"></i>
</div>
<!--content-->
<h4 class="h5">Transport</h4>
<p class="mb-0">To get to the venu place, you can take
one of the city bus lines, tube or railway service.</p>
</div>
</div>
<!-- hotels -->
<!--card-->
<div class="card mb-4">
<!--card body-->
<div class="card-body p-4">
<div class="mb-4">
<i class="fas fa-building icon-shape icon-lg
bg-light-danger rounded-circle text-danger"></i>
</div>
<!--content-->
<h4 class="h5">Hotels</h4>
<p class="mb-0">Suitable Hotels and Restaurents are
surrounded all the area.</p>
</div>
</div>
</aside><!-- sidebar -->
<aside class="col-xl-4 col-lg-4 col-md-5 col-sm-12 col-12 mt-5
mt-md-0">
<!--card-->
<div class="card">
<!--list-->
<ul class="list-group list-group-flush">
<li class="list-group-item py-3">
<div class="d-flex justify-content-between
align-items-center">
<div>
<div class="d-flex align-items-center">
<i class="fas fa-money-bill-alt me-2 font-16 fa-fw
text-muted"></i>
<h5 class="mb-0 fw-medium">Program Price</h5>
</div>
</div>
<div>
<h5 class="mb-0 text-primary fw-bold">$35.00</h5>
</div>
</div>
</li>
<li class="list-group-item py-3">
<div class="d-flex justify-content-between
align-items-center">
<div>
<div class="d-flex align-items-center">
<i class="fas fa-user-tie me-2 font-16 fa-fw
text-muted"></i>
<h5 class="mb-0 fw-medium">Coach</h5>
</div>
</div>
<div>
<h5 class="mb-0 text-dark">Randall Williamson</h5>
</div>
</div>
</li>
<li class="list-group-item py-3">
<div class="d-flex justify-content-between
align-items-center">
<div>
<div class="d-flex align-items-center">
<i class="fas fa-clock me-2 font-16 fa-fw text-muted"></i>
<h5 class="mb-0 fw-medium">Duration</h5>
</div>
</div>
<div>
<p class="mb-0 text-muted">4 weeks</p>
</div>
</div>
</li>
<li class="list-group-item py-3">
<div class="d-flex justify-content-between
align-items-center">
<div>
<div class="d-flex align-items-center">
<i class="fas fa-file-alt me-2 font-16 fa-fw
text-muted"></i>
<h5 class="mb-0 fw-medium">Lectures</h5>
</div>
</div>
<div>
<p class="mb-0 text-muted">18</p>
</div>
</div>
</li>
<li class="list-group-item py-3">
<div class="d-flex justify-content-between
align-items-center">
<div>
<div class="d-flex align-items-center">
<i class="fas fa-user me-2 font-16 fa-fw text-muted"></i>
<h5 class="mb-0 fw-medium">Enrolled</h5>
</div>
</div>
<div>
<p class="mb-0 text-muted">54 students</p>
</div>
</div>
</li>
<li class="list-group-item py-3">
<!--button-->
<div class="d-grid">
<a href="#"
class="btn btn-secondary">Enroll This Courses</a>
</div>
</li>
</ul>
</div>
</aside>