Custom Animated Links with Psuedo Elements
A Pen by designcourse on CodePen.
import React, { useState, useEffect, useContext } from "react"; | |
import Modal from 'react-modal'; | |
import { Line } from 'rc-progress'; | |
import { Text } from 'react-native'; | |
import chatContext, {controlMessageEnum} from './ChatContext'; | |
import { PollContext } from './PollContext'; | |
import styles from './pollStyles'; |
<div class="page"> | |
<!--Sidebar--> | |
<div class="sidebar"> | |
<div class="panel"> | |
<div class="panel-header ">Project</div> | |
<!--Tree--> | |
<div class="panel-body"> | |
<lite-youtube videoid="ogfYd705cRs" style="background-image: url('https://i.ytimg.com/vi/ogfYd705cRs/hqdefault.jpg');"> | |
<div class="lty-playbtn"></div> | |
</lite-youtube> |
<div class="upload"> | |
<div class="text"> | |
<strong><span>Uploading</span> 3 files</strong> | |
<div> | |
<small>%</small> | |
<div> | |
<small> | |
<span data-seconds>0</span> seconds left | |
</small> | |
<small>Paused</small> |
/** | |
* Luhn algorithm in JavaScript: validate credit card number supplied as string of numbers | |
* @author ShirtlessKirk. Copyright (c) 2012. | |
* @license WTFPL (http://www.wtfpl.net/txt/copying) | |
*/ | |
var luhnChk = (function (arr) { | |
return function (ccNum) { | |
var | |
len = ccNum.length, | |
bit = 1, |
// takes the form field value and returns true on valid number | |
function valid_credit_card(value) { | |
// accept only digits, dashes or spaces | |
if (/[^0-9-\s]+/.test(value)) return false; | |
// The Luhn Algorithm. It's so pretty. | |
var nCheck = 0, nDigit = 0, bEven = false; | |
value = value.replace(/\D/g, ""); | |
for (var n = value.length - 1; n >= 0; n--) { |
<?xml version="1.0" encoding="UTF-8" standalone="no"?> | |
<svg class="NavLogo NavLogo--color" id="NavLogo-color" width="442px" height="90px" viewBox="0 0 2210 446" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"> | |
<!-- Generator: Sketch 3.3.2 (12043) - http://www.bohemiancoding.com/sketch --> | |
<title>Group + SUBVISUAL 52 Copy 66</title> | |
<desc>Created with Sketch.</desc> | |
<defs> | |
<linearGradient x1="72.2712425%" y1="39.1519547%" x2="-4.60414488%" y2="39.1519547%" id="NavLogo-linearGradient-1"> | |
<stop stop-color="#517F96" offset="0%"></stop> | |
<stop stop-color="#466D81" offset="100%"></stop> | |
</linearGradient> |
<input type="radio" name="choice" id="nav-1" checked> | |
<input type="radio" name="choice" id="nav-2"> | |
<input type="radio" name="choice" id="nav-3"> | |
<div id="app"> | |
<nav class="ui-nav"> | |
<div class="ui-bg"> | |
<div class="ui-cutout"></div> | |
<div class="ui-dot"></div> | |
</div> |