Plane Blog - Masonry Demo

Developer
Juan Gallardo
Size
5,347 Kb
Views
32,384
  1. Plane Blog - Masonry Demo Previews
  2. Plane Blog - Masonry Demo HTML Codes
  3. Plane Blog - Masonry Demo CSS Codes
  4. Plane Blog - Masonry Demo JS Codes

How do I make an plane blog - masonry demo?

What is a plane blog - masonry demo? How do you make a plane blog - masonry demo? This script and codes were developed by Juan Gallardo on 18 August 2022, Thursday.

Plane Blog - Masonry Demo Previews
IQ Test

Plane Blog - Masonry Demo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Plane Blog - Masonry Demo</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="gallery-content" class="clearfix">
<!-- Case 1 --> <div class="case-box item"> <img src="http://ships.bouwman.com/Planes/Boeing---X-48B.jpg" /> <div class="case-country country-us"></div> <div class="case-description"> <p>Boeing Blended Wing X-48B</p> </div> <div class="case-options"> <a href="#">Details<i class="fa fa-arrows-alt"></i></a> </div> </div>
<!-- Case 2 --> <div class="case-box item"> <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR1L4C0GTPhEaRNivnY7BSb2vBchdXIFMpcXbakTLe9ZTjCwXXRog" /> <div class="case-country country-china"></div> <div class="case-description"> <p>Chinese designed unmanned plane Wing Loong makes its first appearance at Airshow China 2012</p> </div> <div class="case-options"> <a href="#">Details<i class="fa fa-arrows-alt"></i></a> </div> </div>
<!-- Case 3 --> <div class="case-box item"> <img src="http://www.ndtv.com/news/2014/01/17/images/story_page/german_tornado_plane_afp_360x270_15.jpg" /> <div class="case-country country-germany"></div> <div class="case-description"> <p>German army Tornado plane crashes.</p> </div> <div class="case-options"> <a href="#">Details<i class="fa fa-arrows-alt"></i></a> </div> </div>
<!-- Case 4 --> <div class="case-box item"> <img src="http://nimg.sulekha.com/others/original700/germany-airport-accident-2010-1-3-7-10-46.jpg" /> <div class="case-country country-germany"></div> <div class="case-description"> <p>Germany Airport Accident.</p> </div> <div class="case-options"> <a href="#">Details<i class="fa fa-arrows-alt"></i></a> </div> </div>
<!-- Case 5 --> <div class="case-box item"> <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/US_Navy_030617-N-4374S-016_A_German_fighter_jet_Panavia_Tornado_GR.Mk_1%2C_flies_over_the_Aegis_class%2C_guided_missile_cruiser_USS_Vella_Gulf_%28CG_72%29_during_the_annual_maritime_exercise_Baltic_Operations_2003_%28BALTOPS%29.jpg/800px-thumbnail.jpg" /> <div class="case-country country-germany"></div> <div class="case-description"> <p>Panavia Tornado</p> </div> <div class="case-options"> <a href="#">Details<i class="fa fa-arrows-alt"></i></a> </div> </div>
<!-- Case 6 --> <div class="case-box item"> <img src="http://i.telegraph.co.uk/multimedia/archive/02426/japan-airforce_2426561b.jpg" /> <div class="case-country country-china"></div> <div class="case-description"> <p><strong>Chinese Jet:</strong> This is a Chinese jet of some sort. yay?.</p> </div> <div class="case-options"> <a href="#">Details<i class="fa fa-arrows-alt"></i></a> </div> </div>
<!-- Case 7 --> <div class="case-box item"> <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcS1IOn4G08HxE5_HFyyOYMVGXlSi560Z7TC2JIhqx9t7WJVMFO4" /> <div class="case-country country-korea-south"></div> <div class="case-description"> <p>KAI T50</p> </div> <div class="case-options"> <a href="#">Details<i class="fa fa-arrows-alt"></i></a> </div> </div>
<!-- Case 8 --> <div class="case-box item"> <img src="http://media.defenceindustrydaily.com/images/AIR_SA342_Gazelle_French_lg.jpg" /> <div class="case-country country-france"></div> <div class="case-description"> <p>French Begin Public/Private Helicopter Training Partnership</p> </div> <div class="case-options"> <a href="#">Details<i class="fa fa-arrows-alt"></i></a> </div> </div>
<!-- Case 9 --> <div class="case-box item"> <img src="http://www.planetalkinglive.com/wp-content/uploads/Air-India-787-Dreamliner-painted-in-India%E2%80%99s-livery-taking-off-from-Boeing-South-Carolina.-The-airplane-is-equipped-with-18-business-class-seats-and-238-economy-class-seats1.jpg" /> <div class="case-country country-india"></div> <div class="case-description"> <p>Problems continue to cause concerns for 787 aircraft customers</p> </div> <div class="case-options"> <a href="#">Details<i class="fa fa-arrows-alt"></i></a> </div> </div>
<!-- Case 10 --> <div class="case-box item"> <img src="http://www.cbc.ca/gfx/images/news/topstories/2012/08/28/si-drone2.jpg" /> <div class="case-country country-canada"></div> <div class="case-description"> <p>Canada Looks to Loosen Restrictions on Drones</p> </div> <div class="case-options"> <a href="#">Details<i class="fa fa-arrows-alt"></i></a> </div> </div>
<!-- Case 11 --> <div class="case-box item"> <img src="http://finrosforum.files.wordpress.com/2010/10/d7517-media_httppanavisionm_whjvg.jpg" /> <div class="case-country country-finland"></div> <div class="case-description"> <p>The Arkadia International Bookshop in Helsinki will host a discussion on art and politics in today’s Russia with journalist Oksana Chelysheva and street artist Alexandra Kachko on Monday 26 March 2012 at 6pm.</p> </div> <div class="case-options"> <a href="#">Details<i class="fa fa-arrows-alt"></i></a> </div> </div>
<!-- Case 12 --> <div class="case-box item"> <img src="http://www.privatejetspain.com/wp-content/themes/revolution-30/revolution-30/images/hp-main.jpg" /> <div class="case-country country-spain"></div> <div class="case-description"> <p><strong>Welcome to PRIVATE JET SPAIN</strong><br>Luxury Private Air Charter, Corporate Flights, Sports Events and Air Ambulances. We can offer private charter flights to all the worlds major destinations including London, Moscow, Ibiza, Barcelona, Nice, Cannes, Geneva, Madrid, Paris, and Malaga. Specializing in Private Jet Charters to and from Malaga, Europe, North Africa and the Middle East.</p> </div> <div class="case-options"> <a href="#">Details<i class="fa fa-arrows-alt"></i></a> </div> </div>
<!-- Case 13 --> <div class="case-box item"> <img src="http://media.defenceindustrydaily.com/images/AIR_Harrier_GR7_RAF_lg.jpg" /> <div class="case-country country-uk"></div> <div class="case-description"> <p>The Major’s Email: British Harrier Support in Afghanistan, Revisited</p> </div> <div class="case-options"> <a href="#">Details<i class="fa fa-arrows-alt"></i></a> </div> </div>
<!-- Case 14 --> <div class="case-box item"> <img src="http://www.skydivesibson.co.uk/images/Exit.jpg" /> <div class="case-country country-uk"></div> <div class="case-description"> <p>At UK Parachuting (Sibson) we have something to suit the needs of every skydiver with the added bonus of a friendly club atmosphere!</p> </div> <div class="case-options"> <a href="#">Details<i class="fa fa-arrows-alt"></i></a> </div> </div>
<!-- Case 15 --> <div class="case-box item"> <img src="http://i.telegraph.co.uk/multimedia/archive/01616/red-bull-plane-stu_1616631a.jpg" /> <div class="case-country country-uk"></div> <div class="case-description"> <p><strong>Skydiver performs incredible glider stunt for Red Bull</strong><br> An Austrian skydiver has completed a remarkable stunt, somersaulting from one glider to another while travelling at 100mph. </p> </div> <div class="case-options"> <a href="#">Details<i class="fa fa-arrows-alt"></i></a> </div> </div>
<!-- Case 16 --> <div class="case-box item"> <img src="http://i.telegraph.co.uk/multimedia/archive/02069/heli_2069519b.jpg" /> <div class="case-country country-uk"></div> <div class="case-description"> <p><strong>Navy and RAF search and rescue privatised despite Prince William objections</strong><br> Britain’s highly respected Royal Navy and RAF search and rescue teams are to be privatised despite objections from the Duke of Cambridge. </p> </div> <div class="case-options"> <a href="#">Details<i class="fa fa-arrows-alt"></i></a> </div> </div>
<!-- Case 17 --> <div class="case-box item"> <img src="http://i226.photobucket.com/albums/dd80/cenciotti/Trapani%201000%20ore%202/CRW_0492.jpg" /> <img src="http://i226.photobucket.com/albums/dd80/cenciotti/Trapani%201000%20ore/IMG_2045.jpg" /> <img src="http://i226.photobucket.com/albums/dd80/cenciotti/Trapani%201000%20ore/IMG_2063.jpg" /> <div class="case-country country-italy"></div> <div class="case-description"> <p>Awesome colouring of f-16s italian air force</p> </div> <div class="case-options"> <a href="#">Details<i class="fa fa-arrows-alt"></i></a> </div> </div>
<!-- Case 18 --> <div class="case-box item"> <img src="http://4.bp.blogspot.com/-FiJ9IDqwh6Q/UEjVDJg0_nI/AAAAAAAAAuY/Q2Fo_envOKE/s1600/422.JPG" /> <div class="case-country country-uk"></div> <div class="case-description"> <p>Irish Aviation Research Institute</p> </div> <div class="case-options"> <a href="#">Details<i class="fa fa-arrows-alt"></i></a> </div> </div>
</div> <!--/ #gallery-content --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/masonry/3.1.5/masonry.pkgd.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Plane Blog - Masonry Demo - Script Codes CSS Codes

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
/* demo only */
@import url(http://fonts.googleapis.com/css?family=Bitter:400,400italic,700);
body { margin: 0; padding: 20px; font-family: 'Bitter', serif;
}
#gallery-content { width: auto; margin: 0 auto;
}
.item { display: block; float: left; width: 300px; margin: 0 20px 20px 0; -webkit-transition: left .4s ease-in-out, top .4s ease-in-out .4s; -moz-transition: left .4s ease-in-out, top .4s ease-in-out .4s; -ms-transition: left .4s ease-in-out, top .4s ease-in-out .4s; -o-transition: left .4s ease-in-out, top .4s ease-in-out .4s; transition: left .4s ease-in-out, top .4s ease-in-out .4s;
}
.item img { width: 300px; height: auto; }
.case-box { outline: #888 1px solid; padding-bottom: 72px; position: relative;
}
.case-box { -webkit-border-top-left-radius: 2px; -webkit-border-top-right-radius: 2px; -moz-border-radius-topleft: 2px; -moz-border-radius-topright: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px;
}
.case-description { overflow: hidden; padding: 10px; z-index: 1;
}
.case-options { height: 54px; width: 100%; background-color: #333; position: absolute; bottom: 0; font-size: 24px; letter-spacing: 0.06em; text-align: center; line-height: 54px; z-index: 5;
}
.case-options a { color: #f2f2f9; display: block; text-decoration: none;
}
.case-options a i { margin-left: 6px;
}
.case-country { height: 37px; width: 72px; background-color: #888; position: absolute; bottom: 48px; left: 102px; z-index: 10;
}
.case-country { background-image: url('http://bruxzir.jgallardo.me/assets/img/_test/cases/BooksFlagSprite.png'); background-repeat: no-repeat;
}
.country-china { background-position: -162px -138px; }
.country-ireland { background-position: 0 -92px; }
.country-uk { background-position: 0 0; }
.country-us { background-position: -81px 0; }
.country-canada { background-position: -243px 0; }
.country-india { background-position: -81px -92px; }
.country-finland { background-position: -324px -46px; }
.country-france { background-position: -405px 0; }
.country-germany { background-position: -162px 0; }
.country-korea-south { background-position: -81px -138px; }
.country-norway { background-position: -243px -46px; }
.country-spain { background-position: 0 -46px; }
.country-sweden { background-position: -486px -46px; }
@media only screen and (min-width: 35em) {
.ir { border:0; font: 0/0 a; text-shadow: none; color: transparent; background-color: transparent; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

Plane Blog - Masonry Demo - Script Codes JS Codes

$(document).ready(function() {	// Initialize Masonry	$('#gallery-content').masonry({	columnWidth: 320,	itemSelector: '.item',	isFitWidth: true,	isAnimated: !Modernizr.csstransitions	}).imagesLoaded(function() {	$(this).masonry('reload');	});
});
Plane Blog - Masonry Demo - Script Codes
Plane Blog - Masonry Demo - Script Codes
Home Page Home
Developer Juan Gallardo
Username JGallardo
Uploaded August 18, 2022
Rating 3
Size 5,347 Kb
Views 32,384
Do you need developer help for Plane Blog - Masonry Demo?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Juan Gallardo (JGallardo) Script Codes
Name
Saturn Grid System - Prototype1
BruxZir - Tablet - Home Page
Bruxzir - Sprite Practice
Foundation - Sample Header
Blog Concept 3
Blog Concept 1
International Sort
Template - iPad Air - Horizontal
Blog Concept 2
Blog Concept 4
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!