<!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Blueprint: Responsive Icon Grid</title> <meta name="description" content="Blueprint: Responsive Icon Grid" /> <meta name="keywords" content="icon grid, hover, responsive, portfolio, template" /> <meta name="author" content="Codrops" /> <link rel="shortcut icon" href="../favicon.ico"> <link rel="stylesheet" type="text/css" href="css/default.css" /> <link rel="stylesheet" type="text/css" href="css/component.css" /> <script src="js/modernizr.custom.js"></script> </head> <body> <div class="container"> <header class="clearfix"> <span>Blueprint <span class="bp-icon bp-icon-about" data-content="The Blueprints are a collection of basic and minimal website concepts, components, plugins and layouts with minimal style for easy adaption and usage, or simply for inspiration."></span></span> <h1>Responsive Icon Grid</h1> <nav> <a href="https://github.com/AbhishekGhosh/ResponsiveIconGrid/edit/master/index.html" class="bp-icon bp-icon-prev" data-info="previous Blueprint"><span>Edit in Markdown</span></a> <!--a href="" class="bp-icon bp-icon-next" data-info="next Blueprint"><span>Next Blueprint</span></a--> <a href="https://rawgithub.com/AbhishekGhosh/ResponsiveIconGrid/master/index.html" class="bp-icon bp-icon-drop" data-info="back to the Codrops article"><span>Rawgithub loads this page</span></a> <a href="https://raw.github.com/AbhishekGhosh/ResponsiveIconGrid/master/index.html" class="bp-icon bp-icon-archive" data-info="Blueprints archive"><span>Raw.Github Opens the HTML Source</span></a> </nav> </header> <div class="main"> <ul class="cbp-ig-grid"> <li> <a href="#"> <span class="cbp-ig-icon cbp-ig-icon-shoe"></span> <h3 class="cbp-ig-title">Squid voluptate</h3> <span class="cbp-ig-category">Fashion</span> </a> </li> <li> <a href="#"> <span class="cbp-ig-icon cbp-ig-icon-ribbon"></span> <h3 class="cbp-ig-title">Mixtape lo-fi</h3> <span class="cbp-ig-category">Design</span> </a> </li> <li> <a href="#"> <span class="cbp-ig-icon cbp-ig-icon-milk"></span> <h3 class="cbp-ig-title">Cosby sweater</h3> <span class="cbp-ig-category">Lifestyle</span> </a> </li> <li> <a href="#"> <span class="cbp-ig-icon cbp-ig-icon-whippy"></span> <h3 class="cbp-ig-title">Commodo</h3> <span class="cbp-ig-category">Food</span> </a> </li> <li> <a href="#"> <span class="cbp-ig-icon cbp-ig-icon-spectacles"></span> <h3 class="cbp-ig-title">Bitters kitsch</h3> <span class="cbp-ig-category">Gadgets</span> </a> </li> <li> <a href="#"> <span class="cbp-ig-icon cbp-ig-icon-doumbek"></span> <h3 class="cbp-ig-title">Austin proident</h3> <span class="cbp-ig-category">Music</span> </a> </li> </ul> </div> </div> </body> </html>