"material search layout"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/sred9/pen/wqxLEL?depth=everything&order=popularity&page=54&q=ionic&show_forks=false" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css'> <style class="cp-pen-styles"></style></head><body> <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/> <title>CODELINE</title> <!-- CSS --> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="../../dist/css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection"/> <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/> </head> <body> <div class="container"> <br><br><br> </div> <div class="section no-pad-bot" id="index-banner"> <div class="container"> <br><br> <h1 class="header center pink-text text-lighten-3">CODELINE</h1> <div class="row center"> <h5 class="header col s12 light grey-text text-lighten-1">search the best available tutorials on the internet</h5> </div> </div> </div> <div class="container"> <div class="row"> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <i class="material-icons prefix">search</i> <input type="text" id="autocomplete-input" class="autocomplete"> <label for="autocomplete-input">search the best</label> </div> </div> </div> </div> </div> <!-- <div class="container"> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> --> <div class="container"> <div class="row"> <div class="col s4"> <span class="counter pull-right"></span> <table class="table table-hover table-bordered results centered highlight responsive-table"> <thead> <tr> <th class="col-l-6">Name</th> </tr> <tr class="warning no-result"> <td colspan="4"><i class="fa fa-warning"></i> No result</td> </tr> </thead> <tbody> <tr> <td>Java</td> </tr> <tr> <td>Nodejs</td> </tr> <tr> <td>C#</td> </tr> <tr> <td>.NET</td> </tr> </tbody> </table> </div> <div class="col s4"> <span class="counter pull-right"></span> <table class="table table-hover table-bordered results centered highlight responsive-table"> <thead> <tr> <th class="col-l-6">Name</th> </tr> <tr class="warning no-result"> <td colspan="4"><i class="fa fa-warning"></i> No result</td> </tr> </thead> <tbody> <tr> <td>Angular.js</td> </tr> <tr> <td>Materialize</td> </tr> <tr> <td>React.js</td> </tr> <tr> <td>npm.js</td> </tr> </tbody> </table> </div> <div class="col s4"> <span class="counter pull-right"></span> <table class="table table-hover table-bordered results centered highlight responsive-table"> <thead> <tr> <th class="col-l-6">Name</th> </tr> <tr class="warning no-result"> <td colspan="4"><i class="fa fa-warning"></i> No result</td> </tr> </thead> <tbody> <tr> <td>bootstrap</td> </tr> <tr> <td>Software Developer</td> </tr> <tr> <td>Purchasing</td> </tr> <tr> <td>Sales</td> </tr> </tbody> </table> </div> </div> <div class="" data-category="transition"> <div class="row"> <div class="col s4"> <ul class="collection results"> <li class="collection-item">c</li> <li class="collection-item">.net</li> <li class="collection-item">java</li> <li class="collection-item">npm.js/li> </ul> </div> <div class="col s4"> <ul class="collection "> <li class="collection-item">aws</li> <li class="collection-item">seo</li> <li class="collection-item">materialize</li> <li class="collection-item">chaosmonkey</li> </ul> </div> <div class="col s4"> <ul class="collection "> <li class="collection-item">angular.js</li> <li class="collection-item">mdl-lite</li> <li class="collection-item">azure</li> <li class="collection-item">azure</li> </ul> </div> </div> </div> </div> <div class="container"> <br><br><br><br> </div> <footer class="blue-grey darken-2 "> <div class="container"> <div class="row"> <div class="col l6 s12"> <h5 class="white-text">Company Bio</h5> <p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p> </div> <div class="col l3 s12"> <h5 class="white-text">Settings</h5> <ul> <li><a class="white-text" href="#!">Link 1</a></li> <li><a class="white-text" href="#!">Link 2</a></li> <li><a class="white-text" href="#!">Link 3</a></li> <li><a class="white-text" href="#!">Link 4</a></li> </ul> </div> <div class="col l3 s12"> <h5 class="white-text">Connect</h5> <ul> <li><a class="white-text" href="#!">Link 1</a></li> <li><a class="white-text" href="#!">Link 2</a></li> <li><a class="white-text" href="#!">Link 3</a></li> <li><a class="white-text" href="#!">Link 4</a></li> </ul> </div> </div> </div> <div class="footer-copyright"> <div class="container"> Made by <a class="orange-text text-lighten-3" href="http://materializecss.com">Materialize</a> </div> </div> </footer> <!-- Scripts--> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="../../bin/materialize.js"></script> <script src="js/init.js"></script> </body> </html> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js'></script> <script > $(function() { $('input.autocomplete').autocomplete({ data: { "Android Development": null, "Apache Spark": null, "ASP.NET": null, "AWS": null, "C": null, "CakePHP": null, "Clojure": null, "CouchDB": null, "Data Science": null, "Django": null, "Elasticsearch": null, "Elm": null, "Express": null, "Flask": null, "Google Analytics": null, "GraphQL": null, "Gulp": null, "HTML 5": null, "Intro to Programming": null, "Java": null, "Jenkins": null, "Kotlin": null, "Latex": null, "Lisp": null, "MATLAB": null, "MySQL": null, "Perl": null, "Polymer": null, "Python": null, "React": null, "Regular Expressions": null, "Rust": null, "Scala": null, "Sketch": null, "SQL": null, "Unity": null, "Unity": null, "Vim": null, "WebGL": null, "Windows Server Administration": null, "Angular": null, "Assembly Language": null, "Bacbone.js": null, "C#": null, "Cassandra": null, "CoffeeScript": null, "CSS": null, "Data Structures": null, "Algorithms": null, "Docker": null, "Electron": null, "Emacs": null, "F#": null, "Git": null, "Google Cloud Platform": null, "Groovy": null, "Hadoop": null, "Illustrator": null, "Ionic": null, "Javascript": null, "jQuery": null, "Kubernetes": null, "LESS": null, "Lua": null, "Meteor.js": null, "Nginx": null, "Photoshop": null, "Prolog": null, "R": null, "React Native": null, "Ruby": null, "SAP ABAP": null, "SEO": null, "Smalltalk": null, "SQL Server": null, "Unreal Engine": null, "Visual Basic": null, "Webpack": null, "Wordpress": null, "Blogger": null, "Ansible": null, "Joomla": null, "Drupal": null, "Bootstrap": null, "AWK": null, "C++": null, "Chef": null, "CompTIA Certification": null, "D3.js": null, "Design Patterns": null, "ECMAScript": null, "Elixir": null, "Erlang": null, "Firebase": null, "Go": null, "Grails": null, "Growth Hacking": null, "Haskell": null, "Information Security & Hacking": null, "iOS and Swift": null, "Java Spring Framework": null, "Julia": null, "Laravel": null, "Linux System Administration": null, "Machine Learning": null, "MongoDB": null, "Node.js": null, "PHP": null, "Puppet": null, "Raspberry Pi": null, "Redis": null, "Ruby on Rails": null, "Sass": null, "Sinatra": null, "Socket.io": null, "TypeScript": null, "Vagrant": null, "Vue.js": null, "Website Performance": null, "Yii": null, "Google": 'https://placehold.it/250x250' }, limit: 7, // The max amount of results that can be shown at once. Default: Infinity. onAutocomplete: function(val) { // Callback function when value is autcompleted. }, minLength: 1, // The minimum length of the input for the autocomplete to start. Default: 1. }); }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: