Difference between revisions of "Team:UCL/Team"

Line 1: Line 1:
 
{{CSS_UCL2}}
 
{{CSS_UCL2}}
  
−
text
+
<html>
 +
 
 +
<script type="text/javascript">
 +
/** Used Only For Touch Devices **/
 +
(function(window) {
 +
 
 +
  // for touch devices: add class cs-hover to the figures when touching the items
 +
  if (Modernizr.touch) {
 +
 
 +
    // classie.js https://github.com/desandro/classie/blob/master/classie.js
 +
    // class helper functions from bonzo https://github.com/ded/bonzo
 +
 
 +
    function classReg(className) {
 +
      return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
 +
    }
 +
 
 +
    // classList support for class management
 +
    // altho to be fair, the api sucks because it won't accept multiple classes at once
 +
    var hasClass, addClass, removeClass;
 +
 
 +
    if ('classList' in document.documentElement) {
 +
      hasClass = function(elem, c) {
 +
        return elem.classList.contains(c);
 +
      };
 +
      addClass = function(elem, c) {
 +
        elem.classList.add(c);
 +
      };
 +
      removeClass = function(elem, c) {
 +
        elem.classList.remove(c);
 +
      };
 +
    } else {
 +
      hasClass = function(elem, c) {
 +
        return classReg(c).test(elem.className);
 +
      };
 +
      addClass = function(elem, c) {
 +
        if (!hasClass(elem, c)) {
 +
          elem.className = elem.className + ' ' + c;
 +
        }
 +
      };
 +
      removeClass = function(elem, c) {
 +
        elem.className = elem.className.replace(classReg(c), ' ');
 +
      };
 +
    }
 +
 
 +
    function toggleClass(elem, c) {
 +
      var fn = hasClass(elem, c) ? removeClass : addClass;
 +
      fn(elem, c);
 +
    }
 +
 
 +
    var classie = {
 +
      // full names
 +
      hasClass: hasClass,
 +
      addClass: addClass,
 +
      removeClass: removeClass,
 +
      toggleClass: toggleClass,
 +
      // short names
 +
      has: hasClass,
 +
      add: addClass,
 +
      remove: removeClass,
 +
      toggle: toggleClass
 +
    };
 +
 
 +
    // transport
 +
    if (typeof define === 'function' && define.amd) {
 +
      // AMD
 +
      define(classie);
 +
    } else {
 +
      // browser global
 +
      window.classie = classie;
 +
    }
 +
 
 +
    [].slice.call(document.querySelectorAll('.team-grid__member')).forEach(function(el, i) {
 +
      el.querySelector('.member__info').addEventListener('touchstart', function(e) {
 +
        e.stopPropagation();
 +
      }, false);
 +
      el.addEventListener('touchstart', function(e) {
 +
        classie.toggle(this, 'cs-hover');
 +
      }, false);
 +
    });
 +
 
 +
  }
 +
 
 +
})(window);
 +
</script>
 +
 
 +
<style type="text/css">
 +
$tisa: ff-tisa-web-pro;
 +
 
 +
$burlywood: #D9BC55;
 +
$title-on-black: $burlywood;
 +
 
 +
.wrapper--team {
 +
  margin: 0;
 +
  padding: 2rem 1rem;
 +
  background-color: #EFE2E5;
 +
}
 +
 
 +
.l-container {
 +
  margin: 0 auto;
 +
}
 +
@media screen and (min-width: 64em) {
 +
  .l-container {
 +
    max-width: 64rem;
 +
  }
 +
}
 +
@media screen and (min-width: 75em) {
 +
  .l-container {
 +
    max-width: 75rem;
 +
  }
 +
}
 +
 
 +
.team-grid {
 +
  margin: 0;
 +
  text-align: center;
 +
  *zoom: 1;
 +
 
 +
  &:before, &:after {
 +
    content: " ";
 +
    display: table;
 +
  }
 +
 
 +
  &:after {
 +
    clear: both;
 +
  }
 +
 
 +
}
 +
 
 +
.team-grid__member {
 +
  font-family: $tisa;
 +
 
 +
  max-width: 100%;
 +
  padding: 0.5rem;
 +
  margin: 0 0 0.5rem;
 +
 
 +
  display: inline-block;
 +
  float: none;
 +
  width: 100%;
 +
 
 +
  text-align: justify;
 +
  box-sizing: border-box;
 +
 
 +
}
 +
 
 +
@media screen and (min-width: 28em) {
 +
  .team-grid__member {
 +
    width: 49%;
 +
    max-width: none;
 +
  }
 +
}
 +
@media screen and (min-width: 42em) {
 +
  .team-grid__member {
 +
    width: 32.5%;
 +
  }
 +
}
 +
@media screen and (min-width: 62em) {
 +
  .team-grid__member {
 +
    width: 30%;
 +
  }
 +
}
 +
 
 +
//////////////////////
 +
// MODULE GRID
 +
//////////////////////
 +
.team-grid__member {
 +
  position: relative;
 +
  overflow: hidden;
 +
}
 +
 
 +
.team-grid__member img {
 +
  width: 100%;
 +
  height: auto;
 +
  border: 8px solid #fff;
 +
  box-sizing: border-box;
 +
  display: block;
 +
}
 +
 
 +
.center-vert-content img {border: none; display: inline; float: right;  }
 +
 
 +
.member__info {
 +
  color: #3D3543;
 +
  height: auto;
 +
  width: auto;
 +
  opacity: 0;
 +
  position: absolute;
 +
  top: 1rem;
 +
  left: 1rem;
 +
  right: 1rem;
 +
  bottom: 1rem;
 +
  padding: 0.5rem;
 +
  background: rgba(255, 255, 255, 0.85);
 +
 
 +
  backface-visibility: hidden;
 +
  transition: opacity 0.4s ease-in-out;
 +
}
 +
 
 +
.member__name__1 {
 +
  color: #1E6073;
 +
  font-size: 1.2rem;
 +
  letter-spacing: 1px;
 +
  line-height: 1.2rem;
 +
  margin-bottom: 0;
 +
  padding: 0 12px;
 +
}
 +
 
 +
.member__name__2 {
 +
  color: #FE6C68;
 +
  font-size: 1.2rem;
 +
  letter-spacing: 1px;
 +
  line-height: 1.2rem;
 +
  margin-bottom: 0;
 +
  padding: 0 12px;
 +
}
 +
 
 +
.member__name__3 {
 +
  color: #57a89e;
 +
  font-size: 1.2rem;
 +
  letter-spacing: 1px;
 +
  line-height: 1.2rem;
 +
  margin-bottom: 0;
 +
  padding: 0 12px;
 +
}
 +
 
 +
.member__title {
 +
  margin-bottom: 0.75rem;
 +
  font-size: 0.8rem;
 +
  font-weight: normal;
 +
  line-height: 1rem;
 +
  padding: 5px 12px;
 +
}
 +
 
 +
// FIX THE TOUCH METHOD
 +
//.no-touch .team-grid__member:hover .member__info,
 +
//.team-grid__member.cs-hover .member__info {
 +
//  opacity: 1;
 +
//}
 +
 
 +
.team-grid__member:hover .member__info {
 +
  opacity: 1;
 +
}
 +
 
 +
 
 +
// ----- Middle Alignment Vertical ----- //
 +
.member__info:before {
 +
  content: '';
 +
  display: inline-block;
 +
  height: 100%;
 +
  vertical-align: middle;
 +
  margin-right: -0.25em;
 +
}
 +
 
 +
.center-vert-content {
 +
  display: inline-block;
 +
  vertical-align: middle;
 +
}
 +
 
 +
</style>
 +
 
 +
<script type="text/javascript" src="//use.typekit.net/npe3lft.js"></script>
 +
<script type="text/javascript">
 +
  try {
 +
    Typekit.load();
 +
  } catch (e) {}
 +
</script>
 +
 
 +
<div class="wrapper--team">
 +
 
 +
  <div class="l-container">
 +
    <h3>Team Members</h3>
 +
    <div class="team-grid">
 +
 
 +
      <div class="team-grid__member hover">
 +
        <div class="member__info">
 +
          <div class="center-vert-content">
 +
            <img src="https://static.igem.org/mediawiki/2015/8/82/Avatar2.png.png" style="width: 45px; height: 48px;">
 +
            <h3 class="member__name__1">Marta Napiorkowska</h3>
 +
            <p class="member__title">BSc Biotechnology (3rd year)</p>
 +
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
 +
          </div>
 +
        </div>
 +
        <img src="https://static.igem.org/mediawiki/2015/8/80/MG_0417.jpg" alt="Marta">
 +
      </div>
 +
     
 +
     
 +
      <div class="team-grid__member hover">
 +
        <div class="member__info">
 +
          <div class="center-vert-content"><img src="https://static.igem.org/mediawiki/2015/4/46/Avatar1.png.png" style="width: 50px; height: 48px;">
 +
            <h3 class="member__name__2">Paloma Portella Tores</h3>
 +
            <p class="member__title">BSc Molecular Biology (2nd Year)</p>
 +
            I only found out about iGEM when the UCL 2014 team had already been formed, and ever since, I have held on to being part of it as my little joy to look forward to. I enjoy making things, talking to people and taking pictures of both. In iGEM I will try
 +
            to learn as much as I can from the lab and not make it too untidy, get in touch with people, and make some graphics and pictures.
 +
          </div>
 +
        </div>
 +
        <img src="https://static.igem.org/mediawiki/2015/9/94/MG_0523.jpg" alt="Paloma">
 +
      </div>
 +
 
 +
   
 +
 
 +
      <div class="team-grid__member hover">
 +
        <div class="member__info">
 +
          <div class="center-vert-content">
 +
            <img src="https://static.igem.org/mediawiki/2015/4/4e/Avatar3.png.png" style="width: 40px; height: 48px;">
 +
            <h3 class="member__name__3">Marta Lebrusant Fernandez</h3>
 +
       
 +
            <p class="member__title">Biotechnology (1st year)</p>
 +
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
 +
          </div>
 +
        </div>
 +
        <img src="https://static.igem.org/mediawiki/2015/9/9c/MG_0410.jpg" alt="Marta">
 +
      </div>
 +
 
 +
 
 +
    </div>
 +
 
 +
  </div>
 +
</div>
 +
 
 +
</html>

Revision as of 09:30, 4 July 2015

Team Members

Marta Napiorkowska

BSc Biotechnology (3rd year)

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Marta

Paloma Portella Tores

BSc Molecular Biology (2nd Year)

I only found out about iGEM when the UCL 2014 team had already been formed, and ever since, I have held on to being part of it as my little joy to look forward to. I enjoy making things, talking to people and taking pictures of both. In iGEM I will try to learn as much as I can from the lab and not make it too untidy, get in touch with people, and make some graphics and pictures.
Paloma

Marta Lebrusant Fernandez

Biotechnology (1st year)

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Marta