-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
175 lines (171 loc) · 5.28 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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<!DOCTYPE html>
<html>
<head>
<title>Test Page: Don't Panic</title>
<meta charset="utf-8" />
<style>
/* GLOBAL STYLES */
a {
color: #f00;
}
html, body {
margin: 0;
padding: 0;
}
h1 {
font-size: 7vw;
margin-top: 0;
}
/* BIO STYLES */
.bio-box {
border: 1px solid black;
border-color: black black red;
box-sizing: border-box;
float: left;
font-size: 1rem;
margin: 40px 1% 0;
padding: 0 2% 2%;
width: 23%;
}
.bio-box h3 {
color: #fff;
font-size: 1.5em;
margin: -40px 0 1em;
text-align: center;
}
.bio-box img {
width: 100%;
}
.bio-copy {
font-size: 1em;
line-height: 1.5;
}
.bio-copy a {
color: green;
}
.bio-wrapper {
font-size: 24px;
margin: auto;
max-width: 960px;
overflow: hidden;
}
/* HERO STYLES */
.full-hero {
background-color: #c7dbfc;
height: 50vh;
}
/* SOCIAL STYLES */
.social-link {
background: rgba(150, 150, 150, 0.5);
border-radius: 99px;
box-sizing: border-box;
color: #fff;
display: inline-block;
font-family: helvetica, arial, sans;
font-size: 1rem;
font-weight: bold;
height: 2.5em;
line-height: 1;
padding-top: 0.85em;
text-align: center;
text-decoration: none;
vertical-align: middle;
width: 2.5em;
}
.social-list {
list-style: none;
padding: 0;
text-align: center;
}
.social-list > li {
display: inline-block;
margin 0 0.5em;
}
</style>
</head>
<body>
<div class="full-hero hero-home">
<h1>I'm an h1</h1>
<ul class="social-list">
<li>
<a href="http://example.com/" class="social-link">Fb</a>
</li>
<li>
<a href="http://example.com/" class="social-link">Tw</a>
</li>
<li>
<a href="http://example.com/" class="social-link">Gh</a>
</li>
</ul>
</div>
<h2>I'm an h2</h2>
<div class="bio-wrapper">
<div class="bio-box">
<img src="http://placekitten.com/g/400/400" />
<h3>Michael Hartl</h3>
<a href="https://twitter.com/mhartl" class="social-link">Tw</a>
<div class="bio-copy">
<p>
Known for his dazzling charm, rapier wit, and unrivaled humility,
Michael is the creator of the
<a href="http://railstutorial.org/">Ruby on Rails Tutorial</a>
and principal author of the <a href="https://learnenough.com/">
Learn Enough to Be Dangerous</a> introductory sequence. Michael
is also notorious as the founder of
<a href="http://tauday.com/">Tau Day</a> and author of
<a href="http://tauday.com/tau-manifesto"<em>The Tau
Manifesto</em></a>, but rumors that he's secretly a supervillain
are slightly exaggerated.
</p>
</div>
</div>
<div class="bio-box">
<img src="http://placekitten.com/g/400/400" />
<h3>Leo Donahoe</h3>
<a href="https://twitter.com/leedanhoe" class="social-link">Tw</a>
<div class="bio-copy">
<p>
When he's not literally swimming with sharks or hunting powder stashes on
his snowboard, you can find Lee in front of his computer designing
interfaces, doing front-end development, or writing some of the
interface-related Learn Enough tutorials.
</p>
</div>
</div>
<div class="bio-box">
<img src="http://placekitten.com/g/400/400" />
<h3>Nick Mervin</h3>
<a href="https://twitter.com/nickmerwin/" class="social-link">Tw</a>
<div class="bio-copy">
<p>
You may have seen him shredding guitar live with Capital Cities on Jimmy
Kimmel, Conan, or The Ellen Show, but rest assured Nick is a true nerd at
heart. He's just as happy shredding well-spec'd lines of code from a tour
bus as he is from his kitchen table.
</p>
</div>
</div>
<div class="bio-box">
<img src="http://placekitten.com/g/400/400" />
<h3>Luca Paganotti</h3>
<a href="https://twitter.com/roughnuances/" class="social-link">Tw</a>
<div class="bio-copy">
<p>
Not too much to say. My main occupation is my job and I manage to play with
my friends only in our spare time. I do my best in everything I find interesting
and funny. I like very much to play even if I'm completely agnostic about music
theory and nature hasn't given me specific musical gifts. I'm interested in
technology, music, biodynamic agriculture and sustainable life. I try to find
the time to listen to everything and everyone but my main musical influencers
where groups from the 60's to the 90's, rock, hard rock, blues, country, new wave,
punk and sometimes classics. I'm currently trying to put in music James Joyce's
"pomes penyeach' but it's a very hard work, at least for me! I think I've managed
the first three poems, so if anyone is interested, let me know. Even if I'm not
able to read nor write music, I'm serious about it and I'll commit myself against
this project even if it will never come to an end.
</p>
</div>
</div>
</div>
</body>
</html>