Skip to content

Instantly share code, notes, and snippets.

@Banhawy

Banhawy/index.html

Created March 21, 2017 16:42
Show Gist options
  • Save Banhawy/a1773ac2f21c6dcdb61b896c1b5c451a to your computer and use it in GitHub Desktop.
Save Banhawy/a1773ac2f21c6dcdb61b896c1b5c451a to your computer and use it in GitHub Desktop.
Download ZIP
UoM
Raw
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>
Raw
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();
});
Raw
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/[email protected]/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>
Raw
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%;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment