Trad Program List 1920

Creating Manual Layout and Information for 2019-2020

by Nate Armstrong

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="trad-program-list-1920" class="container">

  <!-- █████████████████████████████████████████████████████████████████ -->
  <!-- █                    Business & Government                      █ -->
  <!-- █████████████████████████████████████████████████████████████████ -->

  <h3>Business &amp; Government:</h3>
  <div class="row">
    <div class="col-xs-12 col-sm-6 programs">
      <h4>Programs:</h4>
      <ul>
        <li><span class="aa-icon">AA</span><a href="/residential-undergraduate/associate-arts_/aa-business-management" title="Associate of Arts in Business Management Campus Program" alt="Associate of Arts in Business Management Campus Program">Business Management</a></li>
        <li><span class="as-icon">AS</span><a href="/residential-undergraduate/associate-science/information-technology" title="Associate of Science in Information Technology Campus Program" alt="Associate of Science in Information Technology Campus Program">Information Technology</a></li>
      </ul>
      <ul>
        <li><span class="ba-icon">BA</span><a href="/residential-undergraduate/bachelor-arts_/ba-accounting-finance" title="Bachelor of Arts in Accounting Campus Program" alt="Bachelor of Arts in Accounting Campus Program">Accounting</a></li>
        <li><span class="ba-icon">BA</span><a href="/residential-undergraduate/bachelor-arts_/ba-business" title="Bachelor of Arts in Business Campus Program" alt="Bachelor of Arts in Business Campus Program">Business</a><br>
          <b>Available Concentrations:</b>
          <ul>
 ...

CSS

#trad-program-list-1920 .row {
  background: #f8f9fa;
  margin-top: 20px;
}

#trad-program-list-1920 .minors ul {
  padding-left: 1em;
}

#trad-program-list-1920 .programs li, #trad-program-list-1920 .minors li {
  list-style-type: none;
  line-height: 1.5em;
}

#trad-program-list-1920 .programs li {
  padding-top: 0.25em;
}

#trad-program-list-1920 .programs ul > li{
 margin-left: 1em;
}

#trad-program-list-1920 .programs li > ul {
  padding-left: 0.25em;
  padding-bottom: 1.5em;
}

#trad-program-list-1920 .programs li > ul > li {
  font-size: 0.8em;
}

#trad-program-list-1920 h3 {
  color: black;
  font-size: 1.5em;
  margin-top: 2em;
  text-transform: uppercase;
}

#trad-program-list-1920 h4 {
  color: grey;
  font-style: italic;
  font-size: 1.3em;
  margin-top: 0.75em;
}

#trad-program-list-1920 .programs li > b {
  display: inline-block;
  margin-top: 0.25em;
  padding-left: 0.25em;
  font-weight: 600;
  color: grey;
  font-style: italic;
  font-size: 1em;
}

span.aa-icon,
span.as-icon,
span.ba-icon,
span.bs-icon {
  position: absolute;
  margin-left: -3em;
  display: inline-block;
  padding: 0em 0.5em;
  color: white;
  min-width: 2.5em;
  text-align: center;
}

span.aa-icon {
  background-color: #003399;

}

span.as-icon {
  background-color: #FF6633;
}

span.ba-icon {
  background-color: #CC0033;
}

span.bs-icon {
  background-color: #6633FF;
}