--- /dev/null
+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;
+ text-decoration: none; }
+p {
+ text-align: left;
+ margin: auto auto;
+ max-width: 800px;
+ padding-bottom: 10px; }
+.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; }
+section { padding: 30px 0px; }
+section > h2 { padding-bottom: 30px; }
+
+/* line behind title
+ see http://codepen.io/ericrasch/pen/Irlpm */
+section > h2 {
+ position: relative;
+ z-index: 1; }
+section > 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; }
+section > 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; }
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+
+<head>
+ <link rel="stylesheet" type="text/css" href="css/main.css">
+ <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
+</head>
+
+<style>
+.faq li {
+ list-style-type: none; }
+.qa {
+ max-width: 800px;
+ text-align: left; }
+.answer {
+ padding-left: 40px;
+ max-width: 760px; }
+</style>
+
+<body>
+
+ <section class="faq">
+ <h2><span>frequently asked questions</span></h2>
+
+ <li>
+ <ul class="qa">
+ <h3 "question">Who is the challenge-bot class appropriate for?</h3>
+ <li>
+ <ul>
+ <h4 class="answer-heading">No experience necessary!</h4>
+ <div class="answer">
+ <p>Challenge-bot is an introduction to robotics class. You don't need any previous experience with programming, electronics, robotics, or building.</p>
+ </div>
+ </ul>
+ <ul>
+ <h4 class="answer-heading">Beginners of any age are welcome.</h4>
+ <div class="answer">
+ <p>We have students of all ages in our classes, from small children to teenagers to professional software developers.</p>
+ <p>Many of our sign-ups so far have been elemenary-school age children, often with their parents.</p>
+ <p>Very small children who have not yet learned how to read or have trouble holding tools should have someone older with them to help them.</p>
+ </div>
+ </ul>
+ </li>
+ </ul>
+ <ul class="qa">
+ <h3 "question">Can I take the class with my child/sibling/friend?</h3>
+ <div class="answer">
+ <p>Yes! Students can sign up for the class independently or as a team. Students who sign up as a team pay as if they were one person and get one kit to share and work on together.</p>
+ </div>
+ </ul>
+ <ul class="qa">
+ <h3 "question">What do I get to keep?</h3>
+ <li>
+ <ul>
+ <h4 class="answer-heading">The robot is to keep.</h4>
+ <div class="answer">
+ <p>If you <a href=".">purchase</a> a <a href=".">kit</a>, you get to keep everything inside the box. This means that once you put it together, you will have a robot, an alan wrench, and a cable to load code onto the robot.</p>
+ </div>
+ </ul>
+ <ul>
+ <h4 class="answer-heading">The tools are just to use in class.</h4>
+ <div class="answer">
+ <p>While in class, every student enrolled also gets a <a href=".">toolbox</a> to use, which they will return at the end of class. This toolbox includes everything you need to assemble your robot. If you want, you can <a href=".">purchase</a> your own toolbox and take it home with you.</p>
+ <p>We also have some fancier tools in class, like a power drill and helping hands for the soldering iron.</p>
+ </div>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ </section>
+
+</body>
\ No newline at end of file
<!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;
- 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>
+<head>
+ <link rel="stylesheet" type="text/css" href="css/main.css">
+ <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
+</head>
<body>
-
-<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 see our <a href="faq.html">FAQ page</a>, or contact <a href="mailto:ozzloy@gmail.com">Daniel Watson</a>.</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 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 / commitdiff