<style>
body { font-family: monospace;
- color: #111111;
- width: 80%;
- margin: auto auto;}
-h2 { color: #008000;}
-h3 { color: #009900;}
-a { color: #00CC00;}
-.person { min-height: 200px;
- max-width: 800px;
- padding-top: 20px;
- padding-bottom: 20px; }
-.person .photo { float: left;
- padding-right: 30px; }
-.person .text { margin: auto auto; }
+ color: #111111;
+ width: 80%;
+ margin: auto auto;
+ text-align: center; }
+h3 { color: #008000; }
+h2 { color: #009900; }
+h4 {
+ color: #00aa00;
+ font-weight: 400; }
+a {
+ color: #00CC00;
+ text-decoration: none; }
+p {
+ text-align: left;
+ margin: auto auto;
+ max-width: 800px; }
+section { padding: 30px 0px; }
+.person {
+ width: 200px;
+ display: inline-block;
+ padding-right: 30px;
+ text-align: center; }
+.person .photo {
+ padding: 0px;
+ margin: 0px; }
+.person .name {
+ padding: 0px;
+ margin: 0px; }
+.person .position {
+ padding: 0px;
+ margin: 0px; }
+
+/* line behind title
+ see http://codepen.io/ericrasch/pen/Irlpm */
+h2 {
+ position: relative;
+ z-index: 1; }
+h2:before {
+ border-top: 2px solid #dfdfdf;
+ content:"";
+ margin: 0 auto; /* this centers the line to the full width specified */
+ position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
+ top: 50%; left: 0; right: 0; bottom: 0;
+ width: 95%;
+ z-index: -1; }
+h2 span {
+ /* to hide the lines from behind the text, you have to set the background color the same as the container */
+ background: #fff;
+ padding: 0 15px; }
</style>
+<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
+
<body>
-<h2>people</h2>
-
-<div class="person">
- <img class="photo" src="images/danny200.png" alt="danny watson" />
- <div class="text">
- <h3 class="name">danny watson</h3>
- <div class="bio">
- <p>Daniel simulated a self driving car in a massive online class a few years ago. Since then he has worked towards making this happen in the real world. Along the way, he has learned a great deal about electronics, and mechanics. He now has a very solid understanding of a very basic robot.</p>
- <p>He rock climbs, and makes robots.</p></div></div></div>
-
-<div class="person">
- <img class="photo" src="images/erin200.png" alt="erin bennett" />
- <div class="text">
- <h3 class="name">erin bennett</h3>
- <div class="bio">
- <p>Erin learned to program in a Linguistics class, where she explored text corpora and drew pictures of finite state machines. A few years later while programming a remote-controlled robot, she implemented her first finite state machine. She was so happy, she made up a song about it.</p>
- <p>She enjoys spending her time juggling, sleeping, drawing, coding, putting together robots, and making computational models of cognition and language.</p></div></div></div>
-
-<div class="person">
- <img class="photo" src="images/no-photo200.png" alt="shoshana berleant" />
- <div class="text">
- <h3 class="name">shoshana berleant</h3>
- <div class="bio">
- <p>... is a cool person and does challenge-bot stuff</p></div></div></div>
+<section>
+ <h2><span>people</span></h2>
+
<img class="photo" src="images/danny200.png" alt="danny watson" />
+ <h3 class="name">danny watson</h3>
+ <h4 class="position">founder, instructor</h4></div></div>
+
+ <div class="person">
+ <img class="photo" src="images/erin200.png" alt="erin bennett" />
+ <div class="text">
+ <h3 class="name">erin bennett</h3>
+ <h4 class="position">co-founder</h4></div></div>
+
+ <div class="person">
+ <img class="photo" src="images/no-photo200.png" alt="shoshana berleant" />
+ <div class="text">
+ <h3 class="name">shoshana berleant</h3>
+ <h4 class="position">instructor</h4></div></div></section>
+
+<section>
+ <h2><span>contact us</span></h2>
+
+ For more information see our <a href="faq.html">FAQ page</a>, or contact <a href="mailto:ozzloy@gmail.com">Daniel Watson</a>.</section>
</body>
\ No newline at end of file
projects / challenge-bot / blobdiff