Difference between revisions of "Team:BostonU HW/Team"

(Prototype team page)
 
Line 1: Line 1:
−
{{BostonU_HW}}
+
 
 
<html>
 
<html>
  
 +
<style type="text/css">
 +
 +
 +
#people-carousel {
 +
    border: 2px solid black;
 +
    padding: 0;
 +
    margin-left: 28px;
 +
}
 +
.mscarousel {
 +
    overflow-x: hidden;
 +
    overflow-y: hidden;
 +
    overflow-x: none;
 +
    overflow-y: none;
 +
    float: left;
 +
    display: inline;
 +
    white-space: nowrap;
 +
}
 +
 +
body {
 +
    font: x-small sans-serif;
 +
}
 +
 +
 +
</style>
 +
 +
 +
<div id="people-carousel" class="mscarousel" style="width: 900px; height: 532px; overflow: hidden; position: relative;">
 +
        <div id="previous"></div>
 +
           
 +
       
 +
        <div id="next"></div>
 +
    <div class="child" id="people-carousel_mscchild" style="width: 13500px; left: 0px;">
 +
 +
<div class="person set people-carousel_mscss people-carouselmsc_0" id="rebecca">
 +
            <div class="picture">
 +
<img src="https://static.igem.org/mediawiki/2016/8/8e/BUHW2016_skyline.png" width="334" height="500" alt="image not found" <="" img=""> 
 +
            </div>
 +
            <div class="texts">
 +
<h2>Rebecca Wolf</h2>
 +
<p><b>Function:</b> Person 1</p>
 +
<p><b>Major:</b> Computer Engineering </p>
 +
                                <br>
 +
                                <p>
 +
Hello!
 +
                                </p>
 +
</div>
 +
</div>
  
 +
<div class="person set people-carousel_mscss people-carouselmsc_1" id="priya">
 +
            <div class="picture">
 +
<img src="https://static.igem.org/mediawiki/2016/8/8e/BUHW2016_skyline.png" width="334" height="500" alt="image not found" <="" img=""> 
 +
            </div>
 +
<div class="texts">
 +
<h2>Priya Kapadia</h2>
 +
<p><b>Function:</b> Person 2</p>
 +
<p><b>Major:</b> Computer Engineering</p>
 +
                                <br>
 +
                                <p>
 +
Hello!
 +
                                </p>
 +
</div>
 +
</div><div class="person set people-carousel_mscss people-carouselmsc_2" id="kestas">
 +
            <div class="picture">
 +
<img src="https://static.igem.org/mediawiki/2016/8/8e/BUHW2016_skyline.png" width="334" height="500" alt="image not found" <="" img=""> 
 +
            </div>
 +
<div class="texts">
 +
<h2>Kestas</h2>
 +
<p><b>Function:</b> Person 3</p>
 +
<p><b>Major:</b> Computer Engineering and Biomedical Engineering</p>
 +
                                <br>
 +
                              <p>
 +
Hello!
 +
</p>
 +
</div>
 +
        </div><div class="person set people-carousel_mscss people-carouselmsc_3" id="shane">
 +
            <div class="picture">
 +
<img src="https://static.igem.org/mediawiki/2016/8/8e/BUHW2016_skyline.png" width="334" height="500" alt="image not found" <="" img=""> 
 +
            </div>
 +
<div class="texts">
 +
<h2>Shane McCormack</h2>
 +
<p><b>Function:</b> Person 4 </p>
 +
<br>
 +
                                <p>
 +
                                <p><b>Major:</b> Computer Engineering and Biomedical Engineering</p>
 +
                                <br>                               
 +
  <p>
 +
Hello!
 +
</p>
 +
 +
</div>
 +
</div><div class="person set people-carousel_mscss people-carouselmsc_4" id="zach">
 +
            <div class="picture">
 +
<img src="https://static.igem.org/mediawiki/2016/8/8e/BUHW2016_skyline.png" width="334" height="500" alt="image not found" <="" img=""> 
 +
            </div>
 +
<div class="texts">
 +
<h2>Zach Lasiuk</h2>
 +
<p><b>Function:</b> Person 5</p>
 +
<p><b>Major:</b> Electrical Engineering</p>
 +
                                <br>
 +
                                <p>
 +
Hello!
 +
                                </p>
 +
</div>
 +
</div>
 +
<strong class="clear last"></strong></div></div>
  
−
<div class="column full_size" >
 
  
−
<p>In this page you can introduce your team members, instructors, and advisors. </p>
+
<script type="text/javascript">
 +
$(document).ready(function() {
  
 +
    var people = new Array();
  
−
</div>
+
    people['rebecca'] = 0;
 +
    people['priya'] = 1;
 +
    people['kestas'] = 2;
 +
    people['shane'] = 3;
 +
    people['zach'] = 4;
  
−
<div class="column half_size" >
+
    mcarousel = $("#people-carousel").msCarousel({
−
<h5>Inspiration</h5>
+
        boxClass: 'div.person',
−
<p>You can look at what other teams did to get some inspiration! <br />
+
        height: 532,
−
Here are a few examples:</p>
+
        width: 900
−
<ul>
+
    }).data("msCarousel");
−
<li><a href="https://2014.igem.org/Team:METU_Turkey_team">METU Turkey </a></li>
+
−
<li><a href="https://2014.igem.org/Team:Colombia/Members">Colombia</a></li>
+
−
<li><a href="https://2014.igem.org/Team:Stony_Brook/Team">Stony Brook</a></li>
+
−
<li><a href="https://2014.igem.org/Team:OUC-China/Team">OUC-China</a></li>
+
−
</ul>
+
  
−
</div>
+
    $("#next").click(function() {
 +
        mcarousel.next();
 +
    });
  
−
<div class="column half_size" >
+
    $("#previous").click(function() {
−
<h5>What should this page contain?</h5>
+
        mcarousel.previous();
−
<ul>
+
    });
−
<li> Include pictures of your teammates, don’t forget instructors and advisors! </li>
+
−
<li>You can add a small biography or a few words from each team member, to tell us what you like, and what motivated you to participate in iGEM.</li>
+
−
<li>Take team pictures! Show us your school, your lab and little bit of your city.</li>
+
−
<li>Remember that image galleries can help you showcase many pictures while saving space.</li>
+
−
</ul>
+
−
</div>
+
  
 +
    $('area').click(function(event) {
 +
        event.preventDefault();
 +
        mcarousel.goto(people[$(event.target).attr('href')]);
 +
    });
  
 +
    $('#people-carousel').hover(function() {
 +
        $('#previous, #next').fadeIn();
 +
    }, function() {
 +
        $('#previous, #next').fadeOut();
 +
    });
 +
});
 +
    </script>
  
  
 
</html>
 
</html>

Revision as of 18:57, 27 June 2016