Skip to content

Instantly share code, notes, and snippets.

View califat's full-sized avatar

califat

1 follower · 6 following
View GitHub Profile
@califat
califat / angularjs-form-validation.markdown
Created July 4, 2017 07:57 — forked from anonymous/angularjs-form-validation.markdown
AngularJS Form Validation
@califat
califat / index.html
Created July 4, 2017 07:12 — forked from anonymous/index.html
Material Design Form Inputs (with Phone validation)
<section class="site-container padding-tb">
<section class="card wow fadeInLeft">
<h3 class="wow fadeInDown" data-wow-delay="0.4s">Login Form</h3>
<form action="#" class="form" method="post">
<div class="form__wrapper wow fadeInDown" data-wow-delay="0.5s">
<input type="email" class="form__input" id="email" name="email">
@califat
califat / index.html
Created July 4, 2017 07:11 — forked from anonymous/index.html
Material Design Input Text
<form>
<h1>Material Design Text Input With No Extra Markup</h1>
<input placeholder="Username" type="text" required="">
<input placeholder="Password" type="password" required="">
<button>Submit</button>
</form>
<a class="follow" href="https://twitter.com/mildrenben" target="_blank"><i class="fa fa-twitter"></i>Follow Me</a>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
@califat
califat / index.html
Created July 3, 2017 06:42 — forked from anonymous/index.html
jQuery | Fullscreen Hero Image Slider (Swipe Panels Theme)
<div class="container">
<!-- Panels -->
<div class="swipe">
<div class="panel" data-img="http://payload100.cargocollective.com/1/9/296422/4317770/1%20-%20Landscape%201_o.jpg"></div>
<div class="panel" data-img="http://payload100.cargocollective.com/1/9/296422/4317770/1%20-%20Landscape%208_o.jpg"></div>
<div class="panel" data-img="http://payload100.cargocollective.com/1/9/296422/4317770/1%20-%20Landscape%209_o.jpg"></div>
<div class="panel" data-img="http://payload100.cargocollective.com/1/9/296422/4317770/2-%20Arquitectura%205_o.jpg"></div>
<div class="panel" data-img="http://payload100.cargocollective.com/1/9/296422/4317770/3%20-%20Interiores%201_o.jpg"></div>
</div>
@califat
califat / an-endless-hike-on-a-tiny-world.markdown
Created June 29, 2017 05:10 — forked from anonymous/an-endless-hike-on-a-tiny-world.markdown
An endless hike on a tiny world
@califat
califat / index.html
Created June 17, 2017 09:03 — forked from anonymous/index.html
Pure javascript draggable div (Touch and Mouse supported)
<!--http://JunesiPhone.com-->
<html>
<head>
<title></title>
</head>
<body>
<div id="container">
<div id="slider" ><div id="inner">&#10143;</div></div>
</div>
</body>
@califat
califat / index.html
Created June 17, 2017 09:02 — forked from anonymous/index.html
Pure JS drag and drop functionality.
<!--First Drop Target-->
<h2>Drag my blocks panel to panel!</h2>
<div data-drop-target="true">
<div id="box1" draggable="true" class="box navy"></div>
<div id="box2" draggable="true" class="box red"></div>
<div id="box3" draggable="true" class="box green"></div>
<div id="box4" draggable="true" class="box orange"></div>
<div id="box5" draggable="true" class="box navy"></div>
<div id="box6" draggable="true" class="box red"></div>
<div id="box7" draggable="true" class="box green"></div>
@califat
califat / index.html
Created June 17, 2017 09:02 — forked from anonymous/index.html
Pure JS Div Drag
<div id='container'>Drag the blue box around</div>
<div id='slider'></div>
@califat
califat / index.html
Created June 17, 2017 09:01 — forked from anonymous/index.html
Pure JavaScript Draggable Dialog Box
<p><a href="javascript:setDialog('open', {title: 'Example Title', content: 'Hello!'});">Open Dialog!</a> <a href="javascript:setDialog('close');">Close Dialog!</a></p>
<h3>Advanced Example</h3>
<pre><code>document.getElementById('ny-btn').onclick = function() {
setDialog("open", {
title: "The Dialog Box Title",
width: 400,
height: 200,
content: "Hello!",
buttons: {
@califat
califat / index.html
Created June 17, 2017 09:00 — forked from anonymous/index.html
Pure JavaScript Draggable Ball
<div id="ball"></div>