Difference between revisions of "Team:Sheffield/Team"

Line 190: Line 190:
  
 
<body>
 
<body>
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
<!-- SPEAKERS SECTION -->
 +
<section id="speakers">
 +
<h3>Speakers</h3> <!-- Section Title -->
 +
<div class="separator"></div>
 +
<div class="container">
 +
<div class="col-md-8 col-md-offset-2">
 +
<!-- Section Description -->
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 +
</div>
 +
 +
<!-- First Row of Speakers -->
 +
<div class="row1">
 +
 +
<!-- Speaker 1 -->
 +
<div class="col-md-3">
 +
<a href="#" class="member-profile">
 +
<div class="unhover_img">
 +
<img src="img/speaker-1.png" alt="" />
 +
</div>
 +
<div class="hover_img">
 +
<img src="img/speaker-1-hover.png" alt="" />
 +
</div>
 +
<span>Creative Director</span>
 +
<h4><span>Patrick </span> Simpson</h4>
 +
</a>
 +
<ul>
 +
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
 +
<li><a href="#"  target="_blank"><i class="fa fa-linkedin"></i></a></li>
 +
<li><a href="#" target="_blank"><i class="fa fa-foursquare"></i></a></li>
 +
</ul>
 +
</div>
 +
 +
<!-- Speaker 2 -->
 +
<div class="col-md-3">
 +
<a href="#" class="member-profile">
 +
<div class="unhover_img">
 +
<img src="img/speaker-2.png" alt="" />
 +
</div>
 +
<div class="hover_img">
 +
<img src="img/speaker-2-hover.png" alt="" />
 +
</div>
 +
<span>Web Designer</span>
 +
<h4><span>Teresa</span> Crawford</h4>
 +
</a>
 +
<ul>
 +
<li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li>
 +
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
 +
<li><a href="#"  target="_blank"><i class="fa fa-linkedin"></i></a></li>
 +
</ul>
 +
</div>
 +
 +
<!-- Speaker 3 -->
 +
<div class="col-md-3">
 +
<a href="#" class="member-profile">
 +
<div class="unhover_img">
 +
<img src="img/speaker-3.png" alt="" />
 +
</div>
 +
<div class="hover_img">
 +
<img src="img/speaker-3-hover.png" alt="" />
 +
</div>
 +
<span>Photographer</span>
 +
<h4><span>Joseph</span> Reynolds</h4>
 +
</a>
 +
<ul>
 +
<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
 +
<li><a href="#" target="_blank"><i class="fa fa-vimeo-square"></i></a></li>
 +
<li><a href="#" target="_blank"><i class="fa fa-pinterest"></i></a></li>
 +
</ul>
 +
</div>
 +
 +
<!-- Speaker 4 -->
 +
<div class="col-md-3">
 +
<a href="#" class="member-profile">
 +
<div class="unhover_img">
 +
<img src="img/speaker-4.png" alt="" />
 +
</div>
 +
<div class="hover_img">
 +
<img src="img/speaker-4-hover.png" alt="" />
 +
</div>
 +
<span>SEO Expert</span>
 +
<h4><span>Kathy</span> Watkins</h4>
 +
</a>
 +
<ul>
 +
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
 +
<li><a href="#"  target="_blank"><i class="fa fa-linkedin"></i></a></li>
 +
<li><a href="#" target="_blank"><i class="fa fa-foursquare"></i></a></li>
 +
<li><a href="#" target="_blank"><i class="fa fa-google-plus"></i></a></li>
 +
</ul>
 +
</div>
 +
 +
</div> <!-- End First Row -->
 +
<div class="clear"></div>
 +
 +
<!-- Second Row of Speakers -->
 +
<div class="row2">
 +
 +
<!-- Speaker 5 -->
 +
<div class="col-md-3">
 +
<a href="#" class="member-profile">
 +
<div class="unhover_img">
 +
<img src="img/speaker-3.png" alt="" />
 +
</div>
 +
<div class="hover_img">
 +
<img src="img/speaker-3-hover.png" alt="" />
 +
</div>
 +
<span>Creative Director</span>
 +
<h4><span>Nathan</span> Chapman</h4>
 +
</a>
 +
<ul>
 +
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
 +
<li><a href="#"  target="_blank"><i class="fa fa-linkedin"></i></a></li>
 +
<li><a href="#" target="_blank"><i class="fa fa-foursquare"></i></a></li>
 +
</ul>
 +
</div>
 +
 +
<!-- Speaker 6 -->
 +
<div class="col-md-3">
 +
<a href="#" class="member-profile">
 +
<div class="unhover_img">
 +
<img src="img/speaker-4.png" alt="" />
 +
</div>
 +
<div class="hover_img">
 +
<img src="img/speaker-4-hover.png" alt="" />
 +
</div>
 +
<span>Web Designer</span>
 +
<h4><span>Donna</span> Hamilton</h4>
 +
</a>
 +
<ul>
 +
<li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li>
 +
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
 +
<li><a href="#"  target="_blank"><i class="fa fa-linkedin"></i></a></li>
 +
</ul>
 +
</div>
 +
 +
<!-- Speaker 7 -->
 +
<div class="col-md-3">
 +
<a href="#" class="member-profile">
 +
<div class="unhover_img">
 +
<img src="img/speaker-1.png" alt="" />
 +
</div>
 +
<div class="hover_img">
 +
<img src="img/speaker-1-hover.png" alt="" />
 +
</div>
 +
<span>Photographer</span>
 +
<h4><span>Jessica</span> Wallace</h4>
 +
</a>
 +
<ul>
 +
<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
 +
<li><a href="#" target="_blank"><i class="fa fa-vimeo-square"></i></a></li>
 +
<li><a href="#" target="_blank"><i class="fa fa-pinterest"></i></a></li>
 +
</ul>
 +
</div>
 +
 +
<!-- Speaker 8 -->
 +
<div class="col-md-3">
 +
<a href="#" class="member-profile">
 +
<div class="unhover_img">
 +
<img src="img/speaker-2.png" alt="" />
 +
</div>
 +
<div class="hover_img">
 +
<img src="img/speaker-2-hover.png" alt="" />
 +
</div>
 +
<span>SEO Expert</span>
 +
<h4><span>Kathy</span> Watkins</h4>
 +
</a>
 +
<ul>
 +
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
 +
<li><a href="#"  target="_blank"><i class="fa fa-linkedin"></i></a></li>
 +
<li><a href="#" target="_blank"><i class="fa fa-foursquare"></i></a></li>
 +
<li><a href="#" target="_blank"><i class="fa fa-google-plus"></i></a></li>
 +
</ul>
 +
</div>
 +
 +
</div> <!-- End Second Row -->
 +
<div class="clear"></div>
 +
 +
<!-- View All Button -->
 +
<div class="col-md-12">
 +
<button class="btn btn-transparent fadeIn">View All</button>
 +
</div>
 +
 +
</div>
 +
</section>
 +
<!-- //SPEAKERS SECTION -->
 +
 +
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!-- Load jQuery -->
 +
 +
<!-- jQuery Code for the View All Button -->
 +
<script>
 +
$(document).ready(function(){
 +
  $(".fadeIn").click(function(){
 +
$("div.row2").fadeIn();
 +
$("button.fadeIn").hide();
 +
  });
 +
});
 +
</script>
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
  
  

Revision as of 10:27, 1 August 2017

Speakers

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Creative Director

Patrick Simpson
Web Designer

Teresa Crawford
Photographer

Joseph Reynolds
SEO Expert

Kathy Watkins
Creative Director

Nathan Chapman
Web Designer

Donna Hamilton
Photographer

Jessica Wallace
SEO Expert

Kathy Watkins

Team

In this page you can introduce your team members, instructors, and advisors.

Inspiration

You can look at what other teams did to get some inspiration!
Here are a few examples:

What should this page contain?
  • Include pictures of your teammates, don’t forget instructors and advisors!
  • 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.
  • Take team pictures! Show us your school, your lab and little bit of your city.
  • Remember that image galleries can help you showcase many pictures while saving space.