matt-daniel-brown

Carousel

A simple vanilla JS carousel/image slider

Clicking the "beads" directly is still buggy

A Pen by Charles Ojukwu on CodePen.

License.

matt-daniel-brown

<header class="header">
  <div>
     <h1>An interesting title</h1>
    <hr>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque rerum voluptates perferendis, perspiciatis minima sed odit quam illum eligendi corporis.</p>
  </div>
  
</header>
<main class="main">
  <section>

matt-daniel-brown

<h1>UI Elements</h1>
<h2>Buttons</h2>
<button class="primary">Primary</button>
<button class="dark">Dark</button>
<button class="success">Proceed</button>
<button class="error">Error</button>

matt-daniel-brown

<!-- Header -->
<header class="header">
  <nav class="nav">
    <ul class="nav--menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

matt-daniel-brown

<nav class="nav" id="menu">
  <div class="wrap">
    <div class="brand">
      <span>Landing Page</span>
    </div>
      <button id="mobile-btn" class="hamburger-btn">
      <span class="hamburger-line"></span>
      <span class="hamburger-line"></span>
      <span class="hamburger-line"></span>
    </button>

matt-daniel-brown

<div class="option-group">
  <div class="option-container">

    <input class="option-input" checked id="option-1" type="radio" name="options" />
    <input class="option-input" id="option-2" type="radio" name="options" />
    
    <label class="option" for="option-1">
      <span class="option__indicator"></span>
      <span class="option__label">
        1<sub>gb</sub>

matt-daniel-brown

.player
  .player_inner
    .player_inner__artwork
      %h1.title
      %h2.song-name
      %p.time
    .player_inner__controls
      %i{'class' => 'material-icons prev'} skip_previous
      %i{'class' => 'material-icons play'}
      %i{'class' => 'material-icons next'} skip_next

matt-daniel-brown

Food Orders

A Pen by Jack Thomson on CodePen.

License.

matt-daniel-brown

HTML5 Semantics Stuff

A Pen by Steven Roberts on CodePen.

License.

matt-daniel-brown

Console Log Styles

A Pen by Matthew Daniel Brown on CodePen.

License.