Difference between revisions of "Team:INSA-UPS France/test/description"

Line 1: Line 1:
 +
 +
{{INSA-UPS_France/Links_new}}
 +
{{INSA-UPS_France/Style_new}}
 +
{{INSA-UPS_France/Header_new}}
 
<html>
 
<html>
<head>
 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
  <link href="https://fonts.googleapis.com/css?family=Merriweather:300,400,700|Quicksand:300,400,500,700" rel="stylesheet">
 
  <script type="text/javascript" src="jquery.js"></script>
 
</head>
 
<body>
 
 
<style>
 
<style>
*{
 
  margin:0;
 
  padding:0;
 
}
 
html, body, .site{
 
height:100%;
 
position:relative;
 
overflow: hidden;
 
}
 
  body {
 
  margin: 0;
 
  font: 400 16px/1.5 'Open Sans', Roboto, Arial, sans-serif;
 
}
 
a {
 
  -webkit-transition: 0.2s ease-in-out;
 
  transition: 0.2s ease-in-out;
 
}
 
  
.site-header {
 
  background: #323537;
 
  padding: 1.25em 0;
 
  z-index:100;
 
}
 
.site-header > .container {
 
  height:50px;
 
  display: -webkit-box;
 
  display: -ms-flexbox;
 
  display: flex;
 
  -webkit-box-pack: justify;
 
      -ms-flex-pack: justify;
 
          justify-content: space-between;
 
  -webkit-box-align: center;
 
      -ms-flex-align: center;
 
          align-items: center;
 
}
 
.site-header > nav{
 
}
 
.site-header__title {
 
  vertical-align: middle;
 
  margin: 0;
 
  color: #eee;
 
  text-decoration: none;
 
  font: 700 1.5em/1.25 "Quicksand", sans-serif;
 
  text-align: center;
 
}
 
 
.site-header__title:hover,
 
.site-header__title:focus {
 
  color: #99c18e;
 
}
 
.site-menu__item {
 
  color: #eee;
 
  text-decoration: none;
 
  font: 300 1.25em/1.25 "Quicksand", sans-serif;
 
  display:inline-block;
 
}
 
.cat_name{
 
  text-transform: uppercase;
 
  cursor: pointer;
 
}
 
.site-menu__item:hover,
 
.site-menu__item:focus {
 
  color: #99c18e;
 
}
 
.site-menu__item + .site-menu__item {
 
  /*margin-left: 3em;*/
 
}
 
.site-menu__item{
 
  display:none;
 
}
 
 
.site-menu__item#scroll_down{
 
  display:inline-block;
 
  text-align: center;
 
}
 
.js-sticky.is-sticky .site-menu__item{
 
  display:inline-block;
 
}
 
.js-sticky.is-sticky .site-menu__item#scroll_down{
 
  display:none;
 
}
 
 
.js-sticky.is-sticky nav.site-menu{
 
  height:100%;
 
  width:60%;
 
}
 
 
div.site-menu__item{
 
  position:relative;
 
  width:17%;
 
}
 
div.cat_name{
 
  line-height: 50px;
 
  height:50px;
 
}
 
div.site-menu__item.no-subnav{
 
  width:auto;
 
}
 
 
ul.subnav{
 
  position:absolute;
 
  top:70px;
 
  right:0px;
 
  background:#323537;
 
  width:100%;
 
  max-height:0;
 
  overflow: hidden;
 
  transition: max-height 400ms ease;
 
  z-index:300;
 
}
 
ul.subnav li{
 
  list-style-type: none;
 
  padding:10px;
 
}
 
.site-menu__item a, .site-menu__item a:visited, .site-menu__item a:active{
 
  text-decoration: none;
 
  color:white;
 
}
 
.site-menu__item a:hover{
 
  color: #99c18e;
 
}
 
 
main{
 
main{
 
   position:relative;
 
   position:relative;
Line 133: Line 11:
 
   height:100%;
 
   height:100%;
 
}
 
}
/*
 
footer{
 
  background: #323537;
 
  width:100%;
 
  height:200px;
 
 
 
}*/
 
  
 
.main_content{
 
.main_content{
Line 182: Line 53:
  
 
<!-- C O N T E N T -->
 
<!-- C O N T E N T -->
 
+
<div class="site">
+
  <header class="site-header js-sticky is-sticky">
+
 
+
    <div class="container" style="position:relative; ">
+
    <a href="#" class="site-header__title">
+
      <img src="logo.png" alt="" style="width:70px;">
+
    </a>
+
    <div class="site-header__title">
+
    Croc'n Cholera <br/>
+
    <span style="font-size:12pt;">iGEM UPS-INSA Toulouse 2017</span>
+
    </div>
+
 
+
    <nav class="site-menu" style="text-align: center;">
+
     
+
      <div class="site-menu__item no-subnav">
+
        <a href="index3.html"><i class="fa fa-home"></i></a>
+
      </div>
+
      <div class="site-menu__item">
+
        <div class="cat_name">Team <i class="fa fa-caret-down"></i></div>
+
        <ul class="subnav">
+
          <li><a href="members.html">Members</a></li>
+
          <li><a href="supports.html">Supports</a></li>
+
          <li><a href="attributions.html">Attributions</a></li>
+
          <li><a href="funfacts.html">Fun facts</a></li>
+
          <li><a href="collaborations.html">Collaborations</a></li>
+
        </ul>
+
      </div>
+
      <div class="site-menu__item">
+
        <div class="cat_name">Project <i class="fa fa-caret-down"></i></div>
+
        <ul class="subnav">
+
          <li><a href="description.html">Description</a></li>
+
          <li><a href="design.html">Design</a></li>
+
          <li><a href="results.html">Results</a></li>
+
          <li><a href="parts.html">Parts</a></li>
+
          <li><a href="entrepreneurship.html">Entrepreneurship</a></li>
+
        </ul>
+
      </div>
+
      <div class="site-menu__item">
+
        <div class="cat_name">Model <i class="fa fa-caret-down"></i></div>
+
        <ul class="subnav">
+
          <li><a href="modeloverview.html">Overview</a></li>
+
          <li><a href="sbgnrepresentation.html">SBGN Representation</a></li>
+
          <li><a href="odesystem.html">ODE System</a></li>
+
          <li><a href="modelresults.html">Results</a></li>
+
        </ul>
+
      </div>
+
      <div class="site-menu__item">
+
        <div class="cat_name">Notebook <i class="fa fa-caret-down"></i></div>
+
        <ul class="subnav">
+
          <li><a href="labbook.html">Lab Book</a></li>
+
          <li><a href="experiments.html">Experiments</a></li>
+
          <li><a href="safety.html">Safety</a></li>
+
        </ul>
+
      </div>
+
      <div class="site-menu__item">
+
        <div class="cat_name">Outreach <i class="fa fa-caret-down"></i></div>
+
        <ul class="subnav">
+
          <li><a href="hpoverview.html">Overview</a></li>
+
          <li><a href="publicengagement.html">Public Engagements</a></li>
+
          <li><a href="hpsilver.html">Silver</a></li>
+
          <li><a href="ihp">Integrated Human Practices</a></li>
+
          <li><a href="press.html">Press</a></li>
+
        </ul>
+
      </div>
+
      <div class="site-menu__item no-subnav">
+
        <a href="achievements.html"><i class="fa fa-trophy"></i></a>
+
      </div>
+
 
+
      </nav>
+
    </div>
+
  </header>
+
 
+
 
    
 
    
 
   <style>
 
   <style>
Line 365: Line 164:
 
       }
 
       }
 
       .pe_img img{
 
       .pe_img img{
         width:50px;
+
         width:100px;
         height:50px;
+
         height:100px;
 
       }
 
       }
 
     </style>
 
     </style>
Line 553: Line 352:
 
   </div>
 
   </div>
 
   </main>
 
   </main>
 
<!--
 
  -->
 
 
</div>
 
 
 
  
 
<!-- C O N T E N T -->
 
<!-- C O N T E N T -->
 +
</html>
  
 
+
{{INSA-UPS_France/General_script}}
<script type="text/javascript">
+
{{INSA-UPS_France/Header_script}}
 
+
    // NAV BAR SUBNAV CLICK
+
 
+
  $(document).on("click",".cat_name", function(){
+
    if($(this).parent().children('.subnav').css("max-height")=="0px"){
+
      $('.subnav').css("max-height","0px");
+
      $(this).parent().children('.subnav').css("max-height","1000px");
+
    }
+
    else{
+
      $(this).parent().children('.subnav').css("max-height","0px");
+
    }  
+
  });
+
</script>
+
 
+
<script type="text/javascript">
+
  var contentSections = $('.article_offset'),
+
  navigationItems = $('.left_container .aside-nav__item:after');
+
 
+
  updateNavigation();
+
  $('.main_content').on('scroll', function(){
+
    updateNavigation();
+
    });
+
 
+
 
+
  function updateNavigation() {
+
    contentSections.each(function(){
+
      $this = $(this);
+
 
+
      var activeSection = $('.left_container a[href="#'+$this.attr('id')+'"]').data('number') - 1;
+
      /*if ( ( $this.offset().top - $(window).height()/2 < $(window).scrollTop() ) && ( $this.offset().top + $this.height() - $(window).height()/2 > $(window).scrollTop() ) ) {
+
        navigationItems.eq(activeSection).addClass('is-selected');
+
      }else {
+
        navigationItems.eq(activeSection).removeClass('is-selected');
+
      }*/
+
    });
+
  }
+
 
+
  function smoothScroll(target) {
+
        $('body,html').animate(
+
          {'scrollTop':target.offset().top},
+
          600
+
        );
+
  }
+
</script>
+
 
+
</body>
+
</html>
+

Revision as of 20:55, 6 October 2017

Human Practices

Human Practices Logbook

We did a Human Practices logbook and built an ethical matrix in order to think about ethics inside the globality of our projet, for every aspect of it.

Public Engagement & Education

Intervene in primary schools

Create of a card game about microbiology

Participate in the European Researcher's Nigh

Leading a conference about the future of synthetic biology

Inspire high schoolers to pursue a scientific career

Show fun experiments to children

Exhibitions on campus for future iGEMers

Communicate to local and national press

We wanted to show that it is possible to talk about biology, science in general and ethics with people from all ages and with different knowledge. We articulated our outreach strategy around three actions: discover, practice and discuss, to empower citizens or future citizens about their capability of thinking and acting on science. These three milestones are essential for us to give people a better understanding of the current challenges of science in the society.

Microbioworld

While doing several interventions in schools is in our opinion clearly a nice way for pupils to ‘learn by doing’, we thought is was also a good idea to bring scientific knowledge outside of the classroom. That’s why we came up with the idea of creating a strategy card game about biology. With this game, we are hoping to draw attention to the hidden world of microorganisms and make it visible elsewhere than on the bench of a scientist or inside a biology student’s notebook.

Integrated Human Practices

We expand our Silver Human Practices activity and went further in the exploitation of our ethical matrix by including it in the life cycle of our device.