Difference between revisions of "Team:BostonU/Team"

Line 1: Line 1:
−
{{BU17_template_menubar}}
+
<!DOCTYPE html>
 
<html>
 
<html>
 
<head>
 
<head>
 
<style>
 
<style>
−
bold {
+
#bunch {
−
   font-weight: bold;
+
   display: inline;
 +
  border-collapse: collapse;
 +
  border-spacing: 0;
 +
  border-width: 0;
 +
  text-decoration: none;
 +
  table-layout: fixed;
 
}
 
}
−
larger {
+
#bunch td {
−
   font-size: 200%;
+
   display: table-cell;
 +
  height: 150px;
 +
  width: 150px;
 +
  text-align: center;
 +
  overflow: hidden;
 
}
 
}
−
body    {
+
#bunch td img {
−
        background-color: #fff0f0
+
  border: none;
 +
  padding: 0;
 +
  margin: 0;
 +
  height: 120px;
 +
  width: 120px;
 +
  -webkit-transition:0.25s;
 +
  align-items: center;
 +
  opacity: 0.85;
 
}
 
}
−
#landingwrapper  {
+
#bunch p {
−
        width:900px;
+
   fk
−
        height: 100%;
+
   height: 120px;
−
        margin: 0 auto;
+
   width: 120px;
−
        padding-top: 100px;
+
−
}
+
−
#landingwrapper p {
+
−
   position:relative;
+
−
   display: inline;
+
−
   font-family: Arial, sans-serif;
+
−
  font-size: 100%;
+
−
  color: #605e5e;
+
 
}
 
}
−
#comingsoon p {
+
#desc {
−
        position: relative;
+
  height: 120px;
−
        display: inline;
+
  width: 120px;
−
        font-family: Arial, sans-serif;
+
  font-size: 75%;
−
        font-size: 400%;
+
−
        font-weight: bold;
+
−
        color: #f0e1e1;
+
 
}
 
}
−
#testbox {
+
#bunch img:hover {
−
  background-color: #8C1414;
+
  opacity: 1;
−
  position: relative;
+
  -webkit-transition:0.25s;
−
  display: run-in;
+
  height: 145px;
−
  width: 100%;
+
  width: 145px;
−
  height:10px;
+
 
}
 
}
−
 
−
 
 
</style>
 
</style>
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 +
<script type="text/javascript">
 +
$(document).ready(function() {
 +
  $('#ab').mouseover(function () {
 +
      $('#desc').text('This could be a bio for Abbey! It is pretty long, because she has a lot to say about herself. I can make the text smaller, and add lots more words, such as Lorem Ipsum.');
 +
  });
 +
  $('#th').mouseover(function () {
 +
      $('#desc').text('This could be a bio for Thomas! It is pretty long, because he has a lot to say about himself. I can make the text smaller, and add lots more words, such as I love Maine.');
 +
  });
 +
  $('#sa').mouseover(function () {
 +
      $('#desc').text('This could be a bio for Saimrunali! It is pretty long, because she has a lot to say about herself. I can make the text smaller, and add lots more words, such as I love agar.');
 +
  });
 +
  $('#al').mouseover(function () {
 +
      $('#desc').text("This could be Alan's bio! Hi dad!");
 +
  });
 +
  $('#ma').mouseover(function () {
 +
      $('#desc').text("This could be Matt's bio. Yikes.");
 +
  });
 +
  $('#st').mouseover(function () {
 +
      $('#desc').text('This could be a bio for Stephen! It is long, because he has a lot to say about himself. I can make the text smaller, and add more words, such as I do graphic design on the side.');
 +
  });
 +
  $('#so').mouseover(function () {
 +
      $('#desc').text('This could be a bio for Sophia! It is pretty long, because she has a lot to say about herself. I can make the text smaller, and add lots more words, such as Lorem Ipsum.');
 +
  });
 +
  $('#md').mouseover(function () {
 +
      $('#desc').text("This could be a bio for Madeline! It is pretty long, because she has a lot to say about herself. I can make the text smaller, and add lots more words, such as I don't like that idea.");
 +
  });
 +
  $('#bunch td').mouseleave(function () {
 +
      $('#desc').text("Mouse over a member of our team to learn about them!");
 +
  });
 +
});
 +
</script>
 +
</script>
 
</head>
 
</head>
−
 
−
 
 
<body>
 
<body>
−
<div id = "testbox">
+
  <table id="bunch" class="centered">
−
<div id = "landingwrapper">
+
    <tr>
−
<section id="comingsoon">
+
      <td><img src="img/headshot.png" id="ab"></img></td>
−
  <p> Team Description Coming Soon </p>
+
      <td><img src="img/headshot.png" id="th"></img></td>
−
</section>
+
      <td><img src="img/headshot.png" id="sa"></img></td>
−
<div id = "testbox">
+
    </tr>
−
<section id="teammembers">
+
    <tr>
−
  <p><br> <bold><larger>Meet Our Team!</larger>
+
      <td><img src="img/headshot.png" id="al"></img></td>
−
    <br>
+
       <td>
−
    <br>Abbey:</bold> Bio <br>
+
         <p id="desc">Mouse over a member of our team to learn about them!
−
    <br><bold>Madeline:</bold> Bio<br>
+
         </p>
−
    <br><bold>Sofia:</bold> Bio<br>
+
      </td>
−
    <br><bold>Stephen:</bold> Bio <br>
+
      <td><img src="img/headshot.png" id="ma"></img></td>
−
    <br><bold>Sai:</bold> Bio<br>
+
    </tr>
−
    <br><bold>Thomas:</bold> Bio <br><br>
+
    <tr>
−
  </p>
+
      <td><img src="img/headshot.png" id="st"></img></td>
−
</section>
+
      <td><img src="img/headshot.png" id="so"></img></td>
−
<div id = "testbox">
+
      <td><img src="img/headshot.png" id="md"></img></td>
−
<section id ="mentors">
+
    </tr>
−
  <p>
+
  </table>
−
      <br><bold><larger>And Our Mentors and Advisors: </larger>
+
−
       <br>
+
−
         <br>Matthew<br>
+
−
         <br>Alan<br>
+
−
        <br>Manuel<br>
+
−
        <br>Jeffrey<br>
+
−
        <br>Marissa<br>
+
−
        <br>Emma<br>
+
−
        <br>Jeff<br><br>
+
−
  </p>
+
−
</section>
+
−
<div id = "testbox">
+
−
<section id="p_i">
+
−
  <p>
+
−
    <br><bold><larger>And Finally Our PI's</larger>
+
−
    <br>
+
−
      <br>Douglas Densmore<br>
+
−
      <br>Wilson Wong<br>
+
−
      <br>Daniel Segre<br><br>
+
−
  </p></bold>
+
−
</section>
+
−
<div id = "testbox">
+
−
</div>
+
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 16:54, 5 July 2017

<!DOCTYPE html>

Mouse over a member of our team to learn about them!