Difference between revisions of "Team:Grenoble-Alpes/Team"

(Prototype team page)
 
Line 1: Line 1:
−
{{Grenoble-Alpes}}
 
−
 
 
<html>
 
<html>
  
 +
<head>
 +
<title> Team </title>
 +
</head>
  
 +
<style>
 +
.section-title h2 {
 +
  display: inline-block;
 +
  font-size: 30px;
 +
  font-weight: 300;
 +
  line-height: 30px;
 +
  margin-bottom: 40px;
 +
  padding-bottom: 10px;
 +
  position: relative;
 +
  text-transform: uppercase;
 +
}
 +
.section-title h2:before {
 +
position: absolute;
 +
background: #575757;
 +
height: 2px;
 +
width: 45px;
 +
content: "";
 +
bottom: 0;
 +
}
 +
.portfolio-menu button.mixitup-control-active {
 +
      background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
 +
      border: 2px solid #4bcaff;
 +
      color: #4bcaff;
 +
      padding: 10px 15px;
 +
    font-weight: 700;
 +
    transition: .4s;
 +
    text-transform: uppercase;
 +
}
 +
.portfolio-menu button {
 +
      background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
 +
      border: 2px solid transparent;
 +
      color: #515f67;
 +
      padding: 10px 15px;
 +
    font-weight: 700;
 +
    text-transform: uppercase;
 +
    cursor: pointer;
 +
}
 +
.single-portfolio a {
 +
  display: block;
 +
  line-height: 0;
 +
  position: relative;
 +
}
 +
.single-portfolio a::before {
 +
  background: #000 none repeat scroll 0 0;
 +
  content: "";
 +
  height: 100%;
 +
  opacity: 0;
 +
  position: absolute;
 +
  top: 0;
 +
  transform: scale(0.5);
 +
  transition: all 0.3s ease 0s;
 +
  width: 100%;
 +
}
 +
.single-portfolio:hover a::before {
 +
opacity: .5;
 +
transform: scale(1);
 +
}
 +
.single-portfolio a::after {
 +
  color: #fff;
 +
  content: "+";
 +
  font-size: 60px;
 +
  left: 0;
 +
  position: absolute;
 +
  right: 0;
 +
  text-align: center;
 +
  top: 50%;
 +
  transform: scale(0);
 +
  transition: all 0.3s ease 0s;
 +
}
 +
.single-portfolio:hover a::after {
 +
transform: scale(1);
 +
}
 +
</style>
  
−
<div class="column full_size" >
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
−
 
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/2.1.11/jquery.mixitup.min.js"></script>
−
<h1>Team</h1>
+
<body>
−
<p>In this page you can introduce your team members, instructors, and advisors. </p>
+
<div class="container">
 +
<div class="row">
 +
<div class="col-md-4">
 +
    <div class="section-title">
 +
    <h2>Portfolio</h2>
 +
</div>
 +
</div>
 +
<div class="col-md-8">
 +
    <div class="portfolio-menu">
 +
                <button type="button" data-filter="all">All</button>
 +
                <button type="button" data-filter=".category-a">Bootstrap</button>
 +
                <button type="button" data-filter=".category-b">HTML5</button>
 +
                <button type="button" data-filter=".category-c">CSS3</button>
 +
                <button type="button" data-filter=".category-d">JS</button>
 +
            </div>
 +
</div>
 +
</div>
 
</div>
 
</div>
−
 
+
<div class="container">
−
<div class="clear"></div>
+
    <div id="container" class="row">
−
 
+
<div class="col-md-4 mix category-a">
−
<div class="column half_size" >
+
    <div class="single-portfolio">
−
<h5>Inspiration</h5>
+
<a class="gallery-item" href="https://static.pexels.com/photos/402023/pexels-photo-402023.jpeg"><img class="img-responsive" src="https://static.pexels.com/photos/402023/pexels-photo-402023.jpeg" alt="One" /></a>
−
<p>You can look at what other teams did to get some inspiration! <br />
+
</div>
−
Here are a few examples:</p>
+
</div>
−
<ul>
+
<div class="col-md-4 mix category-b">
−
<li><a href="https://2014.igem.org/Team:METU_Turkey_team">METU Turkey </a></li>
+
    <div class="single-portfolio">
−
<li><a href="https://2014.igem.org/Team:Colombia/Members">Colombia</a></li>
+
<a class="gallery-item" href="https://static.pexels.com/photos/402023/pexels-photo-402023.jpeg"><img class="img-responsive" src="https://static.pexels.com/photos/402023/pexels-photo-402023.jpeg" alt="One" /></a>
−
<li><a href="https://2014.igem.org/Team:Stony_Brook/Team">Stony Brook</a></li>
+
</div>
−
<li><a href="https://2014.igem.org/Team:OUC-China/Team">OUC-China</a></li>
+
</div>
−
</ul>
+
<div class="col-md-4 mix category-c">
−
 
+
    <div class="single-portfolio">
 +
<a class="gallery-item" href="https://static.pexels.com/photos/402023/pexels-photo-402023.jpeg"><img class="img-responsive" src="https://static.pexels.com/photos/402023/pexels-photo-402023.jpeg" alt="One" /></a>
 +
</div>
 +
</div>
 +
<div class="col-md-4 mix category-d">
 +
    <div class="single-portfolio">
 +
<a class="gallery-item" href="https://static.pexels.com/photos/402023/pexels-photo-402023.jpeg"><img class="img-responsive" src="https://static.pexels.com/photos/402023/pexels-photo-402023.jpeg" alt="One" /></a>
 +
</div>
 +
</div>
 +
<div class="col-md-4 mix category-a">
 +
    <div class="single-portfolio">
 +
<a class="gallery-item" href="https://static.pexels.com/photos/402023/pexels-photo-402023.jpeg"><img class="img-responsive" src="https://static.pexels.com/photos/402023/pexels-photo-402023.jpeg" alt="One" /></a>
 +
</div>
 +
</div>
 +
<div class="col-md-4 mix category-b">
 +
    <div class="single-portfolio">
 +
<a class="gallery-item" href="https://static.pexels.com/photos/402023/pexels-photo-402023.jpeg"><img class="img-responsive" src="https://static.pexels.com/photos/402023/pexels-photo-402023.jpeg" alt="One" /></a>
 +
</div>
 +
</div>
 +
</div>
 
</div>
 
</div>
 +
</body>
  
−
<div class="column half_size" >
+
<script>
−
<h5>What should this page contain?</h5>
+
    $(document).ready(function() {
−
<ul>
+
      // This will create a single gallery from all elements that have class "gallery-item"
−
<li> Include pictures of your teammates, don’t forget instructors and advisors! </li>
+
        $('.gallery-item').magnificPopup({
−
<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>
+
          type: 'image',
−
<li>Take team pictures! Show us your school, your lab and little bit of your city.</li>
+
          gallery:{
−
<li>Remember that image galleries can help you showcase many pictures while saving space.</li>
+
            enabled:true
−
</ul>
+
          }
−
</div>
+
        });
−
 
+
       
−
 
+
        // MixItUp 2
−
 
+
        $('#container').mixItUp();
−
</div>
+
    });
 +
</script>
 
</html>
 
</html>

Revision as of 10:27, 11 July 2017

Team

Portfolio

One
One
One
One
One
One