<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="background"></div>
<a id="fullscreen" href="http://bootsnipp.com/iframe/846vX">Looks Best In Fullscreen (Click Here)</a>
<div id="posts" class="col-xs-11 col-sm-4 col-md-3">
<a href="#post-1001">
<img class="col-xs-4" src="http://d.gr-assets.com/books/1358275334l/2767052.jpg" alt="The Hunger Games">
The Hunger Games
<div class="clearfix"></div>
</a>
<a href="#post-1002">
<img class="col-xs-4" src="http://d.gr-assets.com/books/1387141547l/2.jpg" alt="Harry Potter and the Order of the Phoenix">
Harry Potter and the Order of the Phoenix
<div class="clearfix"></div>
</a>
<a href="#post-1003">
<img class="col-xs-4" src="http://d.gr-assets.com/books/1361482611l/6.jpg" alt="Harry Potter and the Order of the Phoenix">
Harry Potter and the Goblet of Fire
<div class="clearfix"></div>
</a>
<a href="#post-1004">
<img class="col-xs-4" src="http://d.gr-assets.com/books/1362278317l/5.jpg" alt="Harry Potter and the Prisoner of Azkaban">
Harry Potter and the Prisoner of Azkaban
<div class="clearfix"></div>
</a>
<a href="#post-1005">
<img class="col-xs-4" src="http://d.gr-assets.com/books/1361039443l/41865.jpg" alt="Twilight">
Twilight
<div class="clearfix"></div>
</a>
<a href="#post-1006">
<img class="col-xs-4" src="http://d.gr-assets.com/books/1361039191l/1.jpg" alt="Harry Potter and the Half-Blood Prince">
Harry Potter and the Half-Blood Prince
<div class="clearfix"></div>
</a>
<a href="#post-1007">
<img class="col-xs-4" src="http://d.gr-assets.com/books/1361975680l/2657.jpg" alt="To Kill a Mockingbird">
To Kill a Mockingbird
<div class="clearfix"></div>
</a>
<a href="#post-1008">
<img class="col-xs-4" src="http://d.gr-assets.com/books/1370023538l/136251.jpg" alt="Harry Potter and the Deathly Hallows">
Harry Potter and the Deathly Hallows
<div class="clearfix"></div>
</a>
<a href="#post-1009">
<img class="col-xs-4" src="http://d.gr-assets.com/books/1320399351l/1885.jpg" alt="Pride and Prejudice">
Pride and Prejudice
<div class="clearfix"></div>
</a>
<a href="#post-1010">
<img class="col-xs-4" src="http://d.gr-assets.com/books/1370043634l/15881.jpg" alt="Harry Potter and the Chamber of Secrets">
Harry Potter and the Chamber of Secrets
<div class="clearfix"></div>
</a>
</div>
<div id="toggle_posts">
<h1>
<span class="glyphicon arrow-left glyphicon-chevron-up"></span>
<span>POSTS</span>
<span class="glyphicon arrow-right glyphicon-chevron-up"></span>
</h1>
</div>
<div id="post" class="col-xs-offset-1 col-xs-11 col-sm-offset-5 col-sm-6 col-md-offset-3 col-md-5">
<article id="post-1001" class="active">
<h1 class="title">
The Hunger Games
<button type="button" class="close" aria-hidden="true">×</button>
</h1>
<div class="post">
<img class="post-img" src="http://d.gr-assets.com/books/1358275334l/2767052.jpg" alt="The Hunger Games">
<p>
<strong>Winning will make you famous.</strong><br/>
<strong>Losing means certain death.</strong>
</p>
<p>In a dark vision of the near future, a terrifying reality TV show is taking place. Twelve boys and twelve girls are forced to appear in a live event called the Hunger Games. There is only one rule: kill or be killed.</p>
<p>When sixteen-year-old Katniss Everdeen steps forward to take her sister's place in the games, she sees it as a death sentence. But Katniss has been close to death before. For her, survival is second nature.</p>
</div>
<div class="info">
<a href="#comments-1001"> <span class="glyphicon glyphicon-comment"></span> Comments (3) </a>
<a href="#date-09-14-2008"> <span class="glyphicon glyphicon-time"></span> 09-14-2008 </a>
<div class="clearfix"></div>
</div>
</article>
<article id="post-1002">
<h1 class="title">
Harry Potter and the Order of the Phoenix
<button type="button" class="close" aria-hidden="true">×</button>
</h1>
<div class="post">
<img class="post-img" src="http://d.gr-assets.com/books/1387141547l/2.jpg" alt="Harry Potter and the Order of the Phoenix">
<p>The summer holidays are dragging on and Harry Potter can't wait for the start of the school year. It is his fourth year at Hogwarts School of Witchcraft and Wizardry, and there are spells to be learnt, potions to be brewed and Divination lessons (sigh) to be attended. Harry is expecting these: however, other quite unexpected events are already on the march ...</p>
</div>
<div class="info">
<a href="#comments-1002"> <span class="glyphicon glyphicon-comment"></span> Comments (3) </a>
<a href="#date-06-21-2003"> <span class="glyphicon glyphicon-time"></span> 06-21-2003 </a>
<div class="clearfix"></div>
</div>
</article>
<article id="post-1003">
<h1 class="title">
Harry Potter and the Goblet of Fire
<button type="button" class="close" aria-hidden="true">×</button>
</h1>
<div class="post">
<img class="post-img" src="http://d.gr-assets.com/books/1361482611l/6.jpg" alt="Harry Potter and the Goblet of Fire">
<p>The summer holidays are dragging on and Harry Potter can't wait for the start of the school year. It is his fourth year at Hogwarts School of Witchcraft and Wizardry, and there are spells to be learnt, potions to be brewed and Divination lessons (sigh) to be attended. Harry is expecting these: however, other quite unexpected events are already on the march ...</p>
</div>
<div class="info">
<a href="#comments-1003"> <span class="glyphicon glyphicon-comment"></span> Comments (3) </a>
<a href="#date-09-01-2002"> <span class="glyphicon glyphicon-time"></span> 09-01-2002 </a>
<div class="clearfix"></div>
</div>
</article>
<article id="post-1004">
<h1 class="title">
Harry Potter and the Prisoner of Azkaban
<button type="button" class="close" aria-hidden="true">×</button>
</h1>
<div class="post">
<img class="post-img" src="http://d.gr-assets.com/books/1362278317l/5.jpg" alt="Harry Potter and the Prisoner of Azkaban">
<p>Harry Potter is lucky to reach the age of thirteen, since he has already survived the murderous attacks of the feared Dark Lord on more than one occasion. But his hopes for a quiet term concentrating on Quidditch are dashed when a maniacal mass-murderer escapes from Azkaban, pursued by the soul-sucking Dementors who guard the prison. It's assumed that Hogwarts is the safest place for Harry to be. But is it a coincidence that he can feel eyes watching him in the dark, and should he be taking Professor Trelawney's ghoulish predictions seriously?</p>
</div>
<div class="info">
<a href="#comments-1004"> <span class="glyphicon glyphicon-comment"></span> Comments (3) </a>
<a href="#date-05-01-2004"> <span class="glyphicon glyphicon-time"></span> 05-01-2004 </a>
<div class="clearfix"></div>
</div>
</article>
<article id="post-1005">
<h1 class="title">
Twilight
<button type="button" class="close" aria-hidden="true">×</button>
</h1>
<div class="post">
<img class="post-img" src="http://d.gr-assets.com/books/1361039443l/41865.jpg" alt="Twilight">
<p><em>About three things I was absolutely positive:</em></p>
<p><em>First, Edward was a vampire.</em></p>
<p><em>Second, there was a part of him - and I didn't know how dominant that part might be - that thirsted for my blood.</em></p>
<p><em>And third, I was unconditionally and irrevocably in love with him.</em></p>
<p>When Bella Swan moves to the gloomy town of Forks and meets Edward Cullen, her life takes a thrilling and terrifying turn. With his porcelain skin, golden eyes, mesmerizing voice, and supernatural gifts, Edward is both irresistible and impenetrable. Up until now, he has managed to keep his true identity hidden, but Bella is determined to uncover his dark secret.</p>
<p>What Bella doesn't realize is the closer she gets to him, the more she is putting herself and those around her at risk. And it might be too late to turn back...</p>
</div>
<div class="info">
<a href="#comments-1005"> <span class="glyphicon glyphicon-comment"></span> Comments (3) </a>
<a href="#date-09-06-2005"> <span class="glyphicon glyphicon-time"></span> 09-06-2005 </a>
<div class="clearfix"></div>
</div>
</article>
<article id="post-1006">
<h1 class="title">
Harry Potter and the Half-Blood Prince
<button type="button" class="close" aria-hidden="true">×</button>
</h1>
<div class="post">
<img class="post-img" src="http://d.gr-assets.com/books/1361039191l/1.jpg" alt="Harry Potter and the Half-Blood Prince">
<p>The war against Voldemort is not going well; even the Muggle governments are noticing. Ron scans the obituary pages of the Daily Prophet, looking for familiar names. Dumbledore is absent from Hogwarts for long stretches of time, and the Order of the Phoenix has already suffered losses.</p>
<p>And yet, as with all wars, life goes on. Sixth-year students learn to Apparate—and lose a few eyebrows in the process. Teenagers flirt and fight and fall in love. Classes are never straightforward, though Harry receives some extraordinary help from the mysterious Half-Blood Prince.</p>
<p>So it's the home front that takes center stage in the multilayered sixth installment of the story of Harry Potter. Here at Hogwarts, Harry will search for the full and complex story of the boy who became Lord Voldemort—and thereby find what may be his only vulnerability.</p>
</div>
<div class="info">
<a href="#comments-1006"> <span class="glyphicon glyphicon-comment"></span> Comments (3) </a>
<a href="#date-09-16-200"> <span class="glyphicon glyphicon-time"></span> 09-16-2006 </a>
<div class="clearfix"></div>
</div>
</article>
<article id="post-1007">
<h1 class="title">
To Kill a Mockingbird
<button type="button" class="close" aria-hidden="true">×</button>
</h1>
<div class="post">
<img class="post-img" src="http://d.gr-assets.com/books/1361975680l/2657.jpg" alt="To Kill a Mockingbird">
<p>The unforgettable novel of a childhood in a sleepy Southern town and the crisis of conscience that rocked it, To Kill A Mockingbird became both an instant bestseller and a critical success when it was first published in 1960. It went on to win the Pulitzer Prize in 1961 and was later made into an Academy Award-winning film, also a classic.</p>
<p>WCompassionate, dramatic, and deeply moving, To Kill A Mockingbird takes readers to the roots of human behavior - to innocence and experience, kindness and cruelty, love and hatred, humor and pathos. Now with over 18 million copies in print and translated into forty languages, this regional story by a young Alabama woman claims universal appeal. Harper Lee always considered her book to be a simple love story. Today it is regarded as a masterpiece of American literature.</p>
</div>
<div class="info">
<a href="#comments-1007"> <span class="glyphicon glyphicon-comment"></span> Comments (3) </a>
<a href="#date-05-23-2006"> <span class="glyphicon glyphicon-time"></span> 05-23-2006 </a>
<div class="clearfix"></div>
</div>
</article>
<article id="post-1008">
<h1 class="title">
Harry Potter and the Deathly Hallows
<button type="button" class="close" aria-hidden="true">×</button>
</h1>
<div class="post">
<img class="post-img" src="http://d.gr-assets.com/books/1370023538l/136251.jpg" alt="Harry Potter and the Deathly Hallows">
<p>His hand closed automatically around the fake Horcrux, but in spite of everything, in spite of the dark and twisting path he saw stretching ahead for himself, in spite of the final meeting with Voldemort he knew must come, whether in a month, in a year, or in ten, he felt his heart lift at the thought that there was still one last golden day of peace left to enjoy with Ron and Hermione.' With these words "Harry Potter and the Half-Blood Prince" draws to a close. And here, in this seventh and final book, Harry discovers what fate truly has in store for him as he inexorably makes his way to that final meeting with Voldemort. In this thrilling climax to the phenomenally bestselling series, J.K. Rowling will reveal all to her eagerly waiting readers</p>
</div>
<div class="info">
<a href="#comments-1008"> <span class="glyphicon glyphicon-comment"></span> Comments (3) </a>
<a href="#date-07-21-2007"> <span class="glyphicon glyphicon-time"></span> 07-21-2007 </a>
<div class="clearfix"></div>
</div>
</article>
<article id="post-1009">
<h1 class="title">
Pride and Prejudice
<button type="button" class="close" aria-hidden="true">×</button>
</h1>
<div class="post">
<img class="post-img" src="http://d.gr-assets.com/books/1320399351l/1885.jpg" alt="Pride and Prejudice">
<p>"It is a truth universally acknowledged, that a single man in possession of a good fortune must be in want of a wife."</p>
<p>So begins <em>Pride and Prejudice</em>, Jane Austen's witty comedy of manners--one of the most popular novels of all time--that features splendidly civilized sparring between the proud Mr. Darcy and the prejudiced Elizabeth Bennet as they play out their spirited courtship in a series of eighteenth-century drawing-room intrigues. </p>
<p>
<em>Introduction by Anna Quindlen.<br/>
Commentary by Margaret Oliphant, George Saintsbury, Mark Twain, A.C. Bradley, Walter A. Raleigh, and Virginia Woolf.</em>
</p>
<p><em>Includes a Modern Library Reading Group Guide</em></p>
</div>
<div class="info">
<a href="#comments-1009"> <span class="glyphicon glyphicon-comment"></span> Comments (3) </a>
<a href="#date-10-10-2000"> <span class="glyphicon glyphicon-time"></span> 10-10-2000 </a>
<div class="clearfix"></div>
</div>
</article>
<article id="post-1010">
<h1 class="title">
Harry Potter and the Chamber of Secrets
<button type="button" class="close" aria-hidden="true">×</button>
</h1>
<div class="post">
<img class="post-img" src="http://d.gr-assets.com/books/1370043634l/15881.jpg" alt="Harry Potter and the Chamber of Secrets">
<p>The Dursleys were so mean and hideous that summer that all Harry Potter wanted was to get back to the Hogwarts School for Witchcraft and Wizardry. But just as he's packing his bags, Harry receives a warning from a strange, impish creature named Dobby who says that if Harry Potter returns to Hogwarts, disaster will strike.</p>
<p>And strike it does. For in Harry's second year at Hogwarts, fresh torments and horrors arise, including an outrageously stuck-up new professor, Gilderoy Lockheart, a spirit named Moaning Myrtle who haunts the girl's bathroom, and the unwanted attentions of Ron Weasley's younger sister, Ginny.</p>
<p>But each of these seem minor annoyances when the real trouble beings, and someone--or something--starts turning Hogwarts students to stone. Could it be Draco Malfoy, a more poisonous rival than ever? Could it possibly be Hagrid, whose mysterious past is finally told? Or could it be the one everyone at Hogwarts most suspects...Harry Potter himself.</p>
</div>
<div class="info">
<a href="#comments-1010"> <span class="glyphicon glyphicon-comment"></span> Comments (3) </a>
<a href="#date-06-02-1999"> <span class="glyphicon glyphicon-time"></span> 06-02-1999 </a>
<div class="clearfix"></div>
</div>
</article>
</div>
<div id="comments" class="col-xs-offset-1 col-xs-11 col-sm-6 col-md-4">
<h1 class="title">
Comments
<button type="button" class="close" aria-hidden="true">×</button>
</h1>
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'bootsnipp'; // required: replace example with your forum shortname
var disqus_identifier = '4l0k2';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</div>
body {
min-height: 420px;
}
#fullscreen {
position: absolute;
top: 10px;
left: 50%;
margin-left: -248px;
color: rgb(255, 255, 255);
text-shadow: 0px 0px 5px rgba(51, 51, 51, 0.8);
font-size: 1.7em;
font-weight: bold;
}
.background {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-image: url(https://s3.amazonaws.com/ooomf-com-files/ikZyw45kT4m16vHkHe7u_9647713235_29ce0305d2_o.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
#posts {
position: fixed;
top: 0px;
left: 0px;
height: 100%;
background-color: rgba(255, 255, 255, 0.7);
overflow: auto;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
z-index: 100;
padding: 0px;
}
#posts a {
display: block;
padding: 20px 30px;
color: rgb(51, 51, 51);
text-decoration: none;
}
#posts a:hover {
background-color: rgba(255, 255, 255, 0.8);
}
#toggle_posts {
position: fixed;
top: 0px;
left: 0px;
width: 30px;
height: 100%;
background-color: rgb(51, 51, 51);
color: rgb(255, 255, 255);
text-align: center;
cursor: pointer;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
z-index: 100;
}
#toggle_posts h1 {
position: absolute;
top: 50%;
left: -63px;
font-size: 1.2em;
margin: 0px;
line-height: 1.1px;
letter-spacing: 20px;
font-weight: 700;
margin-top: -68px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#toggle_posts h1 .glyphicon.arrow-left {
position: absolute;
top: 0;
left: -40px;
margin-top: -8px;
}
#toggle_posts h1 .glyphicon.arrow-right {
position: absolute;
top: 0;
left: 156px;
margin-top: -8px;
}
#post article {
position: absolute;
top: 0px;
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(51, 51, 51, 0.3);
padding: 0px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform: scale(0,0);
-moz-transform: scale(0,0);
-o-transform: scale(0,0);
-ms-transform: scale(0,0);
transform: scale(0,0);
}
#post article.active {
margin-top: 60px;
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-o-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transform: scale(1, 1);
}
#post article .title,
#comments .title {
font-family: "Oswald", Arial, sans-serif;
text-transform: uppercase;
margin: 0;
padding: 25px 30px;
display: block;
border-bottom: 1px solid rgb(160, 160, 160);
}
#post article .title .close,
#comments .title .close {
position: absolute;
top: 0px;
right: 0px;
font-size: inherit;
font-weight: normal;
padding: 0px 13px 5px;
opacity: 1;
}
#post article .title .close:hover,
#comments .title .close:hover {
background-color: rgba(51, 51, 51, 0.1);
}
#post article .post {
padding: 20px 30px;
margin: 0;
margin-top: 0;
height: 250px;
position: relative;
overflow: auto;
}
#post article .post .post-img {
width: 100%;
}
#post article .post img {
max-width: 100%;
}
#post article .post p {
margin: 20px 0px;
}
#post .info {
display: block;
background-color: rgb(51, 51, 51);
}
#post .info a {
float: left;
display: inline-block;
padding: 20px 30px;
color: rgb(255, 255, 255);
text-decoration: none;
border-right: 1px solid rgb(81, 81, 81);
}
#post .info a:hover {
background-color: rgb(81, 81, 81);
}
#comments {
position: fixed;
top: 60px;
background-color: rgb(255, 255, 255);
border: 1px solid rgba(51, 51, 51, 0.3);
max-height: 75%;
overflow: auto;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform: translate(1000px,0px) scale(0,0);
-moz-transform: translate(1000px,0px) scale(0,0);
-o-transform: translate(1000px,0px) scale(0,0);
-ms-transform: translate(1000px,0px) scale(0,0);
transform: translate(1000px,0px) scale(0,0);
}
#comments.active {
-webkit-transform: translate(-0px,0px) scale(1,1);
-moz-transform: translate(-0px,0px) scale(1,1);
-o-transform: translate(-0px,0px) scale(1,1);
-ms-transform: translate(-0px,0px) scale(1,1);
transform: translate(-0px,0px) scale(1,1);
}
#posts.col-xs-11 { left: -91.66666667%; }
#posts.col-xs-11.open ~ #toggle_posts { left: 91.66666667%; }
@media (min-width: 768px) {
#posts.col-sm-4 { left: -33.33333333%; }
#posts.col-sm-4.open ~ #toggle_posts { left: 33.33333333%; }
#comments { right: 8.33333333%; }
}
@media (min-width: 992px) {
#posts.col-md-3 { left: -25%; }
#posts.col-md-3.open ~ #toggle_posts { left: 25%; }
#comments { background-color: rgba(255, 255, 255, 0.8); right: 0px; }
}
#posts.open { left: 0px; }
$(function () {
if (window.location == window.parent.location) {
$('#fullscreen').text('Go back to Blog Layout Snippet on Bootsnipp (Click Here)');
$('#fullscreen').attr('href', 'http://bootsnipp.com/mouse0270/snippets/846vX');
$('#fullscreen').css('margin-left','-391.5px')
}
$('#fullscreen').on('click', function(event) {
event.preventDefault();
window.parent.location = $('#fullscreen').attr('href');
});
$('#toggle_posts').on('click', function(event) {
event.preventDefault();
$('#posts').toggleClass('open');
});
$('a[href^="#post-"]').on('click', function(event) {
event.preventDefault();
$('article.active').removeClass('active');
$('#comments').removeClass('active');
var percentage = parseInt($(window).width()) - parseInt($(this).css('width'));
percentage = percentage / parseInt($(window).width());
percentage = percentage * 100;
if (percentage <= 20) {
$('#posts').removeClass('open');
}
// THIS IS WHERE AJAX CODE WOULD GO TO LOAD ARTICLES DYNAMICALLY
$($(this).attr('href')).addClass('active');
});
$('a[href^="#comments-"]').on('click', function(event) {
event.preventDefault();
// THIS IS WHERE AJAX CODE WOULD GO TO LOAD ARTICLES DYNAMICALLY
$('#comments').toggleClass('active');
});
$('article > .title > .close').on('click', function(event) {
event.preventDefault();
$('#comments').removeClass('active');
$(this).closest('article').removeClass('active');
});
$('#comments > .title > .close').on('click', function(event) {
event.preventDefault();
$(this).closest('#comments').removeClass('active');
});
});
