odyright

$ brew update && brew doctor          # Repeat, until you've done *all* the Dr. has ordered!
$ brew install postgresql             # You'll need postgres to do this... you may also need to 'initdb' as well. Google it.

$ brew install elixir
$ mix local.hex                       # Answer y to any Qs
$ createuser -d postgres              # create the default 'postgres' user that Chris McCord seems to like -- I don't create mine w/a pw...

# Use the latest Phoenix from here: http://www.phoenixframework.org/docs/installation -- currently this is 1.0.3
# ** Answer y to any Qs **
$ mix archive.install https://github.com/phoenixframework/phoenix/releases/download/v1.0.3/phoenix_new-1.0.3.ez

odyright

Velocity.js fullscreen flexbox overlay navigation

Another take on my flexbox fullscreen overlay navigation. Spicing things up with a bit of Velocity.js

A Pen by Mirko Zorić on CodePen.

License.

odyright

/*** MAIN WRAPPER ***/
.gform_wrapper {
    background: #6000AA;
    padding: 5%;
}

/*** REMOVE LABEL FOR PLACEHOLDER ONLY ***/
.gform_wrapper .top_label .gfield_label,
.gform_wrapper .field_sublabel_below .ginput_complex.ginput_container label {
    display: none;

odyright

/*** MAIN WRAPPER ***/
.gform_wrapper {
    background: #6000AA;
    padding: 5%;
}

/*** REMOVE LABEL FOR PLACEHOLDER ONLY ***/
.gform_wrapper .top_label .gfield_label,
.gform_wrapper .field_sublabel_below .ginput_complex.ginput_container label {
    display: none;

odyright

  <!-- Page preloader -->
        <div id="hola">
        <div id="preloader">
        <span></span>
        <span></span>
          </div>
            </div>

        <!-- Start content -->
        <div class="page-wrap">

odyright

Material VCard

Another example of clip-path property for revealing content effect. This experiment will work on Latest Chrome, haven't tested on another browser.

The transition itself is not smooth i think, i have some difficulty time with the javascript. If you have better method please let me know in the comment.

The Design and animation Choreography itself was inspired by Great Shot from CHRISTOPHE KEREBEL on MaterialUp ( https://www.materialup.com/posts/personal-social-card-material-design-animation )

A Pen by Rian Ariona on CodePen.

odyright

Material VCard

Another example of clip-path property for revealing content effect. This experiment will work on Latest Chrome, haven't tested on another browser.

The transition itself is not smooth i think, i have some difficulty time with the javascript. If you have better method please let me know in the comment.

The Design and animation Choreography itself was inspired by Great Shot from CHRISTOPHE KEREBEL on MaterialUp ( https://www.materialup.com/posts/personal-social-card-material-design-animation )

A Pen by Rian Ariona on CodePen.

odyright

<div class="materialContainer">


   <div class="box">

      <div class="title">LOGIN</div>

      <div class="input">
         <label for="name">Username</label>
         <input type="text" name="name" id="name">

odyright

var str = 'class ಠ_ಠ extends Array {constructor(j = "a", ...c) {const q = (({u: e}) => {return { [`s${c}`]: Symbol(j) };})({});super(j, q, ...c);}}' + 
          'new Promise((f) => {const a = function* (){return "\u{20BB7}".match(/./u)[0].length === 2 || true;};for (let vre of a()) {' +
          'const [uw, as, he, re] = [new Set(), new WeakSet(), new Map(), new WeakMap()];break;}f(new Proxy({}, {get: (han, h) => h in han ? han[h] ' + 
          ': "42".repeat(0o10)}));}).then(bi => new ಠ_ಠ(bi.rd));';

try {
  eval(str);
} catch(e) {
  alert('Your browser does not support ES6!')
}

odyright

//REVOLUTION SLIDER
$('.fullwidthbanner').revolution(
  {
    delay:59000,
    startheight:640,
    disableProgressBar: 'off',
    spinner: 'spinner1',
    hideThumbs:200,
    stopAfterLoops:0, 
    minHeight: 500,