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

Line 10: Line 10:
  
 
<html>
 
<html>
−
<style>
+
    <style>
−
 
+
    #home_logo, #sideMenu { display:none; }
−
#home_logo, #sideMenu { display:none; }
+
    #sideMenu, #top_title, .patrollink  {display:none;}
−
#sideMenu, #top_title, .patrollink  {display:none;}
+
    #content { margin-left:0px; margin-top:-30px; padding:0px; width:100%;}
−
#content { margin-left:0px; margin-top:-30px; padding:0px; width:100%;}
+
    </style>
−
 
+
−
</style>
+
−
 
+
 
     <head>
 
     <head>
 
         <meta charset="utf-8">
 
         <meta charset="utf-8">
Line 27: Line 24:
 
         <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>
 
     </head>
−
  <body class="" style="background-color:#353535;">
+
    <body class="" style="background-color:#353535;">
 
         <a id="start"></a>
 
         <a id="start"></a>
−
     
+
        <div class="main-container">
−
         
+
             <section style="background-size: 100%;height: 44.2em;margin-top: 0em;padding-top: 1.1em;" class="height-90 parallax">
−
<div class="main-container">
+
                <div class="main-container" style="height: 100%;">
−
   
+
                    <center style="height: 100%;">
−
             <section style="
+
                        <div class="col-md-10" style="
−
; ; background-size: 100%;height: 44.2em;margin-top: 0em;padding-top: 1.1em;" class="height-90 parallax">
+
                            height: 100%;margin-top: 4em;">
−
              <div class="main-container" style="
+
                            <div id="logoPrinteria" class="item" style="
−
height: 100%;">
+
                                background-image: url(https://static.igem.org/mediawiki/2018/3/3b/T--Valencia_UPV--laboratorioAdrianUPV2018.jpeg);
−
              <center style="
+
                                height: 100%;
−
height: 100%;">
+
                                width: 100%;background-attachment: fixed;background-size: cover;">
−
              <div class="col-md-10" style="
+
                                <div>
−
height: 100%;margin-top: 4em;">
+
                                    <a class="btn down inner-link active" href="#story" style="font-size: 82%;right: 50%;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;">
−
<div id="logoPrinteria" class="item" style="
+
                                        <i class="stack-interface stack-down-open-big"></i>
−
background-image: url(https://static.igem.org/mediawiki/2018/3/3b/T--Valencia_UPV--laboratorioAdrianUPV2018.jpeg);
+
                                    </a>
−
height: 100%;
+
                                </div>
−
width: 100%;background-attachment: fixed;background-size: cover;">
+
                            </div>
−
   
+
                        </div>
−
    <div style="/* position: absolute; *//* top: 81%; *//* padding-left: 31em; */">
+
                    </center>
−
<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;">
+
                    </div>
−
            <i class="stack-interface stack-down-open-big"></i>
+
                    <div class="all-page-modals"></div>
−
        </a>
+
                    <div class="all-page-modals"></div>
−
</div>
+
                    <div class="all-page-modals"></div>
−
   
+
                </section>
−
</div>
+
             </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 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="row">
+
−
 
+
−
 
+
−
<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>
+
−
 
+
  
−
<ul class="lateral">
+
                <section id="story" class="feature-large" style="padding-top: 6em; padding-bottom: 50px; outline: none;" data-scroll-id="story" tabindex="-1">
−
                                    <li class="lateral" style="margin-bottom: 0px;padding-bottom: 1em;padding-top: initial;padding-left: 1em;/* color: #353535; */">
+
                    <div class="container">
−
                                        <div class="tab__title" style="
+
                        <div class="row">
−
    line-height: 1.3em;
+
                            <div class="col-md-3" style="
−
    /* padding-left: 0.5em; */
+
                                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>
 +
                                    <ul class="lateral">
 +
                                        <li class="lateral" style="margin-bottom: 0px;padding-bottom: 1em;padding-top: initial;padding-left: 1em;">
 +
                                            <div class="tab__title" style="
 +
                                                line-height: 1.3em;
 +
                                                ">
 
                                                 <a class="lateral" style="
 
                                                 <a class="lateral" style="
−
    /* color: #ffffff; */
+
                                                    opacity: 1;
−
    opacity: 1;
+
                                                    list-style-type: circle;
−
    list-style-type: circle;
+
                                                ">Introduction</a>
−
">ChatterPlant integrated system to control plant growth process</a>
+
                                            </div>
−
                                        </div>
+
                                           
−
                                          
+
                                         </li>
−
                                    </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 class="lateral" style="
 
                                                 <a class="lateral" style="
−
    color: #353535;
+
                                                    color: #353535;
−
    opacity: 1;
+
                                                    opacity: 1;
−
">ChatterPlant integrated system to control plant growth process</a>
+
                                                ">Visual Identity</a>
−
                                        </div>
+
                                            </div>
−
                                          
+
                                           
−
                                    </li>
+
                                         </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 class="lateral" style="
 
                                                 <a class="lateral" style="
−
    color: #353535;
+
                                                    color: #353535;
−
    opacity: 1;
+
                                                    opacity: 1;
−
">ChatterPlant integrated</a>
+
                                                ">Illustration</a>
−
                                        </div>
+
                                            </div>
−
                                          
+
                                           
−
                                    </li>
+
                                         </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 class="lateral" style="
 
                                                 <a class="lateral" style="
−
    color: #353535;
+
                                                    color: #353535;
−
    opacity: 1;
+
                                                    opacity: 1;
−
">ChatterPlant integrated</a>
+
                                                ">Social Media</a>
−
                                        </div>
+
                                            </div>
−
                                       
+
 
−
                                    </li>
+
                                            </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 class="lateral" style="
 
                                                 <a class="lateral" style="
−
    color: #353535;
+
                                                    color: #353535;
−
    opacity: 1;
+
                                                    opacity: 1;
−
">ChatterPlant integrated</a>
+
                                                ">Photography</a>
−
                                        </div>
+
                                            </div>
−
                                       
+
−
                                    </li>
+
−
 
+
−
                                </ul><ul class="tabs-content"></ul>
+
 
                                              
 
                                              
−
                                           
+
                                         </li>
−
                                         </div>
+
                                    </ul>
−
                                           
+
                                    <ul class="tabs-content">
−
                                           
+
                                    </ul>
−
                                        </div>
+
                                </div>
−
 
+
                               
−
 
+
                               
−
                                              <div class="col-md-9" style="
+
−
    /* margin-left: 0px; */
+
−
    padding-left: 6em;
+
−
    padding-right: 2em;
+
−
">
+
−
                            <div style="
+
−
">
+
−
                              <!--<h1 style="
+
−
    color: #353535;
+
−
">Lorem ipsum</h1>-->
+
−
 
+
−
<!--<h2 style="
+
−
    color: #353535;
+
−
">Lorem ipsum</h2>-->
+
−
 
+
−
<h3 style="
+
−
    color: #353535;
+
−
    font-weight: 700;
+
−
    font-size: 40px;
+
−
    margin-bottom: 0.2em;
+
−
">Lorem ipsum</h3>
+
−
 
+
−
<h4 style="
+
−
    color: #353535;
+
−
    font-weight: 700;
+
−
    font-size: 21px;
+
−
    margin-bottom: 0.8em;
+
−
">Lorem ipsum</h4>
+
−
 
+
−
<!--<h5 style="
+
−
    color: #353535;
+
−
    font-size: 16px;
+
−
    font-weight: 750;
+
−
">Lorem ipsum</h5>-->
+
−
 
+
−
<!--<h6 style="
+
−
    color: #797979;
+
−
">Lorem ipsum</h6>-->
+
−
 
+
−
<p style="
+
−
    line-height: 1.7;
+
−
    margin-bottom: 0;
+
−
    color: #353535;">I am Director of the Department of Applied Mathematics. I am professor at the School of Computer Science (Escuela Técnica Superior de Ingeniería Informática – ETSINF) of the Universitat Politècnica de València (UPV), where I have been teaching Algebra, Mathematical Analysis, Discrete Mathematics, and Graph Theory in the degrees of Computer Science and Data Science.
+
−
 
+
−
</p>
+
−
 
+
−
                            <div style="
+
−
    padding-bottom: 1em;
+
−
    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>
 
                             </div>
 +
                            <div class="col-md-9" style="padding-left: 6em;padding-right: 2em;">
 +
                                <div>
 +
                                    <h3>Visual Identity</h3>
 +
                                    <h4>Naming</h4>
 +
                                    <p>The name of a brand/ project is a crucial part since it must give people an idea of what it is about as well as differentiate it from others. Thus, a variety of complex concepts and notions must be represented by one word, which has to bDue to the importance of the naming process, we have taken into account the main pillars of this project so that they could be collected under one single concept: Printeria.
  
−
                            <p style="
+
                                    </p>
−
    line-height: 1.7;
+
                                    <h5>Topic</h5>
−
">
+
                                    <p>Bacteria printer</p>
 +
                                    <h5>Key facts</h5>
 +
                                    <ul>
 +
                                      <li>
 +
                                        <p>Bacteria SynBio</p>
 +
                                      </li>
 +
                                      <li>
 +
                                        <p>Printer</p>
 +
                                      </li>
 +
                                      <li>
 +
                                        <p>Automatization</p>
 +
                                      </li>
 +
                                      <li>
 +
                                      <p>Scientific divulgation</p>
 +
                                      </li>
 +
                                      <li>
 +
                                      <p>Studnet project</p>
 +
                                      </li>
 +
                                    </ul>
 +
                                    <h5>Key words</h5>
 +
                                    <ul>
 +
                                      <li>
 +
                                        <p>Bacteria, Cell, DNA</p>
 +
                                      </li>
 +
                                      <li>
 +
                                        <p>Printer, Ink, CMYK, Tonner</p>
 +
                                      </li>
 +
                                    </ul>
 +
                                    <h4>Logo</h4>
 +
                                    <p>
 +
                                        The design of Printeria’s logo is based on a synthesis of our hardware, the fundamental pillar of our project. It is based on digital microfluidics, a technology that allows us to move several droplets over a pads surface. This concept was simplified in the resulting image: two droplets moving on a pad.
 +
                                    </p>
 +
                                    <img src="http://via.placeholder.com/800x400" alt="">
 +
                                      <h4>Tipography</h4>
 +
                                      <img src="http://via.placeholder.com/800x400" alt="">
  
−
                            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).
+
                                    <h4>Color Palette</h4>
 +
                                    <p>
 +
                                        The color palette is one of the most important design tools to achieve successful communication. It sets the tone for the brand and its content, and it should reflect its values. The emotional use of color is the basis for an attractive design able to connect with the public, which is our main goal.
 +
                                    </p>
 +
                                   
 +
                                    <img src="http://via.placeholder.com/800x400" alt="">
  
−
                            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).
+
                                    <h3>Illustration</h3>
 +
                                  <p>
 +
                                        As designers, we want to communicate any message as simple and clear as possible, however complex it might be. To achieve it, we have created several digital illustrations and icons to explain and communicate our project as visual as possible.
 +
                                    </p>
 +
                                    <h3>PREGUNTAR SI SE PUEDE GALERIA DE IMAGENES</h3>
  
−
                            </p>
+
                                    <h3>Photography</h3>
 +
                                    <p>
 +
                                        Constant documentation of the process and its results has been the main focus of photography.
 +
                                    </p>
 +
                                    <h3>PREGUNTAR SI SE PUEDE GALERIA DE IMAGENES</h3>
  
−
                            </div>
+
                                    <h3>Social Media</h3>
 +
                                    <p>This year we have maintained our interest in social media by being present in some platforms such as Instagram and Twitter in order to advertise the project and let our audience grow in both national and international ways as well as to promote it among UPV students. </p>
 +
                                    <p>Furthermore, a more specific account has been created as part of our human practices. Here, we have been publishing all sorts of activities related to this section of our project, along with its results, providing us a more direct feedback from our public.</p>
 +
                                    <h3>PREGUNTAR SI SE PUEDE GALERIA DE IMAGENES insta</h3>
  
−
                            <div>
 
−
                                <ul style="
 
−
    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>
−
                                 <table class="border--round table--alternate-row tableHec" style="width:100%">
+
                             
−
                                    <thead><tr>
+
                         
−
                                    <th class="thHec">Firstname</th>
+
−
                                    <th class="thHec">Lastname</th>
+
−
                                    <th class="thHec">Age</th>
+
−
                                    </tr>
+
−
                                    </thead><tbody><tr>
+
−
                                    <td class="tdHec">Jill</td>
+
−
                                    <td class="tdHec">Smith</td>
+
−
                                    <td class="tdHec">50</td>
+
−
                                    </tr>
+
−
                                    <tr>
+
−
                                    <td class="tdHec">Eve</td>
+
−
                                    <td class="tdHec">Jackson</td>
+
−
                                    <td class="tdHec">94</td>
+
−
                                    </tr>
+
−
                                    </tbody></table>
+
−
                            </div>
+
  
−
<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>
−
   
+
                         </div>
−
 
+
−
                         </div>
+
−
                            </div>
+
−
 
+
−
 
+
−
                           
+
−
                        </div>
+
−
                       
+
−
                       
+
−
 
+
−
 
+
−
 
+
−
 
+
−
                    </section>
+
−
 
+
−
 
+
−
 
+
 
                     </div>
 
                     </div>
−
                    <!--end of row-->
 
 
                 </div>
 
                 </div>
−
                <!--end of container-->
+
             </div>
−
             </section>
+
−
 
+
 
              
 
              
−
         
+
           
−
 
+
        </section>
−
 
+
    </div>
−
        </div>
+
    <!--end of row-->
−
        <!--<div class="loader"></div>-->
+
</div>
−
        <a class="back-to-top inner-link" href="#start" data-scroll-class="100vh:active" style="font-size: 82%;">
+
<!--end of container-->
−
            <i class="stack-interface stack-up-open-big"></i>
+
</section>
−
        </a>
+
</div>
−
 
+
<!--<div class="loader"></div>-->
−
    </body>
+
<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>
−
        <script type="text/javascript"  src="https://2018.igem.org/Template:Valencia_UPV/scriptsJS?action=raw&ctype=text/javascript"></script>
+
</body>
−
        <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/scriptsJS?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/jquery311minJS?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/parallaxJS?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/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>
−
 
+
−
 
+
 
</html>
 
</html>
 
{{Valencia_UPV/footer}}
 
{{Valencia_UPV/footer}}

Revision as of 22:36, 4 October 2018

Stack Multipurpose HTML Template

Index

Visual Identity

Naming

The name of a brand/ project is a crucial part since it must give people an idea of what it is about as well as differentiate it from others. Thus, a variety of complex concepts and notions must be represented by one word, which has to bDue to the importance of the naming process, we have taken into account the main pillars of this project so that they could be collected under one single concept: Printeria.

Topic

Bacteria printer

Key facts

  • Bacteria SynBio

  • Printer

  • Automatization

  • Scientific divulgation

  • Studnet project

Key words

  • Bacteria, Cell, DNA

  • Printer, Ink, CMYK, Tonner

Logo

The design of Printeria’s logo is based on a synthesis of our hardware, the fundamental pillar of our project. It is based on digital microfluidics, a technology that allows us to move several droplets over a pads surface. This concept was simplified in the resulting image: two droplets moving on a pad.

Tipography

Color Palette

The color palette is one of the most important design tools to achieve successful communication. It sets the tone for the brand and its content, and it should reflect its values. The emotional use of color is the basis for an attractive design able to connect with the public, which is our main goal.

Illustration

As designers, we want to communicate any message as simple and clear as possible, however complex it might be. To achieve it, we have created several digital illustrations and icons to explain and communicate our project as visual as possible.

PREGUNTAR SI SE PUEDE GALERIA DE IMAGENES

Photography

Constant documentation of the process and its results has been the main focus of photography.

PREGUNTAR SI SE PUEDE GALERIA DE IMAGENES

Social Media

This year we have maintained our interest in social media by being present in some platforms such as Instagram and Twitter in order to advertise the project and let our audience grow in both national and international ways as well as to promote it among UPV students.

Furthermore, a more specific account has been created as part of our human practices. Here, we have been publishing all sorts of activities related to this section of our project, along with its results, providing us a more direct feedback from our public.

PREGUNTAR SI SE PUEDE GALERIA DE IMAGENES insta