xamronpc

Animated BottomBar Experiment (CSS Transitions only)

A Pen by xamronpc on CodePen.

License.

xamronpc

<div class="grid" data-columns>
    <section class="block">
    <div class="btns">
      <input type="radio" name="toggle" id="nav-toggle" checked/>
      <input type="radio" name="toggle" id="fav-toggle" />
      <input type="radio" name="toggle" id="set-toggle" />
      <input type="radio" name="toggle" id="mail-toggle" />
      <input type="radio" name="toggle" id="search-toggle" />
      <div class="tabs">
        <label for="nav-toggle" class='fontawesome-align-justify'></label>

xamronpc

<div class="grid" data-columns>
    <section class="block">
    <div class="btns">
      <input type="radio" name="toggle" id="nav-toggle" checked/>
      <input type="radio" name="toggle" id="fav-toggle" />
      <input type="radio" name="toggle" id="set-toggle" />
      <input type="radio" name="toggle" id="mail-toggle" />
      <input type="radio" name="toggle" id="search-toggle" />
      <div class="tabs">
        <label for="nav-toggle" class='fontawesome-align-justify'></label>

xamronpc

<div class="carousel">
    <div class="carousel__control">
    </div>
    <div class="carousel__stage">
        <div class="spinner spinner--left">
            <div class="spinner__face js-active" data-bg="#27323c">
                <div class="content" data-type="iceland">
                    <div class="content__left">
                        <h1>ICELAND<br><span>EUROPE</span></h1>
                    </div>

xamronpc

- icons =  ['outlook','onedrive','word','excel','powerpoint','onenote','sharepoint','teams','office','access','delve','infopath','project','sway','visio','yammer','delve']
h1 Transparent O365 Icons
each size in [16,48]
  .row
    h2 SVG (scalable #{size}px)
    each app in icons
      img.svg(src=`https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product-fluent/svg/${app}_${size}x1.svg` style=`width:${size}px`)
each size in [16,32,48,96]  
  .row
    h2 PNG (#{size}px)

xamronpc

Circular Calendar Display

A circular calendar and clock display, with and added weather and daily activity widget mock-ups.

A Pen by xamronpc on CodePen.

License.

xamronpc

<form>
		<input name="name" placeholder="What is your name?" class="name" required />
		<input name="emailaddress" placeholder="What is your email?" class="email" type="email" required />
    <textarea rows="4" cols="50" name="subject" placeholder="Please enter your message" class="message" required></textarea>
    <input name="submit" class="btn" type="submit" value="Send" />
</form>

xamronpc

<div class="login">
  <div class="photo"></div>
  <p class="name hidden" id="name">Hans Engebretsen</p>
  <div class="username-wrap"><input type="username" class="username" placeholder="Type name & hit enter" id="username-input" /></div>
  <div class="pw-box">
  <span class="flap">
    <div class="inner"></div>
    <div class="spine"></div>
    <div class="outer"></div>
  </span>

xamronpc

Flat UI Kit - Dribbble Rebound

Had a ton of fun with this one. I guess it's a bit of a city attraction dashboard.

Check out the original work here:

http://dribbble.com/shots/1377595-Flat-UI-kit-psd

A Pen by Tyler Fry on CodePen.

xamronpc

.wrapper
  %h1 
    Oh, hey there
  %h2
    Go ahead and click on the blocks to watch 'em pop
  -(1..9).each do |i|
    %input{:id => i,:type => 'checkbox'}
    %label{:for => i}
      %div
        .circle