-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
119 lines (90 loc) · 9.6 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
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header role="banner">
<h1>My website</h1>
</header>
<nav role="navigation">
<ul>
<li><a href="now/index.html">Now</a></li>
<li><a href="links/index.html">Links</a></li>
<li><a href="projects/index.html">Projects</a></li>
<li><a href="research/index.html">Research</a></li>
<li><a href="talks/index.html">Talks</a></li>
<li><a href="teaching/index.html">Teaching</a></li>
<li><a href="publications/index.html">Publications</a></li>
<li><a href="resume/index.html">Resume</a></li>
<li><a href="blog/index.html">Blog</a></li>
<li><a href="about/index.html">About</a></li>
</ul>
</nav>
<main>
<h1>🧰 Today’s Toolkit</h1>
<p><a href="sample.html">Basic web page</a></p>
<p><a href="sample-html5.html">HTML5 or semantic based web page</a></p>
<p><strong>Text Editors</strong></p>
<ul>
<li><a href="https://code.visualstudio.com/">Visual Studio Code</a></li>
<li><a href="https://atom.io/">Atom.io</a></li>
</ul>
<p><strong>GitHub</strong></p>
<ul>
<li><a href="https://desktop.github.com/">GitHub Desktop</a></li>
<li><a href="https://pages.github.com/">GitHub Pages</a></li>
</ul>
<h2>About this site</h2>
<p class="standfirst">This is starter kit to build sites based on the needs of students and researchers. </p>
<p>This kit is simple by design. It includes color swatches, typography and icons. HTML is semantic but you'll need to make your own page layouts.</p>
</main>
<aside>
<h2>Style guide</h2>
<ul>
<li><a href="color/index.html">Color</a></li>
<li><a href="typography/index.html">Typesheet</a></li>
<li><a href="iconography/index.html">Icons</a></li>
<li><a href="typography/elements.html">Frontend Styleguide</a></li>
</ul>
</aside>
<footer role="contentinfo">
<div class="social-icons">
<a rel="me" href="https://github.com/uclaioes/my-first-website">
<svg class="icon github" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" aria-labelledby="title" role="img"><title>GitHub</title><g><path d="M12,.28A12,12,0,0,0,8.28,23.69l.29,0a1,1,0,0,0,1.06-1.06v-.21c0-.17,0-.4,0-1.09A.5.5,0,0,0,9.43,21a.5.5,0,0,0-.42-.1c-2.68.58-3.25-1.1-3.29-1.21A4.64,4.64,0,0,0,4,17.5a1.16,1.16,0,0,0-.15-.11.63.63,0,0,1,.38-.07,1.47,1.47,0,0,1,1.15.88,3,3,0,0,0,4,1.16A.5.5,0,0,0,9.67,19a2,2,0,0,1,.56-1.23.5.5,0,0,0-.27-.87c-2.37-.27-4.79-1.1-4.79-5.19A4,4,0,0,1,6.22,8.93a.5.5,0,0,0,.09-.53A3.52,3.52,0,0,1,6.32,6,5.54,5.54,0,0,1,8.84,7.15a.49.49,0,0,0,.42.07A10.61,10.61,0,0,1,12,6.85a10.47,10.47,0,0,1,2.75.37.49.49,0,0,0,.41-.07A5.59,5.59,0,0,1,17.68,6a3.57,3.57,0,0,1,0,2.38.5.5,0,0,0,.09.53,4,4,0,0,1,1.05,2.75c0,4.09-2.43,4.91-4.81,5.18a.5.5,0,0,0-.27.88,2.2,2.2,0,0,1,.61,1.74v3.18a1.06,1.06,0,0,0,.36.83,1.2,1.2,0,0,0,1.06.19A12,12,0,0,0,12,.28Z" /></g></svg>
</a>
<a aria-label="Email" class="u-email fn email" rel="me" href="mailto:[email protected]">
<svg class="icon email" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" aria-labelledby="title" role="img">
<title id="title">Email</title>
<g>
<path d="M12 0c-6.617 0-12 5.383-12 12s5.383 12 12 12 12-5.383 12-12-5.383-12-12-12zm8 16c0 1.103-.897 2-2 2h-12c-1.103 0-2-.897-2-2v-8c0-1.103.897-2 2-2h12c1.103 0 2 .897 2 2v8zM17.887 8.184c-.175-.214-.49-.245-.704-.07l-5.183 4.24-5.183-4.241c-.214-.175-.529-.143-.704.071s-.143.528.07.703l3.618 2.96-3.566 2.229c-.234.147-.306.455-.159.689.095.152.258.235.424.235.091 0 .182-.024.265-.076l3.854-2.409 1.064.872c.092.075.205.113.317.113s.225-.038.317-.113l1.065-.872 3.854 2.409c.081.052.173.076.264.076.167 0 .33-.083.425-.235.146-.234.075-.542-.159-.689l-3.566-2.229 3.618-2.96c.212-.175.244-.49.069-.703z"/>
</g>
</svg>
</a>
<a rel="me" href="https://twitter.com/">
<svg class="icon twitter" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" aria-labelledby="title" role="img"><title id="title">Twitter</title><g><path d="M12 0c-6.617 0-12 5.383-12 12s5.383 12 12 12 12-5.383 12-12-5.383-12-12-12zm5.262 9.385l.008.34c0 3.478-2.647 7.489-7.488 7.489-1.486 0-2.87-.437-4.035-1.184 1.374.161 2.771-.207 3.896-1.089-1.151-.022-2.123-.783-2.458-1.829.396.075.803.061 1.188-.046-1.204-.24-2.111-1.305-2.111-2.579v-.035c.355.197.762.315 1.192.33-.706-.473-1.171-1.277-1.171-2.19 0-.482.13-.934.356-1.324 1.298 1.593 3.237 2.642 5.425 2.75-.045-.191-.068-.394-.068-.599 0-1.454 1.179-2.632 2.633-2.632.757 0 1.44.319 1.921.832.6-.119 1.95-.266 1.95-.266-.353.529-.724 1.66-1.238 2.032z" /></g></svg>
</a>
<a rel="me" href="https://instagram.com/">
<svg class="icon instagram" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" aria-labelledby="title" role="img"><title>Instagram</title><g><path d="M17.5,0H6.5A6.51,6.51,0,0,0,0,6.5v11A6.51,6.51,0,0,0,6.5,24h11A6.51,6.51,0,0,0,24,17.5V6.5A6.51,6.51,0,0,0,17.5,0ZM12,17.5A5.5,5.5,0,1,1,17.5,12,5.5,5.5,0,0,1,12,17.5Zm6.5-11A1.5,1.5,0,1,1,20,5,1.5,1.5,0,0,1,18.5,6.5Z" /></g></svg>
</a>
<a rel="me" href="https://www.linkedin.com/">
<svg class="icon linkedin" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" aria-labelledby="title" role="img"><title>LinkedIn</title><g><rect x="2" y="8.5" width="5" height="14" rx="0.5" ry="0.5" /><ellipse cx="4.48" cy="4" rx="2.48" ry="2.5" /><path d="M18.5,22.5h3A.5.5,0,0,0,22,22V13.6C22,9.83,19.87,8,16.89,8a4.21,4.21,0,0,0-3.17,1.27A.41.41,0,0,1,13,9a.5.5,0,0,0-.5-.5h-3A.5.5,0,0,0,9,9V22a.5.5,0,0,0,.5.5h3A.5.5,0,0,0,13,22V14.5a2.5,2.5,0,0,1,5,0V22A.5.5,0,0,0,18.5,22.5Z" /></g></svg>
</a>
<a class="image-border" rel="me" href="http://codepen.io/">
<svg class="icon codepen" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" aria-labelledby="title" role="img"><title>Codepen</title><g><path d="M5.57 10.6v2.02l1.5-1z" /><path d="M10.78 9.13v-2.8L6.05 9.46l2.1 1.4z" /><path d="M16.7 9.47L12 6.32v2.8l2.62 1.76z" /><path d="M6.05 13.75l4.73 3.15v-2.8l-2.62-1.76z" /><path d="M11.98 14.1v2.8l4.73-3.15-2.1-1.4z" /><path d="M11.38 10.18L9.25 11.6l2.13 1.44 2.13-1.43z" /><g><path d="M18.4 13.75c0 .03 0 .05 0 .08 0 0 0 .02 0 .02 0 .02-.02.04-.02.05 0 0 0 .02 0 .03-.02.02-.02.03-.03.05 0 0 0 .02 0 .03-.02.02-.02.03-.03.05 0 0 0 .02-.02.02 0 .02 0 .03-.02.04 0 .02-.02.03-.02.04 0 0-.02.02-.03.03 0 0-.02.02-.03.02 0 0-.02 0-.03.02 0 0-.02.02-.03.02l-6.43 4.3c-.1.06-.2.1-.32.1s-.23-.04-.34-.1l-6.4-4.3c-.02 0-.02 0-.02 0s-.02 0-.03-.02c-.02 0-.03-.02-.04-.03 0 0-.02-.02-.03-.03 0 0-.02-.02-.03-.03 0 0 0-.02-.02-.03 0 0-.02 0-.02-.03 0 0-.02 0-.02-.02s-.02-.03-.02-.04c0 0 0 0-.02-.02 0-.02 0-.03 0-.05 0 0-.02-.02-.02-.03 0 0 0-.03 0-.05 0 0 0 0-.02-.02 0-.03 0-.05 0-.08V9.47c0-.03 0-.05 0-.08 0-.02 0-.03 0-.03 0-.02.02-.04.02-.05 0 0 0-.02 0-.03 0-.03.02-.04.02-.06 0 0 0-.02.02-.03 0 0 0 0 .02-.03 0 0 0-.02.02-.03 0 0 0-.02.02-.03 0 0 .02 0 .02-.02 0 0 .02-.02.03-.03 0 0 .02-.02.03-.02 0 0 .02-.02.03-.03 0 0 0-.02.02-.02l6.42-4.3c.2-.12.47-.12.67 0L18.14 9c.02 0 .03 0 .04.02 0 0 .02.02.03.03 0 0 .02 0 .03.02 0 0 .02.02.03.03 0 0 0 .02.02.03 0 .02 0 .03.02.04 0 0 0 .02.02.03 0 .02 0 .03.02.04 0 .02 0 .03 0 .04.02.02.02.03.03.05 0 0 0 0 0 .02 0 0 .02.03.02.05 0 0 0 0 0 .02s0 .04 0 .07v4.28zM11.38.25C5.1.26.03 5.36.03 11.62c0 6.28 5.08 11.36 11.35 11.36s11.35-5.08 11.35-11.35C22.73 5.35 17.65.27 11.38.27z" /><path d="M17.2 12.62V10.6l-1.52 1z" /></g></svg>
</a>
<a rel="me" href="https://medium.com/">
<svg class="icon medium" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" aria-labelledby="title" role="img"><title>Medium</title><g><path d="M23,0H1A1,1,0,0,0,0,1V23a1,1,0,0,0,1,1H23a1,1,0,0,0,1-1V1A1,1,0,0,0,23,0ZM20.36,5.85,19,7.08a.38.38,0,0,0-.14.36v9.48a.38.38,0,0,0,.14.36l1.35,1.33v.27H14v-.27l1.16-1.36c.13-.13.13-.17.13-.36V10L12.49,17.9v0l-.3,1h-.79c-2.65-5.79-3.49-7.82-4.3-9.21v7l1.64,2v.27H4v-.27l1.6-2v-9L4.36,6.15l0-.53H9.13l3.22,7.71L15,6.06a.75.75,0,0,1,.79-.58h4.58Z" /></g></svg>
</a>
<a rel="me" href="https://micro.blog">
<svg class="icon microblog" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 482.79 486.16" aria-labelledby="title" role="img"><title>Microblog</title><path d="M495.79,372.06c32-37.64,51.11-85,51.11-136.5C546.9,113,438.82,13.72,305.5,13.72S64.1,113,64.1,235.56,172.18,457.4,305.5,457.4a259.65,259.65,0,0,0,86.2-14.58,7.78,7.78,0,0,1,8.81,2.77c20.17,27.23,51.67,46.38,86.7,54.17a4.79,4.79,0,0,0,4.74-7.65,94.37,94.37,0,0,1,4-120.11ZM420,209.48l-62.17,47.19,22.56,74.72a7.06,7.06,0,0,1-10.79,7.84L305.5,294.68l-64.09,44.55a7.06,7.06,0,0,1-10.79-7.84l22.56-74.72L191,209.48a7.06,7.06,0,0,1,4.12-12.68l78-1.63,25.67-73.71a7.06,7.06,0,0,1,13.33,0l25.67,73.71,78,1.63A7.06,7.06,0,0,1,420,209.48Z" transform="translate(-64.1 -13.72)" /></svg>
</a>
</div>
<small>Created by <span class="p-author p-name h-card vcard">My Name</span>. This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>. </small>
</footer>
</body>
</html>