UOS Tour

Adapted from https://bootsnipp.com/snippets/gjAK5

by sbhomra

HTML

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="container">
  <section>
    <div class="row">
      <div class="col-md-12">
        <div class="panel panel-primary">
          <div class="panel-heading">
            <h3 class="panel-title">UOS Tour Dashboard</h3>
          </div>
          <div class="panel-body">
            <div class="row">
              <div class="col-md-12">
                <!-- grey -->
                <a href="https://ar.uos-tour.com/?mapid=01" class="btn btn-grey btn-lg" role="button"><span class="glyphicon glyphicon-map-marker glyphsize"></span> <br />Target 1</a>
                <a href="https://ar.uos-tour.com/?mapid=02" class="btn btn-grey btn-lg" role="button"><span class="glyphicon glyphicon-map-marker glyphsize"></span> <br />Target 2</a>
                <a href="https://ar.uos-tour.com/?mapid=03" class="btn btn-grey btn-lg" role="button"><span class="glyphicon glyphicon-map-marker glyphsize"></span> <br />Target 3</a>
                <a href="https://ar.uos-tour.com/?mapid=04" class="btn btn-grey btn-lg" role="button"><span class="glyphicon glyphicon-map-marker glyphsize"></span> <br />Target 4</a>
                <a href="https://ar.uos-tour.com/?mapid=05" class="btn btn-grey btn-lg" role="button"><span class="glyphicon glyphicon-map-marker glyphsize"></span> <br />Target 5</a>
                <a href="https://ar.uos-tour.com/?mapid=06" class="btn btn-grey btn-lg" role="button"><span class="glyphicon glyphicon-map-marker glyphsize"></span> <br />Target 6</a>
                <a href="https://ar.uos-tour.com/?mapid=07" class="btn btn-grey btn-lg" role="button"><span class="glyphicon glyphicon-map-marker glyphsize"></span> <br />Target 7</a>
                <a href="https://ar.uos-tour.com/?mapid=08"...

CSS

body {
  padding-top: 20px;
}

.container {
  max-width: 1200px;
}

.panel-body .btn:not(.btn-block) {
  width: 140px !important;
  height: 135px !important;
  margin-bottom: 10px !important;
  vertical-align: middle !important;
  text-align: center !important;
  text-wrap: normal !important;
  padding: 15px 0 0 0 !important;
}

/* Font Size For Button Text */
.glyphsize {
  font-size: 48px !important;
}

.panel-footer {
  line-height: inherit !important;
}

/* Colours Used for Glyphicons and some text */
.black {
  color: #000;
}

.red {
  color: #F00;
}

.dgreen {
  color: #060;
}

.green {
  color: #0F0;
}

.blue {
  color: #00F;
}

.mblue {
  color: #09F;
}

.yellow {
  color: #FF0;
}

.purple {
  color: #609;
}

.lilac {
  color: #C6F;
}

.orange {
  color: #F90;
}

.choc {
  color: #330;
}

/* Button Colours */
.btn-dblue {
  color: #ffffff;
  background-color: #1B23BD;
  border-color: #000A7A;
}

.btn-dblue:hover,
.btn-dblue:focus,
.btn-dblue:active,
.btn-dblue.active,
.open .dropdown-toggle.btn-dblue {
  color: #ffffff;
  background-color: #18148C;
  border-color: #000A7A;
}

.btn-dblue:active,
.btn-dblue.active,
.open .dropdown-toggle.btn-dblue {
  background-image: none;
}

.btn-dblue.disabled,
.btn-dblue[disabled],
fieldset[disabled] .btn-dblue,
.btn-dblue.disabled:hover,
.btn-dblue[disabled]:hover,
fieldset[disabled] .btn-dblue:hover,
.btn-dblue.disabled:focus,
.btn-dblue[disabled]:focus,
fieldset[disabled] .btn-dblue:focus,
.btn-dblue.disabled:active,
.btn-dblue[disabled]:active,
fieldset[disabled] .btn-dblue:active,
.btn-dblue.disabled.active,
.btn-dblue[disabled].active,
fieldset[disabled] .btn-dblue.active {
  background-color: #1B23BD;
  border-color: #000A7A;
}

.btn-dblue .badge {
  color: #1B23BD;
  background-color: #ffffff;
}

.btn-dred {
  color: #ffffff;
  background-color: #B50D2E;
  border-color: #69021F;
}

.btn-dred:hover,
.btn-dred:focus,
.btn-dred:active,
.btn-dred.active,
.open .dropdown-toggle.btn-dred {
  color: #ffffff;
 ...