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 / flyin-movie-title.markdown
Created January 30, 2020 22:58
FlyIn Movie Title

FlyIn Movie Title

Text animated with CSS to recreate the opening titles of a movie.

A Pen by Vuild on CodePen.

License.

@CodeMyUI
CodeMyUI / index.html
Created January 30, 2020 00:32
Yeti Hand Pagination
<main>
<div id="pagination-container">
<div id="indicator"></div>
<a class="pag-link" href="#">1</a>
<a class="pag-link" href="#">2</a>
<a class="pag-link" href="#">3</a>
<a class="pag-link" href="#">4</a>
<a class="pag-link" href="#">5</a>
<svg id="hand-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350 450">
<path fill="#3A5E77" d="M40.6 523C12.5 475.6-1 425.4.5 373.7c1.2-40.7 11.7-81.6 31.2-121.6 31.4-64.4 75.5-104.7 80.4-109.1l79.9 89.5.2-.2c-.3.3-32.9 30.3-54.1 75.4-25.5 54.2-23.6 104.6 5.7 154.1L40.6 523z"/>
@CodeMyUI
CodeMyUI / e-commerce-navigation-bar.markdown
Created January 29, 2020 23:27
E-Commerce Navigation Bar
@CodeMyUI
CodeMyUI / index.html
Created January 29, 2020 23:13
Perspective button hover effect
<ul>
<li>home</li>
<li>products</li>
<li>services</li>
<li>contact</li>
</ul>
@CodeMyUI
CodeMyUI / index.html
Created January 20, 2020 23:17
Sign Up Form With Progressive Disclosure | Micro Interaction
<div id="app-cover">
<h1 id="heading">Sign Up</h1>
<form method="post" action="" autocomplete="off">
<div id="inp-box-cover">
<div id="inp-padd">
<div class="inp-box" id="email">
<input type="email" class="inp" placeholder="Your email address" spellcheck="false" autocomplete="off">
</div>
<div class="inp-box" id="username">
<input type="text" class="inp" placeholder="Your username" spellcheck="false">
@CodeMyUI
CodeMyUI / angled-youtube-embed.markdown
Created January 20, 2020 23:01
Angled Youtube Embed
@CodeMyUI
CodeMyUI / index.html
Created January 16, 2020 23:55
Info Cards Concept
<div class="container">
<div class="card">
<h2>North</h2>
<i class="fas fa-arrow-right"></i>
<p>a lonely trip.</p>
<div class="pic"></div>
<ul>
<li></li>
<li></li>
<li></li>
@CodeMyUI
CodeMyUI / index.html
Created January 16, 2020 23:45
Social share button
<div class="btn_wrap">
<span>Share</span>
<div class="container">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-github"></i>
</div>
</div>
@CodeMyUI
CodeMyUI / index.html
Created January 16, 2020 23:06
Nat Geo Highlight Effect
<body>
<main>
<div>
<h1>Nat Geo Hover Effect</h1>
<p><a href="https://www.nationalgeographic.com" target="blank">National Geographic</a> has this simple & stylish hover state that I wanted to disect. It works well for editorial content because it resembles highlighted text.</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/508143/catboat.gif"/>
<p>
"The enterprise started in 1966 when Henriette van Weelde, known locally as the “cat lady,” <a href="https://www.atlasobscura.com/places/de-poezenboot-the-cat-boat" target="blank">began taking in abandoned cats on an old sailing barge she had modified with a cat-friendly interior</a>."
</p>
</div>
@CodeMyUI
CodeMyUI / expanding-flex-cards.markdown
Created January 15, 2020 23:54
Expanding flex cards