<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>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>TCoE Newsletter</h2>
<p>Best viewed <a href="http://bootsnipp.com/fullscreen/6nNmP" target="_blank">full screen</a>
</p>
<hr>
<section id="pinBoot">
<article class="white-panel"><img src="http://s14.postimg.org/p2xpt0bq9/Untitled.png" alt="">
<h4><a href="#">Editor Speaks</a></h4>
<p>Testing Team's Day Out!</p>
</article>
<article class="white-panel"> <img src="http://www.esab.de/shared/admin/hires-images/images/esablogo_yb.jpg" alt="">
<h4><a href="#">Customer Appreciations</a></h4>
<p>Production test report for UI and cooler PCBA - Balachandra, Vaijnath and Suganesh really good work of you and your team to have the production test up and running so early in the project.
- Goran Sabol, ESAB Holdings to Balachnadra K
</p>
</article>
<article class="white-panel"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Leica_Microsystems.svg/2000px-Leica_Microsystems.svg.png" alt="">
<h4><a href="#">Customer Appreciations</a></h4>
<p>LLAS X 1.7 has been signed off for release.
Thank you all for all your hard work in the various phases of testing the product which I know has been very intense at times. There is still much to do, but a great deal has been achieved with this release thanks to your efforts and bug hunting!
-Nicholas Watersin, Leica Microsystems UK to Rishab, Satyaki and Om Sakthi
</p>
</article>
<article class="white-panel"> <img src="https://www.ufz.de/export/data/1/56220_Logo_AB_SCIEX_RGB.jpg" alt="">
<h4><a href="#">Customer Appreciations</a></h4>
<p>Thank you for the smooth mapping change. It works like a charm!
I know in the last couple of days, the pressure has been turned up a couple of notches. I wanted to thank you all for your great work and effort.
- Strazimiri Genci, Test Automation Coordinator SCIEX to Ganeshkiran HS, Mohitkumar, Praveen Puttaswamy, Vasanth Kumar and Nandish S
</p>
</article>
<article class="white-panel"> <img src="http://s9.postimg.org/71rhl584f/image.png" alt="">
<h4><a href="#">Star of the Month</a></h4>
<p>Jaya Prakash T</p>
</article>
<article class="white-panel"> <img src="http://s16.postimg.org/yla0b6gn9/image.jpg" alt="">
<h4><a href="#">Star of the Month</a></h4>
<p>Rijwan Shaikh</p>
</article>
<article class="white-panel"><img src="http://s8.postimg.org/cdnumiktx/image.jpg" alt="">
<h4><a href="#">Events at Bangalore</a></h4>
<p>Kannada Rajyotsava and Birthday Celebration!</p>
</article>
<article class="white-panel"> <img src="http://s13.postimg.org/fsqc83wav/image.jpg" alt="">
<h4><a href="#">Winners of Tech Debate and Tech Quiz</a></h4>
<p>Tech Debate - Megha Madan</p>
<p> Tech Quiz - Prashanth Renuka & Aditya Narayan
</p>
</article>
</section>
<hr>
</div>
<p>
<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fbootsnipp.com%2Fiframe%2FZkk0O" target="_blank"><small>HTML</small><sup>5</sup></a>
<br>
<br>
</p>
</div>
/*
Ref:
Thanks to:
http://www.jqueryscript.net/layout/Simple-jQuery-Plugin-To-Create-Pinterest-Style-Grid-Layout-Pinterest-Grid.html
*/
body {
background-color:#eee;
}
#pinBoot {
position: relative;
max-width: 100%;
width: 100%;
}
img {
width: 100%;
max-width: 100%;
height: auto;
}
.white-panel {
position: absolute;
background: white;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
padding: 10px;
}
/*
stylize any heading tags withing white-panel below
*/
.white-panel h1 {
font-size: 1em;
}
.white-panel h1 a {
color: #A92733;
}
.white-panel:hover {
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
margin-top: -5px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
$(document).ready(function() {
$('#pinBoot').pinterest_grid({
no_columns: 4,
padding_x: 10,
padding_y: 10,
margin_bottom: 50,
single_column_breakpoint: 700
});
});
/*
Ref:
Thanks to:
http://www.jqueryscript.net/layout/Simple-jQuery-Plugin-To-Create-Pinterest-Style-Grid-Layout-Pinterest-Grid.html
*/
/*
Pinterest Grid Plugin
Copyright 2014 Mediademons
@author smm 16/04/2014
usage:
$(document).ready(function() {
$('#blog-landing').pinterest_grid({
no_columns: 4
});
});
*/
;(function ($, window, document, undefined) {
var pluginName = 'pinterest_grid',
defaults = {
padding_x: 10,
padding_y: 10,
no_columns: 3,
margin_bottom: 50,
single_column_breakpoint: 700
},
columns,
$article,
article_width;
function Plugin(element, options) {
this.element = element;
this.options = $.extend({}, defaults, options) ;
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype.init = function () {
var self = this,
resize_finish;
$(window).resize(function() {
clearTimeout(resize_finish);
resize_finish = setTimeout( function () {
self.make_layout_change(self);
}, 11);
});
self.make_layout_change(self);
setTimeout(function() {
$(window).resize();
}, 500);
};
Plugin.prototype.calculate = function (single_column_mode) {
var self = this,
tallest = 0,
row = 0,
$container = $(this.element),
container_width = $container.width();
$article = $(this.element).children();
if(single_column_mode === true) {
article_width = $container.width() - self.options.padding_x;
} else {
article_width = ($container.width() - self.options.padding_x * self.options.no_columns) / self.options.no_columns;
}
$article.each(function() {
$(this).css('width', article_width);
});
columns = self.options.no_columns;
$article.each(function(index) {
var current_column,
left_out = 0,
top = 0,
$this = $(this),
prevAll = $this.prevAll(),
tallest = 0;
if(single_column_mode === false) {
current_column = (index % columns);
} else {
current_column = 0;
}
for(var t = 0; t < columns; t++) {
$this.removeClass('c'+t);
}
if(index % columns === 0) {
row++;
}
$this.addClass('c' + current_column);
$this.addClass('r' + row);
prevAll.each(function(index) {
if($(this).hasClass('c' + current_column)) {
top += $(this).outerHeight() + self.options.padding_y;
}
});
if(single_column_mode === true) {
left_out = 0;
} else {
left_out = (index % columns) * (article_width + self.options.padding_x);
}
$this.css({
'left': left_out,
'top' : top
});
});
this.tallest($container);
$(window).resize();
};
Plugin.prototype.tallest = function (_container) {
var column_heights = [],
largest = 0;
for(var z = 0; z < columns; z++) {
var temp_height = 0;
_container.find('.c'+z).each(function() {
temp_height += $(this).outerHeight();
});
column_heights[z] = temp_height;
}
largest = Math.max.apply(Math, column_heights);
_container.css('height', largest + (this.options.padding_y + this.options.margin_bottom));
};
Plugin.prototype.make_layout_change = function (_self) {
if($(window).width() < _self.options.single_column_breakpoint) {
_self.calculate(true);
} else {
_self.calculate(false);
}
};
$.fn[pluginName] = function (options) {
return this.each(function () {
if (!$.data(this, 'plugin_' + pluginName)) {
$.data(this, 'plugin_' + pluginName,
new Plugin(this, options));
}
});
}
})(jQuery, window, document);
