Skip to content

Instantly share code, notes, and snippets.

View doc22940's full-sized avatar

Acampbell doc22940

110 followers · 1.9k following
View GitHub Profile
@doc22940
doc22940 / index.html
Created July 2, 2021 14:00
Mario in CSS
<div class="mario-death-animation">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="mario"></div>
<div class="goomba"></div>
</div>
@doc22940
doc22940 / confettis-p5-js.markdown
Created March 1, 2021 19:30
confettis p5.js
@doc22940
doc22940 / 7-fluid.markdown
Created February 7, 2021 17:13
7. fluid
@doc22940
doc22940 / index.html
Created February 7, 2021 17:09
Tunnel Vision
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r124/three.min.js"></script>
<canvas></canvas>
@doc22940
doc22940 / css-playing-card.markdown
Created February 4, 2021 23:19
css playing card
@doc22940
doc22940 / index.html
Created January 20, 2021 23:44
Tic Tac Toe (Vanilla JS)
<div id="tictactoe"></div>
<div align="left">
<span id='turn'>Player X</span>
</div>
@doc22940
doc22940 / index.html
Created January 16, 2021 13:09
Non-traditional image wrap
<img class="photo" src="https://i.ibb.co/6FmDd2C/MUA3-Black-Panther.png" />
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Duis aut
@doc22940
doc22940 / index.html
Created December 21, 2020 18:53
Rotating hexagons
<div class="container">
<div class="line">
<div class="hex-part"></div>
<div class="hex-part"></div>
<div class="hex-part"></div>
<div class="hex-part"></div>
<div class="hex-part"></div>
<div class="hex-part"></div>
<div class="hex-part"></div>
</div>
@doc22940
doc22940 / index.html
Created December 21, 2020 18:53
spring
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
<div class="face"></div>
@doc22940
doc22940 / index.html
Created December 21, 2020 03:56
Simple animated slider with Swiper.js and GSAP TweenMax
<section>
<div class="swiper-container slideshow">
<div class="swiper-wrapper">
<div class="swiper-slide slide">
<div class="slide-image" style="background-image: url(https://images.unsplash.com/photo-1538083024336-555cf8943ddc?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=66b476a51b19889e13182c0e4827af18&auto=format&fit=crop&w=1950&q=80)"></div>
<span class="slide-title">Exotic places</span>
</div>