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

Line 6: Line 6:
 
<LINK rel="stylesheet" type="text/css" href="https://2018.igem.org/Template:Grenoble-Alpes/CSS"  />
 
<LINK rel="stylesheet" type="text/css" href="https://2018.igem.org/Template:Grenoble-Alpes/CSS"  />
 
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
 
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<style>
 
@import "compass/css3";
 
 
@font-face {
 
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/polar.otf');
 
  font-family: 'Polar';
 
}
 
$polar: 'Polar', Helvetica, Arial, sans-serif;
 
$openSans: 'Open Sans', Helvetica, Arial, sans-serif;
 
@mixin mediaMaxWidth($w) {
 
  @media (max-width: $w) {
 
    @content;
 
  }
 
}
 
*, *:before, *:after {
 
  box-sizing: border-box;
 
  margin: 0;
 
  padding: 0;
 
}
 
slider-container {
 
  font-size: 62.5%;
 
  height: 100%;
 
  overflow: hidden;
 
}
 
 
svg {
 
  display: block;
 
  overflow: visible;
 
}
 
.slider-container {
 
  position: relative;
 
  height: 100%;
 
  user-select: none;
 
  cursor: all-scroll;
 
}
 
.slider-control {
 
  z-index: 2;
 
  position: absolute;
 
  top: 0;
 
  width: 12%;
 
  height: 100%;
 
  transition: opacity 0.3s;
 
  will-change: opacity;
 
  opacity: 0;
 
 
  .slider-control .inactive:hover {
 
    cursor: auto;
 
  }
 
 
  .slider-control :not(.inactive):hover {
 
    opacity: 1;
 
    cursor: pointer;
 
  }
 
 
  .slider-control .left {
 
    left: 0;
 
    background: linear-gradient(to right, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 100%);
 
  }
 
  .slider-control .right {
 
    right: 0;
 
    background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.18) 100%);
 
  }
 
}
 
 
.slider-pagi {
 
  position: absolute;
 
  z-index: 3;
 
  left: 50%;
 
  bottom: 2rem;
 
  transform: translateX(-50%);
 
  font-size: 0;
 
  list-style-type: none;
 
 
 
  &__elem {
 
    position: relative;
 
    display: inline-block;
 
    vertical-align: top;
 
    width: 2rem;
 
    height: 2rem;
 
    margin: 0 0.5rem;
 
    border-radius: 50%;
 
    border: 2px solid #fff;
 
    cursor: pointer;
 
   
 
    .slider-pagi :before {
 
      content: "";
 
      position: absolute;
 
      left: 50%;
 
      top: 50%;
 
      width: 1.2rem;
 
      height: 1.2rem;
 
      background: #fff;
 
      border-radius: 50%;
 
      transition: transform 0.3s;
 
      transform: translate(-50%, -50%) scale(0);
 
    }
 
   
 
    .slider-pagi .active:before,
 
    .slider-pagi:hover:before {
 
      transform: translate(-50%, -50%) scale(1);
 
    }
 
  }
 
}
 
.slider {
 
  z-index: 1;
 
  position: relative;
 
  height: 100%;
 
 
  .slider .animating {
 
    transition: transform 0.5s;
 
    will-change: transform;
 
 
    .slide__bg {
 
      transition: transform 0.5s;
 
      will-change: transform;
 
    }
 
  }
 
}
 
.slide {
 
  position: absolute;
 
  top: 0;
 
  width: 100%;
 
  height: 100%;
 
  overflow: hidden;
 
 
  .slide .active {
 
 
    .slide__overlay,
 
    .slide__text{
 
      opacity: 1;
 
      transform: translateX(0);
 
    }
 
  }
 
 
  &__bg {
 
    position: absolute;
 
    top: 0;
 
    left: -50%;
 
    width: 100%;
 
    height: 100%;
 
    background-size: cover;
 
    will-change: transform;
 
  }
 
  .slide:nth-child(1) {
 
    left: 0;
 
 
    .slide__bg {
 
      left: 0;
 
      background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/3d-slider-3.jpg');
 
    }
 
 
    .slide__overlay-path {
 
      fill: rgb(233, 156, 126);
 
    }
 
 
    @include mediaMaxWidth(991px) {
 
      .slide__text {
 
        background-color: rgba(233, 156, 126, 0.8);
 
      }
 
    }
 
  }
 
  .slide:nth-child(2) {
 
    left: 100%;
 
 
    .slide__bg {
 
      left: -50%;
 
      background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/3d-slider-2.jpg');
 
    }
 
 
    .slide__overlay-path {
 
      fill: rgb(225, 204, 174);
 
    }
 
 
    @include mediaMaxWidth(991px) {
 
      .slide__text {
 
        background-color: rgba(225, 204, 174, 0.8);
 
      }
 
    }
 
  }
 
  .slide:nth-child(3) {
 
    left: 200%;
 
 
    .slide__bg {
 
      left: -100%;
 
      background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/3d-slider-1.jpg');
 
    }
 
 
    .slide__overlay-path {
 
      fill: rgb(173, 197, 205);
 
    }
 
 
    @include mediaMaxWidth(991px) {
 
      .slide__text {
 
        background-color: rgba(173, 197, 205, 0.8);
 
      }
 
    }
 
  }
 
  .slide:nth-child(4) {
 
    left: 300%;
 
 
    .slide__bg {
 
      left: -150%;
 
      background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/3d-slider-4.jpg');
 
    }
 
 
    .slide__overlay-path {
 
      fill: rgb(203, 198, 195);
 
    }
 
 
    @include mediaMaxWidth(991px) {
 
      .slide__text {
 
        background-color: rgba(203, 198, 195, 0.8);
 
      }
 
    }
 
  }
 
 
  &__content {
 
    position: absolute;
 
    top: 0;
 
    left: 0;
 
    width: 100%;
 
    height: 100%;
 
  }
 
 
  &__overlay {
 
    position: absolute;
 
    bottom: 0;
 
    left: 0;
 
    height: 100%;
 
    min-height: 810px;
 
    transition: transform 0.5s 0.5s, opacity 0.2s 0.5s;
 
    will-change: transform, opacity;
 
    transform: translate3d(-20%, 0, 0);
 
    opacity: 0;
 
 
    @include mediaMaxWidth(991px) {
 
      display: none;
 
    }
 
 
    path {
 
      opacity: 0.8;
 
    }
 
  }
 
 
  &__text {
 
    position: absolute;
 
    width: 25%;
 
    bottom: 15%;
 
    left: 12%;
 
    color: #fff;
 
    transition: transform 0.5s 0.8s, opacity 0.5s 0.8s;
 
    will-change: transform, opacity;
 
    transform: translateY(-50%);
 
    opacity: 0;
 
 
    @include mediaMaxWidth(991px) {
 
      left: 0;
 
      bottom: 0;
 
      width: 100%;
 
      height: 20rem;
 
      text-align: center;
 
      transform: translateY(50%);
 
      transition: transform 0.5s 0.5s, opacity 0.5s 0.5s;
 
      padding: 0 1rem;
 
    }
 
 
    &-heading {
 
      font-family: $polar;
 
      font-size: 5rem;
 
      margin-bottom: 2rem;
 
     
 
      @include mediaMaxWidth(991px) {
 
        line-height: 20rem;
 
        font-size: 3.5rem;
 
      }
 
    }
 
 
    &-desc {
 
      font-family: $openSans;
 
      font-size: 1.8rem;
 
      margin-bottom: 1.5rem;
 
 
      @include mediaMaxWidth(991px) {
 
        display: none;
 
      }
 
    }
 
 
    &-link {
 
      z-index: 5;
 
      display: inline-block;
 
      position: relative;
 
      padding: 0.5rem;
 
      cursor: pointer;
 
      font-family: $openSans;
 
      font-size: 2.3rem;
 
      perspective: 1000px;
 
     
 
      @include mediaMaxWidth(991px) {
 
        display: none;
 
      }
 
 
      &:before {
 
        z-index: -1;
 
        content: "";
 
        position: absolute;
 
        top: 0;
 
        left: 0;
 
        width: 100%;
 
        height: 100%;
 
        background: #000;
 
        transform-origin: 50% 100%;
 
        transform: rotateX(-85deg);
 
        transition: transform 0.3s;
 
        will-change: transform;
 
      }
 
  
      &:hover:before {
 
        transform: rotateX(0);
 
      }
 
    }
 
  }
 
}</style>
 
 
<style>
 
<style>
 
#welcome{
 
#welcome{
Line 534: Line 213:
 
</div>
 
</div>
 
</div>
 
</div>
 
<div class="slider-container">
 
  <div class="slider-control left inactive"></div>
 
  <div class="slider-control right"></div>
 
  <ul class="slider-pagi"></ul>
 
  <div class="slider">
 
    <div class="slide slide-0 active">
 
      <div class="slide__bg"></div>
 
      <div class="slide__content">
 
        <svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
 
          <path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
 
        </svg>
 
        <div class="slide__text">
 
          <h2 class="slide__text-heading">Project name 1</h2>
 
          <p class="slide__text-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio veniam minus illo debitis nihil animi facere, doloremque voluptate tempore quia. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio veniam minus illo debitis nihil animi facere, doloremque voluptate tempore quia.</p>
 
          <a class="slide__text-link">Project link</a>
 
        </div>
 
      </div>
 
    </div>
 
    <div class="slide slide-1 ">
 
      <div class="slide__bg"></div>
 
      <div class="slide__content">
 
        <svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
 
          <path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
 
        </svg>
 
        <div class="slide__text">
 
          <h2 class="slide__text-heading">Project name 2</h2>
 
          <p class="slide__text-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio veniam minus illo debitis nihil animi facere, doloremque voluptate tempore quia. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio veniam minus illo debitis nihil animi facere, doloremque voluptate tempore quia.</p>
 
          <a class="slide__text-link">Project link</a>
 
        </div>
 
      </div>
 
    </div>
 
    <div class="slide slide-2">
 
      <div class="slide__bg"></div>
 
      <div class="slide__content">
 
        <svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
 
          <path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
 
        </svg>
 
        <div class="slide__text">
 
          <h2 class="slide__text-heading">Project name 3</h2>
 
          <p class="slide__text-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio veniam minus illo debitis nihil animi facere, doloremque voluptate tempore quia. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio veniam minus illo debitis nihil animi facere, doloremque voluptate tempore quia.</p>
 
          <a class="slide__text-link">Project link</a>
 
        </div>
 
      </div>
 
    </div>
 
    <div class="slide slide-3">
 
      <div class="slide__bg"></div>
 
      <div class="slide__content">
 
        <svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
 
          <path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
 
        </svg>
 
        <div class="slide__text">
 
          <h2 class="slide__text-heading">Project name 4</h2>
 
          <p class="slide__text-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio veniam minus illo debitis nihil animi facere, doloremque voluptate tempore quia. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio veniam minus illo debitis nihil animi facere, doloremque voluptate tempore quia.</p>
 
          <a class="slide__text-link">Project link</a>
 
        </div>
 
      </div>
 
    </div>
 
</div>
 
</div>
 
  
 
</body>
 
</body>

Revision as of 15:22, 15 October 2018

Template loop detected: Template:Grenoble-Alpes

EVENTS



MEET-UPS



IGEM PARISIAN MEET-UP



On July 7th, 2018, a Parisian meet-up was organized by the iGEM Pasteur team. It was a great opportunity to meet for the first time 8 other french iGEM teams. We were able to practice our project presentation for the Jamboree and to get more acquainted with other projects for an eventual future collaboration. In Paris, our team was represented by Thomas (team leader and engineer) and Elise (biologist).



IGEM MEDITERRANNEAN MEET-UP



On August 9th and 10th, our team had the chance to be invited to Marseilles for the Mediterranean meet-up organized by the Aix-Marseilles iGEM team. The team presented its project and poster in front of a jury. Our team was also able to talk with a guest speaker about bioethics. iGEM ambassadors were also present.

A lot of remarks that we got during this meet-up allowed us to progress with our project. To see how this meet-up allowed us to integrate the Human Practices in our project, click here.



IGEM SPANISH MEET-UP



From Saturday 18th to Monday 20th of August, Lucas went to Barcelona for the Spanish meet-up organized by iGEM UPF-CRG-Barcelona. Grenoble-Alpes was the only French team there!

This meet-up allowed us to meet all the Spanish teams except from Valencia (which makes two teams from Barcelona, one from Madrid and one from Navarre). Each team did a Jamboree-like presentation. Feedbacks have been produced on the presentations. Speakers came to talk about the evolution of synthetic biology, ethics and bacterial microfilms.

Thanks to the iGEM Navarra BG team, our project has been featured in Spanish press articles.




LOCAL EVENTS



FORUM BIOTECH



For the 21st edition of the Biotechnology Forum of Auvergne Rhône-Alpes, iGEM Grenoble was invited to present phage therapy and its project to biotechnologies professionals. Romy, a former member of iGEM Grenoble 2017, helped us to organize this event.



UGA C'EST PARTY!



On the 12th and 13th of September, we welcomed new students from Grenoble-Alpes University and Grenoble INP Network. The goal was to make the association and the competition known to encourage vocations for the next years. We also had the opportunity to meet teachers, researchers and volunteers from the university community who were able to help us for the visibility and the construction of our Phagyzer project. 40 people were willing to take part in the competition next year.



UNIVERSITE D'ETE SOLIDAIRE



With iGEM EPFL Swiss team, we attended workshops about ethical reflection on synthetic biology at a summer university (called université d’été solidaire in French) in Grenoble on Thursday, August 23rd. The iGEM EPFL team produced a film in which the day's progress appears.

We met with associations, seeking to make citizens aware of new advances in research and to participate in research budget votes and research legislation. We debated with opponents of synthetic biology and iGEM. To access the debate, here is the page: links to ethics page debate.



PARVIS DES SCIENCES



As part of the Science week, the iGEM team was invited to participate in the Parvis des Sciences organized by CEA Grenoble. During this event, many stands offer activities and presentations related to science. Our team received family and high school classes from the Grenoble region and presented the Phagyzer project on Thursday 11th. An opportunity for us to popularize our project.

The following Saturday (October 13th), the presentation was extended to everybody, people from Grenoble of all ages. We were really surprised by the interest of the young people!




PRESENTATIONS



ENGINEERING SCHOOL



In September 2018 we presented our project and the iGEM competition in the Phelma engineering school. Some iGEM members are students from this school. The goal is to promote the competition and that some students want to be part of the 2019 team! We could answer the questions of many students and take note of their remarks.



MEDICAL FACULTY



In September 2018 we presented our project and iGEM competition to undergraduate students in Biotechnology and Medicine. Some iGEM members are students from this university. It seemed important to present our project to future doctors and to make a discussion on phage therapy. The approach is the same as during the presentation at the engineering school.



MIDI MINATEC (SCIENTIFIC COMMUNITY)



On Friday, October 12th, as part of Science Week, the iGEM team supported a Midi-Minatec (seminar conference) in front of 400 people, CEA researchers and students from the Grenoble region. This is the first time the team could unveil the Phagyzer system to the general public! The 30-minute presentation allowed to present the iGEM competition, the formation of the association iGEM, the preparation of the project and the realization of the Phagyzer system. It aroused the audience curiosity as 15 minutes of questions followed the presentation and many people came to talk with us even later!