ghost.html

<style>
table {
  width:100%;
}
table, th, td {
  border-collapse: collapse;
}
th, td {
  padding: 15px;
  text-align: center; 
  vertical-align: middle;
  font-size: 18px;
}

#timeline tr:nth-child(even) {
  background-color: #54567a;
}
#timeline tr:nth-child(odd) {
 background-color: #464866;
}
#timeline th {
  background-color: #25274d;
  color: white;
}
.column {
  float: left;
}
.centered {
  text-align: center; 
  vertical-align: middle;
}
.left1 {
  width: 70%;
}
.right1 {
  width: 30%;
  padding-top: 100px;
}
.left2 {
  width: 50%;
}
.right2 {
  width: 50%;
}
.left3 {
  width: 20%;
}
.right3 {
  width: 80%;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.sectiontitle{
  font-size: 40px;
  margin-top: 30px;
  margin-bottom: 20px;
  font-weight: 600;
  color: #04aeee;
}
a {
  text-decoration: none;
}
h1 {
  font-size: 40px;
}
.linkbox {
  border-radius: 30px;
  background-color: #25274d;
  width: 60%;
  margin: 0 auto;
}
.divider {
  height: 1px; 
  background-color: white; 
  margin-top: 30px;
}
.firsttitle {
  font-size: 48px; 
  margin-top: 30px; 
  margin-bottom: 30px; 
  color: #04aeee; 
  font-weight: 700;
}
.newh4 {
  font-size: 16px; 
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 20px;
}
.newh2 {
  font-size: 24px; 
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 20px;
}
.newh1 {
  font-size: 40px; 
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 20px;
}
.newh3 {
  font-size: 20px; 
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 20px;
}
.nonefiller {
  background-color: none;
}
</style>

<div class="row">
    <div class="column left1">
      <div class="firsttitle">Welcome to Micromouse!</div>
      <div style="text-align: justify;">
        
        <select style="color: black;">
          <option>Spring 2021</option>
          <option>Fall 2020</option>
        </select>

        <div class="newh4">Lecture: Thursday 4PM ~ 5PM (PST)</div>
        <p>The IEEE Micromouse DeCal is aimed at students with a strong interest in robotics, 
          who want to pursue a hardware project but may not have the resources to do so on their own. 
          The course will be taught in the context of IEEE’s Micromouse competition, in which students 
          form teams of 2-3 to navigate a 16x16 maze. By the end of the semester, students will be able 
          to build an autonomous, maze-solving robot with minimal assistance, using skills that are 
          extendable to real-world robotics problems. Special focus is given to topics including electrical 
          and firmware engineering, brushed motors, sensing, pathfinding, and control theory. This course 
          fits in with other courses in the department like EE16B.
        </p>
      </div>
    </div>
    <div class="column right1 centered">
      <div class="linkbox">
        <div class="newh2"><a href="">Syllabus</a></div>
      </div>
      <div class="linkbox">
        <div class="newh2"><a href="">Register</a></div>
      </div>
    </div>
  </div>

  <div class="divider"></div>
  <div class="sectiontitle">Notices</div>

  <p>No notices yet!
  </p>

  <div class="divider"></div>
  <div class="sectiontitle">Instructors</div>
  
  <div class="row">
    <div class="column left2">
      <div class="row">
        <div class="column left3">
          <div class="newh1 nonefiller">Pic</div>
        </div>
        <div class="column right3">
          <div class="newh3">Ethan Mehta</div>
          <p>ethanbmehta@berkeley.edu</p>
        </div>
      </div>
    </div>
    <div class="column right2">
      <div class="row">
        <div class="column left3">
          <div class="newh1 nonefiller">Pic</div>
        </div>
        <div class="column right3">
          <div class="newh3">Matthew Tran</div>
          <p>matthewlamtran@berkeley.edu</p>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="column left2">
      <div class="row">
        <div class="column left3">
          <div class="newh1 nonefiller">Pic</div>
        </div>
        <div class="column right3">
          <div class="newh3">David Cheng</div>
          <p>david_cheng@berkeley.edu</p>
        </div>
      </div>
    </div>
    <div class="column right2">
      <div class="row">
        <div class="column left3">
          <div class="newh1 nonefiller">Pic</div>
        </div>
        <div class="column right3">
          <div class="newh3">Julian Meyn</div>
          <p>meyn@berkeley.edu</p>
        </div>
      </div>
    </div>
  </div>

  <div class="divider"></div>
  <div class="sectiontitle">Timeline</div>

  <table id="timeline">
    <tr>
      <th style="width: 10%;">Week</th>
      <th style="width: 30%;">Title</th> 
      <th style="width: 40%;">Content</th>
      <th style="width: 20%;">Links</th>
    </tr>

    <tr>
      <td>
        <b>1</b> <br> 
        (Date)
      </td>
      <td style="font-weight: 600;">
        What is Micromouse?
      </td>
      <td style="text-align: left; line-height: 30px;">
        • Tournament video, rules <br>
        • Course logistics, questions
      </td>
      <td style="line-height: 30px;">
        <a href="">Slides</a> <br> 
        <a href="">Reading</a> <br> 
        <a href="">Recording</a>
      </td>
    </tr>

    <tr>
      <td>
        <b>2</b> <br> 
        (Date)
      </td>
      <td style="font-weight: 600;">
        Lab 1: Arduino Basics
      </td>
      <td style="text-align: left; line-height: 30px;">
        • Team matching/signups <br>
        • High-level overview of schematic
      </td>
      <td style="line-height: 30px;">
        <a href="">Slides</a> <br> 
        <a href="">Lab Page</a> <br> 
        <a href="">Recording</a>
      </td>
    </tr>

    <tr>
      <td>
        <b>3</b> <br> 
        (Date)
      </td>
      <td style="font-weight: 600;">
        Lab 2: Encoders
      </td>
      <td style="text-align: left; line-height: 30px;">
        • Finally we interact with the real world! <br>
				• Hall Effect Sensors <br>
				• Polling, Interrupts
      </td>
      <td style="line-height: 30px;">
        <a href="">Slides</a> <br> 
        <a href="">Lab Page</a> <br> 
        <a href="">Recording</a>
      </td>
    </tr>

    <tr>
      <td>
        <b>4</b> <br> 
        (Date)
      </td>
      <td style="font-weight: 600;">
        Lab 3: ToF Sensors
      </td>
      <td style="text-align: left; line-height: 30px;">
        • More Sensor Communication! <br>
        • ToF (Time of Flight) Distance Sensors <br>
        • I2C
      </td>
      <td style="line-height: 30px;">
        <a href="">Slides</a> <br> 
        <a href="">Lab Page</a> <br> 
        <a href="">Recording</a>
      </td>
    </tr>
  </table>