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 { 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; }
  52 </style>
  53
  54 <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  55
  56 <script>
  57 var linkColor = "#00CC00";
  58 var hoveredLinkColor = "#1aff1a";
  59 var textColor = "#111111";
  60 var h2Colour = "#008000";
  61 var h3Colour = "#009900";
  62 var h4Colour = "#00aa00";
  63 function linkify(element) {
  64         var previousImg = $(element).find("img").attr("src");
  65         var newImg = previousImg.replace("200", "-link200");
  66         $(element).find("img").attr("src", newImg);
  67         $(element).find(".name").css("text-decoration", "underline");
  68         $(element).find(".text").css("color", linkColor);
  69         $(element).find("h2").css("color", linkColor);
  70         $(element).find("h3").css("color", linkColor);
  71         $(element).find("h4").css("color", hoveredLinkColor); };
  72 function unlinkify(element) {
  73         var previousImg = $(element).find("img").attr("src");
  74         var newImg = previousImg.replace("-link200", "200");
  75         $(element).find("img").attr("src", newImg);
  76         $(element).find(".name").css("text-decoration", "none");
  77         $(element).find(".text").css("color", textColor);
  78         $(element).find("h2").css("color", h2Colour);
  79         $(element).find("h3").css("color", h3Colour);
  80         $(element).find("h4").css("color", h4Colour); };
  81 function fade(element, opacity) {
  82         $(element).css("opacity", opacity); };
  83 function fadeIn(element, ms) {
  84         var ms = ms ? ms : 0;
  85         setTimeout(function() { fade(element, 1); }, ms); };
  86 function fadeOut(element, ms) {
  87         var ms = ms ? ms : 0;
  88         setTimeout(function() { fade(element, 0.5); }, ms );};
  89 function animatePersonClickiness() {
  90         $(".person").hover(
  91                 function() {
  92                         fadeOut($(this).children(".photo"));
  93                         linkify($(this)); },
  94                 function() {
  95                         fadeIn($(this).children(".photo"));
  96                         unlinkify($(this)); } ); };
  97 $(document).ready( function() {
  98         animatePersonClickiness(); });
  99 </script>
 100
 101 <body>
 102
 103 <h1>about challenge-bot</h1>
 104
 105 <section>
 106         <h2><span>what is challenge-bot?</span></h2>
 107
 108         <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>
 109
 110 <section>
 111         <h2><span>people</span></h2>
 112         <div class="person">
 113                 <img class="photo" src="images/danny200.png" alt="danny watson" />
 114                 <div class="text">
 115                         <h3 class="name">danny watson</h3>
 116                         <h4 class="position">founder, instructor</h4></div></div>
 117
 118         <div class="person">
 119                 <img class="photo" src="images/erin200.png" alt="erin bennett" />
 120                 <div class="text">
 121                         <h3 class="name">erin bennett</h3>
 122                         <h4 class="position">co-founder</h4></div></div>
 123
 124         <div class="person">
 125                 <img class="photo" src="images/no-photo200.png" alt="shoshana berleant" />
 126                 <div class="text">
 127                         <h3 class="name">shoshana berleant</h3>
 128                         <h4 class="position">instructor</h4></div></div></section>
 129
 130 <section>
 131         <h2><span>contact us</span></h2>
 132
 133         For more information or to sign up for classes, contact <a href="mailto:ozzloy@gmail.com">Daniel Watson</a>.</section>
 134
 135 </body>