/
index.html
140 lines (111 loc) · 3.88 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Heather Payne</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="content">
<div class="header">
<div class="heather_logo">
<img src="images/logo-heatherpayne.png">
</div>
<div class="nav">
<ul>
<li><a href="#">about</a></li>
<li><a href="#">calendar</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
</div>
<div class="triangle">
<img src="images/home-blog-full.png" alt="Home Blog">
</div>
<div class="short_bio">
<span class="intro">Heather Payne is the founder of <a href="http://www.ladieslearningcode.com" target="_blank">Ladies Learning Code</a>, a Toronto-based not-for-profit startup that runs wildly popular workshops for women (and men) who want to learn computer programming and other technical skills in a social and collaborative way.</span>
<p>In addition to community-building projects for <a href="https://www.mozilla.org/en-US/foundation/" target="_blank">Mozilla Foundation</a>, she recently founded <a href="http://www.hackeryou.com" target="blank">HackerYou</a> as a way to bring more learning experiences around technology, startups and entrepreneurship to Toronto.</p>
</div>
<div class="learnmore_button">
<div id="parallelogram">
<a href="#">Learn more about Heather</a>
</div>
</div>
<div class="life_chart clearfix">
<div class="life_pie">
<img src="images/piechart.png" alt="">
</div>
<div class="life_chart_column">
<ul>
<div class="heading">
My life these days
</div>
<li>
<span class="lightblue">▶</span>
<span class="percent">30%</span>
<p>Running HackerYou</p>
</li>
<li>
<span class="darkgreen">▶</span>
<span class="percent">20%</span>
<p>Running Ladies Learning Code and Girls Learning Code</p>
</li>
<li>
<span class="darkyellow">▶</span>
<span class="percent">15%</span>
<p>Running events for Mozilla</p>
</li>
<li>
<span class="medblue">▶</span>
<span class="percent">13%</span>
<p>Advising ShopLocket (I'm an investor!)</p>
</li>
<li>
<span class="darkblue">▶</span>
<span class="percent">10%</span>
<p>Writing (check out the blog)</p>
</li>
<li>
<span class="green">▶</span>
<span class="percent">10%</span>
<p>Speaking (upcoming events)</p>
</li>
<li>
<span class="yellow">▶</span>
<span class="percent">02%</span>
<p>Eating pizza</p>
</li>
</ul>
</div>
</div> <!-- end life chart -->
</div>
<div class="footer">
<div class="footer_map">
<div class="footer_content">
<div class="footer_twitter">
<a href="#" class="twitter">Twitter</a>
<a href="#">Want to follow me on Twitter?</a>
<a href="#"><span class="darkyellow">Follow @heatherpayne</span></a>
</div>
<div class="footer_email">
<a href="mailto:heatherpayne.com" class="email">Email</a>
<a href="#">Get in touch by email</a>
<a href="mailto:heatherpayne.com"><span class="darkyellow">heather@heatherpayne.ca</a></span></a>
</div>
<div class="credit">
<p>© 2012 Heather Payne</p>
<p>Developed with love by Heather</p>
<p>Designed by Function</p>
</div>
</div> <!-- footer_content end -->
</div> <!-- footer map -->
<div class="bubble">
<img src="images/footer-heatherpayne.jpg"><p>I live and work in Toronto near <span class="darkyellow">King St W. & Spadina Ave</span>. Get in touch and let’s grab a coffee. Email <a href="mailto:heather@heatherpayne.ca">heather@heatherpayne.ca ▸</a></p>
</div>
</div> <!-- footer end -->
</div> <!-- wrapper end -->
</body>
</html>