UoM

index.html

<section>
  <div class="container">
    <div class="row">
      <div class="col"></div>
      <div class="col-12">
        <div class="jumbotron">
          <h1>Proactive Marketing & PR Report</h1>
          <h2>October 2016</h2>
          <h2>University Relations</h2>
        </div>
      </div>
      <div class="col"></div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row">
      <div class="col"></div>
      <div class="col-10">
        <h1>The <strong>great majority</strong> of media coverage was <strong>positive</strong></h1>
        <div id="container" style="width:100%; height:400px;"></div>
      </div>
      <div class="col"></div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row">
      <div class="col"></div>
      <div class="col-10">
        <h1><strong>29 million exposed </strong>to</h1>
        <h1>University messages</h1>
        <div id="impressions" style="width:100%; height:400px;"></div>
        <h5>Social Media engagements</h5>
        <h3><span id="counter">27,005</span></h3>
        <p> shares, likes, retweets, comments, etc.</p>
      </div>
      <div class="col"></div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row">
      <div class="col"></div>
      <div class="col-10">
        <h1>Local, national, and international media covered <strong>148 University stories.</strong></h1>
        <div class="continer stories">
          <div class="row">
            <div class="col-4">
              <div class="circle">
                <h3 class="counter">15</h3>
                <h6>Star Tribunal</h6>
              </div>
            </div>
            <div class="col-4">
              <div class="circle">
                <h3 class="counter">44</h3>
                <h6>Twin Cities TV</h6>
              </div>
            </div>
            <div class="col-4">
              <div class="circle">
                <h3 class="counter">17</h3>
                <h6>National Publications</h6>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-4">
              <div class="circle">
                <h3 class="counter">10</h3>
                <h6>Greater Minnesota Publications</h6>
              </div>
            </div>
            <div class="col-4">
              <div class="circle">
                <h3 class="counter">9</h3>
                <h6>MPR</h6>
              </div>
            </div>
            <div class="col-4">
              <div class="circle">
                <h3 class="counter">8</h3>
                <h6>Pioneer Press</h6>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-4">
              <div class="circle">
                <h3 class="counter">4</h3>
                <h6>MinnPost</h6>
              </div>
            </div>
            <div class="col-4">
              <div class="circle">
                <h3 class="counter">3</h3>
                <h6>International Publications</h6>
              </div>
            </div>
            <div class="col-4">
              <div class="circle">
                <h3 class="counter">38</h3>
                <h6>Other</h6>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col"></div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row">
      <div class="col"></div>
      <div class="col-10">
        <h1>UR and AHC published <strong>55 stories through</strong><strong>ownedchannels.</strong></h1>
        
        <div class="grid">
          <div class="grid-item">
          <img src="http://image.prntscr.com/image/fc20427acd794963b63ee4f1c8f329dd.png"/></div>
          <div class="grid-item">
            <img src="http://image.prntscr.com/image/2e21dc1f3ce94428bcd09e49bbc77431.png"/>
          </div>
          <div class="grid-item">
            <img src="http://image.prntscr.com/image/7b3159b659d84a47a074e2780930550e.png"/>
          </div>
          <div class="grid-item">
            <img src="http://image.prntscr.com/image/d500caf71bd94ea480e92b6346d909e7.png"/>
          </div>
          <div class="grid-item">
            <img src="http://image.prntscr.com/image/9c92d3a81fe04c3a9004e0b83053a97d.png"/>
          </div>
          <div class="grid-item">
            <img src="http://image.prntscr.com/image/3ebc7f6ef83d43faa5a98855a07d3645.png"/>
          </div>
          
        </div>
        
      </div>
      <div class="col"></div>
    </div>
  </div>
</section>

<section>
  <div class="container">
    <div class="row">
      <div class="col"></div>
      <div class="col-10" id="coming">
        <h2>Coming Up</h2>
        <div class="coming-up">
        <h6><strong>Promoting Hunger stories:</strong> November 23-January 16</h6>
        <h6><strong>New York Times sponsored content:</strong> January 17-April 16</h6>
        <h6><strong>Marketing campaign continues:</strong> January-May14</h6>
        <h6><strong>New Issues Management Approach:</strong> By early 2017</h6>
        </div>
      </div>
      <div class="col"></div>
    </div>
  </div>
</section>

script.js

// Pie Chart
Highcharts.chart('container', {
  chart: {
    type: 'pie'
  },
  title: {
    text: ''
  },
  /* subtitle: {
    text: 'The great majority of media coverage was positive'
  }, */
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        format: '{point.name}: {point.y:.1f}%'
      }
    }
  },

  tooltip: {
    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
  },
  series: [{
    name: 'Brands',
    colorByPoint: true,
    data: [{
      name: 'Negative Stories',
      color: "grey",
      y: 16,
      drilldown: 'Negative Stories'
    }, {
      name: 'Positive',
      color: "#8C001A",
      y: 84,
      drilldown: 'Positive'
    }]
  }],
  drilldown: {
    series: [{
      name: 'Negative Stories',
      id: 'Negative Stories',
      data: [
        ['Timely Topics', 75],
        ['Research', 21.43],
        ['Student Experience', 3.57]
      ]
    }, {
      name: 'Positive',
      id: 'Positive',
      data: [
        ['Timely Topics', 28.37],
        ['Health Sciences', 22.30],
        ['Research', 19.59],
        ['Student Experience', 9.46],
        ['Administrative', 8.11],
        ['Outreach', 6.76],
        ['Expert Alerts', 5.41]
      ]
    }]
  }
});

//Stacked bar chart
Highcharts.chart('impressions', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'People Engaged'
    },
    xAxis: {
        categories: ['2015']
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Est. number of people <b>(in millions)</b> who viewed ads, stories and/or content'
        }
    },
    legend: {
        reversed: true
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    series: [{
        name: 'Earned Media',
        color: "#ffb71e",
        data: [17]
    }, {
        name: 'Campaign Advertising',
        color: "#8C001A",
        data: [9.4]
    } ,{
        name: 'Owned Channels',
        color: "grey",
        data: [2.7]
    }]
});

//Number counter
function animateValue(id, start, end, duration) {
    var range = end - start;
    var current = start;
    var increment = end > start? 1 : -1;
    var stepTime = Math.abs(Math.floor(duration / range));
    var obj = document.getElementById(id);
    var timer = setInterval(function() {
        current += increment;
        obj.innerHTML = current;
        if (current == end) {
            clearInterval(timer);
        }
    }, stepTime);
}

animateValue("counter", 26500, 27005, 3);

// init Masonry
var $grid = $('.grid').masonry({
  itemSelector: '.grid-item',
  percentPosition: true,
  //gutter: 10,
  position: relative,
  columnWidth: '.grid-sizer'
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.masonry();
});  

scripts

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.5/waypoints.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.5/waypoints.js"></script>

style.css

body{
  background-color: #f9f7f6;
}
h1,h2,h3 {
  color: #8C001A;
}

h3+p {
  display: inline-block;
}

.col-10{
  margin-top: 5%;
  margin-bottom: 5%;
}
.jumbotron{
  height-max: 100%;
}

section/* :nth-child(n+2) */ {
  border-bottom: 50px solid #ffb71e;
}

section:nth-child(even){
    background-color: #f0efee;
    margin-bottom: 0px;
    padding: 0 1em 2em 0;
}

section:nth-child(4){
  background-image: url(https://dl.dropboxusercontent.com/u/45064406/images/Stuff/1280px-BlankMap-World6%2C_compact.svg.png);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
}

.circle { 
   width: 55%;
   height: 150px;
   background: #f0efee;
   border: 1px solid;
   margin-bottom: 10%;
   -moz-border-radius: 70px; 
   -webkit-border-radius: 70px; 
   border-radius: 70px;
}

.circle h3 {
  padding: 10% 10% 10% 35%;
}

.circle h6 {
  text-align: center;
}

.stories {
  margin-top: 2em;
}

.collote{
  padding: 0 0 0 0;
  background-color: transparent;
  margin: 50% 10% 10% 10%;
  border: 1px dotted grey;
  float: left;
  text-align: center;
  margin-top: 15px;
}
/* section:nth-child(even) .col-10{
  border-right: 1px dotted black;
  border-left: 1px dotted black;
} */

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 33.333%;
  /* margin-bottom: 10px; */
}

.grid-item {
  float: left;
  position: relative;
}

.grid-item img {
  display: inline-block;
  max-width: 100%;
}

.coming-up {
margin-top: 5%;
}

#coming {
  border: 1px dotted grey;
  padding: 10% 10% 20% 10%;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />

uom.markdown

UoM

A Pen by Adham El Banhawy on CodePen.

License.