[challenge-bot] / challenge-bot.com / people.html

<!DOCTYPE html>

<style>
body { font-family: monospace;
	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; }
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>

<h1>about challenge-bot</h1>

<section>
	<h2><span>what is challenge-bot?</span></h2>

	<p>The <a href="http://challenge-bot.com">challenge-bot</a> course is an 8-hour long course where we walk you through the process of building your own robot, which you will keep. The goal of this class is to teach you the basics of robotics, get you excited about making stuff, and empower you to go out and create new robotics projects on your own after the class.</p></section>

<section>
	<h2><span>people</span></h2>
	<div class="person">
		<img class="photo" src="images/danny200.png" alt="danny watson" />
		<div class="text">
			<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 or to sign up for classes, contact <a href="mailto:ozzloy@gmail.com">Daniel Watson</a>.</section>

</body>
Commit	Line	Data
617f4f72 E	1	<!DOCTYPE html>
	2
	3	<style>
	4	body { font-family: monospace;
3e21c082 E	5	color: #111111;
	6	width: 80%;
	7	margin: auto auto;
	8	text-align: center; }
	9	h3 { color: #008000; }
	10	h2 { color: #009900; }
	11	h4 {
	12	color: #00aa00;
	13	font-weight: 400; }
	14	a { color: #00CC00; }
	15	p {
	16	text-align: left;
	17	margin: auto auto;
	18	max-width: 800px; }
	19	section { padding: 30px 0px; }
	20	.person {
	21	width: 200px;
	22	display: inline-block;
	23	padding-right: 30px;
	24	text-align: center; }
	25	.person .photo {
	26	padding: 0px;
	27	margin: 0px; }
	28	.person .name {
	29	padding: 0px;
	30	margin: 0px; }
	31	.person .position {
	32	padding: 0px;
	33	margin: 0px; }
	34
	35	/* line behind title
	36	see http://codepen.io/ericrasch/pen/Irlpm */
	37	h2 {
	38	position: relative;
	39	z-index: 1; }
	40	h2:before {
	41	border-top: 2px solid #dfdfdf;
	42	content:"";
	43	margin: 0 auto; /* this centers the line to the full width specified */
	44	position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
	45	top: 50%; left: 0; right: 0; bottom: 0;
	46	width: 95%;
	47	z-index: -1; }
	48	h2 span {
	49	/* to hide the lines from behind the text, you have to set the background color the same as the container */
	50	background: #fff;
	51	padding: 0 15px; }
617f4f72 E	52	</style>
617f4f72 E	53
3e21c082 E	54	<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
3e21c082 E	55
617f4f72 E	56	<body>
617f4f72 E	57
3e21c082 E	58	<h1>about challenge-bot</h1>
	59
	60	<section>
	61	<h2><span>what is challenge-bot?</span></h2>
	62
	63	<p>The <a href="http://challenge-bot.com">challenge-bot</a> course is an 8-hour long course where we walk you through the process of building your own robot, which you will keep. The goal of this class is to teach you the basics of robotics, get you excited about making stuff, and empower you to go out and create new robotics projects on your own after the class.</p></section>
	64
	65	<section>
	66	<h2><span>people</span></h2>
	67	<div class="person">
	68	<img class="photo" src="images/danny200.png" alt="danny watson" />
	69	<div class="text">
	70	<h3 class="name">danny watson</h3>
	71	<h4 class="position">founder, instructor</h4></div></div>
	72
	73	<div class="person">
	74	<img class="photo" src="images/erin200.png" alt="erin bennett" />
	75	<div class="text">
	76	<h3 class="name">erin bennett</h3>
	77	<h4 class="position">co-founder</h4></div></div>
	78
	79	<div class="person">
	80	<img class="photo" src="images/no-photo200.png" alt="shoshana berleant" />
	81	<div class="text">
	82	<h3 class="name">shoshana berleant</h3>
	83	<h4 class="position">instructor</h4></div></div></section>
	84
	85	<section>
	86	<h2><span>contact us</span></h2>
	87
	88	For more information or to sign up for classes, contact <a href="mailto:ozzloy@gmail.com">Daniel Watson</a>.</section>
617f4f72 E	89
617f4f72 E	90	</body>