Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <h2 class="h2">Collection of curated</h2>
<h1 class="h1">(Web & Graphic) (Design & Development) (Tools & Assets)</h1>
<h4 class="h4">(Mostly free)</h4>

<div class="filters">

  <h3 class="h3">Category</h3>
  <div class="ui-group">
    <div class="button-group js-radio-button-group" data-filter-group="maincat">
      <button class="button is-checked" data-filter="">all</button>
      <button class="button" data-filter=".web">Web Design/Development</button>
      <button class="button" data-filter=".graphic">Graphic Design</button>
    </div>
  </div>

 <h3 class="h3">Subject</h3>
  <div class="ui-group">
    <div class="button-group js-radio-button-group" data-filter-group="subject">
      <button class="button is-checked" data-filter="">any</button>
      <button class="button" data-filter=".typography">Typography</button>
      <button class="button" data-filter=".stocks">Assets</button>
      <button class="button" data-filter=".colours">Colours</button>
      <button class="button" data-filter=".uxui">UX/UI</button>
      <button class="button" data-filter=".animation">Animation</button>
      <button class="button" data-filter=".cssjava">CSS/Javas.</button>
      <button class="button" data-filter=".flexbox">Flexbox</button>
      <button class="button" data-filter=".cssgrid">Grid</button>
      <button class="button" data-filter=".logo">Logo</button>
      <button class="button" data-filter=".cms">CMS</button>
      <button class="button" data-filter=".education">Education</button>
      <button class="button" data-filter=".inspiration">Inspiration</button>
      <button class="button" data-filter=".other">Other</button>
    </div>
  </div>



</div>

<div class="grid">
  
  
  <a href="https://retool.com/utilities/" target="_blank"><div class="element-item web stocks cssjava">
    <p class="logo"><img src="https://retool.com/favicon.png" alt="icon" /></p>
    <h3 class="name">Retool Utilities</h3>
    <p class="subtitle">Variety of small tools for developers.</p>
    <p class="desc"></p>
  </div></a>
  
  
  <a href="http://brandcolors.net" target="_blank"><div class="element-item web graphic colours">
    <p class="logo"><img src="http://brandcolors.net/assets/favicons/favicon.ico" alt="icon"/></p>
    <h3 class="name">BrandColors</h3>
    <p class="subtitle">The biggest collection of official brand color codes around</p>
    <p class="desc">Curated by @brandcolors and friends.</p>
  </div></a>
  
  
 <a href="https://mantine.dev" target="_blank"><div class="element-item web cssjava other">
    <p class="logo"><img src="https://mantine.dev/favicon.svg?v=c7bf473b30e5d81722ea0acf3a11a107" alt="icon"/></p>
    <h3 class="name">Mantine</h3>
    <p class="subtitle">REACT Components and Hooks library</p>
    <p class="desc">Mantine is a MIT licensed open source react components and hooks library with focus on usability, accessibility and developer experience.</p>
  </div></a> 
  
  
  <a href="https://markodenic.com/html-tips/" target="_blank"><div class="element-item web cssjava other">
    <p class="logo"><img src="https://markodenic.com/wp-content/themes/blog/favicon/favicon-32x32.png" alt="icon"/></p>
    <h3 class="name">HTML Tips</h3>
    <p class="subtitle">useful HTML tips</p>
    <p class="desc">some might even surprise you.</p>
  </div></a>
  
  
  <a href="https://www.euismod.dev" target="_blank"><div class="element-item web cssgrid">
    <p class="logo">N/A</p>
    <h3 class="name">euismod</h3>
    <p class="subtitle">Anyone Can Learn CSS Grid</p>
    <p class="desc">The point of this website is to help people learn CSS grid in an interactive fashion.</p>
  </div></a>
  
  <a href="https://natto.dev/" target="_blank"><div class="element-item web stocks cssjava">
    <p class="logo"><img src="https://natto.dev/favicon.png" alt=""/></p>
    <h3 class="name">Natto.dev</h3>
    <p class="subtitle">A canvas for JavaScript.</p>
    <p class="desc"></p>
  </div></a>
  
  <a href="https://chartscss.org/" target="_blank"><div class="element-item web cssjava other">
    <p class="logo"><img src="https://chartscss.org/assets/img/logo.svg" alt=""></p>
    <h3 class="name">Charts.css</h3>
    <p class="subtitle">CSS data visualization framework</p>
    <p class="desc">Charts.css is a modern CSS framework. It uses CSS utility classes to style HTML elements as charts.</p>
  </div></a>
  
  
  <a href="https://webdesign.tutsplus.com/tutorials/animate-on-scroll-with-javascript--cms-36671" target="_blank"><div class="element-item web cssjava other">
    <p class="logo">N/A</p>
    <h3 class="name">Vanilla Animate on Scroll</h3>
    <p class="subtitle">Tutorial</p>
    <p class="desc">sample code and explanation on how to build your own On Scroll animations with vanilla JS. </p>
  </div></a> 
  
  <a href="https://github.com/krishdevdb/reseter.css#why-use-resetercss-must-read" target="_blank"><div class="element-item web stocks cssjava">
    <p class="logo">N/A</p>
    <h3 class="name">Reseter.css</h3>
    <p class="subtitle">CSS reset and normalizer</p>
    <p class="desc">Reseter.css resets all the premade styles by the browser. Normalizes the browser's stylesheet. Removes most browser inconsistencies. Makes 90% styles be inherited by the parent. And much more...</p>
  </div></a>
  
<a href="https://www.tusk.page/" target="_blank"><div class="element-item web graphic other">
    <p class="logo"><img src="https://about.tusk.page/favicon.ico" /></p>
    <h3 class="name">tusk</h3>
    <p class="subtitle">(thought you should know)</p>
    <p class="desc">Simple, convenient way for people to give and receive anonymous feedback.</p>
  </div></a>
  
<a href="https://httpbin.org/" target="_blank"><div class="element-item web stocks cssjava">
    <p class="logo"><img src="https://httpbin.org/static/favicon.ico" /></p>
    <h3 class="name">httpbin.org</h3>
    <p class="subtitle">A simple HTTP Request & Response Service</p>
    <p class="desc"></p>
  </div></a>    

  
<a href="https://deskreen.com/" target="_blank"><div class="element-item web stocks other">
    <p class="logo">N/A</p>
    <h3 class="name">Deskreen</h3>
    <p class="subtitle">Turn any device into a secondary screen for your computer</p>
    <p class="desc">Use any device with a web browser as a second screen for your computer.</p>
  </div></a>
  
  
  
<a href="https://urlcast.io/" target="_blank"><div class="element-item web stocks cssjava other">
    <p class="logo"><img src="https://urlcast.io/favicon.ico"></p>
    <h3 class="name">URLcast.io</h3>
    <p class="subtitle">The URL shortetner and scheduler</p>
    <p class="desc">Enter a link here to any web resource to get a new one that you can schedule to be released at a time of your choice and share it to keep your audience engaged.</p>
  </div></a>
  
  
<a href="https://omatsuri.app/" target="_blank"><div class="element-item graphic web stocks">
    <p class="logo"><img src="https://omatsuri.app/assets/favicon.ico" alt=""></p>
    <h3 class="name">Omatsuri</h3>
    <p class="subtitle">Open source browser tools for everyday use.</p>
    <p class="desc"></p>
  </div></a>  
  
  
<a href="https://moderncss.dev/complete-guide-to-centering-in-css/" target="_blank"><div class="element-item web cssjava other">
    <p class="logo"><img src="https://moderncss.dev/favicon.png" alt=""></p>
    <h3 class="name">The Complete Guide to Centering in CSS</h3>
    <p class="subtitle"></p>
    <p class="desc">Get ready to learn how to approach the age old question faced by many a CSS practitioner:
"How do I center a div?"</p>
  </div></a>

  
<a href="https://www.svgwaves.io/" target="_blank"><div class="element-item graphic web stocks">
    <p class="logo"><img src="https://th.bing.com/th/id/Rd06bf0d6785f5422797f6f4cf2bea58c?rik=M32WEIdqKFkUFw&riu=http%3a%2f%2fprimusdatabase.com%2fimages%2f0%2f09%2fWaveIcon.png&ehk=KBkE1v0Qyn0B2nVxPVla3Kh2h8loCq2%2b5bE4%2f4OXH8U%3d&risl=&pid=ImgRaw" alt=""></p>
    <h3 class="name">svgwaves.io</h3>
    <p class="subtitle">Simple and user-friendly SVG background waves generator</p>
    <p class="desc"></p>
  </div></a> 
  
  
<a href="https://facet.ai/" target="_blank"><div class="element-item graphic web stocks other">
    <p class="logo"><img src="https://facet.ai/favicon.ico" alt=""></p>
    <h3 class="name">Facet AI</h3>
    <p class="subtitle">Content-aware image editing right in your browser</p>
    <p class="desc"></p>
  </div></a>
  
  
  
<a href="https://github.com/public-apis/public-apis" target="_blank"><div class="element-item web stocks cssjava">
    <p class="logo">N/A</p>
    <h3 class="name">Public APIs</h3>
    <p class="subtitle">A collective list of free APIs for use in software and web development.</p>
    <p class="desc"></p>
  </div></a>
  
  
<a href="https://tabpanelwidget.com" target="_blank"><div class="element-item web stocks uxui cssjava">
    <p class="logo"><img src="https://tabpanelwidget.com/favicon-32x32.a6f4bdb8.png" alt=""></p>
    <h3 class="name">TABPANEL Widget</h3>
    <p class="subtitle">From posh, to TABPANEL, to ACCORDION, & vice-versa</p>
    <p class="desc"></p>
  </div></a>
  
  
<a href="https://www.npmjs.com/package/faker" target="_blank"><div class="element-item web cssjava other">
    <p class="logo">N/A</p>
    <h3 class="name">faker.js</h3>
    <p class="subtitle">generate massive amounts of fake data</p>
    <p class="desc">in the browser and node.js</p>
  </div></a>  
  
  
<a href="https://generator.ws/" target="_blank"><div class="element-item web stocks uxui cssjava">
    <p class="logo"><img src="https://generator.ws/wp-content/uploads/2020/12/cropped-24b3206d-e1c5-426f-9c45-83ca5abd81cb-5-192x192.png" alt=""></p>
    <h3 class="name">Bootstrap 5 Generator</h3>
    <p class="subtitle">Build fast, responsive B5 sites</p>
    <p class="desc"> browser-based drag and drop Bootstrap theme builder with powerful possibilities.</p>
  </div></a>
  
  
<a href="https://codepen.io/stoumann/pen/abZxoOM" target="_blank"><div class="element-item web uxui cssjava other">
    <p class="logo">N/A</p>
    <h3 class="name">CSS clip-path Editor</h3>
    <p class="subtitle">Interactive CSS clip-path Editor</p>
    <p class="desc"></p>
  </div></a> 
  

  
<a href="https://revealjs.com/" target="_blank"><div class="element-item web cssjava other">
    <p class="logo"><img src="https://revealjs.com/images/favicon.svg" alt=""></p>
    <h3 class="name">reveal.js</h3>
    <p class="subtitle">The HTML Presentation Framework</p>
    <p class="desc">open source HTML presentation framework. It's a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free.</p>
  </div></a>   
  
  
  
  
 <a href="https://thenounproject.com/" target="_blank"><div class="element-item graphic web stocks">
    <p class="logo"><img src="https://static.production.thenounproject.com/img/favicons/favicon-32x32.015f779a87e7.png" alt=""></p>
    <h3 class="name">Noun Project</h3>
    <p class="subtitle">Icons and Photos For Everything</p>
    <p class="desc">Search over 3 million icons.</p>
  </div></a> 
  
  
  
<a href="https://hotpot.ai/restore-picture" target="_blank"><div class="element-item graphic web stocks other">
    <p class="logo"><img src="https://hotpot.ai/images/apple-touch-icon.png" alt=""></p>
    <h3 class="name">AI Picture Restorer Beta</h3>
    <p class="subtitle">Restore pictures with AI in seconds</p>
    <p class="desc">remove scratches, sharpen colors, and enhance faces</p>
  </div></a>
  

<a href="https://baseline.is/beta" target="_blank"><div class="element-item web graphics logo cssjava other">
    <p class="logo"><img src="https://baseline.is/statics/icons/baseline-icon.svg" alt=""></p>
    <h3 class="name">Brand Guide Generator</h3>
    <p class="subtitle">Create an extensive brand guide</p>
    <p class="desc">in a minute with our super simple brand guide creator.</p>
  </div></a>   
  
  
  
<a href="https://github.com/prabhuignoto/vue-float-menu" target="_blank"><div class="element-item web uxui cssjava other">
    <p class="logo">N/A</p>
    <h3 class="name">Float Menu (Vue)</h3>
    <p class="subtitle">Dragable, self-adjusting floating menu</p>
    <p class="desc">finds the optimal menu orientation depending on the position of the menu.</p>
  </div></a>    
  
  
  <a href="https://phosphoricons.com" target="_blank"><div class="element-item graphic web stocks">
    <p class="logo"><img src="https://phosphoricons.com/favicon.ico" alt=""></p>
    <h3 class="name">Phosphor Icons</h3>
    <p class="subtitle">3528 Flexible icons</p>
    <p class="desc">Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really.</p>
  </div></a>


<a href="https://github.com/knadh/dragmove.js" target="_blank"><div class="element-item web cssjava other">
    <p class="logo">N/A</p>
    <h3 class="name">dragmove.js</h3>
    <p class="subtitle">Javascript library to make DOM elements draggable and movable</p>
    <p class="desc">Has touch screen support. Zero dependencies and 500 bytes Gzipped</p>
  </div></a>  
  
  
<a href="https://www.calligrapher.ai" target="_blank"><div class="element-item graphic web stocks">
    <p class="logo">N/A</p>
    <h3 class="name">Calligrapher AI</h3>
    <p class="subtitle">Type your text, get AI handwriting</p>
    <p class="desc">download in svg</p>
  </div></a>
  

<a href="https://bootstrap.build/" target="_blank"><div class="element-item web stocks uxui cssjava">
    <p class="logo"><img src="https://bootstrap.build/favicon.png" alt=""></p>
    <h3 class="name">Bootstrap Build</h3>
    <p class="subtitle">Free Bootstrap Builder</p>
    <p class="desc"> Create Bootstrap 4 themes and templates. Start from scratch or reuse free featured designs.</p>
  </div></a>  
  
  
<a href="https://www.gethalfmoon.com/" target="_blank"><div class="element-item web stocks uxui cssjava">
    <p class="logo"><img src="https://www.gethalfmoon.com/static/halfmoon/img/halfmoon-fav-alt.png" alt=""></p>
    <h3 class="name">Halfmoon</h3>
    <p class="subtitle">Front-end framework with a built-in dark mode</p>
    <p class="desc"> and full customizability using CSS variables; great for building dashboards and tools</p>
  </div></a>
  

<a href="https://bgjar.com/" target="_blank"><div class="element-item graphic web stocks">
    <p class="logo"><img src="https://bgjar.com/bgjar-100x100.png" alt=""></p>
    <h3 class="name">BGJar</h3>
    <p class="subtitle">Free svg background generator</p>
    <p class="desc">for your websites, blogs and app</p>
  </div></a>
  
  
 <a href="https://www.anyfiddle.com/" target="_blank"><div class="element-item web other">
    <p class="logo"><img src="https://www.anyfiddle.com/favicon.ico" alt=""></p>
    <h3 class="name">Anyfiddle</h3>
    <p class="subtitle">Any language code playground</p>
    <p class="desc">Build, run and share code in seconds with our free editor. No setup required.</p>
  </div></a>
  
  
  
  <a href="https://the-webdesigner.co/seo-for-web-designers/" target="_blank"><div class="element-item web education other">
    <p class="logo"><img src="https://the-webdesigner.co/wp-content/uploads/2020/05/twd.png" alt=""></p>
    <h3 class="name">23 SEO Tips </h3>
    <p class="subtitle">All Web Designers Should Know in 2020</p>
    <p class="desc"></p>
  </div></a>  
  
  
  <a href="https://wweb.dev/resources/navigation-generator" target="_blank"><div class="element-item web stocks uxui cssjava">
    <p class="logo"><img src="https://wweb.dev/favicon.ico" alt=""></p>
    <h3 class="name">Responsive menu generator</h3>
    <p class="subtitle">Simple responsive navs generator</p>
    <p class="desc">Build quickly your responsive menu</p>
  </div></a>
  
  
  <a href="https://www.oneword.domains/" target="_blank"><div class="element-item web other">
    <p class="logo"><img src="https://www.oneword.domains/static/assets/logo.svg" alt=""></p>
    <h3 class="name">One word domains</h3>
    <p class="subtitle">A collection of available one-word domains</p>
    <p class="desc"></p>
  </div></a>
  
  
  <a href="https://1linelayouts.glitch.me/" target="_blank"><div class="element-item web cssjava other">
    <p class="logo">N/A</p>
    <h3 class="name">1-Line Layouts</h3>
    <p class="subtitle">10 Modern CSS layout and sizing techniques</p>
    <p class="desc">that highlight just how robust and impactful a single-line of styling code can be.</p>
  </div></a>
  
  
  <a href="https://1loc.dev/" target="_blank"><div class="element-item web cssjava other">
    <p class="logo">N/A</p>
    <h3 class="name">JS Utilities</h3>
    <p class="subtitle">in single line of code</p>
    <p class="desc">Favorite JavaScript utilities
in single line of code! No more!</p>
  </div></a>
  
  
  <a href="https://www.textfixer.com/" target="_blank"><div class="element-item graphic web typography cssjava other">
    <p class="logo"><img src="https://www.textfixer.com/favicon.png" alt=""></p>
    <h3 class="name">Text Fixer</h3>
    <p class="subtitle">collection of free online tools
for web coding and text conversion</p>
    <p class="desc">Free Online Tools for Generating Random Words, Converting Word to HTML, and more Web Goodness.</p>
  </div></a>
  
  
  <a href="https://html-cleaner.com/" target="_blank"><div class="element-item graphic web typography cssjava other">
    <p class="logo"><img src="https://html-cleaner.com/favicon.ico" alt=""></p>
    <h3 class="name">HTML Cleaner</h3>
    <p class="subtitle">HTML/CSS/JavaScrip Cleaner and much more</p>
    <p class="desc">Amazing tool for any designer and developer.</p>
  </div></a>
  
  
  
  <a href="https://fonts.google.com/" target="_blank"><div class="element-item graphic web typography">
    <p class="logo"><img src="https://www.gstatic.com/images/branding/product/1x/google_fonts_ios_76dp.png" alt=""></p>
    <h3 class="name">Google Fonts</h3>
    <p class="subtitle">Best free fonts foundry and more</p>
    <p class="desc">By using our extensive catalog, you can share and integrate typography into any design project seamlessly—no matter where you are in the world.</p>
  </div></a>
  
  <a href="http://fontjoy.com/" target="_blank"><div class="element-item graphic web typography">
    <p class="logo"><img src="http://fontjoy.com/favicon32.gif" alt=""></p>
    <h3 class="name">Fontjoy</h3>
    <p class="subtitle">Font pairing made simple</p>
    <p class="desc">Easy to use tool to sample different font pairings with customization and similar fonts showcase.</p>
  </div></a>
  
  
  
  <a href="https://www.websiteplanet.com/blog/best-free-fonts/" target="_blank"><div class="element-item graphic web typography">
    <p class="logo"><img src="https://dt2sdf0db8zob.cloudfront.net/wp-content/themes/websiteplanet/img/favicons/favicon-32x32.png?v=1" alt=""></p>
    <h3 class="name">70+ Best Free Fonts</h3>
    <p class="subtitle">Free for Commercial Use in 2019</p>
    <p class="desc">70+ fonts that offer free licenses for commercial (and personal) use.</p>
  </div></a>
  
  
  
  <a href="https://www.mixfont.com/" target="_blank"><div class="element-item graphic web typography">
    <p class="logo"><img src="https://www.mixfont.com/static/media/logo.99b66e98.png" alt=""></p>
    <h3 class="name">Mixfont</h3>
    <p class="subtitle">Mixfont is a fun and simple way to discover and visualize new fonts</p>
    <p class="desc">Easy to use tool to sample different font pairings with customization.</p>
  </div></a>
  
  
  <a href="https://indestructibletype.com/Jost.html" target="_blank"><div class="element-item graphic web typography">
    <p class="logo"><img src="https://indestructibletype.com/assets/Favicon.png" alt=""></p>
    <h3 class="name">Jost</h3>
    <p class="subtitle">Variable Futura font</p>
    <p class="desc">Jost aims to keep the attitude of Futura rather than the exact design.</p>
  </div></a>
  
  
  <a href="https://www.boldwebdesign.com.au/font-combinations-for-web-designers.html" target="_blank"><div class="element-item graphic web typography">
    <p class="logo"><img src="https://www.boldwebdesign.com.au/images/favicon.png" alt=""></p>
    <h3 class="name">Font Combinations</h3>
    <p class="subtitle">Font combinations for web designers.</p>
    <p class="desc">A collection of font pairings.</p>
  </div></a>
  
  
  <a href="https://www.myfonts.com/" target="_blank"><div class="element-item graphic web typography">
    <p class="logo"><img src="https://cdn.myfonts.net/s/images/icons/apple-touch-icon-57x57.png" alt=""></p>
    <h3 class="name">My Fonts</h3>
    <p class="subtitle">A commercial font distributor</p>
    <p class="desc">Simple and easy to navigate commercial font foundry.</p>
  </div></a>
  
  
  <a href="http://www.identifont.com/" target="_blank"><div class="element-item graphic web typography">
    <p class="logo"><img src="http://www.identifont.com/images/icon-72.png" alt=""></p>
    <h3 class="name">Identifont</h3>
    <p class="subtitle">Identify your font</p>
    <p class="desc">Provides a range of features to help you locate fonts or find information about fonts.</p>
  </div></a> 
  
  
 <a href="https://tablericons.com/" target="_blank"><div class="element-item graphic web stocks">
    <p class="logo"><img src="https://tablericons.com/favicon.png" alt=""></p>
    <h3 class="name">Tabler Icons</h3>
    <p class="subtitle">558 Fully customizable SVG icons</p>
    <p class="desc"></p>
  </div></a>

  
  <a href="https://www.freepik.com/" target="_blank"><div class="element-item graphic web stocks">
    <p class="logo"><img src="https://freepik.cdnpk.net/img/favicons/favicon.ico?v=2018082101" alt=""></p>
    <h3 class="name">Freepik</h3>
    <p class="subtitle">Graphic resources for everyone</p>
    <p class="desc">Find Free Vectors, Stock Photos, PSD and Icons.</p>
  </div></a>
  
  
  <a href="http://shrsl.com/17m3a-1tj1-rsto" target="_blank"><div class="element-item web cssjava animation stocks other">
    <p class="logo"><img src="https://static.nicepage.com/images/site/nicepage.jpg" alt=""></p>
    <h3 class="name">Nicepage</h3>
    <p class="subtitle">Website builder in your browser</p>
    <p class="desc">Nicepage is the new powerful and easy-to-use builder for HTML5, Joomla, WordPress websites, blogs and themes.</p>
  </div></a>
  
  
  <a href="https://burst.shopify.com/" target="_blank"><div class="element-item graphic web stocks">
    <p class="logo"><img src="https://burst.shopify.com/assets/global/favicon-ab7018e1fe708a49edcfecce3166032fbeeb1fd7ba4a078c366de344d32ee193.png" alt=""></p>
    <h3 class="name">Burst</h3>
    <p class="subtitle">Free stock photos</p>
    <p class="desc">Free stock photos catalogue.</p>
  </div></a>
  
  
  <a href="https://unsplash.com/" target="_blank"><div class="element-item graphic web stocks">
    <p class="logo"><img src="https://unsplash.com/favicon.ico" alt=""></p>
    <h3 class="name">Unsplash</h3>
    <p class="subtitle">Free stock photos</p>
    <p class="desc">Free stock photos catalogue.</p>
  </div></a>
  
  
  
  <a href="https://photos.icons8.com/" target="_blank"><div class="element-item graphic web stocks">
    <p class="logo"><img src="https://photos.icons8.com/photos/static/img/moose_favicon-2.ico?v=1" alt=""></p>
    <h3 class="name">Moose</h3>
    <p class="subtitle">Free stock photos</p>
    <p class="desc">Stock Photos Designed to Work Together — For Free.</p>
  </div></a>
  
  
  <a href="https://www.pexels.com/" target="_blank"><div class="element-item graphic web stocks">
    <p class="logo"><img src="https://www.pexels.com/favicon.ico" alt=""></p>
    <h3 class="name">Pexels</h3>
    <p class="subtitle">Free stock photos</p>
    <p class="desc">Free stock photos catalogue.</p>
  </div></a>
  
  
  
  <a href="https://freerangestock.com/" target="_blank"><div class="element-item graphic web stocks">
    <p class="logo">N/A</p>
    <h3 class="name">Freerange</h3>
    <p class="subtitle">Free stock photos</p>
    <p class="desc">Free stock photos catalogue.</p>
  </div></a>
  
  
  <a href="http://www.freedigitalphotos.net/" target="_blank"><div class="element-item graphic web stocks">
    <p class="logo"><img src="http://www.freedigitalphotos.net/favicon.ico" alt=""></p>
    <h3 class="name">FreeDigitalPhotos</h3>
    <p class="subtitle">Free stock photos</p>
    <p class="desc">Free stock photos catalogue.</p>
  </div></a>
  
  
  
  <a href="http://www.gettyimages.co.uk/resources/embed" target="_blank"><div class="element-item graphic web stocks">
    <p class="logo"><img src="http://www.gettyimages.co.uk/favicon.ico" alt=""></p>
    <h3 class="name">Getty Images</h3>
    <p class="subtitle">Free non-commercial stock photos</p>
    <p class="desc">For embedding.</p>
  </div></a>
  
   <a href="https://search.muz.li" target="_blank"><div class="element-item graphic web inspiration other">
    <p class="logo"><img src="https://search.muz.li/assets/images/favicon.png" alt=""></p>
    <h3 class="name">Muz.li</h3>
    <p class="subtitle">Search engine for design inspiration</p>
    <p class="desc">Search by color, keyword, or even just style.</p>
  </div></a>
  
  
  <a href="https://www.siteinspire.com/" target="_blank"><div class="element-item web inspiration">
    <p class="logo"><img src="https://www.siteinspire.com/favicon.png" alt=""></p>
    <h3 class="name">siteInspire</h3>
    <p class="subtitle">showcase of the finest web and interactive design</p>
    <p class="desc">Browse 7,234 sites by style, type, or subject, or just see the very best.</p>
  </div></a>
 
  
  <a href="https://www.stocklayouts.com" target="_blank"><div class="element-item graphic stocks inspiration">
    <p class="logo"><img src="https://www.stocklayouts.com/favicon.ico" alt=""></p>
    <h3 class="name">StockLayouts</h3>
    <p class="subtitle">Free Graphic Design Templates</p>
    <p class="desc">or for inspiration.</p>
  </div></a>
  
  
  <a href="https://github.com/kylewetton/image-compare-viewer" target="_blank"><div class="element-item web stocks uxui cssjava">
    <p class="logo">N/A</p>
    <h3 class="name">Image Compare / Viewer</h3>
    <p class="subtitle">Compare images with a slider</p>
    <p class="desc">A fully responsive slider to compare before and after images for grading, retouching and all else. Mobile and fluid container friendly!</p>
  </div></a>
  
  
  
  
  <a href="https://www.sendx.io/ultimate-free-email-template-collection" target="_blank"><div class="element-item web graphic stocks inspiration">
    <p class="logo"><img src="https://uploads-ssl.webflow.com/5b290660f63aa8f936b69161/5b39fcaaf68bd3fd4af8695f_favicon-32x32.png" alt=""></p>
    <h3 class="name">SendX</h3>
    <p class="subtitle">The Biggest Collection of Free Responsive Email Templates</p>
    <p class="desc">Search from over 1500+ responsive email templates or just click on the tags below to get the template you want.</p>
  </div></a>
  
  
  
  <a href="https://www.vectorportal.com/templates/" target="_blank"><div class="element-item graphic web stocks inspiration">
    <p class="logo"><img src="https://www.vectorportal.com/favicon.ico" alt=""></p>
    <h3 class="name">VectorPortal</h3>
    <p class="subtitle">Free vectors</p>
    <p class="desc">and templates.</p>
  </div></a>
  

<a href="https://google.github.io/styleguide/htmlcssguide.html" target="_blank"><div class="element-item graphic web css education">
    <p class="logo"><img src="https://www.google.com/favicon.ico" alt=""></p>
    <h3 class="name">Google HTML/CSS Style Guide</h3>
    <p class="subtitle">HTML and CSS style guide</p>
    <p class="desc">This document defines formatting and style rules for HTML and CSS.</p>
  </div></a>  
  
  
  <a href="https://www.onlinerockershub.com/best-seo-tools.html" target="_blank"><div class="element-item web education">
    <p class="logo"><img src="https://i1.wp.com/www.onlinerockershub.com/wp-content/uploads/2017/12/OnlineRockersHub-Circular-Logo-with-Transparent-Background-e1533959844367.png?fit=32%2C32&quality=90&strip=all&ssl=1" alt=""></p>
    <h3 class="name">10 Best SEO Tools</h3>
    <p class="subtitle">10 Best SEO Tools to boost your organic traffic in 2019</p>
    <p class="desc">Most of them are free ─ so don’t worry about breaking your budget.</p>
  </div></a>  
  
  <a href="https://courseduck.com/programming/javascript/awards.php" target="_blank"><div class="element-item web cssjava education">
    <p class="logo"><img src="https://courseduck.com/wp-content/themes/reviews/images/favicon.ico" alt=""></p>
    <h3 class="name">Course Duck</h3>
    <p class="subtitle">Collection of online programming courses</p>
    <p class="desc">CourseDuck is your one-stop shop for researching and comparing online courses.</p>
  </div></a> 
  
  
  <a href="http://jsbmorse.com/4-principles-of-great-logo-design/" target="_blank"><div class="element-item graphic web logo education">
    <p class="logo"><img src="http://ranqit.com/art/jsbm.ico" alt=""></p>
    <h3 class="name">Logo Design Article</h3>
    <p class="subtitle">4 Principles of Great Logo Design</p>
    <p class="desc">If you are a consumer or a marketer or a CEO of a company, you should be interested in what makes a great logo.</p>
  </div></a>
  
  
  
  
  <a href="https://adamsilver.io/articles/form-design-from-zero-to-hero-all-in-one-blog-post/" target="_blank"><div class="element-item  web education other">
    <p class="logo"><img src="https://adamsilver.io/favicon-32x32.png" alt=""></p>
    <h3 class="name">Form design</h3>
    <p class="subtitle">Best practices for the online form design</p>
    <p class="desc">From zero to hero all in one blog post.</p>
  </div></a>
  
  
  <a href="http://millo.co/tips-on-presenting-logos-to-a-client" target="_blank"><div class="element-item graphic web logo education">
    <p class="logo"><img src="http://millo.co/favicon.ico" alt=""></p>
    <h3 class="name">Logo Design Article</h3>
    <p class="subtitle">7 Tips on presenting logos to a client</p>
    <p class="desc">Logo presentation can be one of the most important pieces of the logo design process.</p>
  </div></a>
  
  
  <a href="http://www.zankrank.com/Ranqings/Default.aspx?currentRanqing=logos" target="_blank"><div class="element-item graphic web logo education inspiration">
    <p class="logo"><img src="http://www.zankrank.com/art/ranqit.ico" alt=""></p>
    <h3 class="name">Top 74 Logos</h3>
    <p class="subtitle">Original list by ZankRank</p>
    <p class="desc">good for education and inspiration.</p>
  </div></a>
  
  
  <a href="https://www.logolounge.com/" target="_blank"><div class="element-item graphic web logo inspiration">
    <p class="logo"><img src="https://www.logolounge.com/assets/favicons/apple-touch-icon-72x72.png" alt=""></p>
    <h3 class="name">logolounge</h3>
    <p class="subtitle">Logo catalogue</p>
    <p class="desc">Good for inspiration and education.</p>
  </div></a>
  
  
  <a href="https://jmattthew.github.io/better-font-finder/better-font-finder.html" target="_blank"><div class="element-item graphic web typography">
    <p class="logo">N/A</p>
    <h3 class="name">Better Font Finder</h3>
    <p class="subtitle">Find great Google Fonts</p>
    <p class="desc">Sselect font families by visual similarity.</p>
  </div></a>
  
  
  <a href="https://theultralinx.com/2015/04/best-google-web-font-combinations/" target="_blank"><div class="element-item graphic web typography inspiration">
    <p class="logo"><img src="https://theultralinx.com/favicon.ico" alt=""></p>
    <h3 class="name">Google Font Combinations</h3>
    <p class="subtitle">The Best Google Font Combinations</p>
    <p class="desc">Article about Google font combinations.</p>
  </div></a>
  
  
  <a href="https://designschool.canva.com/blog/the-ultimate-guide-to-font-pairing/" target="_blank"><div class="element-item graphic web typography education">
    <p class="logo"><img src="https://designschool.canva.com/wp-content/themes/canva/img/icons/apple-touch-icon-precomposed.png" alt=""></p>
    <h3 class="name">Font Pairing Guide</h3>
    <p class="subtitle">Canva’s Ultimate Guide to Font Pairing</p>
    <p class="desc">Article about proper font combinations.</p>
  </div></a>
  
  
  <a href="http://fontpair.co" target="_blank"><div class="element-item graphic web typography inspiration">
    <p class="logo"><img src="http://fontpair.co/img/card.jpg" alt=""></p>
    <h3 class="name">Font Pair</h3>
    <p class="subtitle">Font Pair helps designers pair Google Fonts together</p>
    <p class="desc">Tool to create font combinations.</p>
  </div></a>
  
  
  <a href="http://www.creativebloq.com/how-to/the-rules-of-responsive-web-typography" target="_blank"><div class="element-item web typography education">
    <p class="logo"><img src="http://www.creativebloq.com/20171103/apple-touch-icon.png" alt=""></p>
    <h3 class="name">Responsive web typography</h3>
    <p class="subtitle">Rules</p>
    <p class="desc">All the principles and systems you need to know to take the mystery out of responsive web typography.</p>
  </div></a>
  
  
  <a href="http://www.f37foundry.com" target="_blank"><div class="element-item graphic web typography inspiration">
    <p class="logo"><img src="http://www.f37foundry.com/favicon.ico" alt=""></p>
    <h3 class="name">F37 Foundry</h3>
    <p class="subtitle">Font foundry and more</p>
    <p class="desc">Use their Type Tester.</p>
  </div></a>
  
  
  <a href="https://www.froala.com/design-blocks" target="_blank"><div class="element-item web uxui inspiration">
    <p class="logo"><img src="https://cdn0.froala.com/assets/favicons/favicon-96x96-2d1ca0ffaf4ee21a924402184ebbef02.png" alt=""></p>
    <h3 class="name">Froala Design Blocks</h3>
    <p class="subtitle">Over 170 responsive design blocks</p>
    <p class="desc">All blocks are based on the Bootstrap Library, and they are the building blocks for beautiful websites.</p>
  </div></a>
  
  
  <a href="https://interfaces.pro/" target="_blank"><div class="element-item web uxui inspiration">
    <p class="logo"><img src="https://interfaces.pro/wp-content/themes/interfaces/pictures/apple-touch-icon.png" alt=""></p>
    <h3 class="name">Interfaces.pro</h3>
    <p class="subtitle">Collection of UI design examples</p>
    <p class="desc">Samples of various UI interfaces.</p>
  </div></a>
  
  
  <a href="https://bestwebsite.gallery/" target="_blank"><div class="element-item web inspiration">
    <p class="logo"><img src="https://bestwebsite.gallery/assets/images/bitmap/favicon/apple-touch-icon-72x72.png" alt=""></p>
    <h3 class="name">Best Website Gallery</h3>
    <p class="subtitle">Collection of website examples</p>
    <p class="desc">Samples of various websites.</p>
  </div></a>
  
  
  <a href="https://cssnectar.com/" target="_blank"><div class="element-item web inspiration">
    <p class="logo"><img src="https://i2.wp.com/cssnectar.com/wp-content/uploads/2016/04/favicon.png?fit=47%2C47&ssl=1" alt=""></p>
    <h3 class="name">CSSnectar</h3>
    <p class="subtitle">Inspirational websites</p>
    <p class="desc">Triple vetted websites.</p>
  </div></a>
  
  
  <a href="https://line25.com/inspiration/split-screen-website-designs" target="_blank"><div class="element-item web inspiration">
    <p class="logo"><img src="https://line25.com/favicon.ico" alt=""></p>
    <h3 class="name">20 Split Screen Website Designs</h3>
    <p class="subtitle">Collection of website examples</p>
    <p class="desc">Showcase of 20 split screen websites.</p>
  </div></a>
  
  
  <a href="https://www.themexpert.com/blog/top-free-psd-website-templates" target="_blank"><div class="element-item web inspiration stocks">
    <p class="logo"><img src="https://www.themexpert.com/favicon.ico" alt=""></p>
    <h3 class="name">Free PSD Website Templates</h3>
    <p class="subtitle">50 Free PSD Website Templates</p>
    <p class="desc">50+ Free PSD Website Templates For Corporate, Education, LMS, Blog Portfolio and Other Awesome Websites – 2017.</p>
  </div></a>
  
  
  <a href="https://dribbble.com/" target="_blank"><div class="element-item web inspiration stocks">
    <p class="logo"><img src="https://cdn.dribbble.com/assets/favicon-63b2904a073c89b52b19aa08cebc16a154bcf83fee8ecc6439968b1e6db569c7.ico" alt=""></p>
    <h3 class="name">Dribble</h3>
    <p class="subtitle">Design showcase</p>
    <p class="desc">Dribbble is a place to show and tell, promote, discover, and explore design.</p>
  </div></a>
  
  
  <a href="http://reallygoodemails.com/" target="_blank"><div class="element-item web inspiration">
    <p class="logo"><img src="http://reallygoodemails.com/wp-content/uploads/2014/10/apple-touch-icon-72x72.png" alt=""></p>
    <h3 class="name">Really Good Emails</h3>
    <p class="subtitle">Email design showcase</p>
    <p class="desc">Really Good Emails aims to be the best showcase of email design and resources on the web.</p>
  </div></a>
  
  
  <a href="http://niceportfol.io/" target="_blank"><div class="element-item web inspiration">
    <p class="logo"><img src="http://78.media.tumblr.com/avatar_2eb84f9fbf46_128.png" alt=""></p>
    <h3 class="name">nice portfolio</h3>
    <p class="subtitle">Portfolio design showcase</p>
    <p class="desc">The nicest design portfolios on the web.</p>
  </div></a>
  
  
  <a href="http://calltoidea.com/" target="_blank"><div class="element-item web inspiration">
    <p class="logo"><img src="http://calltoidea.com/application/images//apple-touch-icon.png" alt=""></p>
    <h3 class="name">CallToIdea</h3>
    <p class="subtitle">Web design elements</p>
    <p class="desc">Web design elements and solutions.</p>
  </div></a>
  
  
  <a href="http://www.lapa.ninja/" target="_blank"><div class="element-item web inspiration">
    <p class="logo"><img src="http://www.lapa.ninja/favicon.ico" alt=""></p>
    <h3 class="name">lapa</h3>
    <p class="subtitle">Landing page showcase</p>
    <p class="desc">Web design elements and solutions.</p>
  </div></a>
  
  
  <a href="https://jam-icons.com/" target="_blank"><div class="element-item web uxui stocks">
    <p class="logo"><img src="https://jam-icons.com/favicon.ico" alt=""></p>
    <h3 class="name">JAM</h3>
    <p class="subtitle">Handcrafted & pixel perfect icons</p>
    <p class="desc">Jam icons is a set of icons designed for web projects, illustrations, print projects, etc. Shipped in both font & svg versions.</p>
  </div></a>
  
  
  <a href="https://css3gen.com/" target="_blank"><div class="element-item web uxui cssjava">
    <p class="logo"><img src="https://css3gen.com/favicon.ico" alt=""></p>
    <h3 class="name">Easy CSS3 Generator</h3>
    <p class="subtitle">Visual CSS3 generator</p>
    <p class="desc">CSS3Gen allows you to easily generate useful snippets of CSS3 and copy them straight into your projects.</p>
  </div></a>
  
  
  
  <a href="http://giona.net/tools/css3-mediaquery-generator/" target="_blank"><div class="element-item web uxui cssjava">
    <p class="logo"><img src="http://giona.net/favicon.ico" alt=""></p>
    <h3 class="name">MediaQuery Generator</h3>
    <p class="subtitle">Visual MediaQuery generator</p>
    <p class="desc">Easy to use and test MediaQuery generator.</p>
  </div></a>
 
  
  <a href="https://web.dev" target="_blank"><div class="element-item web other">
    <p class="logo"><img src="https://www.gstatic.com/devrel-devsite/va3e6d7c495ae58d2f0c21ab1e6f48fa6e19121edf44f1cc6af04d15995811aa0/web/images/favicon@2x.png" alt=""></p>
    <h3 class="name">web.dev by Google</h3>
    <p class="subtitle">Test your site</p>
    <p class="desc">web.dev helps developers like you learn and apply the web's modern capabilities to your own sites and apps.</p>
  </div></a>
  
  
  <a href="https://www.htaccessredirect.net/" target="_blank"><div class="element-item web other">
    <p class="logo"><img src="https://www.htaccessredirect.net/favicon.ico" alt=""></p>
    <h3 class="name">.htaccess Generator</h3>
    <p class="subtitle">Easy to use .htaccess generator</p>
    <p class="desc">Easy to use generator with many options.</p>
  </div></a>
  
  
  <a href="http://the-echoplex.net/flexyboxes/" target="_blank"><div class="element-item web flexbox">
    <p class="logo">N/A</p>
    <h3 class="name">Flexy Boxes</h3>
    <p class="subtitle">flexbox playground and code generator</p>
    <p class="desc">Easy to use generator with many options.</p>
  </div></a>
  
  
  <a href="https://mozilladevelopers.github.io/playground/css-grid" target="_blank"><div class="element-item web cssgrid">
    <p class="logo"><img src="https://mozilladevelopers.github.io/playground/static/favicon.d4f1f46b.ico" alt=""></p>
    <h3 class="name">CSS Grid Playground</h3>
    <p class="subtitle">CSS Grid playground and dev tools</p>
    <p class="desc">CSS Grid Layout is completely changing the game for web design. Learn about CSS Grid Layout and the Firefox DevTools layout panel.</p>
  </div></a>
  
  
  <a href="https://www.creative-tim.com/product/now-ui-kit" target="_blank"><div class="element-item web uxui">
    <p class="logo"><img src="https://www.creative-tim.com/favicon.ico" alt=""></p>
    <h3 class="name">Now UI Kit</h3>
    <p class="subtitle">Free Bootstrap 4 UI kit</p>
    <p class="desc">Now UI Kit is a responsive Bootstrap 4 kit provided for free by Invision and Creative Tim. It is a beautiful cross-platform UI kit featuring over 50 elements and 3 templates.</p>
  </div></a>
  
  
  <a href="https://archetypeapp.com/" target="_blank"><div class="element-item web typography">
    <p class="logo"><img src="https://archetypeapp.com/favicon.ico" alt=""></p>
    <h3 class="name">archetype</h3>
    <p class="subtitle">Easy web typography code generator</p>
    <p class="desc">Archetype lets designers like you very quickly and easily create consistent typography styling and spacing live, in the browser.</p>
  </div></a>
  
  
  
  <a href="https://hello.webwide.io" target="_blank"><div class="element-item web other">
    <p class="logo"><img src="https://hello.webwide.io/assets/images/favicon.png" alt=""></p>
    <h3 class="name">Webwide
</h3>
    <p class="subtitle">Community for web designers, developers and makers</p>
    <p class="desc">The inclusive discussion community for web designers, developers and makers.</p>
  </div></a>
  
  
  <a href="https://ackee.electerious.com/" target="_blank"><div class="element-item web other">
    <p class="logo"><img src="https://ackee.electerious.com/assets/images/favicon.ico" alt=""></p>
    <h3 class="name">Ackee
</h3>
    <p class="subtitle">Track without being tracked</p>
    <p class="desc">Self-hosted, Node.js based analytics tool for those who care about privacy.</p>
  </div></a>
  
  
  
  
  
  <a href="https://medium.com/@islanderua/browser-games-for-designers-aa496c4e710c" target="_blank"><div class="element-item web other">
    <p class="logo"><img src="https://cdn-static-1.medium.com/_/fp/icons/favicon-rebrand-medium.3Y6xpZ-0FSdWDnPM3hSBIA.ico" alt=""></p>
    <h3 class="name">games for designers</h3>
    <p class="subtitle">Browser games for designers</p>
    <p class="desc">A list of 8 ducational browser games from my bookmarks for the people who like structuring and accuracy.</p>
  </div></a>
  
  
  
  
  
  <a href="https://invoicetemplate.co/" target="_blank"><div class="element-item web other">
    <p class="logo"><img src="https://invoicetemplate.co/assets/favicon-32x32-e9a0a2794be2d7ee9738517e14557f6b56b7a5568bbc4a6e54074f7e83b00f0d.png" alt=""></p>
    <h3 class="name">invoicetemplate</h3>
    <p class="subtitle">Create invoices fast and free</p>
    <p class="desc">Easy invoicing on any platform.</p>
  </div></a>
  
  
  <a href="https://icons8.com/c/animated-icons" target="_blank"><div class="element-item web uxui stocks animation">
    <p class="logo"><img src="https://maxst.icons8.com/favicon.ico" alt=""></p>
    <h3 class="name">Icons8</h3>
    <p class="subtitle">60k flat icons + 60 Free Animated Icons</p>
    <p class="desc">Huge collections of flat and animated icons.</p>
  </div></a>
  
  
   <a href="https://motionicons.com" target="_blank"><div class="element-item web uxui stocks animation">
    <p class="logo"><img src="https://motionicons.com/favicon.ico" alt=""></p>
    <h3 class="name">Motion Icons</h3>
    <p class="subtitle">Beautiful, animated SVG icons</p>
    <p class="desc">Collection of flat and animated icons.</p>
  </div></a>
  
  
  
  
  <a href="https://thenounproject.com" target="_blank"><div class="element-item web uxui stocks animation">
    <p class="logo"><img src="https://static.production.thenounproject.com/img/nounproject_logo.60e860f212a5.png" alt=""></p>
    <h3 class="name">The Noun Project</h3>
    <p class="subtitle">Icons for everything</p>
    <p class="desc">Over a million curated icons, created by a global community.</p>
  </div></a>
  
  <a href="https://www.30secondsofcode.org/" target="_blank"><div class="element-item web cssjava">
    <p class="logo"><img src="https://www.30secondsofcode.org/icons/icon-48x48.png" alt=""></p>
    <h3 class="name">30 Seconds of CSS</h3>
    <p class="subtitle">A curated collection of useful CSS snippets.</p>
    <p class="desc">A curated collection of useful CSS snippets you can understand in 30 seconds or less.</p>
  </div></a>
  
  
  <a href="https://frontend30.com/css-selectors-cheatsheet/" target="_blank"><div class="element-item web cssjava">
    <p class="logo"><img src="https://frontend30.com/wp-content/uploads/fbrfg/favicon-32x32.png" alt=""></p>
    <h3 class="name">CSS selectors cheatsheet</h3>
    <p class="subtitle">A quiz/list of CSS selectors.</p>
    <p class="desc">Usefull tool to understand CSS selectors.</p>
  </div></a>
  
  
  <a href="https://css-tricks.com/fun-tip-use-calc-to-change-the-height-of-a-hero-component/" target="_blank"><div class="element-item web cssjava">
    <p class="logo">N/A</p>
    <h3 class="name">Use calc() to Change the Height</h3>
    <p class="subtitle">of a Hero Component</p>
    <p class="desc"></p>
  </div></a>
  
  
  <a href="http://freefrontend.com/" target="_blank"><div class="element-item web  stocks uxui inspiration cssjava">
    <p class="logo"><img src="http://freefrontend.com/favicon.ico" alt=""></p>
    <h3 class="name">Free Frontend</h3>
    <p class="subtitle">CSS solutions, code & examples</p>
    <p class="desc">Collection of CSS solutions and examples.</p>
  </div></a>
  
  
  <a href="https://designrevision.com/downloads/shards/" target="_blank"><div class="element-item web uxui">
    <p class="logo"><img src="https://designrevision.com/favicons/apple-touch-icon.png?v=" alt=""></p>
    <h3 class="name">Shards UI Kit</h3>
    <p class="subtitle">Free Bootstrap 4 UI kit</p>
    <p class="desc">Shards UI Kit is a wholesome responsive Bootstrap 4 kit provided for free.</p>
  </div></a>
  
  
  <a href="https://www.postleaf.org/" target="_blank"><div class="element-item web cms">
    <p class="logo"><img src="https://www.postleaf.org/uploads/2017/05/favicon.png" alt=""></p>
    <h3 class="name">Postleaf CMS</h3>
    <p class="subtitle">Free simple CMS based on Node.js</p>
    <p class="desc">Create your next blog with a beautifully designed open source blogging platform built for the modern publisher.</p>
  </div></a>
  
  
  <a href="https://getgrav.org/" target="_blank"><div class="element-item web cms">
    <p class="logo"><img src="https://getgrav-grav.netdna-ssl.com/user/themes/planetoid/images/favicon.png" alt=""></p>
    <h3 class="name">Grav CMS</h3>
    <p class="subtitle">Free simple flat-file CMS</p>
    <p class="desc">Very nice and simple flat-file CMS.</p>
  </div></a>
  
  
  <a href="https://pagekit.com/" target="_blank"><div class="element-item web cms">
    <p class="logo"><img src="https://pagekit.com/app/system/modules/theme/apple_touch_icon.png" alt=""></p>
    <h3 class="name">PageKit CMS</h3>
    <p class="subtitle">Free CMS based on Vue.js</p>
    <p class="desc">Very small and fast CMS.</p>
  </div></a>
  
  
  <a href="http://picocms.org/" target="_blank"><div class="element-item web cms">
    <p class="logo"><img src="http://picocms.org/style/images/favicon.png" alt=""></p>
    <h3 class="name">Pico CMS</h3>
    <p class="subtitle">Free simple, fast flat-file CMS</p>
    <p class="desc">Pico makes creating and maintaining a website as simple as editing text files.</p>
  </div></a>
  
  
  <a href="https://github.com/edent/SuperTinyIcons" target="_blank"><div class="element-item web stocks uxui">
    <p class="logo">N/A</p>
    <h3 class="name">Super Tiny Social Icons</h3>
    <p class="subtitle">SVG and customizable social icons</p>
    <p class="desc">Under 1KB each! Super Tiny Web Icons are minuscule SVG versions of your favourite logos. The average size is under 600 bytes!.</p>
  </div></a>
  
  
  <a href="https://lukaszadam.com/illustrations" target="_blank"><div class="element-item web stocks uxui">
    <p class="logo"><img src="https://lukaszadam.com/logo.svg" alt=""></p>
    <h3 class="name">Free Illustrations</h3>
    <p class="subtitle">Free Vector Art Illustrations and Icons</p>
    <p class="desc">All these Vector Art Illustrations and Icons are available for free, personal and commercial use </p>
  </div></a>
  
  
  
  
  <a href="https://undraw.co/illustrations" target="_blank"><div class="element-item web stocks uxui">
    <p class="logo"><img src="https://undraw.co/favicon-32x32.png?v=pgqYQdw7OR" alt=""></p>
    <h3 class="name">unDraw</h3>
    <p class="subtitle">MIT licensed illustrations for every project you can imagine and create</p>
    <p class="desc">A constantly updated collection of beautiful svg images that you can use completely free and without attribution.</p>
  </div></a>  

  
<a href="https://www.hongkiat.com/blog/85-free-high-quality-silhouette-sets/" target="_blank"><div class="element-item web stocks uxui">
    <p class="logo">N/A</p>
    <h3 class="name">50 Free High Quality Silhouette Sets</h3>
    <p class="subtitle">Free high-quality silhouette sets</p>
    <p class="desc">list of free high-quality silhouette sets of a wide range of subjects including animal and human figures</p>
  </div></a>
  
  
 
  <a href="https://alvarotrigo.com/fullPage/" target="_blank"><div class="element-item web stocks inspiration cssjava">
    <p class="logo"><img src="https://alvarotrigo.com/fullPage/favicons/favicon.ico" alt=""></p>
    <h3 class="name">FullPage.js</h3>
    <p class="subtitle">Create Beautiful Fullscreen Scrolling Websites</p>
    <p class="desc">Not only vertical scrolling but also horizontal scrolling. With fullPage.js you will be able to add horizontal sliders in the most simple way ever.</p>
  </div></a>
  
  
  <a href="http://michalsnik.github.io/aos/" target="_blank"><div class="element-item web stocks animation cssjava">
    <p class="logo">N/A</p>
    <h3 class="name">AOS</h3>
    <p class="subtitle">Animate On Scroll Library</p>
    <p class="desc">Variety of animate-on-scroll animations.</p>
  </div></a>
  
  
  <a href="http://www.rich-harris.co.uk/ramjet/" target="_blank"><div class="element-item web stocks animation inspiration cssjava">
    <p class="logo">N/A</p>
    <h3 class="name">Ramjet</h3>
    <p class="subtitle">Element Morphing Library</p>
    <p class="desc">Ramjet makes it looks as though one DOM element is capable of transforming into another, no matter where the two elements sit in the DOM tree.</p>
  </div></a>
  
  
  <a href="http://inorganik.github.io/countUp.js/" target="_blank"><div class="element-item web stocks animation inspiration cssjava">
    <p class="logo">N/A</p>
    <h3 class="name">CountUp.js</h3>
    <p class="subtitle">Create animations that display numerical data</p>
    <p class="desc">CountUp.js is a dependency-free, lightweight JavaScript "class" that can be used to quickly create animations that display numerical data in a more interesting way.</p>
  </div></a>
  
  
  <a href="https://www.webdesignerdepot.com/2017/04/15-essential-free-icon-sets/" target="_blank"><div class="element-item web stocks uxui">
    <p class="logo">N/A</p>
    <h3 class="name">15 Free Icon Sets</h3>
    <p class="subtitle">Article about free flat icons</p>
    <p class="desc">When it comes to web design, and especially UI design, icons play a crucial role.</p>
  </div></a>
  
  
  <a href="https://freebiesupply.com/blog/css-button-hover-effects/" target="_blank"><div class="element-item web inspiration stocks cssjava">
    <p class="logo">N/A</p>
    <h3 class="name">Button hover </h3>
    <p class="subtitle">Button Hover Examples</p>
    <p class="desc">Buttons are an essential element of interaction design. That’s why they’re so important and that’s why it’s good to get them right.</p>
  </div></a>
  
  
  <a href="https://dixonandmoe.com/rellax/" target="_blank"><div class="element-item web stocks animation cssjava">
    <p class="logo">N/A</p>
    <h3 class="name">Rellax.js</h3>
    <p class="subtitle">Dynamic parallax scrolling effect, without dependencies</p>
    <p class="desc">Free open source plugin built on vanilla JavaScript, so it doesn’t have any dependencies.</p>
  </div></a>
  
  
  
  <a href="https://chriscavs.github.io/rallax-demo/" target="_blank"><div class="element-item web stocks animation cssjava">
    <p class="logo">N/A</p>
    <h3 class="name">Rallax.js</h3>
    <p class="subtitle">Dynamic parallax scrolling effect, without dependencies</p>
    <p class="desc">Rallax.js is a vanilla JS plugin that implements a dynamic parallax scrolling effect, without dependencies.</p>
  </div></a>
  
  
  
  <a href="https://t-scroll.com/demo.html" target="_blank"><div class="element-item web stocks animation cssjava">
    <p class="logo"><img src="https://t-scroll.com/theme/images/favicon.png" alt=""></p>
    <h3 class="name">t-scroll</h3>
    <p class="subtitle">Animate On Scroll Library</p>
    <p class="desc">Variety of animate-on-scroll animations.</p>
  </div></a>
  
  
   <a href="https://codepen.io/chaofix/pen/6535aca9fcfa4d0ea8aca690181cc128" target="_blank"><div class="element-item web cssjava">
    <p class="logo">N/A</p>
    <h3 class="name">Scroll Snap Type</h3>
    <p class="subtitle">Slideshow Both</p>
    <p class="desc">Pure CSS Scroll Snap Type - Slideshow Both.</p>
  </div></a>
  
  
  <a href="https://crello.com/" target="_blank"><div class="element-item web inspiration">
    <p class="logo"><img src="https://crello.com/about-crello/images/favicon.png" alt=""></p>
    <h3 class="name">CRELLO</h3>
    <p class="subtitle">Visual online design editor</p>
    <p class="desc">Create designs and get inspired.</p>
  </div></a>
  
  
  <a href="http://www.canva.com" target="_blank"><div class="element-item web inspiration">
    <p class="logo"><img src="http://www.canva.com/favicon.ico" alt=""></p>
    <h3 class="name">Canva</h3>
    <p class="subtitle">Visual online design editor</p>
    <p class="desc">Create designs and get inspired.</p>
  </div></a>
  
  
  <a href="https://topol.io/" target="_blank"><div class="element-item web inspiration stocks">
    <p class="logo"><img src="https://topol.io/favicon.ico" alt=""></p>
    <h3 class="name">Topol.io</h3>
    <p class="subtitle">Beautiful emails, easily</p>
    <p class="desc">Our online e-mail editor will help you design beautiful and responsive messages.</p>
  </div></a>
  
  
  <a href="https://weblaunchchecklist.com/" target="_blank"><div class="element-item web other">
    <p class="logo"><img src="https://weblaunchchecklist.com/favicon.ico" alt=""></p>
    <h3 class="name">Web Launch Checklist</h3>
    <p class="subtitle">Online Web Launch Checklist</p>
    <p class="desc">Very useful web launch checklist.</p>
  </div></a>
  
  
  <a href="https://wordcounter.io/" target="_blank"><div class="element-item web other">
    <p class="logo"><img src="https://wordcounter.io/assets/images/favicon.png?v=1" alt=""></p>
    <h3 class="name">Word Counter</h3>
    <p class="subtitle">Count characters, words, sentences, paragraphs and pages</p>
    <p class="desc">Useful tool.</p>
  </div></a>
  
  
  <a href="https://jhpratt.github.io/grid/" target="_blank"><div class="element-item web cssgrid">
    <p class="logo">N/A</p>
    <h3 class="name">CSS Grid Generator</h3>
    <p class="subtitle">Simple CSS Grid generator</p>
    <p class="desc">Simple CSS Grid generator.</p>
  </div></a>
  
  
  <a href="https://webcode.tools/css-generator" target="_blank"><div class="element-item web uxui cssjava">
    <p class="logo"><img src="https://webcode.tools/img/favicon.png" alt=""></p>
    <h3 class="name">The Ultimate CSS Generator</h3>
    <p class="subtitle">Visual CSS generator</p>
    <p class="desc">It allows you to easily generate useful snippets of CSS3 and copy them straight into your projects.</p>
  </div></a>
  
  

   <a href="https://sizzy.co/" target="_blank"><div class="element-item web other">
    <p class="logo"><img src="https://sizzy.co/favicon.ico" alt=""></p>
    <h3 class="name">Sizzy</h3>
    <p class="subtitle">Online preview of a site on various devices</p>
    <p class="desc">A tool for testing responsive websites crazy-fast.</p>
  </div></a> 
  
  
  <a href="https://tineye.com" target="_blank"><div class="element-item web other">
    <p class="logo"><img src="https://tineye.com/favicon.ico" alt=""></p>
    <h3 class="name">TinEye</h3>
    <p class="subtitle">Reverse Image Search</p>
    <p class="desc">Search by image and find where that image appears online.</p>
  </div></a> 
  
  

  <a href="https://www.dotcom-tools.com" target="_blank"><div class="element-item web other">
    <p class="logo"><img src="https://www.dotcom-tools.com/blog/wp-content/uploads/2017/10/favicon-21x17.png" alt=""></p>
    <h3 class="name">dotcom-tools</h3>
    <p class="subtitle">Free Online Website Performance Tools</p>
    <p class="desc">Instantly get a snapshot of your website availability and performance from nearly two dozen locations around the world.</p>
  </div></a>  
  
  
  <a href="https://solisapp.com" target="_blank"><div class="element-item web other">
    <p class="logo"><img src="https://solisapp.com/favicon.png" alt=""></p>
    <h3 class="name">Solis</h3>
    <p class="subtitle">Live Design Output for Mac</p>
    <p class="desc">Delivering real time, multi viewport previewing of HTML, CSS, SCSS and LESS as you write it.</p>
  </div></a>
  
  
  <a href="https://www.hellobonsai.com/freelance-proposals" target="_blank"><div class="element-item web other">
    <p class="logo"><img src="https://daks2k3a4ib2z.cloudfront.net/58868bcd2ef4daaf0f072900/58868bcd2ef4daaf0f072926_favicon-256x256.png" alt=""></p>
    <h3 class="name">BONSAI</h3>
    <p class="subtitle">Free Freelance proposals</p>
    <p class="desc">Create, send, and track proposals online.</p>
  </div></a>
  
  
  <a href="https://forms.id" target="_blank"><div class="element-item web other">
    <p class="logo"><img src="https://forms.id/favicon.ico" alt=""></p>
    <h3 class="name">FORMS</h3>
    <p class="subtitle">Forms. Simply done.</p>
    <p class="desc">Forms.id is a powerful, yet simple platform for building forms and surveys. We put privacy first and offer a secure alternative to Google Forms & Typeform.</p>
  </div></a> 
  
  
  <a href="https://alialaa.github.io/css-grid-cheat-sheet/" target="_blank"><div class="element-item web cssgrid">
    <p class="logo">N/A</p>
    <h3 class="name">CSS Grid Cheat Sheet</h3>
    <p class="subtitle">Your ultimate CSS grid visual guide</p>
    <p class="desc">Simple CSS Grid generator.</p>
  </div></a>
  
  
  <a href="https://compressor.io/compress" target="_blank"><div class="element-item web other">
    <p class="logo">N/A</p>
    <h3 class="name">Compressor.io</h3>
    <p class="subtitle">Compress and optimize your images</p>
    <p class="desc">Compressor.io is a powerful online tool for reducing drastically the size of your images and photos whilst maintaining a high quality with almost no difference before and after compression.</p>
  </div></a>
  
  
  <a href="https://squoosh.app" target="_blank"><div class="element-item web other">
    <p class="logo"><img src="https://squoosh.app/assets/favicon.ico" alt=""></p>
    <h3 class="name">Squoosh</h3>
    <p class="subtitle">Compress and optimize your images</p>
    <p class="desc">Squoosh is a new powerful online tool from Google for compressing your images using new codecs.</p>
  </div></a>
  
  
  <a href="http://css3.bradshawenterprises.com/flip/" target="_blank"><div class="element-item web cssjava animation">
    <p class="logo"><img src="http://css3.bradshawenterprises.com/favicon.ico" alt=""></p>
    <h3 class="name">Flipping content</h3>
    <p class="subtitle">Flipping a simple image to a div</p>
    <p class="desc">Flipping a simple image to a div (transitions and 3d transforms).</p>
  </div></a>
  
  
  <a href="http://cssicon.space/#/" target="_blank"><div class="element-item web uxui stocks animation cssjava">
    <p class="logo"><img src="http://cssicon.space/favicon.png" alt=""></p>
    <h3 class="name">CSS Icon Animate</h3>
    <p class="subtitle">Collection of Free Animated Icons</p>
    <p class="desc">Flat and animated icons.</p>
  </div></a>
  
  
  <a href="http://getbootstrap.com/" target="_blank"><div class="element-item web uxui cssjava other">
    <p class="logo"><img src="http://getbootstrap.com/favicon.ico" alt=""></p>
    <h3 class="name">Bootstrap</h3>
    <p class="subtitle">CSS & JS Framework</p>
    <p class="desc">For professional developers and designers alike.</p>
  </div></a>
  
  
  <a href="https://foundation.zurb.com/" target="_blank"><div class="element-item web uxui cssjava other">
    <p class="logo"><img src="https://foundation.zurb.com/assets/img/icons/foundation-favicon.ico" alt=""></p>
    <h3 class="name">Foundation</h3>
    <p class="subtitle">CSS & JS Framework</p>
    <p class="desc">For professional developers and designers alike.</p>
  </div></a>
  
  
  <a href="https://imperavi.com/kube/" target="_blank"><div class="element-item web uxui cssjava other">
    <p class="logo"><img src="https://imperavi.com/favicon.ico" alt=""></p>
    <h3 class="name">Kube</h3>
    <p class="subtitle">CSS & JS Framework</p>
    <p class="desc">For professional developers and designers alike.</p>
  </div></a>
  
  
  <a href="http://quantityqueries.com/" target="_blank"><div class="element-item web cssjava other">
    <p class="logo"><img src="http://quantityqueries.com/images/icon.png" alt=""></p>
    <h3 class="name">Quantity Query</h3>
    <p class="subtitle">A tool to help build Quantity Queries for your projects</p>
    <p class="desc">A quantity query is a complex CSS selector that allows styles to be applied to elements based on the number of siblings.</p>
  </div></a>
  
  
  <a href="http://ratiobuddy.com/" target="_blank"><div class="element-item web other">
    <p class="logo"><img src="http://ratiobuddy.com/favicon.ico" alt=""></p>
    <h3 class="name">Ratio Buddy</h3>
    <p class="subtitle">Tool to calculate aspect ratio</p>
    <p class="desc">RatioBuddy is a happy little tool to help you calculate aspect ratios.</p>
  </div></a>
  
  
  <a href="https://jakearchibald.github.io/svgomg/" target="_blank"><div class="element-item web other">
    <p class="logo"><img src="https://jakearchibald.github.io/svgomg/imgs/icon.png" alt=""></p>
    <h3 class="name">SVGOMG</h3>
    <p class="subtitle">Clean your SVG</p>
    <p class="desc">Tool to minimize and clean SVG files.</p>
  </div></a>
  
  
  <a href="https://bennettfeely.com/csspiechart/" target="_blank"><div class="element-item web cssjava other">
    <p class="logo"><img src="https://bennettfeely.com/csspiechart/img/favicon-32x32.png" alt=""></p>
    <h3 class="name">CSS Pie Chart Generator</h3>
    <p class="subtitle">Generates CSS Pie Charts</p>
    <p class="desc">The conic-gradient() CSS function creates a background gradient with color transitions rotated around a center point.</p>
  </div></a>
  
  
    <a href="https://matthewlein.com/tools/ceaser" target="_blank"><div class="element-item web cssjava animation">
    <p class="logo">N/A</p>
    <h3 class="name">Ceaser</h3>
    <p class="subtitle">CSS Easing Animation Tool</p>
    <p class="desc">Great tool to create code for your CSS animation easing.</p>
  </div></a>
  
  
  <a href="http://pressbin.com/tools/excel_to_html_table/index.html" target="_blank"><div class="element-item web other">
    <p class="logo">N/A</p>
    <h3 class="name">Excel to HTML</h3>
    <p class="subtitle">No-Cruft Excel to HTML Table Converter</p>
    <p class="desc">This simple utility allows you to paste data from an Excel spreadsheet (or an HTML table) and convert it to a new HTML table that is free of extraneous formatting.</p>
  </div></a>
  
  
  <a href="https://realfavicongenerator.net/" target="_blank"><div class="element-item web other">
    <p class="logo"><img src="https://realfavicongenerator.net/the_favicon/apple-touch-icon.png?v=XBr4XjEpXx" alt=""></p>
    <h3 class="name">Real Favicon Generator</h3>
    <p class="subtitle">Favicon Generator</p>
    <p class="desc">Create your favicon.</p>
  </div></a>
  
  
  <a href="https://favicon.io/" target="_blank"><div class="element-item web other">
    <p class="logo"><img src="https://favicon.io/favicon.ico" alt=""></p>
    <h3 class="name">favicon.io</h3>
    <p class="subtitle">Favicon Designer & Generator</p>
    <p class="desc">Design and create your favicon.</p>
  </div></a>
  
  
  <a href="https://margaret2.github.io/pantone-colors/" target="_blank"><div class="element-item web colours">
    <p class="logo">N/A</p>
    <h3 class="name">Pantone to HEX</h3>
    <p class="subtitle">Pantone to HEX converter</p>
    <p class="desc">Convert your favourite Pantone colour to HEX code.</p>
  </div></a>
  
  
  <a href="https://maketintsandshades.com" target="_blank"><div class="element-item web colours">
    <p class="logo"><img src="https://maketintsandshades.com/favicon-32x32.png" alt=""></p>
    <h3 class="name">Tint & Shade Generator</h3>
    <p class="subtitle">Easily make tints and shades in 10% increments</p>
    <p class="desc">The purpose of this tool is to accurately produce tints (lighter variants) and shades (darker variants) of a given hex color in 10% increments.</p>
  </div></a>
  
  
  
  
  <a href="http://paletton.com/" target="_blank"><div class="element-item web colours">
    <p class="logo"><img src="http://paletton.com/favicon.ico" alt=""></p>
    <h3 class="name">Palleton</h3>
    <p class="subtitle">The colour scheme designer</p>
    <p class="desc">Tool to design colour schemes.</p>
  </div></a>
  
  
  <a href="http://webdesignerwall.com/tutorials/css-gradient-text-effect" target="_blank"><div class="element-item web colours cssjava">
    <p class="logo">N/A</p>
    <h3 class="name">CSS Gradient Text Effect</h3>
    <p class="subtitle">Tutorial</p>
    <p class="desc">Here is a simple CSS trick to show you how to create gradient text effect with a PNG imag.</p>
  </div></a>
  
  
  <a href="https://color.adobe.com/create/color-wheel/" target="_blank"><div class="element-item graphic web colours">
    <p class="logo"><img src="https://color.adobe.com/colorfavicon.ico?v=2" alt=""></p>
    <h3 class="name">Adobe Color CC</h3>
    <p class="subtitle">Colour wheel</p>
    <p class="desc">Colour generator.</p>
  </div></a>
  
  
  <a href="http://www.cssportal.com/css-gradient-generator/" target="_blank"><div class="element-item web colours cssjava">
    <p class="logo"><img src="http://www.cssportal.com/favicon.ico" alt=""></p>
    <h3 class="name">CSS Gradient generator</h3>
    <p class="subtitle">Simple gradient generator</p>
    <p class="desc">This generator will produce CSS Gradient code using a simple graphical user interface.</p>
  </div></a>
  
  
  <a href="https://www.materialpalette.com/" target="_blank"><div class="element-item web colours cssjava">
    <p class="logo"><img src="https://www.materialpalette.com/assets/favicon-194de522705d2d8afb93874e197fa6f14188290aaf3625007bf4774933901cc1.ico" alt=""></p>
    <h3 class="name">Material Design Palette</h3>
    <p class="subtitle">Material design palette generator</p>
    <p class="desc">Pick two colours.</p>
  </div></a>
  
  
  <a href="https://www.materialui.co/colors" target="_blank"><div class="element-item web colours cssjava">
    <p class="logo"><img src="https://www.materialui.co/img/favicon.gif" alt=""></p>
    <h3 class="name">Material Design Colours</h3>
    <p class="subtitle">Material design palette generator</p>
    <p class="desc">Pick your colours.</p>
  </div></a>
  
  
  <a href="https://webgradients.com/" target="_blank"><div class="element-item web colours cssjava">
    <p class="logo"><img src="https://webgradients.com/favicons/apple-touch-icon-72x72.png" alt=""></p>
    <h3 class="name">WebGradients</h3>
    <p class="subtitle">180 linear gradients</p>
    <p class="desc">WebGradients is a free collection of 180 linear gradients that you can use as content backdrops in any part of your website.</p>
  </div></a>
  
  
  <a href="https://colorme.io/" target="_blank"><div class="element-item web colours cssjava">
    <p class="logo"><img src="https://colorme.io/favicon.ico" alt=""></p>
    <h3 class="name">ColorMe</h3>
    <p class="subtitle">Visualize The CSS Color Function</p>
    <p class="desc">Get your colour.</p>
  </div></a>
  
  
  <a href="http://colormind.io/" target="_blank"><div class="element-item graphic web colours cssjava">
    <p class="logo"><img src="http://colormind.io/favicon32.gif" alt=""></p>
    <h3 class="name">Colormind</h3>
    <p class="subtitle">Color scheme generator using AI</p>
    <p class="desc">Colormind is a color scheme generator that uses deep learning. It can learn color styles from photographs, movies, and popular art.</p>
  </div></a>
  
  
  <a href="http://varun.ca/css-grid/" target="_blank"><div class="element-item web cssgrid education">
    <p class="logo"><img src="http://varun.ca/apple-touch-icon.png" alt=""></p>
    <h3 class="name">Learning CSS Grids</h3>
    <p class="subtitle">Great article on CSS Grid</p>
    <p class="desc">A guide to CSS Grid.</p>
  </div></a>
  
  
  <a href="http://www.entheosweb.com/website_design/server_side_includes.asp" target="_blank"><div class="element-item web education other">
    <p class="logo">N/A</p>
    <h3 class="name">Server Side Includes</h3>
    <p class="subtitle">Guide to Server Side includes</p>
    <p class="desc">Make Easy site-wide changes with Server Side Includes.</p>
  </div></a>
  
  
  <a href="http://www.turnjs.com/" target="_blank"><div class="element-item web cssjava stocks animation inspiration">
    <p class="logo"><img src="http://www.turnjs.com/favicon.ico" alt=""></p>
    <h3 class="name">Turn.js</h3>
    <p class="subtitle">Make a flip book with HTML5</p>
    <p class="desc">Turn.js is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5.</p>
  </div></a>
  
  
  <a href="http://flexboxgrid.com/" target="_blank"><div class="element-item web flexbox">
    <p class="logo">N/A</p>
    <h3 class="name">Flexbox Grid</h3>
    <p class="subtitle">A grid system based on the flex display property</p>
    <p class="desc">Grid framework based on Flexbox.</p>
  </div></a>
  
  
  <a href="https://philipwalton.github.io/solved-by-flexbox/" target="_blank"><div class="element-item web flexbox education">
    <p class="logo">N/A</p>
    <h3 class="name">Solved by Flexbox</h3>
    <p class="subtitle">Cleaner, hack-free CSS</p>
    <p class="desc">A guide to Flexbox.</p>
  </div></a>
  
  
  <a href="https://jonathantneal.github.io/flexibility/" target="_blank"><div class="element-item web flexbox">
    <p class="logo">N/A</p>
    <h3 class="name">Flexibility</h3>
    <p class="subtitle">Visual tool for Flexbox row</p>
    <p class="desc">Simple visual to to set a row parameters.</p>
  </div></a>
  
  
  <a href="http://fontawesome.io/icons/" target="_blank"><div class="element-item web uxui stocks">
    <p class="logo"><img src="http://fontawesome.io/assets/ico/favicon.ico" alt=""></p>
    <h3 class="name">FontAwesome</h3>
    <p class="subtitle">Most popular icons catalogue</p>
    <p class="desc">Free icons.</p>
  </div></a>
  
  
  <a href="https://freefrontend.com/css-text-shadow-effects/" target="_blank"><div class="element-item web cssjava inspiration">
    <p class="logo"><img src="https://freefrontend.com/favicon-32x32.png" alt=""></p>
    <h3 class="name">Text Shadow Effects</h3>
    <p class="subtitle">HTML and CSS text shadow effect code examples</p>
    <p class="desc">Collection of hand-picked free HTML and CSS text shadow effect code examples.</p>
  </div></a>
  
  
  <a href="http://tobiasahlin.com/moving-letters/" target="_blank"><div class="element-item web cssjava animation">
    <p class="logo"><img src="http://tobiasahlin.com/images/favicon.ico" alt=""></p>
    <h3 class="name">Moving Letters</h3>
    <p class="subtitle">Directory of animated text effects</p>
    <p class="desc">Choose your animation, get code.</p>
  </div></a>
  
  
  <a href="http://gudh.github.io/ihover/dist/index.html" target="_blank"><div class="element-item web cssjava animation">
    <p class="logo">N/A</p>
    <h3 class="name">iHover</h3>
    <p class="subtitle">CSS3 hover effects pack</p>
    <p class="desc">iHover is an impressive hover effects collection, powered by pure CSS3.</p>
  </div></a>
  
  
  <a href="https://miketricking.github.io/bootstrap-image-hover/" target="_blank"><div class="element-item web cssjava animation">
    <p class="logo">N/A</p>
    <h3 class="name">Image Hover Effects</h3>
    <p class="subtitle">CSS image hover effects</p>
    <p class="desc">Choose your animation, get code.</p>
  </div></a>
  
  
  <a href="https://freebiesupply.com/blog/css-text-effects-from-codepen/" target="_blank"><div class="element-item web cssjava animation">
    <p class="logo">N/A</p>
    <h3 class="name">CSS Text Effects</h3>
    <p class="subtitle">From Codepen</p>
    <p class="desc">Choose your effect, get code.</p>
  </div></a>
  
  
  <a href="https://bennettfeely.com/image-effects/" target="_blank"><div class="element-item web cssjava inspiration">
    <p class="logo"><img src="https://bennettfeely.com/image-effects/img/favicon-32x32.png" alt=""></p>
    <h3 class="name">Image Effects with CSS</h3>
    <p class="subtitle">Image manipulation via CSS</p>
    <p class="desc">Choose your image, copy code.</p>
  </div></a>
  
  
  <a href="http://animista.net/" target="_blank"><div class="element-item web cssjava animation">
    <p class="logo"><img src="http://animista.net/favicon.ico" alt=""></p>
    <h3 class="name">animista</h3>
    <p class="subtitle">CSS animations on demand</p>
    <p class="desc">Choose your animation, get code.</p>
  </div></a>
  
  
  
  <a href="https://keyframes.app/animate/" target="_blank"><div class="element-item web cssjava animation">
    <p class="logo"><img src="https://keyframes.app/media/favicon.png" alt=""></p>
    <h3 class="name">keyframes.app</h3>
    <p class="subtitle">An insanely simple way to create CSS animations</p>
    <p class="desc">Keyframes gives you a visual timeline to help you create, view, and run animations without having to go back and forth between your browser and editor.</p>
  </div></a>
  
  
  <a href="https://tympanus.net/Development/StackMotionHoverEffects/" target="_blank"><div class="element-item web cssjava animation">
    <p class="logo"><img src="https://tympanus.net/Development/StackMotionHoverEffects/favicon.ico" alt=""></p>
    <h3 class="name">Stack Motion Hover Effects</h3>
    <p class="subtitle">Decorative motion hover effects</p>
    <p class="desc">Choose your animation, dig for code.</p>
  </div></a>
  
  
  <a href="https://tympanus.net/Development/AnimatedLetters/index.html" target="_blank"><div class="element-item web cssjava animation">
    <p class="logo"><img src="https://tympanus.net/Development/StackMotionHoverEffects/favicon.ico" alt=""></p>
    <h3 class="name">Animated Letters</h3>
    <p class="subtitle">Animated SVG lines</p>
    <p class="desc">An artistically animated SVG font using the Segment library.</p>
  </div></a>
  
  
  <a href="https://tympanus.net/Development/TextStylesHoverEffects/" target="_blank"><div class="element-item web cssjava animation">
    <p class="logo"><img src="https://tympanus.net/Development/StackMotionHoverEffects/favicon.ico" alt=""></p>
    <h3 class="name">Text Hover Effects</h3>
    <p class="subtitle">Text Styles & Hover Effects</p>
    <p class="desc">For inspiration.</p>
  </div></a>
  
  
  <a href="https://tympanus.net/Tutorials/CaptionHoverEffects/index.html" target="_blank"><div class="element-item web cssjava animation">
    <p class="logo"><img src="https://tympanus.net/Development/StackMotionHoverEffects/favicon.ico" alt=""></p>
    <h3 class="name">Caption Hover Effects </h3>
    <p class="subtitle">7 Caption Hover Effects</p>
    <p class="desc">Nice caption hover effects.</p>
  </div></a>
  
  
  <a href="https://www.google.com/webdesigner/" target="_blank"><div class="element-item web cssjava animation stocks other">
    <p class="logo"><img src="https://www.google.com/webdesigner/images/favicon.ico" alt=""></p>
    <h3 class="name">Google Web Designer</h3>
    <p class="subtitle">HTML5 Animation Tools</p>
    <p class="desc">Create engaging, interactive HTML5-based designs and motion graphics that can run on any device.</p>
  </div></a>
  
  
  <a href="https://tympanus.net/Development/AnimatedSVGIcons/" target="_blank"><div class="element-item web cssjava animation stocks">
    <p class="logo"><img src="https://tympanus.net/Development/StackMotionHoverEffects/favicon.ico" alt=""></p>
    <h3 class="name">Animated SVG Icons</h3>
    <p class="subtitle">Using Snap.svg to animate SVG icons</p>
    <p class="desc">Library of animated SVG icons.</p>
  </div></a>
  
  
  
  <a href="https://maxwellito.github.io/vivus-instant/" target="_blank"><div class="element-item web cssjava animation">
    <p class="logo">N/A</p>
    <h3 class="name">Vivus Instant</h3>
    <p class="subtitle">SVG Stroke animation</p>
    <p class="desc">Simply drag and drop your stroke based SVG and set your options.</p>
  </div></a>
  
  
  <a href="https://elrumordelaluz.github.io/csshake/" target="_blank"><div class="element-item web cssjava animation">
    <p class="logo">N/A</p>
    <h3 class="name">CSS Shake</h3>
    <p class="subtitle">Some CSS classes to move your DOM!</p>
    <p class="desc">Collection of shake animations.</p>
  </div></a>
  
  
  <a href="http://ianlunn.github.io/Hover/" target="_blank"><div class="element-item web cssjava animation stocks">
    <p class="logo">N/A</p>
    <h3 class="name">Hover.css</h3>
    <p class="subtitle">Library of CSS Hover effects</p>
    <p class="desc">A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on.</p>
  </div></a>
  
  
  <a href="https://macarthur.me/typeit/" target="_blank"><div class="element-item web cssjava animation stocks">
    <p class="logo"><img src="https://macarthur.me/typeit/assets/img/favicon.ico" alt=""></p>
    <h3 class="name">TypeIt</h3>
    <p class="subtitle">jQuery typing plugin</p>
    <p class="desc">The most versatile jQuery typing plugin on the planet.</p>
  </div></a>
  
  
  <a href="https://joomla.org" target="_blank"><div class="element-item web cms">
    <p class="logo"><img src="https://joomla.org/favicon.ico" alt=""></p>
    <h3 class="name">Joomla</h3>
    <p class="subtitle">Award-winning content management system</p>
    <p class="desc">Joomla! is an award-winning content management system (CMS), which enables you to build web sites and powerful online applications.</p>
  </div></a>
  
  
  <a href="https://snapx.io/" target="_blank"><div class="element-item web other">
    <p class="logo"><img src="https://snapx.io/cdn/57f37852aedac6174111088d/5819c779c5fddf0f70abd483_favicon.png" alt=""></p>
    <h3 class="name">Responsive Screenshots</h3>
    <p class="subtitle">Take responsive screenshots</p>
    <p class="desc">Get a pack of specific media sized screenshots.</p>
  </div></a>
  
  
  <a href="https://frappe.github.io/charts/" target="_blank"><div class="element-item web cssjava other">
    <p class="logo">N/A</p>
    <h3 class="name">Frappé Charts</h3>
    <p class="subtitle">Simple and modern charts for web</p>
    <p class="desc">GitHub-inspired simple and modern charts for the web with zero dependencies.</p>
  </div></a>
  
  
  <a href="https://developers.google.com/chart/" target="_blank"><div class="element-item web cssjava other">
    <p class="logo"><img src="https://developers.google.com/_static/eefe16f3ea/images/favicon.png" alt=""></p>
    <h3 class="name">Google Charts
</h3>
    <p class="subtitle">Interactive charts for browsers and mobile devices</p>
    <p class="desc">Google chart tools are powerful, simple to use, and free. Try out our rich gallery of interactive charts and data tools.</p>
  </div></a>
  
  
  <a href="http://brandmark.io/logo-crunch/" target="_blank"><div class="element-item web logo other">
    <p class="logo">N/A</p>
    <h3 class="name">Logo Crunch</h3>
    <p class="subtitle">Multi-resolution logo maker</p>
    <p class="desc">Logo Crunch is a multi-resolution logo maker, it uses computer vision to make your high-res logo legible at lower resolutions.</p>
  </div></a>
  
  
  <a href="https://resumeworded.com" target="_blank"><div class="element-item web graphics other">
    <p class="logo">N/A</p>
    <h3 class="name">Resume Worded</h3>
    <p class="subtitle">Write effective resumes</p>
    <p class="desc">Get inspired by handpicked resume lines that helped candidates get into companies.</p>
  </div></a>
  
  <a href="http://threed.io" target="_blank"><div class="element-item web graphics other">
    <p class="logo"><img src="http://threed.io/favicon-96x96.png" alt=""></p>
    <h3 class="name">threed.io</h3>
    <p class="subtitle">Generate 3D Mockups right in your Browser</p>
    <p class="desc">Upload your design, adjust settings and download your individual mockup. Threed is for free and needs no extra Software.</p>
  </div></a>
  
  
  <a href="http://ecard.enter-media.org/css-text-effects/" target="_blank"><div class="element-item graphic web typography">
    <p class="logo"><img src="http://ecard.enter-media.org/img/favicon.png" alt=""></p>
    <h3 class="name">CSS text effects</h3>
    <p class="subtitle">Various CSS Text Effects</p>
    <p class="desc">CSS text effects gallery we are using in Banner maker and Freefonts project.</p>
  </div></a>
  
  
  <a href="https://basicscroll.electerious.com" target="_blank"><div class="element-item web cssjava animation other">
    <p class="logo"><img src="https://basicscroll.electerious.com/assets/images/favicon.ico" alt=""></p>
    <h3 class="name">basicScroll
</h3>
    <p class="subtitle">Standalone parallax scrolling 
with CSS variables</p>
    <p class="desc">basicScroll allows you to change CSS variables depending on the scroll position. Use the variables directly in your CSS to animate whatever you want.</p>
  </div></a>
  
  
  <a href="http://www.fontisto.com/icons" target="_blank"><div class="element-item web uxui stocks">
    <p class="logo"><img src="http://www.fontisto.com/assets/images/touch/fontisto-192.png" alt=""></p>
    <h3 class="name">Fontisto</h3>
    <p class="subtitle">fontisto the iconic font and css toolkit · 552+ free icons</p>
    <p class="desc">Free icons.</p>
  </div></a>
  
  
  <a href="https://boxicons.com" target="_blank"><div class="element-item web uxui stocks">
    <p class="logo"><img src="https://boxicons.com/static/img/favicon.ico?v=3" alt=""></p>
    <h3 class="name">BoxIcons</h3>
    <p class="subtitle">350+ Carefully designed icons set.</p>
    <p class="desc">Free icons.</p>
  </div></a>
  
  
  
</div>
              
            
!

CSS

              
                * { box-sizing: border-box; }

body {
  font-family: "Muli",sans-serif;
}

.h1 {
  width:100%;
  text-align:center;
  font-size: 2.4em;
  font-weight:900;
}

.h2 {
  width:100%;
  text-align:center;
  margin-bottom:10px;
  font-size: 2em;
  font-weight:700;
}

.h3 {
  font-size: 1.3em;
  font-weight:700;
}

.h4 {
  width:100%;
  text-align:center;
  margin-top: -20px;
  margin-bottom:60px;
  font-size: 1.2em;
  font-weight:300;
}

.filters {
  width:100%;
  text-align:center;
}

.ui-group {
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 40px;
  margin-top: -20px;
}

/* ---- button ---- */

.button {
  display: inline-block;
  outline: none;
  padding: 0.5em 1.0em;
  margin-top:6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #444;
  font-size: 0.9em;
  background-color: white;
  transition: all 0.2s;
}

.button:hover {
  background-color: #ccc;
  color: black;
}

.button:active,
.button.is-checked {
  background-color: #444;
  border:1px solid #444;
}

.button.is-checked {
  color: white;
}

.button:active {
}

/* ---- button-group ---- */

.button-group:after {
  content: '';
  display: block;
  clear: both;
}

.button-group .button {
  float: left;
  border-radius: 0;
  margin-left: 0;
  margin-right: -1px;
}

.button-group .button:first-child { border-radius: 4px 0 0 4px; }
.button-group .button:last-child { border-radius: 0 4px 4px 0; }

/* ---- isotope ---- */

.grid {
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
  max-width: 1300px;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .element-item ---- */

.element-item {
  position: relative;
  float: left;
  width: 300px;
  height: 300px;
  margin: 12px;
  padding: 10px;
  color: #444;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: linear-gradient(rgba(255,0,0,0) 66%, #efefef 34%);
  box-shadow: 0px 0px 16px 0px rgba(0,0,0,.17);
  transition: all 0.2s;
}

.element-item:hover {
  box-shadow: 3px 4px 16px 6px rgba(0,0,0,.17);
  transform: translateY(-5px);
  border-color: #ff0000;
}

.element-item > * {
  margin: 0;
  padding: 0;
}

.element-item .logo {
  align: center;
  text-align: center;
  font-size: 1.6em;
  letter-spacing: 1px;
  font-weight: bold;
  color: #444;
  margin-top: 10px;
}

.element-item .logo img{
  height: 30px;
}

.element-item .name {
  position: relative;
  top: 30px;
  font-family: "Montserrat", sans-serif;
  text-align: center;
  font-size: 1.6em;
  font-weight: 700;
}


.element-item .subtitle {
  position: relative;
  top: 45px;
  text-align: center;
  font-size: 1em;
  font-weight: 300;
  color: #666;
}

.element-item .desc {
  position: absolute;
  top: 210px;
  width: 100%;
  text-align: center;
  font-size: 0.8em;
  padding: 0 20px 0 0;
}
              
            
!

JS

              
                // external js: isotope.pkgd.js

// init Isotope
var $grid = $('.grid').isotope({
  itemSelector: '.element-item'
});

// store filter for each group
var filters = {};

$('.filters').on( 'click', '.button', function() {
  var $this = $(this);
  // get group key
  var $buttonGroup = $this.parents('.button-group');
  var filterGroup = $buttonGroup.attr('data-filter-group');
  // set filter for group
  filters[ filterGroup ] = $this.attr('data-filter');
  // combine filters
  var filterValue = concatValues( filters );
  // set filter for Isotope
  $grid.isotope({ filter: filterValue });
});

// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
  var $buttonGroup = $( buttonGroup );
  $buttonGroup.on( 'click', 'button', function() {
    $buttonGroup.find('.is-checked').removeClass('is-checked');
    $( this ).addClass('is-checked');
  });
});
  
// flatten object by concatting values
function concatValues( obj ) {
  var value = '';
  for ( var prop in obj ) {
    value += obj[ prop ];
  }
  return value;
}
              
            
!
999px

Console