challenge-bot.com Git - challenge-bot/blob - challenge-bot.com/people.html

   1 <!DOCTYPE html>
   2
   3 <style>
   4 body { font-family: monospace;
   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 {
  15         color: #00CC00;
  16         text-decoration: none; }
  17 p {
  18         text-align: left;
  19         margin: auto auto;
  20         max-width: 800px; }
  21 section { padding: 30px 0px; }
  22 .person {
  23         width: 200px;
  24         display: inline-block;
  25         padding-right: 30px;
  26         text-align: center; }
  27 .person .photo {
  28         padding: 0px;
  29         margin: 0px; }
  30 .person .name {
  31         padding: 0px;
  32         margin: 0px; }
  33 .person .position {
  34         padding: 0px;
  35         margin: 0px; }
  36
  37 /* line behind title
  38    see http://codepen.io/ericrasch/pen/Irlpm */
  39 h2 {
  40     position: relative;
  41     z-index: 1; }
  42 h2:before {
  43     border-top: 2px solid #dfdfdf;
  44     content:"";
  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;
  48     width: 95%;
  49     z-index: -1; }
  50 h2 span {
  51     /* to hide the lines from behind the text, you have to set the background color the same as the container */
  52     background: #fff;
  53     padding: 0 15px; }
  54 </style>
  55
  56 <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  57
  58 <body>
  59
  60 <section>
  61         <h2><span>people</span></h2>
  62         <div class="person">
  63                 <img class="photo" src="images/danny200.png" alt="danny watson" />
  64                 <div class="text">
  65                         <h3 class="name">danny watson</h3>
  66                         <h4 class="position">founder, instructor</h4></div></div>
  67
  68         <div class="person">
  69                 <img class="photo" src="images/erin200.png" alt="erin bennett" />
  70                 <div class="text">
  71                         <h3 class="name">erin bennett</h3>
  72                         <h4 class="position">co-founder</h4></div></div>
  73
  74         <div class="person">
  75                 <img class="photo" src="images/no-photo200.png" alt="shoshana berleant" />
  76                 <div class="text">
  77                         <h3 class="name">shoshana berleant</h3>
  78                         <h4 class="position">instructor</h4></div></div></section>
  79
  80 <section>
  81         <h2><span>contact us</span></h2>
  82
  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>
  84
  85 </body>