-
-
Notifications
You must be signed in to change notification settings - Fork 110
/
index.html
155 lines (134 loc) · 6.38 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!doctype html>
<html lang="en-gb">
<head>
<title>Lab of Alex Cican</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="Demos & HTML5 + CSS3 code experiments">
<meta name="viewport" content="width=device-width" />
<link rel="shortcut icon" href="http://alexcican.com/images/favicon.ico" type="image/x-icon" />
<link rel="author" href="https://plus.google.com/116801469202683881648/" />
<link rel="stylesheet" type="text/css" href="http://alexcican.com/style/style.min.css" />
<!--[if lt IE 10]>
<link rel="stylesheet" type="text/css" href="http://alexcican.com/style/ie9.css" />
<![endif]-->
<meta property="og:image" content="http://dribbble.s3.amazonaws.com/users/27913/screenshots/527584/card_flip.jpg" />
<meta property="og:title" content="Demos & HTML5 + CSS3 Experiments" />
<meta property="og:description" content="Demos & HTML5 + CSS3 code experiments of Alex Cican." />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@alexcican" />
<meta name="twitter:creator" content="@alexcican" />
<meta name="twitter:url" content="http://lab.alexcican.com/" />
</head>
<body>
<nav id="mainNav">
<span class="menuIcon icon" title="Menu (Esc)" tabindex="0" data-icon="m"><span>Menu</span></span>
<div id="navigation">
<p><span class="heading">alex cican</span><br/><span class="subheading">Product Designer</span></p>
<p class="menu_label">Menu</p>
<section>
<ul class="siteLinks">
<li><span>Site dishes</span></li>
<li><a href="http://alexcican.com" class="home" title="Learn about me (H)">Home</a></li>
<li><a href="http://alexcican.com/work/" class="work" title="Check out my work (W)">Work</a></li>
<li><a href="http://lab.alexcican.com" class="lab current" title="Visit my lab (L)">Lab</a></li>
<li><a href="http://alexcican.com/blog/" class="blog" title="Read my blog (B)">Blog</a></li>
<li><a href="http://alexcican.com/photos/" class="photos" title="View my photos (P)">Photos</a></li>
</ul>
<ul>
<li><span>Main contact</span></li>
<li><a href="mailto:alex@alexcican.com" class="email" title="Email me (E)">Email</a></li>
</ul>
<ul>
<li><span>Desserts</span></li>
<li><a href="http://twitter.com/alexcican" title="Find me on Twitter" target="_blank">Twitter</a></li>
<li><a href="http://dribbble.com/alexcican" title="Find me on Dribbble" target="_blank">Dribbble</a></li>
<li><a href="http://github.com/alexcican" title="Find me on GitHub" target="_blank">GitHub</a></li>
<li><a href="http://flickr.com/sican" title="Find me on Flickr" target="_blank">Flickr</a></li>
<li><a href="http://vimeo.com/alexcican" title="Find me on Vimeo" target="_blank">Vimeo</a></li>
<li><a href="http://instagram.com/alexcican" title="Find me on Instagram" target="_blank">Instagram</a></li>
<li><a href="http://youtube.com/sican" title="Find me on YouTube" target="_blank">YouTube</a></li>
<li><a href="http://be.net/alexcican" title="Find me on Behance" target="_blank">Behance</a></li>
</ul>
<p>Some of our dishes may contain sarcasm and humour. <br/>Please don’t inform our staff about any allergies you might have.</p>
</section>
</div>
</nav>
<div id="container">
<div id="fullWidthDemoContainer" class="notScrolling animateOnFirstLoad">
<section class="grey">
<a href="http://lab.alexcican.com/minimal_signup_form/" target="_blank">
<h2>Minimal sign up form</h2>
</a>
</section>
<section class="blue">
<a href="http://lab.alexcican.com/teehan_lax_navigation/" target="_blank">
<h2>Teehan+Lax navigation</h2>
</a>
</section>
<section class="red">
<a href="http://job.alexcican.com/airbnb/profile.html" target="_blank">
<h2>Airbnb profiles redesign</h2>
</a>
</section>
<section class="light_blue">
<a href="http://lab.alexcican.com/scrollr" target="_blank">
<h2>Responsive Parallax</h2>
</a>
</section>
<section class="green">
<a href="http://lab.alexcican.com/account_menu" target="_blank">
<h2>Account menu dropdown</h2>
</a>
</section>
<section class="pink">
<a href="http://lab.alexcican.com/login_form" target="_blank">
<h2>Login form</h2>
</a>
</section>
<section class="yellow">
<a href="http://lab.alexcican.com/switch" target="_blank">
<h2>Skeuomorphic light switch</h2>
</a>
</section>
<section class="orange">
<a href="http://lab.alexcican.com/card_flip" target="_blank">
<h2>Profile card flip</h2>
</a>
</section>
<section class="grey">
<a href="http://lab.alexcican.com/twitter_button" target="_blank">
<h2>Skeuomorphic Twitter button</h2>
</a>
</section>
<section class="light_mauve">
<a href="http://lab.alexcican.com/set_cookies" target="_blank">
<h2>How to set cookies with JavaScript</h2>
</a>
</section>
<section class="brown">
<a href="http://lab.alexcican.com/hide_show_div" target="_blank">
<h2>How to hide and show a DIV</h2>
</a>
</section>
</div>
<footer style="text-align: center">
Source code of all the experiments is on <a href="http://github.com/alexcican/lab/" target="_blank" title="GitHub">GitHub</a>.
</footer>
</div>
<!-- Load jQuery script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- Load main JS file -->
<script src="http://alexcican.com/javascript/basic.min.js"></script>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-6273751-7']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>