donpadre

Material Blog Post Card + Microdata

Trying to build a nice (Visual&SEO) blog post card. I think i have to work on the mobile view :D

Image by Josh Felise

A Pen by Wolf Wortmann on CodePen.

License.

donpadre

:ruby
  @items = [
    { :t => 'X-rays', :i => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/i-xrays.png' },
    { :t => 'Worms', :i => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/i-worms.png' },
    { :t => 'Aurora', :i => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/i-aurora.png' },
    { :t => 'Angus', :i => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/i-angus.png' },
    { :t => 'Huitzi', :i => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/i-huitzi.png' },
    { :t => 'Dalí', :i => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/i-dali.png' },
    { :t => 'The Bride', :i => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/i-bride.png' },
    { :t => 'The Man', :i => 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/9473/i-man.png' },

donpadre

<div class="map-container">
  <div id='map'></div>
  <div id="info"></div>
</div>

donpadre

<div class="mobile-wrap">
	<div class="mobile clearfix">
		<div class="header">
			<span class="ion-ios-navicon pull-left"><i></i></span>
			<span class="title">Home</span>
			<span class="ion-ios-search pull-right"></span>
			<div class="search">
			<form method="post">
				<input type="search" placeholder="Search Here">
			</form>

donpadre

<div id="sidebar">
  <ul>
    <li>Archivos</li>
    <li>Recientes</li>
    <li class="active">Fotos</li>
    <li>Compartido</li>
    <li>Papelera de reciclaje</li>
    <li>Equipos</li>
  </ul>

donpadre

Desktop System with Animated Sidebar

A simple desktops system with an animated sidebar

A Pen by Venerons on CodePen.

License.

donpadre

<div class="pagewrap">
  
  <nav>
    <ul>
      <li><a href="#one">One</a></li>
      <li><a href="#two">Two</a></li>
      <li><a href="#three">Three</a></li>
    </ul>
    <div class="toggle-icon">
      <span></span>

donpadre

Elastic CSS navigation

A Pen by Daniela B on CodePen.

License.

donpadre

Full Landing Page - Landing Zero

See full details here: http://www.bootstrapzero.com/theme/landing-zero/

A Pen by 1WD.tv - Freelance Web Designer Training on CodePen.

License.

donpadre

Fold-away hero

Let the hero-section fold away as you scroll down the site, until only the nav-bar is left

A Pen by Jeppe Stougaard on CodePen.

License.