an experiment with hover states and social buttons
A Pen by André Givenchy on CodePen.
<audio id="audio-break" src="https://a.clyp.it/obco0n3a.mp3"></audio> | |
<audio id="audio-work" src="https://a.clyp.it/5tyslehe.mp3"></audio> | |
<div class="row"> | |
<div id="left" class="column"> | |
<h1>zero time</h1> | |
<p>Similar to the "Zero Dollar" approach finances, which is the act of telling every dollar where to go. Applying the same methodology to time is where the magic happens. | |
</p> | |
<div> | |
<h4>01 — Start by deciding what task to focus on.</h4> |
<div class="PageBackToWork"> | |
<h1 id="rotater-text" class="PageBackToWork-heading"> | |
<span id="we-are-text" class="PageBackToWork-heading-itText">We are</span> | |
<span class="PageBackToWork-heading-rotationTextContainer"> | |
<span data-rotater-text class="PageBackToWork-heading-rotationText">Listeners</span> | |
<span data-rotater-text class="PageBackToWork-heading-rotationText is-hidden is-inactive">Thinkers</span> | |
<span data-rotater-text class="PageBackToWork-heading-rotationText is-hidden is-inactive">Solvers</span> | |
<span data-rotater-text class="PageBackToWork-heading-rotationText is-hidden is-inactive">Partners</span> |
/* Import Metropolis Typeface from Github source */ | |
@font-face { font-family: Metropolis; src: url('https://github.com/chrismsimpson/Metropolis/blob/master/Fonts/Webfonts/WOFF2/Metropolis-Black.woff2'); | |
} | |
@font-face { font-family: Metropolis; src: url('https://github.com/chrismsimpson/Metropolis/blob/master/Fonts/Webfonts/WOFF2/Metropolis-BlackItalic.woff2'); | |
} |
.audioplayer | |
{ | |
height: 2.5em; /* 40 */ | |
color: #fff; | |
font-family: 'Montreux Grotesk', sans-serif; | |
font-size: .875 rem; | |
text-shadow: 1px 1px 0 #000; | |
border: 1px solid #222; | |
position: relative; | |
z-index: 1; |
<div class="holder"> | |
<div class="audio audio-player"> | |
<div class="loading"> | |
<div class="spinner"></div> | |
</div> | |
<div class="play-pause-btn"> | |
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="24" viewBox="0 0 0 24 24"> | |
<path fill="#ffffff" fill-rule="evenodd" d="M18 12L0 24V0" class="play-pause-icon" id="playPause"/> | |
</svg> | |
</div> |
A Pen by André Givenchy on CodePen.
A Pen by André Givenchy on CodePen.
<body> | |
<div class="video-container"> | |
<video id="video" disableRemotePlayback poster="https://cdn-std.droplr.net/files/acc_205555/d00I61" src="https://cdn.viqeo.tv/storage/72/59/eb441789490697bc2e574bd8a83e5d04.mp4"></video> | |
<div class="player-state"> | |
<span class="state-btn state-backward"> | |
<ion-icon name="play-back-outline"></ion-icon> | |
<span class="backward-duration">5</span> | |
</span> | |
<span class="main-state state-btn"> | |
<ion-icon name="play-outline"></ion-icon> |