jeangontijo

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

jeangontijo

<script type="text/javascript">
    window.addEventListener("resize", aspectRatio);
    function aspectRatio() {
        var w = window.innerWidth;
        var h = window.innerHeight;
        var r = w/10;
        var aspect = document.querySelector('pre');
        var rounded = Math.round( h/r * 10 ) / 10;
        aspect.innerHTML = "<pre style='position:fixed; top: 30px; right: 30px; color: #fff; background: #000; padding: 10px 20px; z-index: 99999999;'>"+ w/r +":"+ rounded +"</pre>";
    }

jeangontijo

// <a href="#" onclick="doScrolling('#myID', 1500)">

function getElementY(query) {
    return window.pageYOffset + document.querySelector(query).getBoundingClientRect().top
}

function doScrolling(element, duration) {
    var startingY = window.pageYOffset
    var elementY = getElementY(element)
    var targetY = document.body.scrollHeight - elementY < window.innerHeight ? document.body.scrollHeight - window.innerHeight : elementY

jeangontijo

// Replace :hover for .hover

var card = document.querySelectorAll('.card');
Array.prototype.slice.call(card).forEach(function(item) {
    item.addEventListener('touchstart', function(e) {
        this.classList.toggle("hover");
    }, false);
    item.addEventListener('mouseenter', function(e) {
        this.classList.add("hover");
    }, false);

jeangontijo

var slider = document.getElementById("hero");
var classes = ['slide1', 'slide2', 'slide3', 'slide4'];

var myInterval = setInterval(function () {
    changeClass()
}, 5000);

var i = 0;

function changeClass() {

jeangontijo

var interval = setInterval(function() {
    if(document.readyState === 'complete') {
        document.body.classList.remove('load'); 
        clearInterval(interval);
    }    
}, 100);

jeangontijo

var ww;
var wh;
var setViewport = function () {
  ww = window.innerWidth || document.documentElement.clientWidth;
  wh = window.innerHeight || document.documentElement.clientHeight;
}
setViewport();

window.addEventListener('resize', function () {
	setViewport();

jeangontijo

.floating-label {
  position:  relative; 
  margin-bottom:  10px; 
  label {
    position:  absolute; 
    top: calc(50% - 7px);
    left:  0; 
    opacity:  0; 
    transition:  all .3s ease; 
  }

jeangontijo

var nav = document.querySelector('.nav__toggle');
var toggleState = function (elem, one, two) {
  var elem = document.querySelector(elem);
  elem.setAttribute('data-state', elem.getAttribute('data-state') === one ? two : one);
};

nav.onclick = function (e) {
  toggleState('.nav ul', 'closed', 'open');
  e.preventDefault();
};

jeangontijo

// HTML
// <div class="container">
//   <img src="https://picsum.photos/1920/1079" alt="">
//   <img src="https://picsum.photos/1920/1081" alt="">
//   <img src="https://picsum.photos/1921/1081" alt="">
//   <img src="https://picsum.photos/1922/1081" alt="">
// </div>

// SCSS
// .container {