Skip to content

Instantly share code, notes, and snippets.

View andregivenchy's full-sized avatar

andregivenchy

View GitHub Profile
@andregivenchy
andregivenchy / index.html
Last active November 19, 2022 10:30
Segern-Custom-HTML5-VideoPlayer
<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>
@andregivenchy
andregivenchy / audio-vidoe-players.markdown
Last active February 1, 2022 11:18
Audio + Vidoe Players
@andregivenchy
andregivenchy / custom-google-translate-widget.markdown
Created December 31, 2020 08:10
Custom Google Translate Widget
@andregivenchy
andregivenchy / index.html
Last active March 15, 2020 01:15
Minimal Audio Player
<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>
@andregivenchy
andregivenchy / aplayer.css
Created March 15, 2020 00:22
.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;
@andregivenchy
andregivenchy / metropolis.css
Created February 6, 2020 13:12
Simple typeface import css
/* 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');
}
@andregivenchy
andregivenchy / index.html
Last active January 11, 2020 15:10
Rotating Headline
<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>
@andregivenchy
andregivenchy / expanding-social-share-buttons.markdown
Created January 5, 2020 06:48
Expanding Social Share Buttons
@andregivenchy
andregivenchy / elastic-share-btns.scss
Created January 5, 2020 06:03
Some SCSS for a set of custom social share buttons.
body {
background: #000;
padding: 2em;
text-align: center;
}
* {
box-sizing: border-box;
}
@andregivenchy
andregivenchy / index.html
Last active August 22, 2019 07:18
zero time
<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>