Difference between revisions of "Team:Valencia UPV/roger"

 
(One intermediate revision by one other user not shown)
Line 7: Line 7:
 
{{Valencia_UPV/stackinterface.css}}
 
{{Valencia_UPV/stackinterface.css}}
 
{{Valencia_UPV/theme.css}}
 
{{Valencia_UPV/theme.css}}
 +
{{Valencia_UPV/navBar}}
  
 
<html>
 
<html>
Line 17: Line 18:
 
</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 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 id="start"></a>
+
      <div class="nav-container" style="margin-bottom: 1.85714286em;">
+
            <div class="bar bar--sm visible-xs">
+
                <div class="container">
+
                    <div class="row">
+
                        <div class="col-3 col-md-2">
+
                            <a href="index.html">
+
                                <img class="logo logo-dark" alt="logo" src="https://static.igem.org/mediawiki/2018/d/d6/T--Valencia_UPV--textoPrinteria.png">
+
                            </a>
+
                        </div>
+
                        <div class="col-9 col-md-10 text-right">
+
                            <a href="#" class="hamburger-toggle" data-toggle-class="#menu1;hidden-xs">
+
                                <i class="icon icon--sm stack-interface stack-menu"></i>
+
                            </a>
+
                        </div>
+
                    </div>
+
                    <!--end of row-->
+
                </div>
+
                <!--end of container-->
+
            </div>
+
            <!--end bar-->
+
<div class="col-md-12" style="
+
padding: 0px;
+
    margin: 0 auto;">
+
<nav id="menu1" class="bar bar--sm bar-1 hidden-xs bg--light" style="
+
height: 120px; padding: 0px; background-color: rgb(53, 53, 53); margin: 0px auto; text-align: center;">
+
                <div class="container" style="
+
height: 100%;
+
padding-top: 10px;
+
;lute;">
+
                    <div class="row" style="
+
height: 100%; padding-top: 1.85em;">
+
                        <div class="col-lg-3 col-md-3 hidden-xs" style="
+
height: 100%;
+
position: absolute;padding-left: 0px;display: flex;">
+
                            <img class="" src="https://static.igem.org/mediawiki/2018/8/8a/T--Valencia_UPV--pruebaPrinteriaWhiteUPV2018.png" style="
+
height: 64px; width: 224px; margin-top: 0; !important ">
+
                            <!--end module-->
+
                        </div>
+
                        <div class="col-lg-12 col-md-12 text-right text-left-xs text-left-sm">
+
                            <div class="bar__module" style="
+
padding-top: 10px; float: right;">
+
                          <ul class="menu-horizontal text-right">
+
                                    <li class="dropdown dropdown--hover">
+
                                        <span class="dropdown__trigger navLinks">Team</span>
+
  
  
 
+
<section style="
 
+
                                        <div class="dropdown__container" style="left: -541.625px;">
+
                              <div class="container">
+
                            <div class="row">
+
                          <div class="col-md-3 col-lg-2 dropdown__content" style="cursor: pointer; background-color: rgb(53, 53, 53); padding: 0px; left: 541.625px;">
+
                        <ul class="menu-vertical" style="
+
color: white;
+
font-size: 16px;;
+
padding-bottom: 10px;;
+
padding-top: 10px;;
+
list-style-type: none;">
+
                        <li>
+
                        Team
+
                        </li>
+
<li>Attributions</li>
+
<li>Collaborations</li>
+
                        </ul>
+
                          </div>
+
                          </div>
+
                        </div>
+
                        </div>
+
 
+
 
+
 
+
 
+
                                    </li>
+
                                    <li class="dropdown dropdown--hover">
+
                                        <span class="dropdown__trigger navLinks">Project</span>
+
 
+
 
+
 
+
                                       
+
                                        <div class="dropdown__container" style="left: -622.21875px;">
+
                              <div class="container">
+
                            <div class="row">
+
                          <div class="col-md-3 col-lg-2 dropdown__content" style="cursor: pointer; background-color: rgb(53, 53, 53); padding: 0px; left: 622.21875px;">
+
                        <ul class="menu-vertical" style="
+
color: white;
+
font-size: 16px;;
+
padding-bottom: 10px;;
+
padding-top: 10px;;
+
list-style-type: none;">
+
                        <li>
+
  Description
+
</li>
+
<li>
+
  Design
+
</li>
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
<li>Applied Design</li>
+
<li>Safety</li>
+
 
+
                        </ul>
+
                          </div>
+
                          </div>
+
                        </div>
+
                        </div><!--end dropdown container-->
+
                                    </li><li class="dropdown dropdown--hover">
+
                                        <span class="dropdown__trigger navLinks">Wet Lab</span>
+
 
+
 
+
 
+
                                       
+
                                        <div class="dropdown__container" style="left: -721.703125px;">
+
                              <div class="container">
+
                            <div class="row">
+
                          <div class="col-md-3 col-lg-2 dropdown__content" style="cursor: pointer; background-color: rgb(53, 53, 53); padding: 0px; left: 721.703125px;">
+
                        <ul class="menu-vertical" style="
+
color: white;
+
font-size: 16px;;
+
padding-bottom: 10px;;
+
padding-top: 10px;;
+
list-style-type: none;">
+
                       
+
 
+
<li>
+
  Experiments
+
</li>
+
<li>
+
  Notebook
+
</li>
+
<li>
+
  Interlab
+
</li>
+
<li>
+
  Results
+
</li>
+
<li>
+
  Demonstrate
+
</li>
+
<li>
+
  Improve
+
</li>
+
<li>
+
  Measurement
+
</li>
+
<li>
+
  Protocols
+
</li>
+
 
+
 
+
 
+
 
+
 
+
                        </ul>
+
                          </div>
+
                          </div>
+
                        </div>
+
                        </div><!--end dropdown container-->
+
                                    </li>
+
                                   
+
 
+
<li class="dropdown dropdown--hover">
+
                                        <span class="dropdown__trigger navLinks">Drylab</span>
+
<div class="dropdown__container" style="left: -826.078125px;">
+
                              <div class="container">
+
                            <div class="row">
+
                          <div class="col-md-3 col-lg-2 dropdown__content" style="cursor: pointer; background-color: rgb(53, 53, 53); padding: 0px; left: 826.078125px;">
+
                        <ul class="menu-vertical" style="
+
color: white;
+
font-size: 16px;;
+
padding-bottom: 10px;;
+
padding-top: 10px;;
+
list-style-type: none;">
+
                        <li>Hardware</li>
+
<li>Software</li><li>Graphic Design</li>
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
                        </ul>
+
                          </div>
+
                          </div>
+
                        </div>
+
                        </div>
+
 
+
                                       
+
                                        <!--end dropdown container-->
+
                                    </li><li class="dropdown dropdown--hover">
+
                                        <span class="dropdown__trigger navLinks">Modelling</span>
+
<div class="dropdown__container" style="left: -921px;">
+
                              <div class="container">
+
                            <div class="row">
+
                          <div class="col-md-2 col-lg-2 dropdown__content" style="cursor: pointer; background-color: rgb(53, 53, 53); padding: 0px; left: 921px;">
+
                        <ul class="menu-vertical" style="
+
color: white;
+
font-size: 16px;;
+
padding-bottom: 10px;;
+
padding-top: 10px;;
+
list-style-type: none;">
+
                        <li>Modelling</li>
+
<li>Model A</li>
+
<li>Model B</li>
+
 
+
<li>Lo que creas necesario &lt;3</li>
+
 
+
 
+
 
+
 
+
 
+
                        </ul>
+
                          </div>
+
                          </div>
+
                        </div>
+
                        </div>
+
 
+
                                       
+
                                        <!--end dropdown container-->
+
                                    </li>
+
 
+
                                    <li class="dropdown dropdown--hover">
+
                                        <span class="dropdown__trigger navLinks">Human</span>
+
<div class="dropdown__container" style="left: -1052px;">
+
                              <div class="container">
+
                            <div class="row">
+
                          <div class="col-md-3 col-lg-3 dropdown__content" style="cursor: pointer; background-color: rgb(53, 53, 53); padding: 0px; left: 855px;">
+
                        <ul class="menu-vertical" style="
+
color: white;
+
font-size: 16px;;
+
padding-bottom: 10px;;
+
padding-top: 10px;;
+
list-style-type: none;">
+
                        <li>Human Practices</li>
+
<li>Education</li>
+
<li>Entrepreneurship</li><li>Public Engagement</li>
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
                        </ul>
+
                          </div>
+
                          </div>
+
                        </div>
+
                        </div>
+
 
+
                                       
+
                                        <!--end dropdown container-->
+
                                    </li>
+
                                   
+
                                </ul>
+
                            </div>
+
                            <!--end module-->
+
                        </div>
+
                    </div>
+
                    <!--end of row-->
+
                </div>
+
                <!--end of container-->
+
            </nav>
+
</div>
+
                    </div>
+
                    <!--end of row-->
+
                </div>
+
                <!--end of container-->
+
            </nav>
+
</div>
+
            <!--end bar-->
+
        </div>
+
<div class="main-container">
+
   
+
            <section style="
+
 
; ; background-size: 100%;height: 44.2em;margin-top: 0em;padding-top: 1.1em;" class="height-90 parallax">
 
; ; background-size: 100%;height: 44.2em;margin-top: 0em;padding-top: 1.1em;" class="height-90 parallax">
              <div class="main-container" style="
+
<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(https://static.igem.org/mediawiki/2018/3/3b/T--Valencia_UPV--laboratorioAdrianUPV2018.jpeg);
height: 100%;
+
    height: 100%;
width: 100%;background-attachment: fixed;background-size: cover;">
+
    width: 100%;background-attachment: fixed;background-size: cover;">
 
      
 
      
 
     <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%;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;">
            <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>
 
</div>
               
+
 
              </center>
+
</center>
             
+
 
 
</div><div class="all-page-modals"></div><div class="all-page-modals"></div>
 
</div><div class="all-page-modals"></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 ----------------------------->
  
  
 
<section id="story" class="feature-large" style="padding-top: 6em; padding-bottom: 50px; outline: none;" data-scroll-id="story" tabindex="-1">
 
<section id="story" 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="
 +
      margin-left: 0em;
 +
      padding-right: 0px;
 +
      padding-left: 0.2em;
 +
      ">
 +
     
 +
      <!------------ÍNDICE LATERAL------------------>
  
 +
      <div class="tabs-container tabs--vertical page-navigator" style="position: -webkit-sticky;position: sticky;padding-bottom: 0px;margin-top: 11.4em;">
 +
        <h4 style="
 +
        padding-left: 1em;
 +
        ">Index</h4>
 +
        <ul class="lateral">
 +
          <li class="lateral" style="margin-bottom: 0px;padding-bottom: 1em;padding-top: initial;padding-left: 1em;/* color: #353535; */">
 +
            <div class="tab__title" style="
 +
              line-height: 1.3em;
 +
              /* padding-left: 0.5em; */
 +
              ">
 +
              <a class="lateral" style="
 +
                /* color: #ffffff; */
 +
                opacity: 1;
 +
                list-style-type: circle;
 +
              ">INTRODUCTION</a>
 +
            </div>
 +
           
 +
          </li>
 +
          <li class="lateral">
 +
            <div class="tab__title" style="
 +
              line-height: 1.3em;
 +
              ">
 +
              <a href="#buho" class="lateral" style="
 +
                color: #353535;
 +
                opacity: 1;
 +
              ">STRUCTURE</a>
 +
            </div>
 +
           
 +
          </li>
 +
          <li class="lateral">
 +
            <div class="tab__title" style="
 +
              line-height: 1.3em;
 +
              ">
 +
              <a class="lateral" style="
 +
                color: #353535;
 +
                opacity: 1;
 +
              ">ENTRY OF CONSUMABLES</a>
 +
            </div>
 +
           
 +
          </li>
 +
          <li class="lateral">
 +
            <div class="tab__title" style="
 +
              line-height: 1.3em;
 +
              ">
 +
              <a class="lateral" style="
 +
                color: #353535;
 +
                opacity: 1;
 +
              ">REACTION ZONE</a>
 +
            </div>
 +
           
 +
          </li>
 +
          <li class="lateral">
 +
            <div class="tab__title" style="
 +
              line-height: 1.3em;
 +
              ">
 +
              <a class="lateral" style="
 +
                color: #353535;
 +
                opacity: 1;
 +
              ">MEASUREMENT ZONE</a>
 +
            </div>
 +
           
 +
          </li>
 +
          <li class="lateral">
 +
            <div class="tab__title" style="
 +
              line-height: 1.3em;
 +
              ">
 +
              <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>
  
<div class="col-md-3" style="
 
    margin-left: 0em;
 
    padding-right: 0px;
 
    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="
 
    padding-left: 1em;
 
">Index</h4>
 
  
 +
<!--------------------------------------------TEXTO------------------------------------------------>
  
<ul class="lateral">
 
                                    <li class="lateral" style="margin-bottom: 0px;padding-bottom: 1em;padding-top: initial;padding-left: 1em;/* color: #353535; */">
 
                                        <div class="tab__title" style="
 
    line-height: 1.3em;
 
    /* padding-left: 0.5em; */
 
">
 
                                                <a class="lateral" style="
 
    /* color: #ffffff; */
 
    opacity: 1;
 
    list-style-type: circle;
 
">ChatterPlant integrated system to control plant growth process</a>
 
                                        </div>
 
                                       
 
                                    </li>
 
                                    <li class="lateral">
 
                                        <div class="tab__title" style="
 
    line-height: 1.3em;
 
">
 
                                                <a class="lateral" style="
 
    color: #353535;
 
    opacity: 1;
 
">ChatterPlant integrated system to control plant growth process</a>
 
                                        </div>
 
                                       
 
                                    </li>
 
                                    <li class="lateral">
 
                                        <div class="tab__title" style="
 
    line-height: 1.3em;
 
">
 
                                                <a class="lateral" style="
 
    color: #353535;
 
    opacity: 1;
 
">ChatterPlant integrated</a>
 
                                        </div>
 
                                       
 
                                    </li>
 
                                    <li class="lateral">
 
                                        <div class="tab__title" style="
 
    line-height: 1.3em;
 
">
 
                                                <a class="lateral" style="
 
    color: #353535;
 
    opacity: 1;
 
">ChatterPlant integrated</a>
 
                                        </div>
 
                                       
 
                                    </li>
 
                                    <li class="lateral">
 
                                        <div class="tab__title" style="
 
    line-height: 1.3em;
 
">
 
                                                <a class="lateral" style="
 
    color: #353535;
 
    opacity: 1;
 
">ChatterPlant integrated</a>
 
                                        </div>
 
                                       
 
                                    </li>
 
  
                                </ul><ul class="tabs-content"></ul>
+
    <div class="col-md-9" style="
                                           
+
      /* margin-left: 0px; */
                                           
+
      padding-left: 6em;
                                        </div>
+
      padding-right: 2em;
                                           
+
      ">
                                           
+
      <div>
                                        </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>
  
                                              <div class="col-md-9" style="
+
        <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>
    /* margin-left: 0px; */
+
    padding-left: 6em;
+
    padding-right: 2em;
+
">
+
                            <div style="
+
">
+
                              <!--<h1 style="
+
    color: #353535;
+
">Lorem ipsum</h1>-->
+
  
<!--<h2 style="
+
        <p> Printeria is divided into three main parts dependent on each other:</p>
    color: #353535;
+
">Lorem ipsum</h2>-->
+
  
<h3 style="
+
        <div>
     color: #353535;
+
        <ul>
    font-weight: 700;
+
          <li>
    font-size: 40px;
+
            <p> <u>Entry of consumables</u>: components that allow the entry of consumables into the reaction zone.</p>
    margin-bottom: 0.2em;
+
          </li>
">Lorem ipsum</h3>
+
          <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>
  
<h4 style="
+
            <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>
    color: #353535;
+
    font-weight: 700;
+
    font-size: 21px;
+
    margin-bottom: 0.8em;
+
">Lorem ipsum</h4>
+
  
<!--<h5 style="
+
            <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>
    color: #353535;
+
    font-size: 16px;
+
    font-weight: 750;
+
">Lorem ipsum</h5>-->
+
  
<!--<h6 style="
+
            <div>
    color: #797979;
+
              <div class="row" style="
">Lorem ipsum</h6>-->
+
                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>
  
<p style="
+
            <h5>Methacrylate</h5>
    line-height: 1.7;
+
    margin-bottom: 0;
+
    color: #353535;">I am Rogerio
+
</p>
+
  
                            <div style="
+
            <div>
    padding-bottom: 1em;
+
              <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>
    text-align: right;
+
">
+
                                    <img src="http://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 style="
+
    color: #797979;
+
    font-weight: 300;
+
    /* font-size: 16px; */
+
    text-align: right;
+
    line-height: 1.7;
+
">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h6>
+
</div>
+
                            </div>
+
  
                            <p style="
+
              <p> As well as the aluminum profiles, the blueprints created were used for ordering the custom-made parts to a company.</p>
    line-height: 1.7;
+
">
+
  
                            I am member of the Instituto Universitario de Matemática Pura y Aplicada of the UPV. I am also interested in Biomedical Data Analysis, Graph Theory, Network Science, and in the applications of Mathematics to Computational, Systems and Synthetic Biology,  and Communication Networks. I am the author of more than 50 research articles published in international research journals. In addition, I have stayed at the following universities for short periods: in Bowling Green (OH) and Kent (OH) (USA), Lecce (Italy), Prague (Czech Rep.) And Tübingen (Germany).
+
              <div style="
 +
              padding-bottom: 1em;
 +
              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>
  
                            Before being Director of the Department of Applied Mathematics, I held the position of Director of Academic Performance and Curricular Students Assessment Area of the Vice-rectorate of Students and Culture of the UPV. Previously I held these positions university: Deputy Dean of the ETSINF (formerly Faculty of Informatics) (2004-2009), and Secretary of the Commission of the Strategic Plan of the UPV for the period 2007-2014 (2005-2007).
+
              <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>
  
                            </p>
+
            </div>
  
                            </div>
+
            <h5>Leveling system</h5>
  
                            <div>
+
            <div>
                                <ul style="
+
              <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>
    padding-top: 1.2em;
+
    padding-bottom: 1em;
+
">
+
                                    <li>
+
                                        <p>Elemento de prueba</p>
+
                                    </li>
+
                                    <li>
+
                                        <p>Elemento de prueba</p>
+
                                    </li>
+
                                    <li>
+
                                        <p>Elemento de prueba</p>
+
                                    </li>
+
                                </ul>
+
                            </div>
+
  
                            <div>
+
                <div style="
                                <table class="border--round table--alternate-row tableHec" style="width:100%">
+
                  padding-bottom: 0.8em;
                                    <thead><tr>
+
                  text-align: right;
                                    <th class="thHec">Firstname</th>
+
                 
                                    <th class="thHec">Lastname</th>  
+
                  ">
                                    <th class="thHec">Age</th>
+
                  <div class="row" style="margin: 0;">
                                    </tr>
+
                      <div class="col-md-6" style="
                                    </thead><tbody><tr>
+
                        padding: 0;
                                    <td class="tdHec">Jill</td>
+
                        padding-right: 0.3em;
                                    <td class="tdHec">Smith</td>  
+
                        ">
                                    <td class="tdHec">50</td>
+
                        <img src="https://via.placeholder.com/800x400" alt="" style="
                                    </tr>
+
                        margin-top: 1.8em;
                                    <tr>
+
                        margin-bottom: 0.8em;
                                    <td class="tdHec">Eve</td>
+
                        border-radius: 0.3em;
                                    <td class="tdHec">Jackson</td>  
+
                        ">
                                    <td class="tdHec">94</td>
+
                      </div>
                                    </tr>
+
                      <div class="col-md-6" style="
                                    </tbody></table>
+
                        padding: 0;
                            </div>
+
                        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 style="
+
        </div>
    padding-bottom: 0.8em;
+
    text-align: right;
+
">
+
    <div class="row" style="
+
    margin: 0;
+
">
+
    <div class="col-md-6" style="
+
    padding: 0;
+
    padding-right: 0.3em;
+
">
+
                                    <img src="http://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="http://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 style="
+
    color: #797979;
+
    font-weight: 300;
+
    /* font-size: 16px; */
+
    text-align: right;
+
    line-height: 1.7;
+
">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut velit luctus, hendrerit mi eget, ornare turpis. Nulla placerat elementum ligula, non congue ligula.</h6>
+
</div>
+
    </div>
+
                            </div>
+
   
+
  
                        </div>
+
        <h5>ENTRY OF CONSUMABLES</h5>
                            </div>
+
  
 +
        </div>
 +
        <h5>REACTION ZONE</h5>
  
                           
+
        <h5>MEASUREMENT ZONE</h5>
                        </div>
+
                       
+
                       
+
  
 +
        <h5>DISINFECTION AND STERILITY</h5>
  
 +
        <h5>SIMULTANEOUS EXPERIMENTS</h5>
  
 +
        <h5>RESULTS</h5>
  
                    </section>
 
  
  
 
+
  </div>
                    </div>
+
                    <!--end of row-->
+
                </div>
+
                <!--end of container-->
+
            </section>
+
 
+
           
+
         
+
<footer style="
+
background-color:#353535;" class="footer-3 text-center-xs space--xxs ">
+
             
+
 
+
 
+
<div id="logoPrinteria" class="item" style="
+
position: relative;text-align: center;lign: center;height: 50vh;">
+
 
+
                  <div class="bar bar--sm&nbsp;bar-1 hidden-xs hidden-sm bg--light" style="
+
position: absolute;&nbsp;align-items: right;margin-top: 12%;; width: 100%;padding-left: 10%;">
+
 
+
<p style="
+
color: white;margin-left: 480px;margin-bottom: 3px;;">Contact us:</p><ul>
+
                               
+
 
+
 
+
 
+
<li style="
+
float: left;margin-left: 480px; left;">
+
 
+
                                    <a style="
+
color: white;float: left;;">
+
</a><div style="
+
float: left;"><div style="
+
color: white;float: left;display: block;">
+
                                        <i><img style="
+
height: 40px;float: left; display= flex" src="https://static.igem.org/mediawiki/2018/2/2a/T--Valencia_UPV--mailUPV2018.png">
+
</i>
+
 
+
                                    <p style="
+
margin-left: 60px;margin-top: 11px;;
+
;">igem.upv.2018@gmail.com</p></div>
+
 
</div>
 
</div>
                               
 
</li>
 
 
 
 
 
 
                               
 
 
 
 
                            </ul>
 
  
  
 +
</section>
  
  
 +
<!--------------------FIN TEXTO------------------------------>
  
  
 
</div>
 
</div>
 
+
<!--end of row-->
 
+
</div>
<div class="bar bar--sm&nbsp;bar-1 hidden-xs hidden-sm &nbsp;bg--light" style="
+
<!--end of container-->
position: absolute;&nbsp;align-items: right;margin-top: 12%;; width: 60%;padding-left: 10%;dding-left: 10%;height: 50vh;/* margin-bottom: 1; *//* margin-bottom: 10; */; /* margin-bottom: 10p; */margin-bottom: 10px;">
+
</section>
 
+
<p style="
+
color: white;margin-bottom: 2px;;"> Follow us at <b> @upvigem </b></p><ul style="list-style: none;">
+
                               
+
<li style="
+
float: left; margin-right: 40px;">
+
 
+
                                    <a href="https://twitter.com/upvigem?lang=es" style="
+
color: white;;">
+
                                        <i>
+
 
+
<img src="https://static.igem.org/mediawiki/2018/d/de/T--Valencia_UPV--twitterUPV2018.png" style="
+
height: 40px; ;" ;"=""></i>
+
 
+
                                    </a>
+
                               
+
</li><li style="
+
float: left; margin-right: 40px;">
+
 
+
                                    <a href="https://es.linkedin.com/company/valencia-upv-igem" style=" color: white;;">
+
                                        <i>
+
<img style="
+
height: 40px;
+
;" src="https://static.igem.org/mediawiki/2018/f/f4/T--Valencia_UPV--linkedinUPV2018.png">
+
</i>
+
                                    </a>
+
                                </li><li style="
+
float: left;margin-right: 40px;">
+
 
+
                                    <a href="https://es-es.facebook.com/ValenciaUPViGEM/" style=" color: white;;">
+
                                        <i>
+
<img src="https://static.igem.org/mediawiki/2018/6/6d/T--Valencia_UPV--facebookUPV2018.png" style="
+
height: 40px;
+
;">
+
</i>
+
                                    </a>
+
                               
+
</li><li style="
+
float: left;margin-right: 40px; left;">
+
 
+
                                    <a href="https://www.instagram.com/upvigem/?hl=es" style=" color: white;;">
+
                                        <i>
+
<img src="https://static.igem.org/mediawiki/2018/c/ca/T--Valencia_UPV--instagramUPV2018.png" style="
+
height: 40px;
+
;">
+
</i>
+
                                    </a>
+
                                </li>
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
                               
+
 
+
 
+
 
+
                            </ul>
+
 
+
 
+
 
+
 
+
 
+
 
+
</div><div class="bar bar--sm&nbsp;bar-1 hidden-md hidden-lg &nbsp;bg--light" style="
+
position: absolute;&nbsp;align-items: right;margin-top: 20%;; width: 100%;padding-left: 10%;dding-left: 10%;height: 50vh;">
+
 
+
<p style="
+
color: white;margin-bottom: 20px;;"> Follow us at <b> @upvigem </b></p><ul>
+
                               
+
<li style="
+
float: left; /* margin-right: 40px; */">
+
 
+
                                    <a href="https://twitter.com/upvigem?lang=es" style="
+
color: white;;">
+
                                        <i>
+
 
+
<img src="https://static.igem.org/mediawiki/2018/d/de/T--Valencia_UPV--twitterUPV2018.png" style="
+
height: 40px; ;" ;"=""></i>
+
 
+
                                    </a>
+
                               
+
</li><li style="
+
float: left; /* margin-right: 40px; */">
+
 
+
                                    <a href="https://es.linkedin.com/company/valencia-upv-igem" style=" color: white;;">
+
                                        <i>
+
<img style="
+
height: 40px;
+
;" src="https://static.igem.org/mediawiki/2018/f/f4/T--Valencia_UPV--linkedinUPV2018.png">
+
</i>
+
                                    </a>
+
                                </li><li style="
+
float: left;/* margin-right: 40px; */margin-top: 2;margin-top: 20;margin-top: 20p;/* margin-top: 20px; */">
+
 
+
                                    <a href="https://es-es.facebook.com/ValenciaUPViGEM/" style=" color: white;;">
+
                                        <i>
+
<img src="https://static.igem.org/mediawiki/2018/6/6d/T--Valencia_UPV--facebookUPV2018.png" style="
+
height: 40px;
+
;">
+
</i>
+
                                    </a>
+
                               
+
</li><li style="
+
float: left;/* margin-right: 40px; *//* margin-top: 20px; */ left;">
+
 
+
                                    <a href="https://www.instagram.com/upvigem/?hl=es" style=" color: white;;">
+
                                        <i>
+
<img src="https://static.igem.org/mediawiki/2018/c/ca/T--Valencia_UPV--instagramUPV2018.png" style="
+
height: 40px;
+
;">
+
</i>
+
                                    </a>
+
                                </li>
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
                               
+
 
+
 
+
 
+
                            </ul>
+
 
+
 
+
 
+
 
+
 
+
  
 
</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>
 
+
</body>
 
+
 
+
<img class="&nbsp;bar--sm bar-1 hidden-xs hidden-sm bg--light" src="https://static.igem.org/mediawiki/2018/f/f9/T--Valencia_UPV--footerUPV2018.png" alt="image">
+
<img class="&nbsp;bar--sm bar-1 hidden-md hidden-lg bg--light" src="https://static.igem.org/mediawiki/2018/0/07/T--Valencia_UPV--footerMovilUPV2018.png" alt="image">
+
 
+
              </div>
+
            </footer>
+
 
+
 
+
        </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>
Line 843: Line 490:
  
 
</html>
 
</html>
 +
{{Valencia_UPV/footer}}

Latest revision as of 16:05, 13 September 2018

Stack Multipurpose HTML Template

HARDWARE

INTRODUCTION

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.

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 €]

Printeria is divided into three main parts dependent on each other:

  • Entry of consumables: components that allow the entry of consumables into the reaction zone.

  • Reaction zone: space where the process of printing genetic circuits in bacteria occurs thanks to digital microfluidic technology.

  • Measurement zone: the bacteria are kept in conditions that allow for growth and expression while OD and fluorescence measurements are taken.

Part Quantity Cost per unit Cost
Structure ---- ---- ----
Entry system ---- ---- ----
Reaction zone ---- ---- ----
Measurement zone ---- ---- ----
TOTAL ----
STRUCTURE
Frame

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.

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.

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.

Aluminum frame
Methacrylate

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.

As well as the aluminum profiles, the blueprints created were used for ordering the custom-made parts to a company.

Methacrylate cladding

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.

Leveling system

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.

Levelling system
Part Quantity Cost per unit Cost
Aluminum profiles ---- ---- ----
Profiles' cutting and drilling ---- ---- ----
Custom-made methacrylate ---- ---- ----
Screws DIN 7991 ---- ---- ----
Nuts DIN 934 ---- ---- ----
Kg of PLA for the connectors ---- ---- ----
Leeveling feet ---- ---- ----
Bull's eye level ---- ---- ----
TOTAL ----
ENTRY OF CONSUMABLES
REACTION ZONE
MEASUREMENT ZONE
DISINFECTION AND STERILITY
SIMULTANEOUS EXPERIMENTS
RESULTS