QUB CSS

CSS ready fiddle for QUB styling

by TheOrdinaryGeek

HTML

<link rel="stylesheet" href="https://www.qub.ac.uk/sites/media/Media,772430,en.css">
<link rel="stylesheet" href="https://www.qub.ac.uk/sites/media/Media,593680,en.css">
<link rel="stylesheet" href="https://www.qub.ac.uk/sites/media/Media,593681,en.css">
<link rel="stylesheet" href="https://www.qub.ac.uk/sites/media/Media,593708,en.css">
<div class="panel">

<div class="inner">
<div id="twitter" style="float:left;width:350px">
<!--<h2 class="alt" style="text-align:center">Twitter</h2>-->

            <iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" class="twitter-timeline twitter-timeline-rendered" style="position: static; visibility: visible; display: inline-block; width: 520px; height: 600px; padding: 0px; border: none; max-width: 100%; min-width: 180px; margin-top: 0px; margin-bottom: 0px; min-height: 200px;" data-widget-id="717658006146719744" title="Twitter Timeline"></iframe>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>

<div id="blog" style="float:left;width:350px">
<!--<h2 class="alt" style="text-align:center">Library Blog</h2>-->


<div class="panel">
<div class="inner">
  <ul class="list-style">
    
<li><span><a href="https://blogs.qub.ac.uk/library/2017/11/24/dental-update-now-available-to-qub-students-and-staff/">‘Dental Update’ now available to QUB students and staff</a></span></li>

<li><span><a href="https://blogs.qub.ac.uk/library/2017/11/15/skype-tutorials-now-available-for-medicine-dentistry-and-biomedical-sciences/">Skype tutorials now available for Medicine, Dentistry and Biomedical Sciences</a></span></li>

<li><span><a href="https://blogs.qub.ac.uk/library/2017/11/08/biological-sciences-drop-in-sessions/">Biological...

CSS

ul {
  list-style: none;
}
/* Create three equal columns that floats next to each other */
.column {
    float: left;
    width: 33.33%;
    padding: 10px;
    height: 300px; /* Should be removed. Only for demonstration */
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
    .column {
        width: 100%;
    }
}