We Keep Coding

Streamlabs Even List with photos

Here there,
I'm trying to customize streamlabs event list in order to show followers pictures beside the event message.
I don't have any idea about doing that cause i don't know how to get the avatars picture from facebook.
Here is an exemple about what i'm trying to mean.
All that í've done so far is below
html
<script type="text/template" id="eventlist_item">
<li class="{eventType}">
<div class="background"></div>
<div>
<span class="tag">{tag}</span>
<span class="message">{from}</span>
</div>
</li>
</script>
css
#import url('https://fonts.googleapis.com/css2?family=Heebo:wght#800&display=swap');
html, .widget-EventList li > div {
-webkit-transform: rotateX({rotate_x}) rotateY({rotate_y});
transform: rotateX({rotate_x}) rotateY({rotate_y});
}
.widget-EventList, .widget-EventList * {
box-sizing: border-box;
}
.widget-EventList {
font-weight: 700;
font-size: 30px;
font-family: 'Heebo', sans-serif;
color: {text_color};
background: transparent;
overflow: hidden;
list-style: none;
padding: 0;
text-transform: uppercase;
position: relative;
}
.widget-EventList li {
width: 25%;
position: relative;
-webkit-animation: {show_animation} {animation_speed} forwards;
animation: {show_animation} {animation_speed} forwards;
}
.widget-EventList li > div:first-child {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 8px;
opacity: 0.7;
-webkit-transition: opacity {animation_speed};
transition: opacity {animation_speed};
}
.widget-EventList li > div:last-child {
overflow: hidden;
position: relative;
margin-bottom: 4px;
padding: 0 10px;
opacity: 0.7;
font-size: 0.9em;
height: 1.2em;
line-height: 1.2em;
-webkit-animation: growB {animation_speed} forwards;
animation: growB {animation_speed} forwards;
}
.widget-EventList li:first-child > div:first-child {
opacity: 2;
}
.widget-EventList li:first-child > div:last-child {
-webkit-animation: growA {animation_speed} forwards;
animation: growA {animation_speed} forwards;
}
.widget-EventList li:nth-child(n+{max_events}) {
-webkit-animation: {hide_animation} {animation_speed} forwards;
animation: {hide_animation} {animation_speed} forwards;
}
#-webkit-keyframes growA {
0% {
opacity: 0;
font-size: 0em;
height: 0em;
line-height: 0em;
margin-bottom: 0px;
padding: 0;
}
100% {
opacity: 1;
font-size: 1em;
height: 1.6em;
line-height: 1.6em;
margin-bottom: 4px;
padding: 0 10px;
}
}
#keyframes growA {
0% {
opacity: 0;
font-size: 0em;
height: 0em;
line-height: 0em;
margin-bottom: 0px;
padding: 0;
}
100% {
opacity: 1;
font-size: 1em;
height: 1.6em;
line-height: 1.6em;
margin-bottom: 4px;
padding: 0 10px;
}
}
#-webkit-keyframes growB {
0% {
opacity: 1;
font-size: 1em;
height: 1.6em;
line-height: 1.6em;
}
}
#keyframes growB {
0% {
opacity: 1;
font-size: 1em;
height: 1.6em;
line-height: 1.6em;
}
}
.widget-EventList .tag {
font-size: 25px;
line-height: 5px;
top: 20px;
right: 15px;
position: absolute;
}
.widget-EventList .message {
padding-right: 15px;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.widget-EventList li {
text-shadow: 0 0 1px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.7), 0 0 3px rgba(0, 0, 0, 0.7);
}
.widget-EventList li > div:first-child {
background-color: transparent;
}
Js
// Please use event listeners to run functions.
document.addEventListener('onLoad', function(obj) {
// obj will be empty for event list
// this will fire only once when the widget loads
});
document.addEventListener('onEventReceived', function(obj) {
// obj will contain information about the event
});
[Exemple][1]
[1]: https://i.stack.imgur.com/z9KzI.png

Overflow hidden not including border-radius in Safari... sometimes

I have a button with a ripple animation on click.
In Safari the border-radius of the button isn't included with overflow: hidden:
So, I went to make a snippet demonstrating the issue to post here and, for the snippet, it worked:
new Vue({
el: "#app",
methods: {
ripple(e) {
let x = e.clientX - e.target.offsetLeft;
let y = e.clientY - e.target.offsetTop;
let ripple = document.createElement('span');
ripple.style.left = `${x}px`;
ripple.style.top = `${y}px`;
document.getElementsByClassName('dk__btn')[0].appendChild(ripple);
setTimeout(() => {
ripple.remove();
}, 500);
},
}
})
body {
background: black;
}
.dk__navbar {
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
right: 0;
left: 0;
padding: 10px;
text-align: left;
background-color: #fcf6cd;
color: #f6a623;
z-index: 2;
}
.dk__navbar-top {
top: 0;
}
.dk__navbar-bottom {
bottom: 0;
}
.dk__btn {
cursor: pointer;
position: relative;
padding: 10px 40px;
font-size: 20px;
font-weight: bold;
border: none;
border-radius: 25px;
color: white;
background: orange;
box-shadow: 0px 0px 5px -2px black;
outline: none;
overflow: hidden;
transition: all 0.5s;
}
.dk__btn > span {
pointer-events: none;
position: absolute;
background-color: white;
transform: translate(-50%, -50%);
border-radius: 50%;
height: 15rem;
width: 15rem;
animation: ripple-out 0.5s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
.dk__btn:hover {
background: red;
}
#keyframes ripple-out {
0% {
opacity: 0;
max-height: 0rem;
max-width: 0rem;
}
50% {
opacity: 0.3;
}
90% {
opacity: 0.1;
}
100% {
opacity: 0;
max-height: 10rem;
max-width: 10rem;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
<div data-v-41458b80="" class="dk__navbar dk__navbar-top" style="background-color: black; color: white; font-size: 15px;">
<div data-v-41458b80="" class="auth-btns"><button #click="ripple($event)" class="dk__btn" data-v-41458b80="" style="font-size: 15px; margin: 0px 10px;">Login</button>
</div>
</div>
</div>
</div>
Anyone have any idea why?
To clarify, it works in all other browsers I've tested.

You need to add webkit mask for safari it work fine. Need to add following css to .dk_btn
-webkit-mask-image: radial-gradient(white, black);
new Vue({
el: "#app",
methods: {
ripple(e) {
let x = e.clientX - e.target.offsetLeft;
let y = e.clientY - e.target.offsetTop;
let ripple = document.createElement('span');
ripple.style.left = `${x}px`;
ripple.style.top = `${y}px`;
document.getElementsByClassName('dk__btn')[0].appendChild(ripple);
setTimeout(() => {
ripple.remove();
}, 500);
},
}
})
body {
background: black;
}
.dk__navbar {
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
right: 0;
left: 0;
padding: 10px;
text-align: left;
background-color: #fcf6cd;
color: #f6a623;
z-index: 2;
}
.dk__navbar-top {
top: 0;
}
.dk__navbar-bottom {
bottom: 0;
}
.dk__btn {
cursor: pointer;
position: relative;
padding: 10px 40px;
font-size: 20px;
font-weight: bold;
border: none;
border-radius: 25px;
color: white;
background: orange;
box-shadow: 0px 0px 5px -2px black;
outline: none;
overflow: hidden;
transition: all 0.5s;
-webkit-mask-image: radial-gradient(white, black);
}
.dk__btn>span {
pointer-events: none;
position: absolute;
background-color: white;
transform: translate(-50%, -50%);
border-radius: 50%;
height: 15rem;
width: 15rem;
animation: ripple-out 0.5s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
.dk__btn:hover {
background: red;
}
#keyframes ripple-out {
0% {
opacity: 0;
max-height: 0rem;
max-width: 0rem;
}
50% {
opacity: 0.3;
}
90% {
opacity: 0.1;
}
100% {
opacity: 0;
max-height: 10rem;
max-width: 10rem;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
<div data-v-41458b80="" class="dk__navbar dk__navbar-top" style="background-color: black; color: white; font-size: 15px;">
<div data-v-41458b80="" class="auth-btns"><button #click="ripple($event)" class="dk__btn" data-v-41458b80="" style="font-size: 15px; margin: 0px 10px;">Login</button>
</div>
</div>
</div>
</div>

Having issues with child element showing menu options

I am using Shopify & VUE to create a sidebar menu pulling in shopify linklists. The main links are showing, but the child links are hidden and the toggle/active state is no shoing the dropdown as expected.
Here is a codepen example https://codepen.io/benmoswm/pen/RwPydrm
I have been starting at this for hours but missing something obvious, but not to me. Any advice would be great. thanks
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<div id="sidebar-panel">
<nav class="sidebar-main-nav-evergreen">
<Burger>Shop</Burger>
</nav>
<Sidebar>
<ul class="evergreen-main-nav">
{% for link in linklists.main-menu-sidebar.links %}
{% include 'desktop-navigation-link' %}
{% endfor %}
</ul>
</Sidebar>
</div>
<template id="sidebar">
<div class="sidebar">
<div class="sidebar-backdrop" v-on:click="closeSidebarPanel" v-if="isPanelOpen"></div>
<transition name="slide">
<div v-if="isPanelOpen"
class="sidebar-panel">
<slot></slot>
</div>
</transition>
</div>
</template>
<template id="burger">
<div id="burger"
:class="{ 'active' : isBurgerActive }"
#click.prevent="toggle">
<slot>
<button type="button" class="burger-button" title="Menu">
<span class="hidden">Toggle menu</span>
<span class="burger-bar burger-bar--1"></span>
<span class="burger-bar burger-bar--2"></span>
<span class="burger-bar burger-bar--3"></span>
</button>
</slot>
</div>
</template>
<style>
.sidebar-panel {
overflow-y: auto;
background-color: #eaeaea;
position: fixed;
left: 0;
top: 0;
height: 100%;
z-index: 999;
padding: 3rem 20px 2rem 20px;
width: 320px;
}
.sidebar-main-nav-evergreen {
float: left;
width: auto;
margin: 0 36px 0 0;
display: block;
position: relative;
font-size: 14px;
padding: 26px 2px 19px;
height: 65px;
line-height: 1.6;
text-transform: uppercase;
}
.slide-enter-active, .slide-leave-active {
transition: transform 0.2s ease;
}
.slide-enter, .slide-leave-to {
transform: translateX(-100%);
transition: all 150ms ease-in 0s
}
.sidebar-backdrop {
background-color: rgba(250, 250, 250, .4);
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
cursor: pointer;
z-index: 10;
}
.evergreen-main-nav {
list-style: none;
margin: 0;
padding: 25px
}
.evergreen-main-nav .evergreen-main-nav-item {
padding: 15px 0;
display: block;
position: relative;
font-weight: 400;
font-size: 15px;
border-bottom: 0px solid #ddd
}
.evergreen-main-nav .evergreen-main-subnav .evergreen-main-nav-item {
font-weight: 300
}
.evergreen-main-nav .evergreen-main-nav-item:last-child {
border-bottom: 0
}
.evergreen-main-nav .evergreen-main-nav-item a {
color: inherit
}
.evergreen-main-subnav {
padding-left: 15px;
margin: 0;
display: none;
}
.evergreen-main-subnav .evergreen-main-nav-item:last-child {
padding-bottom: 0;
}
.evergreen-child-menu {
float: right;
cursor: pointer;
}
.evergreen-child-menu::after {
content: "\f078";
display: inline-block;
font-family: 'FontAwesome';
font-weight: 400;
font-size: 10px;
width: 30px;
text-align: center
}
.evergreen-main-nav-item-has-children .evergreen-main-nav-active .evergreen-child-menu::after {
content: "\f077"
}
.evergreen-main-nav-item-has-children .evergreen-main-nav-active .evergreen-main-subnav {
display: block;
}
/* burger */
.hidden {
visibility: hidden;
}
button {
cursor: pointer;
}
/* remove blue outline */
button:focus {
outline: 0;
}
.burger-button {
position: relative;
height: 30px;
width: 32px;
display: block;
z-index: 999;
border: 0;
border-radius: 0;
background-color: transparent;
pointer-events: all;
transition: transform .6s cubic-bezier(.165, .84, .44, 1);
}
.burger-bar {
background-color: #000;
position: absolute;
top: 50%;
right: 6px;
left: 6px;
height: 2px;
width: auto;
margin-top: -1px;
transition: transform .6s cubic-bezier(.165, .84, .44, 1), opacity .3s cubic-bezier(.165, .84, .44, 1), background-color .6s cubic-bezier(.165, .84, .44, 1);
}
.burger-bar--1 {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
.burger-bar--2 {
transform-origin: 100% 50%;
transform: scaleX(.8);
}
.burger-button:hover .burger-bar--2 {
transform: scaleX(1);
}
.no-touchevents .burger-bar--2:hover {
transform: scaleX(1);
}
.burger-bar--3 {
transform: translateY(6px);
}
#burger.active .burger-button {
transform: rotate(-180deg);
}
#burger.active .burger-bar {
background-color: #fff;
}
#burger.active .burger-bar--1 {
transform: rotate(45deg)
}
#burger.active .burger-bar--2 {
opacity: 0;
}
#burger.active .burger-bar--3 {
transform: rotate(-45deg)
}
</style>
<script>
const store = Vue.observable({
isNavOpen: false
});
const mutations = {
setIsNavOpen(yesno) {
store.isNavOpen = yesno;
},
toggleNav() {
store.isNavOpen = !store.isNavOpen;
}
};
Vue.component('sidebar', {
template: '#sidebar',
methods: {
closeSidebarPanel: mutations.toggleNav
},
computed: {
isPanelOpen() {
return store.isNavOpen
}
}
});
Vue.component('burger', {
template: '#burger',
computed: {
isBurgerActive() {
return store.isNavOpen
}
},
methods: {
toggle() {
mutations.toggleNav()
}
}
});
new Vue({
el: '#sidebar-panel'
})
</script>

.You have to make position as absolute on the submenu items.
Update
.evergreen-main-subnav {
padding:0;
margin:0;
display: none;
position:absolute;
top:10%;
left:33%;
background-color:#ccc;
}
.mobile-nav__item{
list-style:none;
width:100%;
text-align:left;
padding:8px;
}
.mobile-nav__item a{
text-decoration:none;
}
.mobile-nav__item a:hover{
font-weight:900;
text-decoration:underline;
}
.evergreen-main-nav-item:hover .evergreen-main-subnav{
display:block;
}
const store = Vue.observable({
isNavOpen: false
});
const mutations = {
setIsNavOpen(yesno) {
store.isNavOpen = yesno;
},
toggleNav() {
store.isNavOpen = !store.isNavOpen;
}
};
Vue.component('sidebar', {
template: '#sidebar',
methods: {
closeSidebarPanel: mutations.toggleNav
},
computed: {
isPanelOpen() {
return store.isNavOpen
}
}
});
Vue.component('burger', {
template: '#burger',
computed: {
isBurgerActive() {
return store.isNavOpen
}
},
methods: {
toggle() {
mutations.toggleNav()
}
}
});
new Vue({
el: '#sidebar-panel'
})
/* common styles */
html {
height: 100%;
overflow: hidden;
}
body {
border: 0;
margin: 0;
padding: 0;
font-family: "Lato";
height: 100%;
background-color: #d4d4d4;
}
.sidebar-panel {
overflow-y: auto;
background-color: #eaeaea;
position: fixed;
left: 0;
top: 0;
height: 100%;
z-index: 999;
padding: 3rem 20px 2rem 20px;
width: 320px;
}
.sidebar-main-nav-evergreen {
float: left;
width: auto;
margin: 0 36px 0 20px;
display: block;
position: relative;
font-size: 14px;
padding: 26px 2px 19px;
height: 65px;
line-height: 1.6;
text-transform: uppercase;
}
.slide-enter-active,
.slide-leave-active {
transition: transform 0.2s ease;
}
.slide-enter,
.slide-leave-to {
transform: translateX(-100%);
transition: all 150ms ease-in 0s;
}
.sidebar-backdrop {
background-color: rgba(250, 250, 250, 0.4);
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
cursor: pointer;
z-index: 10;
}
.evergreen-main-nav {
list-style: none;
margin: 0;
padding: 25px;
}
.evergreen-main-nav .evergreen-main-nav-item {
padding: 15px 0;
display: block;
position: relative;
font-weight: 400;
font-size: 15px;
border-bottom: 0px solid #ddd;
}
.evergreen-main-nav .evergreen-main-subnav .evergreen-main-nav-item {
font-weight: 300;
}
.evergreen-main-nav .evergreen-main-nav-item:last-child {
border-bottom: 0;
}
.evergreen-main-nav .evergreen-main-nav-item a {
color: inherit;
}
.evergreen-main-subnav {
padding:0;
margin:0;
display: none;
position:absolute;
top:10%;
left:33%;
background-color:#ccc;
}
.mobile-nav__item{
list-style:none;
width:100%;
text-align:left;
padding:8px;
}
.mobile-nav__item a{
text-decoration:none;
}
.mobile-nav__item a:hover{
font-weight:900;
text-decoration:underline;
}
.evergreen-main-nav-item:hover .evergreen-main-subnav{
display:block;
}
.evergreen-main-subnav .evergreen-main-nav-item:last-child {
padding-bottom: 0;
}
.evergreen-child-menu {
float: right;
cursor: pointer;
}
.evergreen-child-menu::after {
content: "\f078";
display: inline-block;
font-family: "FontAwesome";
font-weight: 400;
font-size: 10px;
width: 30px;
text-align: center;
}
.evergreen-main-nav-item-has-children
.evergreen-main-nav-active
.evergreen-child-menu::after {
content: "\f077";
}
.evergreen-main-nav-item-has-children
.evergreen-main-nav-active
.evergreen-main-subnav {
display: block;
}
/* burger */
.hidden {
visibility: hidden;
}
button {
cursor: pointer;
}
/* remove blue outline */
button:focus {
outline: 0;
}
.burger-button {
position: relative;
height: 30px;
width: 32px;
display: block;
z-index: 999;
border: 0;
border-radius: 0;
background-color: transparent;
pointer-events: all;
transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.burger-bar {
background-color: #000;
position: absolute;
top: 50%;
right: 6px;
left: 6px;
height: 2px;
width: auto;
margin-top: -1px;
transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1),
opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1),
background-color 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.burger-bar--1 {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
.burger-bar--2 {
transform-origin: 100% 50%;
transform: scaleX(0.8);
}
.burger-button:hover .burger-bar--2 {
transform: scaleX(1);
}
.no-touchevents .burger-bar--2:hover {
transform: scaleX(1);
}
.burger-bar--3 {
transform: translateY(6px);
}
#burger.active .burger-button {
transform: rotate(-180deg);
}
#burger.active .burger-bar {
background-color: #fff;
}
#burger.active .burger-bar--1 {
transform: rotate(45deg);
}
#burger.active .burger-bar--2 {
opacity: 0;
}
#burger.active .burger-bar--3 {
transform: rotate(-45deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<div id="sidebar-panel">
<nav class="sidebar-main-nav-evergreen">
<Burger>click me</Burger>
</nav>
<Sidebar>
<ul class="evergreen-main-nav">
<li class="evergreen-main-nav-item evergreen-main-nav-item-has-children">Ceramic Pots <span class="evergreen-child-menu"></span>
<ul class="evergreen-main-subnav">
<li class="mobile-nav__item">Bower</li>
<li class="mobile-nav__item">Wave</li>
</ul>
</li>
<li class="evergreen-main-nav-item">Large Pots</li>
<li class="evergreen-main-nav-item">Pot Stands</li>
<li class="evergreen-main-nav-item">Hanging Pots</li>
<li class="evergreen-main-nav-item">Watering Cans</li>
</ul>
</Sidebar>
</div>
<template id="sidebar">
<div class="sidebar">
<div class="sidebar-backdrop" v-on:click="closeSidebarPanel" v-if="isPanelOpen"></div>
<transition name="slide">
<div v-if="isPanelOpen" class="sidebar-panel">
<slot></slot>
</div>
</transition>
</div>
</template>
<template id="burger">
<div id="burger" :class="{ 'active' : isBurgerActive }" #click.prevent="toggle">
<slot>
<button type="button" class="burger-button" title="Menu">
<span class="hidden">Toggle menu</span>
<span class="burger-bar burger-bar--1"></span>
<span class="burger-bar burger-bar--2"></span>
<span class="burger-bar burger-bar--3"></span>
</button>
</slot>
</div>
</template>

How To Show A "Browser-Native" Dialog Box From A Web URL

When a user requests my URL, how can I show a dialog box to ask for login credentials first before showing anything, like this:
https://pasteboard.co/I9aeDzI.png
https://pasteboard.co/I9af5i7.png
Seems to me these dialog boxes are in-built or native to the browser. Also, when a user clicks on Submit, is it like an ordinary HTML tag?
It'll be good if someone can post links to relevant documentation on this feature, which I currently cannot seem to find with a simple Google search as I don't know what keywords appropriately describe it.
Like to learn more including:
How to get the webpage to show it ?
what happens behind the hood when someone clicks on Submit (eg. what HTTP request method it uses, which URL it will call) ?

Those are made with pure CSS and JavaScript.
You can't find anything like that because they aren't native browser features.
Maybe you see many websites using the same dialog box because they use templates and libraries built for that purpouse.
Take a look at this
var $btn = document.getElementById("submit");
var $form = document.getElementById("form")
function signIn() {
if ($form.checkValidity()) {
$btn.classList.add('pending');
window.setTimeout(function(){ $btn.classList.add('granted'); }, 1500);
}
}
$btn.addEventListener("click", signIn);
#import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i|Monoton");
#import url("https://fonts.googleapis.com/icon?family=Material+Icons");
* {
box-sizing: border-box;
}
html {
font-size: 14px;
}
body {
background: linear-gradient(to bottom, #68d8d6, #ffffff);
color: #454749;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Source Sans Pro', sans-serif;
min-height: 100vh;
}
h1, h2, h3, h4, h5, h6 {
font-family: Monoton, sans-serif;
margin-bottom: .5rem;
}
/**
* Tiles
*/
.tile {
background-color: #ffffff;
border-radius: .1rem;
box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.2), 0 0.25rem 0.25rem rgba(0, 0, 0, 0.2);
position: relative;
width: 100%;
min-width: 320px;
max-width: 24rem;
overflow: hidden;
}
.tile .tile-header {
background-image: url("https://res.cloudinary.com/dgmilxzy7/image/upload/c_scale,w_500,o_75,b_rgb:07beb8/v1506735375/CodePen/ViddenPixel.jpg");
background-position: center;
background-size: cover;
height: 12rem;
}
.tile .tile-body {
padding: 2rem;
}
/**
* Forms
*/
.form-input {
display: block;
position: relative;
margin-bottom: 1rem;
}
.form-input > .material-icons {
position: absolute;
font-size: 1.5rem;
top: 1.2rem;
}
.form-input > .material-icons ~ input, .form-input > .material-icons ~ .label, .form-input > .material-icons ~ .underline {
margin-left: 2.25rem;
width: calc(100% - 2.25rem);
}
.form-input input {
border: none;
box-shadow: none;
padding-top: 1.5rem;
padding-right: 0;
padding-bottom: 0.5rem;
padding-left: 0;
outline-style: none;
width: 100%;
}
.form-input input ~ .label {
color: #868e96;
font-size: 1rem;
margin: 0;
pointer-events: none;
position: absolute;
top: 1.5rem;
left: 0;
transition: top .2s,font .2s;
z-index: 1;
}
.form-input input ~ .underline {
background-color: #bdc1c5;
height: 1px;
width: 100%;
position: absolute;
bottom: 0;
}
.form-input input:hover ~ .underline, .form-input input:focus ~ .underline {
background-color: #07beb8;
}
.form-input input:hover ~ .label, .form-input input:focus ~ .label {
color: #07beb8;
}
.form-input input:focus ~ .underline {
height: 2px;
}
.form-input input:focus ~ .label, .form-input input:valid ~ .label {
top: 0;
font-size: 0.85rem;
}
.form-input input:-webkit-autofill ~ .label {
top: 0;
font-size: 0.85rem;
}
/**
* Buttons
*/
.btn {
border-radius: .2rem;
display: inline-block;
padding-top: 0.5rem;
padding-right: 1rem;
padding-bottom: 0.5rem;
padding-left: 1rem;
}
.btn, [role="button"], [type="button"] {
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
}
.btn-irenic {
background-color: #07beb8;
color: white;
}
.btn-irenic:hover, .btn-irenic:focus, .btn-irenic:active {
background-color: #06a5a0;
}
.btn-serene {
background-color: #3dccc7;
color: white;
}
.btn-serene:hover, .btn-serene:focus, .btn-serene:active {
background-color: #32beb9;
}
.btn-tranquil {
background-color: #68d8d6;
color: white;
}
.btn-tranquil:hover, .btn-tranquil:focus, .btn-tranquil:active {
background-color: #54d3d0;
}
.btn-calm {
background-color: #9ceaef;
color: white;
}
.btn-calm:hover, .btn-calm:focus, .btn-calm:active {
background-color: #86e5eb;
}
.btn-cool {
background-color: #c4fff9;
color: white;
}
.btn-cool:hover, .btn-cool:focus, .btn-cool:active {
background-color: #abfff6;
}
.btn-ice {
background-color: #ffffff;
color: white;
}
.btn-ice:hover, .btn-ice:focus, .btn-ice:active {
background-color: #f2f2f2;
}
.btn-base {
background-color: #454749;
color: white;
}
.btn-base:hover, .btn-base:focus, .btn-base:active {
background-color: #393a3c;
}
/**
* Utilities
*/
.clearfix:after {
content: "";
display: table;
clear: both;
}
.float-right {
float: right;
}
/**
*
*/
.submit-container {
position: relative;
}
.submit-container #submit {
position: relative;
z-index: 2;
outline: none;
opacity: 1;
transition: transform .1s ease-in, opacity .1s ease-in, border-radius .1s ease-in;
right: -1px;
}
.submit-container #submit span {
opacity: 1;
transition: opacity .1s ease-in;
}
.submit-container #submit.pending {
transform: scale(0.55, 1.5);
background-color: #07beb8;
border-radius: 50%;
opacity: 1;
}
.submit-container #submit.pending span {
opacity: 0;
}
.submit-container #submit.pending ~ .login-pending {
opacity: 1;
transform: scale(1, 1);
z-index: 3;
}
.submit-container #submit.granted ~ .login-pending {
opacity: 1;
transform: translate(-9rem, -11rem) scale(18, 18);
z-index: 3;
}
.submit-container #submit.granted ~ .login-pending .spinner {
opacity: 0;
}
.submit-container #submit.granted ~ .login-pending .login-granted-content {
opacity: 1;
}
.submit-container .login-pending {
height: 3rem;
width: 3rem;
background-color: #07beb8;
position: absolute;
border-radius: 50%;
right: 1rem;
bottom: -0.5rem;
opacity: 0;
overflow: hidden;
transform: translate(0, 0) scale(0.5, 0.5);
transition: transform .2s ease-in, scale .2s ease-in;
z-index: 1;
}
.submit-container .login-pending .login-granted-content {
background-image: url(https://res.cloudinary.com/dgmilxzy7/image/upload/c_scale,w_700,o_25,b_rgb:07beb8/v1506735375/CodePen/ViddenPixel.jpg);
background-position: center;
background-size: cover;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
opacity: 0;
position: absolute;
top: 0;
left: 0;
transition: opacity .2s ease-in .2s;
text-shadow: 0px 0px 20px #ffffff;
}
.submit-container .login-pending .login-granted-content .material-icons {
font-size: 5px;
position: relative;
left: 1.25px;
}
.spinner {
width: 3rem;
height: 3rem;
position: relative;
margin: 0 auto;
}
.spinner .dot1, .spinner .dot2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #68d8d6;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: dot-bounce 2.0s infinite ease-in-out;
animation: dot-bounce 2.0s infinite ease-in-out;
}
.spinner .dot2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
#-webkit-keyframes dot-bounce {
0%, 100% {
-webkit-transform: scale(0);
}
50% {
-webkit-transform: scale(1);
}
}
#keyframes dot-bounce {
0%, 100% {
transform: scale(0);
-webkit-transform: scale(0);
}
50% {
transform: scale(1);
-webkit-transform: scale(1);
}
}
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 400;
line-height: 1;
color: #fff;
text-align: left;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="tile">
<div class="tile-header">
<h2 style="color: white; opacity: .75; font-size: 4rem; display: flex; justify-content: center; align-items: center; height: 100%;">SIGN IN</h2>
</div>
<div class="tile-body">
<form id="form">
<label class="form-input">
<i class="material-icons">person</i>
<input type="text" autofocus="true" required />
<span class="label">Username</span>
<span class="underline"></span>
</label>
<label class="form-input">
<i class="material-icons">lock</i>
<input type="password" required />
<span class="label">Password</span>
<div class="underline"></div>
</label>
<div class="submit-container clearfix" style="margin-top: 2rem;">
<div id="submit" role="button" type="button" class="btn btn-irenic float-right" tabindex="0">
<span>SIGN IN</span>
</div>
<div class="login-pending">
<div class=spinner>
<span class="dot1"></span>
<span class="dot2"></span>
</div>
<div class="login-granted-content">
<i class="material-icons">done</i>
</div>
</div>
</div>
</form>
</div>
</div>

Codepen JQuery Code Doesn't Work In My Browser

I've searched online for a solution to this problem for a while now. Unfortunately, no luck. Here is the website I'm using the code from http://codepen.io/anon/pen/wagbYZ
Here is my code:
HTML -
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href="main.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Montserrat|Cardo' rel='stylesheet' type='text/css'>
</head>
<body>
<header class="main_h">
<div class="row">
<a class="logo" href="#">L/F</a>
<div class="mobile-toggle">
<span></span>
<span></span>
<span></span>
</div>
<nav>
<ul>
<li>Section 01</li>
<li>Section 02</li>
<li>Section 03</li>
<li>Section 04</li>
</ul>
</nav>
</div> <!-- / row -->
</header>
<div class="hero">
<h1><span>loser friendly</span><br>Batman nav.</h1>
<div class="mouse">
<span></span>
</div>
</div>
<div class="row content">
<h1 class="sec01">Section 01</h1>
<p>Hello World!</p>
<h1 class="sec02">Section 02</h1>
<p>Hello World!</p>
<h1 class="sec03">Section 03</h1>
<p>Hello World!</p>
<h1 class="sec04">Section 04</h1>
<p>Hello World!</p>
</div>
</body>
</html>
CSS:
#mixin small {
#media only screen and (max-width: 766px) {
#content;
}
}
$color: #8f8f8f;
$color2: #e8f380;
.main_h {
position: fixed;
top: 0px;
max-height: 70px;
z-index: 999;
width: 100%;
padding-top: 17px;
background: none;
overflow: hidden;
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
top: -100px;
padding-bottom: 6px;
font-family: "Montserrat", sans-serif;
#include small {
padding-top: 25px;
}
}
.open-nav {
max-height: 400px !important;
.mobile-toggle {
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
}
.sticky {
background-color: rgba(255, 255, 255, 0.93);
opacity: 1;
top: 0px;
border-bottom: 1px solid lighten($color, 30%);
}
.logo {
width: 50px;
font-size: 25px;
color: $color;
text-transform: uppercase;
float: left;
display: block;
margin-top: 0;
line-height: 1;
margin-bottom: 10px;
#include small {
float: none;
}
}
nav {
float: right;
width: 60%;
#include small {
width: 100%;
}
ul {
list-style: none;
overflow: hidden;
text-align: right;
float: right;
#include small {
padding-top: 10px;
margin-bottom: 22px;
float: left;
text-align: center;
width: 100%;
}
li {
display: inline-block;
margin-left: 35px;
line-height: 1.5;
#include small {
width: 100%;
padding: 7px 0;
margin: 0;
}
}
a {
color: #888888;
text-transform: uppercase;
font-size: 12px;
}
}
}
.mobile-toggle {
display: none;
cursor: pointer;
font-size: 20px;
position: absolute;
right: 22px;
top: 0;
width: 30px;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
transition: all 200ms ease-in;
#include small {
display: block;
}
span {
width: 30px;
height: 4px;
margin-bottom: 6px;
border-radius: 1000px;
background: $color;
display: block;
}
}
.row {
width: 100%;
max-width: 940px;
margin: 0 auto;
position: relative;
padding: 0 2%;
}
* {
box-sizing: border-box;
}
body {
color: $color;
background: white;
font-family: "Cardo", serif;
font-weight: 300;
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: none;
}
h1 {
font-size: 30px;
line-height: 1.8;
text-transform: uppercase;
font-family: "Montserrat", sans-serif;
}
p {
margin-bottom: 20px;
font-size: 17px;
line-height: 2;
}
.content {
padding: 50px 2% 250px;
}
.hero {
position: relative;
background: url(http://srdjanpajdic.com/slike/2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
text-align: center;
color: #fff;
padding-top: 110px;
min-height: 500px;
letter-spacing: 2px;
font-family: "Montserrat", sans-serif;
h1 {
font-size: 50px;
line-height: 1.3;
span {
font-size: 25px;
color: $color2;
border-bottom: 2px solid $color2;
padding-bottom: 12px;
line-height: 3;
}
}
}
.mouse {
display: block;
margin: 0 auto;
width: 26px;
height: 46px;
border-radius: 13px;
border: 2px solid $color2;
bottom: 40px;
position: absolute;
left: 50%;
margin-left: -14px;
span {
display: block;
margin: 6px auto;
width: 2px;
height: 2px;
border-radius: 4px;
background: $color2;
border: 1px solid transparent;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: scroll;
animation-name: scroll;
}
}
#-webkit-keyframes scroll {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
}
#keyframes scroll {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
}
JS:
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$('.main_h').addClass('sticky');
} else {
$('.main_h').removeClass('sticky');
}
});
$('.mobile-toggle').click(function() {
if ($('.main_h').hasClass('open-nav')) {
$('.main_h').removeClass('open-nav');
} else {
$('.main_h').addClass('open-nav');
}
});
$('.main_h li a').click(function() {
if ($('.main_h').hasClass('open-nav')) {
$('.navigation').removeClass('open-nav');
$('.main_h').removeClass('open-nav');
}
});
$('nav a').click(function(event) {
var id = $(this).attr("href");
var offset = 70;
var target = $(id).offset().top - offset;
$('html, body').animate({
scrollTop: target
}, 500);
event.preventDefault();
});
The HTML and CSS work fine, but the JQuery is giving me problems.

try wrapping the code in jquery document ready event
$(document).ready(function(){
//event listeners
});