Skip to content

Instantly share code, notes, and snippets.

View CodeMyUI's full-sized avatar

CodeMyUI CodeMyUI

206 followers · 0 following
View GitHub Profile
@CodeMyUI
CodeMyUI / football-loader.markdown
Created November 6, 2019 04:55
Football Loader
@CodeMyUI
CodeMyUI / index.html
Created November 6, 2019 03:14
Tribute Page
<head>
<style>
@import 'https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i';
@import url("https://fonts.googleapis.com/css?family=Poppins:500,800&display=swap");
</style>
</head>
<!-- body -->
@CodeMyUI
CodeMyUI / index.html
Created November 6, 2019 02:20
Using Lettering.js to ████ text!
<div class="content">
<p>Curabitur <del>blandit tempus porttitor</del>. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod.</p>
<p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis <del>dapibus posuere velit aliquet</del>. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor.</p>
<p>Morbi leo risus, <del>porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit</del>. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem <del>lacinia quam</del> venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est
@CodeMyUI
CodeMyUI / index.html
Created November 6, 2019 01:31
Intro Text
<div class="intro-text" id="intro-text">
<h2>INTRO TEXT AWESOMENESS</h2>
<h2>Made Possible With</h2>
<h2>CSS ANIMATION</h2>
<h2>& A TINY BIT OF</h2>
<h2>JAVASCRIPT</h2>
<h2>TO INITIATE THE</h2>
<h2>jQuery LETTERING.js PLUGIN</h2>
<h2>REFRESH TO SEE IT AGAIN...</h2>
</div>
@CodeMyUI
CodeMyUI / index.html
Last active June 5, 2022 01:59
XWWEVbj
<div id="target">
CodeMyUI.com, web design inspiration and code snippets.<br/> <br/><br/>Nunc at lorem egestas, gravida lorem quis, pulvinar ante. Quisque id tempus libero. Mauris hendrerit nunc risus, ac laoreet lectus gravida et. Nam euismod magna ac enim posuere sagittis. Fusce at egestas enim, eu hendrerit enim.
</div>
<button onclick="takeScreenShot()">to image</button>
@CodeMyUI
CodeMyUI / del-ins.markdown
Created November 4, 2019 06:11
<del> & <ins>
@CodeMyUI
CodeMyUI / codepenchallenge-del-ins.markdown
Created November 4, 2019 05:59
#codepenchallenge <del> + <ins>

#codepenchallenge +

Here's a version that indicates there is deleted text, but keeps it out of view unless it's needed... It has been deleted after all ;)

#codepenchallenge for and

A Pen by Mark Praschan on CodePen.

License.

@CodeMyUI
CodeMyUI / accessible-drag-drop-sortable-list.markdown
Created November 4, 2019 03:10
Accessible drag & drop sortable list

Accessible drag & drop sortable list

I couldn't find a good solution that contained all the things I needed:

  • Accessible
  • Drag & Drop
  • Touch-friendly
  • Sorting (not just drag from box A to box B)
  • Full IE9 support

So I'm toying with this semantic approach. Credit to http://johnny.github.io/jquery-sortable/ for the great sortable plugin.

@CodeMyUI
CodeMyUI / index.html
Created November 4, 2019 01:22
VueJS and Sortable JS
<div id="app" class="container">
<div class="text-center" style="padding: 20px;">
<h3>Drag 'n Drop with VueJS and SortableJS</h3>
<span>Drag available option to the right.</span>
</div>
<div class="row" style="margin:5px; border-radius: 2px; padding: 5px; background-color: #F4F4F4;">
<li class="selected card" v-for="option in selected" v-colorswatch>
{{ option }}
</li>
@CodeMyUI
CodeMyUI / index.html
Created November 3, 2019 23:50
Skeleton screens with Jquery.skeleton.loader
<div class="skeleton">
<div class="content">
<div class="title-header pens-title-header">
<h1>Picked Pens</h1>
</div>
<div class="row" id="picked">
<div class="card">