forked from podrivo/thegoodman
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
87 lines (65 loc) · 5.49 KB
/
about.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
<!DOCTYPE html>
<html class="int a">
<head>
<meta charset="utf-8">
<title>About / The Good Man</title>
<meta name="description" content="About the project 'The Good Man', an experiment with basic CSS3 animations.">
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
<meta property="og:title" content="About / The Good Man">
<meta property="og:type" content="website">
<meta property="og:url" content="http://thegoodman.cc/about/">
<meta property="og:image" content="http://thegoodman.cc/files/ogp.png">
<meta property="og:description" content="About the project 'The Good Man', an experiment with basic CSS3 animations.">
<meta property="fb:admins" content="100001419763111">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" media="screen" href="/files/main.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:400italic,700italic|Montserrat:400,700">
<link rel="stylesheet" media="screen" href="/files/awwwards.css">
</head>
<body>
<!-- Awwwards -->
<div class="awwwards">
<a href="http://www.awwwards.com/web-design-awards/the-good-man" target="_blank">Site of the Day</a>
</div>
<!-- Pattern -->
<div class="pat"></div>
<!-- Menu -->
<nav><ul>
<li class="home"><a href="/" title="Home"><span data-icon="h"></span> <em>Home</em></a></li>
<li class="about"><a href="#!" title="About">About</a></li>
<li class="tests"><a href="/tests" title="Tests">Tests</a></li>
</ul></nav>
<!-- About -->
<section>
<h4>ABOUT</h4>
<p><b>Hello.</b> This project is about experimentations. <br> About CSS3 animations and a graduation project. <br> My name is <em>Pedro Ivo Hudson</em> and this is my debut.</p>
<p><b>The Good Man</b> is about visual transcription of a narrative. <br> Transformed into HTML elements and animated in CSS3, this project aims its efforts to build an <em>animation</em>, in a web browser.</p>
<p><b>Without images,</b> just web fonts and shapes, it’s intended to run smoothly in modern web browsers and to be as <em>scalable</em> as possible.</p>
<p><b>Also,</b> this is my graduation project in Graphic Design. It was intended to be a study about animation in code, to <em>understand</em> its quirks. <br> During the process, <a href="/tests" title="Tests">different tests</a> were performed.</p>
<p>If you’d like to talk, <b>get in touch</b> • </p>
<ul class="social">
<li><a href="znvygb:[email protected]?fhowrpg=Ibgr sbe Crqeb" title="[email protected]" target="_blank" class="contact"><span data-icon="@"></span> <em>email</em></a></li>
<li><a href="http://podrivo.com" title="www.podrivo.com" target="_blank"><span data-icon="p"></span> <em>www.podrivo.com</em></a></li>
<li><a href="http://github.com/podrivo" title="GitHub: @podrivo" target="_blank"><span data-icon="g"></span> <em>GitHub: @podrivo</em></a></li>
<li><a href="http://dribbble.com/podrivo" title="Dribbble: @podrivo" target="_blank"><span data-icon="d"></span> <em>Dribble: @podrivo</em></a></li>
<li><a href="http://twitter.com/podrivo" title="Twitter: @podrivo" target="_blank"><span data-icon="t"></span> <em>Twitter: @podrivo</em></a></li>
</ul>
<h4>CREDITS</h4>
<p><a href="http://soundcloud.com/husky-rescue/11-the-good-man" title="The Good Man" target="_blank">The Good Man</a>, song by <a href="http://husky-rescue.com/" title="Husky Rescue" target="_blank">Husky Rescue</a>.</p>
<p>Typography includes <a href="http://www.google.com/webfonts/specimen/Montserrat" title="Montserrat" target="_blank">Montserrat</a>, by Julieta Ulanovsky, and <a href="http://www.google.com/webfonts/specimen/Lato" title="Lato" target="_blank">Lato</a>, by Łukasz Dziedzic, and is served via <a href="http://google.com/webfonts" title="Google Web Fonts" target="_blank">Google Web Fonts</a>.</p>
<p>Icon font builder provided by <a href="http://icomoon.io/" title="IcoMoon" target="_blank">IcoMoon</a>.</p>
<p>Color palette by <a href="http://ethanschoonover.com/solarized" title="Solarized" target="_blank">Solarized</a>.</p>
<p>Special thanks to <a href="http://voltzdesign.com.br/" title="Voltz Design" target="_blank">Claudio Santos</a>, <a href="http://lucasfranco.com.br/" title="Lucas Franco" target="_blank">Lucas Franco</a> and <a href="http://bebopstudio.com.br/" title="Bebop Studio" target="_blank">João H. Martins</a>.</p>
<p>This project is licensed under <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons" target="_blank">CC BY 3.0</a>.</p>
</section>
<!-- JS -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/files/jquery.1.8.2.min.js"><\/script>')</script>
<script src="/files/prefixfree.min.js"></script>
<script src="/files/rotator.js"></script>
<script src="/files/main.js"></script>
<!-- Analytics -->
<script>var _gaq=[['_setAccount','UA-1769352-29'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'));</script>
<script>var GoSquared={};GoSquared.acct="GSN-371126-K";(function(w){function gs(){w._gstc_lt=+new Date;var d=document,g=d.createElement("script");g.type="text/javascript";g.src="//d1l6p2sc9645hc.cloudfront.net/tracker.js";var s=d.getElementsByTagName("script")[0];s.parentNode.insertBefore(g,s)}w.addEventListener?w.addEventListener("load",gs,false):w.attachEvent("onload",gs)})(window);</script>
</body>
</html>