matt-daniel-brown

<main>
	<section id="gallery-section">
  <ul>
			<li><img src="http://placehold.it/320x240" alt=""></li>
			<li><img src="http://placehold.it/320x240" alt=""></li>
			<li><img src="http://placehold.it/320x240" alt=""></li>
			<li><img src="http://placehold.it/320x240" alt=""></li>
			<li><img src="http://placehold.it/320x240" alt=""></li>
			<li><img src="http://placehold.it/320x240" alt=""></li>
		</ul>

matt-daniel-brown

%header
  %h1 The Art Of Letters
  %p or words or whatever

%main
  %article.content  
  %header
    %h1 Typography for beginners
    %p Lorem ipsum isn't a great choice to use for demonstrating good typography. Ideally you would use real content. However for the demonstration in the post, I think it's acceptable. I could use my content, it would be strange and cause some duplication I imagine.
  

matt-daniel-brown

<main>
	<section id="main-section-1">
		<button id="main-button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>barcode-qr</title><g fill="#ffffff"><path fill="#ffffff" d="M11,11H0V0h11V11z M2,9h7V2H2V9z"></path> <path fill="#ffffff" d="M24,11H13V0h11V11z M15,9h7V2h-7V9z"></path> <path fill="#ffffff" d="M11,24H0V13h11V24z M2,22h7v-7H2V22z"></path> <polygon fill="#ffffff" points="24,20 22,20 22,15 20,15 20,18 14,18 14,13 16,13 16,16 18,16 18,13 24,13 "></polygon> <polygon fill="#ffffff" points="24,24 14,24 14,20 16,20 16,22 24,22 "></polygon> <rect data-color="color-2" x="4" y="4" width="3" height="3"></rect> <rect data-color="color-2" x="17" y="4" width="3" height="3"></rect> <rect data-color="color-2" x="4" y="17" width="3" height="3"></rect></g></svg></button>
		<a href=""><h1><span class="lighter">https://</span>qr.mdb.codes<span class="lighter">/scan-me</span></h1></a>
		
	</section>
	<br>
	<section id="main-section-2">
		<button role="button" id="next-button">
<

matt-daniel-brown

<a href="https://youtu.be/WLYaEohJgxE" target="_blank" data-keyframers-credit style="color: #000"></a>
<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>

<div class="app" data-state="Good">  
  <div class="device" data-view="list">
    <ul class="layer" data-layer="list">
      <li class="content">
        <div class="bg"></div>
        <div class="avatar"></div>
        <div class="title">Some list item</div>

matt-daniel-brown

.palette 
  .primary-50
  .primary-100
  .primary-200
  .primary-300
  .primary-400
  .primary-500
  .primary-600
  .primary-700
  .primary-800

matt-daniel-brown

#Codevember 2018 - 13: Black Hole

A Pen by Matthew Daniel Brown on CodePen.

License.

matt-daniel-brown

<nav role="navigation">
		<button role="button">
			<i class="icon material-icons">menu</i>
			<i class="icon material-icons hidden">close</i>
		</button>
		<ul>
			<li><a href="#" class="active">Active</a></li>
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
		</ul>

matt-daniel-brown

<!-- markup structure
nav, a wrapping container for a series of link elements
  a, each anchor link element nesting an SVG icon and a span describing the link
-->
<nav>
  <a class="active" href="#">
    <svg viewBox="0 0 100 100">
      <g transform="translate(10 5) scale(0.8 0.9)">
        <path d="M 0 30 v 70 h 100 v -70 l -50 -30 z" stroke="currentColor" stroke-width="10" fill="none"
          stroke-linejoin="round" stroke-linecap="round" />

matt-daniel-brown

.canvas
  h3 Sortable Table
  .t-table
    .t-header
      .t-row
        .t-cell.grabber
        .t-cell VM Name
        .t-cell IP
        .t-cell Cluster
        .t-cell Virtual Network

matt-daniel-brown

Animated text fill

Fill your text with animated background images - no Javascript required, Webkit only.

A Pen by Daniel Riemer on CodePen.

License.