odyright

Font Face

A mixin for writing @font-face rules in SASS.

Usage

Create a font face rule. Embedded OpenType, WOFF2, WOFF, TrueType, and SVG files are automatically sourced.

@include font-face(Samplino, fonts/Samplino);

odyright

GSAP Banner Ad - 2 in 1 - (300x600)

This is a mockup from last year, done as POC of an ad with two different paths/ctas.

A Pen by halvves on CodePen.

License.

odyright

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

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

<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

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

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

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

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;