-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
134 lines (123 loc) · 5.04 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
<html>
<head>
<meta charset="utf-8">
<title>Alex Ratner</title>
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto|Slabo+27px" rel="stylesheet">
<!-- Fontawesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Your style -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="card text-center">
<div>
<img
id="img-profile"
class="img-circle"
src="images/avatar.jpg"
alt="Alex"
/>
<h1>Alex Ratner</h1>
<h2>Inveterate Fantasist and Perennial Amateur</h2>
</div>
</div>
<div class="card text-center">
<h3>Long ago...</h3>
<p>I imagined by the far-off future date "the year 2000" (as the expression went), I'd be either <strong>living on an orbiting space station</strong> or <strong>marooned on a Pacific atoll</strong>.<p>
<a href="http://www.nss.org/settlement/L5news/L5scenario.htm" class="btn-blue">See for yourself</a>
</div>
<div class="card text-center">
<h3>Nearly two decades after...</h3>
<p>my self-imposed deadline, I find myself instead in <strong>an entirely terrestrial exile</strong>, in a drizzily, urbane foreign land, wholly indifferent to my presence.</p>
</div>
<div class="card text-center">
<ul class="list-inline">
<li><a target="_blank" href="https://twitter.com/alxratner"><i class="fa fa-twitter"></i> <br>Twitter</a></li>
<li><a target="_blank" href="https://www.linkedin.com/in/alratner/"><i class="fa fa-linkedin"></i> <br>LinkedIn</a></li>
<li><a target="_blank" href="https://www.github.com/al-x/"><i class="fa fa-github"></i> <br>GitHub</a></li>
</ul>
</div>
<div class="card text-center">
<h3>My Favorite Books</h3>
<table id="books">
<tbody>
<tr>
<td><img class="book" alt="Il Barone Rampante cover"
src="https://upload.wikimedia.org/wikipedia/en/5/57/IlBaroneRampante.jpg"/>
</td>
<td><a
target="_blank"
href="https://en.wikipedia.org/wiki/The_Baron_in_the_Trees">Il barone rampante (The Baron in the Trees)</a>
</td>
<td><a
target="_blank"
href="https://en.wikipedia.org/wiki/Italo_Calvino">Italo Calvino</a>
</td>
</tr>
<tr>
<td><img class="book" alt="The Left Hand of Darkness (1st Edition) cover"
src="https://upload.wikimedia.org/wikipedia/en/8/88/TheLeftHandOfDarkness1stEd.jpg"/>
</td>
<td><a
target="_blank"
href="https://en.wikipedia.org/wiki/The_Left_Hand_of_Darkness">The Left Hand of Darkness</a>
</td>
<td><a
target="_blank"
href="https://en.wikipedia.org/wiki/Ursula_K._Le_Guin">Ursula K. Le Guin</a>
</td>
</tr>
<tr>
<td><img class="book" alt="Flow My Tears, the Policeman Said (1st Edition) cover"
src="https://upload.wikimedia.org/wikipedia/en/5/58/FlowMyTearsThePolicemanSaid%281stEd%29.jpg"/>
</td>
<td><a
target="_blank"
href="https://en.wikipedia.org/wiki/Flow_My_Tears,_the_Policeman_Said">Flow My Tears, the Policeman Said</a>
</td>
<td><a
target="_blank"
href="https://en.wikipedia.org/wiki/Philip_K._Dick">Philip K. Dick</a>
</td>
</tr>
<tr>
<td><img class="book" alt="The Sirens of Titan (1959) cover"
src="https://upload.wikimedia.org/wikipedia/en/5/57/TheSirensofTitan%281959%29.jpg"/>
</td>
<td><a
target="_blank"
href="https://en.wikipedia.org/wiki/The_Sirens of Titan">The Sirens of Titan</a>
</td>
<td><a
target="_blank"
href="https://en.wikipedia.org/wiki/Kurt_Vonnegut">Kurt Vonnegut</a>
</td>
</tr>
<tr>
<td><img class="book" alt="Robinson_Crusoe (1719 1st Edition) frontispiece"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Robinson_Crusoe_1719_1st_edition.jpg/440px-Robinson_Crusoe_1719_1st_edition.jpg"/>
</td>
<td><a
target="_blank"
href="https://en.wikipedia.org/wiki/Robinson_Crusoe">Robinson Crusoe</a>
</td>
<td><a
target="_blank"
href="https://en.wikipedia.org/wiki/Daniel_Defoe">Daniel Defoe</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card text-center">
<h3>Useless boilerplate</h3>
<ul class="list-inline">
<li><i id="red" class="fa fa-heart"></i></li>
<li><i id="blue" class="fa fa-share"></i></li>
<li><i id="yellow" class="fa fa-star"></i></li>
</ul>
</div>
</body>
</html>