4 body { font-family: monospace;
10 h2 { color: #
009900; }
16 text-decoration: none; }
21 section { padding:
30px
0px; }
24 display: inline-block;
38 see http://codepen.io/ericrasch/pen/Irlpm */
43 border-top:
2px solid #dfdfdf;
45 margin:
0 auto; /* this centers the line to the full width specified */
46 position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
47 top:
50%; left:
0; right:
0; bottom:
0;
51 /* to hide the lines from behind the text, you have to set the background color the same as the container */
56 <script src=
"http://code.jquery.com/jquery-1.11.3.min.js"></script>
61 <h2><span>people
</span></h2>
63 <img class=
"photo" src=
"images/danny200.png" alt=
"danny watson" />
65 <h3 class=
"name">danny watson
</h3>
66 <h4 class=
"position">founder, instructor
</h4></div></div>
69 <img class=
"photo" src=
"images/erin200.png" alt=
"erin bennett" />
71 <h3 class=
"name">erin bennett
</h3>
72 <h4 class=
"position">co-founder
</h4></div></div>
75 <img class=
"photo" src=
"images/no-photo200.png" alt=
"shoshana berleant" />
77 <h3 class=
"name">shoshana berleant
</h3>
78 <h4 class=
"position">instructor
</h4></div></div></section>
81 <h2><span>contact us
</span></h2>
83 For more information see our
<a href=
"faq.html">FAQ page
</a>, or contact
<a href=
"mailto:ozzloy@gmail.com">Daniel Watson
</a>.
</section>