Difference between revisions of "Team:Valencia UPV/Human Practices"

(Undo revision 190171 by Carolinarp (talk))
Line 1: Line 1:
 
{{Valencia_UPV/bootstrap.css}}
 
{{Valencia_UPV/bootstrap.css}}
 +
<!--{{Valencia_UPV/bootstrapMin.css}}-->
 
{{Valencia_UPV/custom.css}}
 
{{Valencia_UPV/custom.css}}
 
{{Valencia_UPV/flickity.css}}
 
{{Valencia_UPV/flickity.css}}
Line 18: Line 19:
 
</style>
 
</style>
  
<head>
+
    <head>
  <meta charset="utf-8">
+
        <meta charset="utf-8">
  <title>Stack Multipurpose HTML Template</title>
+
        <title>Stack Multipurpose HTML Template</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Site Description Here">
+
        <meta name="description" content="Site Description Here">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:200,300,400,400i,500,600,700%7CMerriweather:300,300i" rel="stylesheet">
+
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:200,300,400,400i,500,600,700%7CMerriweather:300,300i" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet">
+
        <link href="https://fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet">
  <link href="https://2018.igem.org/Template:Valencia_UPV/fontAwesome?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
+
        <link href="https://2018.igem.org/Template:Valencia_UPV/fontAwesome?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
 
+
</head>
+
  
<body class="" style="background-color:#353535;">
 
  <a class="anchorOffset" id="start"></a>
 
  
  <!--end of row-->
 
</div>
 
<!--end of container-->
 
</nav>
 
</div>
 
<!--end bar-->
 
</div>
 
<div class="main-container">
 
  
  
<!-------------------------------IMAGEN PRINCIPAL------------------------------------------------>
+
       
 +
    </head>
 +
  <body class="" style="background-color:#353535;">
 +
        <a class="anchorOffset" id="start"></a>
  
  
<section style="
+
<!--------- NAVBAR-------------------------------------------------------------------------------------------------------------------------------------------------------------->
; ; background-size: 100%;height: 44.2em;margin-top: 0em;padding-top: 1.1em;" class="height-90 parallax">
+
 
<div class="main-container" style="
+
 
 +
     
 +
 
 +
 
 +
 
 +
<!------------CONTENEDOR PRINCIPAL ---------------------------------------------------------------------------------------------------------------------------------->
 +
 
 +
 
 +
<div class="main-container">
 +
   
 +
            <section style="/* background-color: #353535; *//* background-image: url(&quot;https://previews.123rf.com/images/bogdanhoda/bogdanhoda1504/bogdanhoda150400014/38730978-test-tubes-in-clinic-pharmacy-and-medical-research-laboratory-with-male-scientist-using-pipette.jpg&quot;); *//* background-size: 100%; */height:44.2em;margin-top: 0em;padding-top: 1.1em;" class="height-90 parallax">
 +
              <div class="main-container" style="
 
height: 100%;">
 
height: 100%;">
<center style="
+
              <center style="
 
height: 100%;">
 
height: 100%;">
<div class="col-md-10" style="
+
              <div class="col-md-10" style="
  height: 100%;margin-top: 4em;">
+
height: 100%;margin-top: 4em;">
  <div id="logoPrinteria" class="item" style="
+
<div id="logoPrinteria" class="item" style="
    background-image: url(https://static.igem.org/mediawiki/2018/3/3b/T--Valencia_UPV--laboratorioAdrianUPV2018.jpeg);
+
background-image: url(http://via.placeholder.com/1155x666);
    height: 100%;
+
height: 100%;
    width: 100%;background-attachment: fixed;background-size: cover;">
+
width: 100%;background-attachment: fixed; background-position: center; background-position-y: 100px; background-repeat: no-repeat">
 
      
 
      
 
     <div style="/* position: absolute; *//* top: 81%; *//* padding-left: 31em; */">
 
     <div style="/* position: absolute; *//* top: 81%; *//* padding-left: 31em; */">
      <a class="btn down inner-link active" href="#story" style="font-size: 82%;right: 50%;/* position: fixed; *//* bottom: 7%; */top: 85.2%;z-index: 99;background-color: white;position: absolute;border-radius: 80%;width: 3.8em;height: 3.8em;padding: 0;padding-top: 14px;">
+
<a class="btn down inner-link active" href="#story" style="font-size: 82%;/* position: fixed; *//* bottom: 7%; */top: 541px;z-index: 99;background-color: white;position: relative;border-radius: 80%;width: 3.8em;height: 3.8em;padding: 0;padding-top: 14px;">
        <i class="stack-interface stack-down-open-big"></i>
+
            <i class="stack-interface stack-down-open-big"></i>
      </a>
+
        </a>
    </div>
+
</div>
 
      
 
      
  </div>
+
</div>
 +
</div>
 +
               
 +
              </center>
 +
             
 
</div>
 
</div>
  
</center>
 
  
</div><div class="all-page-modals"></div><div class="all-page-modals"></div>
 
<div class="all-page-modals"></div>
 
</section></div>
 
  
 +
              </section>
 +
          </div>
  
<!----------------------EMPIEZA LA SECCIÓN DE DEBAJO DE LA IMAGEN ----------------------------->
+
<!-- FIN MAIN CONTAINER -->
  
 
+
<a class="anchorOffset" id="story"></a>
<section id="story" class="feature-large anchorOffset" style="padding-top: 6em; padding-bottom: 50px; outline: none;" data-scroll-id="story" tabindex="-1">  
+
<section class="feature-large" style="padding-top: 6em; padding-bottom: 50px; outline: none;" data-scroll-id="story" tabindex="-1">
<div class="container">
+
  <div class="container">
  <div class="row">
+
  <div class="row">
    <div class="col-md-3" style="
+
      <div class="col-md-3" style="
      margin-left: 0em;
+
        margin-left: 0em;
      padding-right: 0px;
+
        padding-right: 0px;
      padding-left: 0.2em;
+
        padding-left: 0.2em;">
      ">
+
        <div class="tabs-container tabs--vertical page-navigator" style="position: -webkit-sticky;position: sticky;padding-bottom: 0px;margin-top: 11.4em;">
     
+
            <h4 style="
      <!------------ÍNDICE LATERAL------------------>
+
              padding-left: 1em;
 
+
              ">Index</h4>
      <div class="tabs-container tabs--vertical page-navigator" style="position: -webkit-sticky;position: sticky;padding-bottom: 0px;margin-top: 11.4em;">
+
            <ul class="lateral">
        <h4 style="
+
              <li class="lateral" style="margin-bottom: 0px;padding-bottom: 1em;padding-top: initial;padding-left: 1em;">
        padding-left: 1em;
+
                  <div class="tab__title" style="
        ">Index</h4>
+
                    line-height: 1.3em;
        <ul class="lateral">
+
                    ">
          <li class="lateral" style="margin-bottom: 0px;padding-bottom: 1em;padding-top: initial;padding-left: 1em;/* color: #353535; */">
+
                    <a href="#Overview" class="lateral inner-link" style="
            <div class="tab__title" style="
+
                        color: #353535;
              line-height: 1.3em;
+
                        opacity: 1;
              /* padding-left: 0.5em; */
+
                        list-style-type: circle;
              ">
+
                        ">Human Practices</a>
              <a class="lateral" style="
+
                  </div>
                /* color: #ffffff; */
+
              </li>
                opacity: 1;
+
              <li class="lateral">
                list-style-type: circle;
+
                  <div class="tab__title" style="
              ">INTRODUCTION</a>
+
                    line-height: 1.3em;
            </div>
+
                    ">
           
+
                    <a href="#BioArt" class="lateral inner-link" style="
          </li>
+
                        color: #353535;
 +
                        opacity: 1;
 +
                        ">Integrated Human</a>
 +
                  </div>
 +
              </li>
 +
              <li class="lateral">
 +
                  <div class="tab__title" style="
 +
                    line-height: 1.3em;
 +
                    ">
 +
                    <a href="#Generations" class="lateral inner-link" style="
 +
                        color: #353535;
 +
                        opacity: 1;
 +
                        ">Social Engagement</a>
 +
                      </div>
 +
                    </li>          
 
           <li class="lateral">
 
           <li class="lateral">
            <div class="tab__title" style="
+
                  <div class="tab__title" style="
              line-height: 1.3em;
+
                    line-height: 1.3em;
              ">
+
                    ">
              <a href="#buho" class="lateral" style="
+
                    <a href="#Generations" class="lateral inner-link" style="
                color: #353535;
+
                        color: #353535;
                opacity: 1;
+
                        opacity: 1;
              ">STRUCTURE</a>
+
                        ">Collaborations</a>
 +
                      </div>
 +
                    </li>
 +
              <li class="lateral">
 +
                  <div class="tab__title" style="
 +
                    line-height: 1.3em;
 +
                    ">
 +
                    <a href="#European" class="lateral inner-link" style="
 +
                        color: #353535;
 +
                        opacity: 1;
 +
                        ">Safety</a>
 +
                  </div>
 +
              </li>
 +
            </ul>
 +
            <ul class="tabs-content">
 +
            </ul>
 +
        </div>
 +
      </div>
 +
      <div class="col-md-9 col9Phone" style="padding-left: 6em;padding-right: 2em;">
 +
        <div>
 +
          <!--BOTONES PARA MOVERSE POR LA PÁGINA -->
 +
            <!--Los enlaces están bien pero los ids a donde apuntan están descuadrados adrede para que al pulsar lleve un poco por encima del contenido -->
 +
            <div id="" data-scroll-id="" tabindex="-1" style="outline: none; margin-top: 1em;" class="row">
 +
              <div class="col-md-3" style="text-align: center;">
 +
                  <a class="inner-link" href="#Human"><img class="fotosAttr" src="FOTO"></a>
 +
                  <h6 style="text-align: center !important;"></h6>
 +
              </div>
 +
              <div class="col-md-3" style="text-align: center;">
 +
                  <a class="inner-link" href="#Integrated"><img class="fotosAttr" src="FOTO"></a>
 +
                  <h6 style="text-align: center !important;"></h6>
 +
              </div>
 +
              <div class="col-md-3" style="text-align: center;">
 +
                  <a class="inner-link" href="#Social"><img class="fotosAttr" src="FOTO"></a>
 +
                  <h6 style="text-align: center !important;"></h6>
 +
              </div>
 +
              <div class="col-md-3" style="text-align: center;">
 +
                  <a class="inner-link" href="#Collaborations"><img class="fotosAttr" src="FOTO"></a>
 +
                  <h6 style="text-align: center !important;"> </h6>
 +
              </div>
 +
              <div class="col-md-3" style="text-align: center;">
 +
                  <a class="inner-link" href="#Safety"><img class="fotosAttr" src="FOTO"></a>
 +
                  <h6 style="text-align: center !important;"> </h6>
 +
              </div>
 +
             
 
             </div>
 
             </div>
 +
            <!--FIN BOTONES PARA MOVERSE POR LA PÁGINA -->
 
              
 
              
          </li>
+
            <!------------------------------------------------------------------------Overview------------------------------------------------------------------->
          <li class="lateral">
+
        </div>
            <div class="tab__title" style="
+
        <!--ENLACE DE DESTINO: overview -->
              line-height: 1.3em;
+
        <a class="anchorOffset" id="Overview"></a>
              ">
+
        <!--FIN ENLACE DE DESTINO -->
              <a class="lateral" style="
+
        <div style="
                color: #353535;
+
            margin-top: 50px;" class="hashlink">
                opacity: 1;
+
            <div class="row">
              ">ENTRY OF CONSUMABLES</a>
+
              <div class="col-md-3">         
            </div>
+
              </div>
 +
              <a class="anchorOffset" id="Human"></a>
 +
              <div class="col-md-9">
 +
                  <h3>Human Practices</h3>
 
              
 
              
          </li>
+
                  <p> Science and technology have always been prompted by a desire of solving social issues. Therefore, science would be nothing if it doesn’t exist a relationship with people. </p>
          <li class="lateral">
+
                  <h4><b><i>How your project affects the world and how the world affects it? </i></b><h4>
            <div class="tab__title" style="
+
                 
              line-height: 1.3em;
+
        </div>
              ">
+
        <!-----------------------------------------------------------------------Integrated-------------------------------------------------------------------------->
              <a class="lateral" style="
+
        <!--ENLACE DE DESTINO: Integrated -->
                color: #353535;
+
        <a class="anchorOffset" id="Integrated"></a>
                opacity: 1;
+
        <!--FIN ENLACE DE DESTINO -->
              ">REACTION ZONE</a>
+
        <div style="
            </div>
+
            margin-top: 50px;">
           
+
            <div class="row">
          </li>
+
              <div class="col-md-3">
          <li class="lateral">
+
              </div>
            <div class="tab__title" style="
+
              <div class="col-md-9">  
              line-height: 1.3em;
+
                  <p> When creating a new scientific device, the existence of political, economic and social frameworks leads into the necessity of an in-depth analysis of how your creation would affects the world and how the world affects it. Thus, we first decided to analyze Printeria main applications among society, which finally were clasificated as:
              ">
+
</p>
              <a class="lateral" style="
+
<p> <ul>
                color: #353535;
+
   <li>
                opacity: 1;
+
    <p><b>Research groups</b>. Printeria automatizes time-consuming protocols, so enhancing the intellectual task and increasing the experiments reproducibility</p>
              ">MEASUREMENT ZONE</a>
+
  </li>
            </div>
+
  <li>
           
+
    <p><b>Education</b>. With a friendly-user software, Printeria is also designed to be an educational tool, as a fully equipped device is introduced inside classrooms without the necessity of high-cost technologies </p>
          </li>
+
  </li>
          <li class="lateral">
+
  <li>
            <div class="tab__title" style="
+
    <p><b>Bio Art</b>. Printeria offers a compact and friendly toolkit to have a complete palette of pigmented bacteria for the bioartist disposal. </p>
              line-height: 1.3em;
+
  </li>
              ">
+
</ul>-
              <a class="lateral" style="
+
                color: #353535;
+
                opacity: 1;
+
              ">DISINFECTION AND STERILITY</a>
+
            </div>
+
           
+
          </li>
+
          </li>
+
          <li class="lateral">
+
            <div class="tab__title" style="
+
              line-height: 1.3em;
+
              ">
+
              <a class="lateral" style="
+
                color: #353535;
+
                opacity: 1;
+
              ">SIMULTANEOUS EXPERIMENTS</a>
+
            </div>
+
           
+
          </li>
+
          </li>
+
          <li class="lateral">
+
            <div class="tab__title" style="
+
              line-height: 1.3em;
+
              ">
+
              <a class="lateral" style="
+
                color: #353535;
+
                opacity: 1;
+
              ">RESULTS</a>
+
            </div>
+
           
+
          </li>
+
        </ul><ul class="tabs-content"></ul>
+
       
+
       
+
      </div>
+
    </div>
+
 
+
 
+
<!--------------------------------------------TEXTO------------------------------------------------>
+
 
+
 
+
    <div class="col-md-9" style="
+
      /* margin-left: 0px; */
+
      padding-left: 6em;
+
      padding-right: 2em;
+
      ">
+
      <div>
+
        <h3>HARDWARE</h3>
+
        <h4>INTRODUCTION</h4>
+
 
+
        <p>To address the lack of accessibility to synthetic biology due to the high costs and the level of knowledge required among others, our team has designed Printeria, a fully-equipped bioengineering device capable of automating the process of printing genetic circuits in bacteria.
+
        </p>
+
 
+
        <p> To ensure a functional, economical and easy-to-use design, collaboration between the hardware and the wet lab teams has been necessary throughout the development process. After several drafts we have achieved a unique design that can be easily transported and replicated at a cost not exceeding xxx € (xxx $). [and whose cost does not exceed xxx €]</p>
+
 
+
        <p> Printeria is divided into three main parts dependent on each other:</p>
+
 
+
        <div>
+
        <ul>
+
          <li>
+
            <p> <u>Entry of consumables</u>: components that allow the entry of consumables into the reaction zone.</p>
+
          </li>
+
          <li>
+
            <p> <u>Reaction zone</u>: space where the process of printing genetic circuits in bacteria occurs thanks to digital microfluidic technology.</p>
+
          </li>
+
          <li>
+
            <p> <u>Measurement zone</u>: the bacteria are kept in conditions that allow for growth and expression while OD and fluorescence measurements are taken.</p>
+
          </li>
+
        </ul>
+
      </div>
+
<div>
+
<table class="border--round table--alternate-row tableHec" style="width:100%;">
+
          <thead><tr>
+
            <th class="thHec">Part</th>
+
            <th class="thHec">Quantity</th>
+
            <th class="thHec">Cost per unit</th>
+
            <th class="thHec">Cost</th>
+
          </tr>
+
        </thead><tbody><tr>
+
        <td class="tdHec">Structure</td>
+
        <td class="tdHec">----</td>
+
        <td class="tdHec">----</td>
+
        <td class="tdHec">----</td>
+
      </tr>
+
      <tr>
+
        <td class="tdHec">Entry system</td>
+
        <td class="tdHec">----</td>
+
        <td class="tdHec">----</td>
+
        <td class="tdHec">----</td>
+
      </tr>
+
      <tr>
+
        <td class="tdHec">Reaction zone</td>
+
        <td class="tdHec">----</td>
+
        <td class="tdHec">----</td>
+
        <td class="tdHec">----</td>
+
      </tr>
+
      <tr>
+
        <td class="tdHec">Measurement zone</td>
+
        <td class="tdHec">----</td>
+
        <td class="tdHec">----</td>
+
        <td class="tdHec">----</td>
+
      </tr>
+
      <tr>
+
        <td class="tdHec" style="opacity: 0; border:none !important;"></td>
+
        <td class="tdHec" style="opacity: 0; border:none !important;"></td>
+
        <td class="tdHec" style="background-color: #909090; color: #fff">TOTAL</td>
+
        <td class="tdHec">----</td>
+
      </tr>
+
    </tbody></table>
+
   </div>
+
        <h5>STRUCTURE</h5>
+
        <h5>Frame</h5>
+
        <!--<h5 style="
+
        color: #353535;
+
        font-size: 16px;
+
        font-weight: 750;
+
        ">Lorem ipsum</h5>-->
+
        <!--<h6 style="
+
        color: #797979;
+
        ">Lorem ipsum</h6>-->
+
        <div>
+
            <p>First of all, it is necessary to design a structure that confines all the elements necessary for the operation of the device inside it and also allows the creation of a sterile atmosphere to carry out the biological reactions.</p>
+
  
            <p> In order to facilitate its transport, aluminum has been chosen for the frame, which in addition to its low weight, has other great qualities such as great resistance to corrosion and low cost.</p>
+
</p>
 +
<p>During the design phase our product, we had many questions about how to fulfill the different <b>stakeholders demands </b>. In order to get first-hand answers, our human practices team conducted several interviews with each target group, so we could realize which where the real user necessities in relation to topics such as software functionalities, external design, DNA parts toolkit and biosafety measurements. In these interviews, we talked with the Spanish microbiologist PhD. Francis Mojica, and with bioartists such as <a href="http://mariapenilcobo.com/bioart">María Peñil</a>. We also received feedback from an open-talk with high schools last year students.  Moreover, microfluidic system experimental design was thoughtfully implemented with the advice of electronic engineering professionals from the microfluidic market niche.
 +
You can see our complete Integrated Human page by <a href="">clicking here</a>
 +
</p>
 +
     
 +
         
 +
        </div>
 +
        <!--ENLACE DE DESTINO: Social-->
 +
        <a class="anchorOffset" id="Social"></a>
 +
        <!--FIN ENLACE DE DESTINO -->
 +
        <div style="
 +
            margin-top: 50px;">
 +
            <div class="row">
 +
              <div class="col-md-9">
 +
                  <h4>Is our work responsible and good enough for the world?
  
            <p> It has been used 15x15x1mm square tube profiles joined by plastic corner connectors obtaining as a result a 415x360x280mm chassis. Thanks to the generated blueprints we have been able to contact a company specializing in cutting and handling aluminum that has provided us with all the parts as we required. As it was not possible for us to find plastic connectors that fit our needs, we have decided to design these parts ourselves and then print them on a 3D printer. </p>
+
</h4>
 +
             
 +
                  <p>Printeria was born with the aim of knocking down the barriers that prevent people from coming into Synthetic Biology. However, these barriers are not only related with the high-cost technology, but also with the society lack of awareness.  
 +
The lay-public do not usually know what SynBio and, when having heard about it, several misconceptions are commonly extended.  
  
            <div>
+
</p>
              <div class="row" style="
+
                  <p> Thus, we realized it was necessary to promote a critical thinking atmosphere before integrating Printeria. In this context, one of our main concerns was to introduce an artistic approach to become SynBio a closer and familiar concept. This included a Bio Art workshop and a collaboration with the famous valencian artist José María Yturralde. Moreover, several talks were given to different target groups to divulgate SynBio and so <b>fight against misinformation</b>. See the full activities carried out in our a <a href=https://2018.igem.org/Team:Valencia_UPV/Public_Engagement ">Education and Public Engagement page</a>.
                margin: 0;
+
                ">
+
                <div class="col-md-6" style="
+
                  padding: 0;
+
                  padding-right: 0.3em;
+
                  ">
+
                  <img src="https://via.placeholder.com/800x400">
+
                </div>
+
                <div class="col-md-6" style="
+
                  padding: 0;
+
                  padding-left: 0.3em;
+
                  ">
+
                  <img src="https://via.placeholder.com/800x400">
+
                </div>
+
                <div style="
+
                  width: 100%;
+
                  padding-left: 19em;
+
                  padding-right: 1em;
+
                  "><h6>Aluminum frame</h6>
+
                </div>
+
              </div>
+
 
             </div>
 
             </div>
        </div>
+
        </div>
 +
        <!--------------------------------------------------------------------Collab------------------------------------------------------------------>
 +
        <!--ENLACE DE DESTINO: ERN-->
 +
        <a class="anchorOffset" id="Collaborations"></a>
 +
        <!--FIN ENLACE DE DESTINO -->
 +
        <div style="
 +
            margin-top: 50px;">
 +
            <div class="row">
 +
              <div class="col-md-9">
 +
             
 +
                  <h4>Collaborations </h4>
 +
  <p>Synthetic biology builds are the result of collaborations across many fields, including institutional, industrial, scientific, and technical developments (1). In the same way, sharing and collaborating are some of the core values of the iGEM community.
 +
We were delighted to part of this collaborative approach, so you can all read the collaborations we carried out with other iGEM teams by going to our Collaborations page.
 +
                  </p>
 +
        </div>
  
            <h5>Methacrylate</h5>
+
<!--------------------------------------------------------------------Safety----------------------------------------->
  
            <div>
+
  <!--ENLACE DE DESTINO: HARVARD -->
              <p> To complete the structure, it is necessary to create walls that are attached to this frame and contribute to its stability. We have opted for the use of methacrylate due to its attractive appearance, durability and scratch resistance. </p>
+
        <a class="anchorOffset" id="Safety"></a>
 
+
        <!--FIN ENLACE DE DESTINO -->
              <p> As well as the aluminum profiles, the blueprints created were used for ordering the custom-made parts to a company.</p>
+
        <div style="
 
+
            margin-top: 50px;">
              <div style="
+
             <div class="row">
              padding-bottom: 1em;
+
              <div class="col-md-9">         
              text-align: right;
+
              ">
+
              <img src="https://via.placeholder.com/800x400" alt="" style="
+
              margin-top: 2.8em;
+
              margin-bottom: 0.8em;
+
              border-radius: 0.3em;
+
              ">
+
              <div style="
+
                width: 100%;
+
                padding-left: 19em;
+
                padding-right: 1em;
+
                "><h6>Methacrylate cladding</h6>
+
              </div>
+
              </div>
+
 
+
              <p> Finally, 4mm diameter countersunk head screws DIN 7991 (M4 L25) and nuts DIN 934 (M4), both made of galvanized steel, were used for joining the methacrylate plates to the frame. </p>
+
 
+
             </div>
+
 
+
            <h5>Leveling system</h5>
+
 
+
            <div>
+
              <p> Given the great importance of keeping the reaction zone perfectly horizontal, it is necessary to use levelling feet. In addition, for checking the horizontal position, a bull’s eye level has been installed next to the reaction zone. </p>
+
 
+
                <div style="
+
                  padding-bottom: 0.8em;
+
                  text-align: right;
+
 
                    
 
                    
                  ">
+
<h4> Biosafety </h4>
                  <div class="row" style="margin: 0;">
+
<p>Biosafety measurements are completely necessary during any lab research, like the one carried out by our team. Moreover, safety considerations in relation to Printeria sterilization and biocontention measurements is essential if we want to introduce a bio-engineering device as Printeria is in non-scientific places.  
                      <div class="col-md-6" style="
+
You can read our safety practices and the safety considerations we have established in regard to our device by going to the <a href="https://2018.igem.org/Team:Valencia_UPV/Safety">Safety page</a>.
                        padding: 0;
+
                        padding-right: 0.3em;
+
                        ">
+
                        <img src="https://via.placeholder.com/800x400" alt="" style="
+
                        margin-top: 1.8em;
+
                        margin-bottom: 0.8em;
+
                        border-radius: 0.3em;
+
                        ">
+
                      </div>
+
                      <div class="col-md-6" style="
+
                        padding: 0;
+
                        padding-left: 0.3em;
+
                        ">
+
                        <img src="https://via.placeholder.com/800x400" alt="" style="
+
                        margin-top: 1.8em;
+
                        margin-bottom: 0.8em;
+
                        border-radius: 0.3em;
+
                        ">
+
                      </div>
+
                      <div style="
+
                        width: 100%;
+
                        padding-left: 19em;
+
                        padding-right: 1em;
+
                        "><h6>Levelling system</h6>
+
                      </div>
+
                  </div>
+
                </div>
+
            </div>
+
       
+
        <div>
+
        <table class="border--round table--alternate-row tableHec" style="width:100%;">
+
                  <thead><tr>
+
                    <th class="thHec">Part</th>
+
                    <th class="thHec">Quantity</th>
+
                    <th class="thHec">Cost per unit</th>
+
                    <th class="thHec">Cost</th>
+
                  </tr>
+
                </thead><tbody><tr>
+
                <td class="tdHec">Aluminum profiles</td>
+
                <td class="tdHec">----</td>
+
                <td class="tdHec">----</td>
+
                <td class="tdHec">----</td>
+
              </tr>
+
              <tr>
+
                <td class="tdHec">Profiles' cutting and drilling</td>
+
                <td class="tdHec">----</td>
+
                <td class="tdHec">----</td>
+
                <td class="tdHec">----</td>
+
              </tr>
+
              <tr>
+
                <td class="tdHec">Custom-made methacrylate</td>
+
                <td class="tdHec">----</td>
+
                <td class="tdHec">----</td>
+
                <td class="tdHec">----</td>
+
              </tr>
+
              <tr>
+
                <td class="tdHec">Screws DIN 7991</td>
+
                <td class="tdHec">----</td>
+
                <td class="tdHec">----</td>
+
                <td class="tdHec">----</td>
+
              </tr>
+
              <tr>
+
                <td class="tdHec">Nuts DIN 934</td>
+
                <td class="tdHec">----</td>
+
                <td class="tdHec">----</td>
+
                <td class="tdHec">----</td>
+
              </tr>
+
              <tr>
+
                <td class="tdHec">Kg of PLA for the connectors</td>
+
                <td class="tdHec">----</td>
+
                <td class="tdHec">----</td>
+
                <td class="tdHec">----</td>
+
              </tr>
+
              <tr>
+
                <td class="tdHec">Leeveling feet</td>
+
                <td class="tdHec">----</td>
+
                <td class="tdHec">----</td>
+
                <td class="tdHec">----</td>
+
              </tr>
+
              <tr>
+
                <td class="tdHec">Bull's eye level</td>
+
                <td class="tdHec">----</td>
+
                <td class="tdHec">----</td>
+
                <td class="tdHec">----</td>
+
              </tr>
+
              <tr>
+
                <td class="tdHec" style="opacity: 0; border:none !important;"></td>
+
                <td class="tdHec" style="opacity: 0; border:none !important;"></td>
+
                <td class="tdHec" style="background-color: #909090; color: #fff">TOTAL</td>
+
                <td class="tdHec">----</td>
+
              </tr>
+
            </tbody></table> 
+
  
        </div>
+
</p>
  
        <h5>ENTRY OF CONSUMABLES</h5>
+
                   
 +
      </div>
 +
  </div>
  
        </div>
 
        <h5>REACTION ZONE</h5>
 
  
        <h5>MEASUREMENT ZONE</h5>
+
</section>
  
        <h5>DISINFECTION AND STERILITY</h5>
 
  
        <h5>SIMULTANEOUS EXPERIMENTS</h5>
 
  
        <h5>RESULTS</h5>
 
  
  
  
  </div>
 
</div>
 
  
 +
        <!--<div class="loader"></div>-->
 +
        <a class="back-to-top inner-link" href="#start" data-scroll-class="100vh:active" style="font-size: 82%;">
 +
            <i class="stack-interface stack-up-open-big"></i>
 +
        </a>
  
</section>
+
    </body>
  
 
<!--------------------FIN TEXTO------------------------------>
 
 
 
</div>
 
<!--end of row-->
 
</div>
 
<!--end of container-->
 
</section>
 
 
</div>
 
<!--<div class="loader"></div>-->
 
<a class="back-to-top inner-link" href="#start" data-scroll-class="100vh:active" style="font-size: 82%;">
 
<i class="stack-interface stack-up-open-big"></i>
 
</a>
 
</body>
 
  
 
         <script type="text/javascript"  src="https://2018.igem.org/Template:Valencia_UPV/scriptsJS?action=raw&ctype=text/javascript"></script>
 
         <script type="text/javascript"  src="https://2018.igem.org/Template:Valencia_UPV/scriptsJS?action=raw&ctype=text/javascript"></script>
 
         <script type="text/javascript"  src="https://2018.igem.org/Template:Valencia_UPV/jquery311minJS?action=raw&ctype=text/javascript"></script>
 
         <script type="text/javascript"  src="https://2018.igem.org/Template:Valencia_UPV/jquery311minJS?action=raw&ctype=text/javascript"></script>
 +
        <script type="text/javascript"  src="https://2018.igem.org/Template:Valencia_UPV/bootstrapMinJS?action=raw&ctype=text/javascript"></script>
 
         <script type="text/javascript"  src="https://2018.igem.org/Template:Valencia_UPV/parallaxJS?action=raw&ctype=text/javascript"></script>
 
         <script type="text/javascript"  src="https://2018.igem.org/Template:Valencia_UPV/parallaxJS?action=raw&ctype=text/javascript"></script>
        <script type="text/javascript"  src="https://2018.igem.org/Template:Valencia_UPV/smoothscrollminJS?action=raw&ctype=text/javascript"></script>
+
      <script type="text/javascript"  src="https://2018.igem.org/Template:Valencia_UPV/smoothscrollminJS?action=raw&ctype=text/javascript"></script>
 
       <script type="text/javascript"  src="https://2018.igem.org/Template:Valencia_UPV/jquerystepsminJS?action=raw&ctype=text/javascript"></script>
 
       <script type="text/javascript"  src="https://2018.igem.org/Template:Valencia_UPV/jquerystepsminJS?action=raw&ctype=text/javascript"></script>
 +
       
  
  
  
 
</html>
 
</html>
 +
 
{{Valencia_UPV/footer}}
 
{{Valencia_UPV/footer}}

Revision as of 15:16, 2 October 2018

Stack Multipurpose HTML Template

CONTACT US igem.upv.2018@gmail.com