matt-daniel-brown

<header role="banner">
	<hgroup>
		<h1>Site Title</h1>
		<h2>Page Title or Site Subheader</h2>
	</hgroup>
</header>

<main role="main">
	<section>
		<h3>Section Title</h3>

matt-daniel-brown

<svg class="gegga">
      <defs>
        <filter id="gegga">
          <feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" />
          <feColorMatrix
            in="blur"
            mode="matrix"
            values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10"
            result="inreGegga"
          />

matt-daniel-brown

Full-Page Navigation

Quick code mock-up for the Full-Page Navigation CodePen Challenge

A Pen by Matthew Daniel Brown on CodePen.

License.

matt-daniel-brown

<header class="placeholder-section">
  <h1>Horizontal Section Navigation</h1>
</header>

<nav class="nav-sections">
  <ul class="menu">
    <li class="menu-item"><a class="menu-item-link active" href="#about">About</a></li>
    <li class="menu-item"><a class="menu-item-link" href="#documentation">Documentation</a></li>
    <li class="menu-item"><a class="menu-item-link" href="#showcase">Showcase</a></li>
    <li class="menu-item"><a class="menu-item-link" href="#latest-news">Latest News</a></li>

matt-daniel-brown

<div id="app">

  <form class="vue-form" @submit.prevent="submit">

    <div class="error-message">
      <p v-show="!email.valid">Oh, please enter a valid email address.</p>
    </div>

    <fieldset>
      <legend>Vue Contact Form</legend>

matt-daniel-brown

<section>
  <span class="h0">Huge</span>
  <h1>Main Heading</h1>
  <h2>Second Heading may be long enough to wrap on a few lines but the funny thing is that the spacing is consistent</h2>
  <h3>Heading Three</h3>
  <h4>Heading Four</h4>
  <h5>Heading Five</h5>
  <h6>Heading Six</h6>
</section>

matt-daniel-brown

<button role="button" type="button" class="menu-button" id="menu-button">
 <span class="menu-button-text">Menu</span>
</button>

matt-daniel-brown

GSAP 3.0 - SVG Wavy Lines (v2)

Just some groovy path strokes :)

A Pen by Matthew Daniel Brown on CodePen.

License.

matt-daniel-brown

Blog Card

A simple, responsive card UI component made with Vue.js.

A Pen by Katherine Kato on CodePen.

License.

matt-daniel-brown

<div class="container mt-5">

<div class="pill-slider-container mx-auto">	
<div class="pill-btn-slider"></div>	
	
<div class="d-flex pill-btn-container">
	<div class="pill-btn one-year-btn"><span class="pill-btn-text">Dashboard<span></div>
	<div class="pill-btn two-years-btn"><span class="pill-btn-text">Marketplace</span></div>
	<div class="pill-btn three-years-btn"><span class="pill-btn-text">Hosting</span></div>