Skip to content

Instantly share code, notes, and snippets.

Avatar

Larry Robinson larka06

View GitHub Profile
View fixed-disappearing-scrolling-header.markdown
View hero-idea.markdown
@larka06
larka06 / index.slim
Created Jul 13, 2020
Simple slide-out footer
View index.slim
header
h1 Simple Slide-Out Footer
main
article
h1 Chapter 1
p Along this particular stretch of line no express had ever passed. All the trains—the few that there were—stopped at all the stations. Denis knew the names of those stations by heart. Bole, Tritton, Spavin Delawarr, Knipswich for Timpany, West Bowlby, and, finally, Camlet-on-the-Water. Camlet was where he always got out, leaving the train to creep indolently onward, goodness only knew whither, into the green heart of England.
p They were snorting out of West Bowlby now. It was the next station, thank Heaven. Denis took his chattels off the rack and piled them neatly in the corner opposite his own. A futile pro- ceeding. But one must have something to do. When he had fin- ished, he sank back into his seat and closed his eyes. It was ex- tremely hot.
p Oh, this journey! It was two hours cut clean out of his life; two hours in which he might have done so much, so much—written the perfect poem, for example, or read the one illuminat
View index.html
<ul class="c-rainbow">
<li class="c-rainbow__layer c-rainbow__layer--white">RAINBOW</li>
<li class="c-rainbow__layer c-rainbow__layer--orange">RAINBOW</li>
<li class="c-rainbow__layer c-rainbow__layer--red">RAINBOW</li>
<li class="c-rainbow__layer c-rainbow__layer--violet">RAINBOW</li>
<li class="c-rainbow__layer c-rainbow__layer--blue">RAINBOW</li>
<li class="c-rainbow__layer c-rainbow__layer--green">RAINBOW</li>
<li class="c-rainbow__layer c-rainbow__layer--yellow">RAINBOW</li>
</ul>
@larka06
larka06 / index.html
Created Jun 11, 2020
Password Reveal
View index.html
<div class="container">
<div class="hidden">
<svg class="lock" width="30" height="40" viewBox="0 0 30 40">
<path class="lock-white" d="M 12.519565,0 C 6.7072359,0 2.0282227,4.622895 2.0282227,10.365511 V 19.386852 C 0.81380849,20.12592 0,21.438885 0,22.957364 V 40 H 30 V 22.957364 C 30,21.444973 29.193452,20.135235 27.987171,19.394457 V 10.365511 C 27.987171,4.622895 23.308158,0 17.495831,0 Z M 12.519565,4.384239 H 17.495831 C 20.923632,4.384239 23.682489,7.111909 23.682489,10.498597 V 19.002803 H 6.3309823 V 10.498597 C 6.3309823,7.111909 9.091764,4.384239 12.519565,4.384239 Z" />
</svg>
<input type="password" class="hidden-input" />
</div>
<div class="revealed">
<svg class="lock" width="30" height="40" viewBox="0 0 30 40">
<path class="lock-black" d="M 12.519565,0 C 6.7072359,0 2.0282227,4.622895 2.0282227,10.365511 V 19.386852 C 0.81380849,20.12592 0,21.438885 0,22.957364 V 40 H 30 V 22.957364 C 30,21.444973 29.193452,20.135235 27.98
View blazing-fire.markdown

Blazing Fire

Animated text effects using CSS3 text-shadow to give text headers a blazing flame

A Pen by Makan on CodePen.

License.