Difference between revisions of "Team:TecCEM/Notebook"

(Prototype team page)
 
Line 1: Line 1:
−
{{IGEM_TopBar}}
+
{{TecCEM/Menu}}
−
{{TecCEM}}
+
 
<html>
 
<html>
 +
<head>
 +
<meta charset="utf-8">
 +
<title>Untitled Document</title>
 +
</head>
  
−
<div class="column full_size">
+
<body>
 +
<div class="Imagen_principal">
 +
<img src="https://static.igem.org/mediawiki/2021/9/9f/T--TecCEM--FotoEquipoTexem.jpg" alt="">
 +
<div class="Titulo">
 +
<h1 style= "font-family: 'Nunito', Times; font-weight: bold">Notebook lab</h1>
 +
</div>
 +
<div class="Difuminado"></div>
 +
</div>
 +
 +
<div class="cuerpo_principal">
 +
 +
<div class="Espacio_menu_lateral">
 +
 +
</div>
 +
 +
<div class="Texto" style="display: flex">
 +
<div class="sem1">
 +
<div class="fecha1 fecha" id="uno">
 +
<div class="circulofecha">
 +
<p style="font-family: Nunito, Times; font-size: 1.2rem">Week 1</p>
 +
</div>
 +
<div class="flecha">
 +
</div>
 +
</div>
 +
<div class="contenido">
 +
<div class="descripcion">
 +
<p style="font-family: 'Roboto', sans-serif; text-align: justify-all; font-size: 1.2rem">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam rerum quis consequatur voluptatibus praesentium. Ex commodi beatae cum sequi. Impedit repudiandae iste adipisci omnis velit dignissimos ad minus incidunt maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut similique, minus et blanditiis aliquid quidem sunt ipsam. Voluptas voluptatem beatae, tempora deleniti qui earum voluptatibus, cumque natus et ut, pariatur. Click on "week 1" to see the full  weekly notebook</p>
 +
</div>
 +
<div class="viewer contenido_hidden" id="viewer">
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class="sem1">
 +
<div class="fecha2 fecha">
 +
<div class="circulofecha" id="dos">
 +
<p style="font-family: Nunito, Times; font-size: 1.2rem; display: inline-block;">Week 2</p>
 +
 +
</div>
 +
<div class="flecha">
 +
</div>
 +
</div>
 +
<div class="contenido">
 +
<div class="descripcion">
 +
<p style="font-family: 'Roboto', sans-serif; text-align: justify-all; font-size: 1.2rem">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam rerum quis consequatur voluptatibus praesentium. Ex commodi beatae cum sequi. Impedit repudiandae iste adipisci omnis velit dignissimos ad minus incidunt maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut similique, minus et blanditiis aliquid quidem sunt ipsam. Voluptas voluptatem beatae, tempora deleniti qui earum voluptatibus, cumque natus et ut, pariatur.</p>
 +
</div>
 +
<div class="viewer contenido_hidden" id="viewer2">
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class="sem1">
 +
<div class="fecha3 fecha">
 +
<div class="circulofecha" id="tres">
 +
<p style="font-family: Nunito, Times; font-size: 1.2rem; display: inline-block;">Week 3</p>
 +
 +
</div>
 +
<div class="flecha">
 +
</div>
 +
</div>
 +
<div class="contenido">
 +
<div class="descripcion">
 +
<p style="font-family: 'Roboto', sans-serif; text-align: justify-all; font-size: 1.2rem">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam rerum quis consequatur voluptatibus praesentium. Ex commodi beatae cum sequi. Impedit repudiandae iste adipisci omnis velit dignissimos ad minus incidunt maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut similique, minus et blanditiis aliquid quidem sunt ipsam. Voluptas voluptatem beatae, tempora deleniti qui earum voluptatibus, cumque natus et ut, pariatur.</p>
 +
</div>
 +
<div class="viewer contenido_hidden" id="viewer3">
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class="sem1">
 +
<div class="fecha4 fecha">
 +
<div class="circulofecha" id="cuatro">
 +
<p style="font-family: Nunito, Times; font-size: 1.2rem; display: inline-block;">Week 4</p>
 +
 +
</div>
 +
<div class="flecha">
 +
</div>
 +
</div>
 +
<div class="contenido">
 +
<div class="descripcion">
 +
<p style="font-family: 'Roboto', sans-serif; text-align: justify-all; font-size: 1.2rem">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam rerum quis consequatur voluptatibus praesentium. Ex commodi beatae cum sequi. Impedit repudiandae iste adipisci omnis velit dignissimos ad minus incidunt maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut similique, minus et blanditiis aliquid quidem sunt ipsam. Voluptas voluptatem beatae, tempora deleniti qui earum voluptatibus, cumque natus et ut, pariatur.</p>
 +
</div>
 +
<div class="viewer contenido_hidden" id="viewer4">
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class="sem1">
 +
<div class="fecha5 fecha">
 +
<div class="circulofecha" id="cinco">
 +
<p style="font-family: Nunito, Times; font-size: 1.2rem; display: inline-block;">Week 5</p>
 +
 +
</div>
 +
<div class="flecha">
 +
</div>
 +
</div>
 +
<div class="contenido">
 +
<div class="descripcion">
 +
<p style="font-family: 'Roboto', sans-serif; text-align: justify-all; font-size: 1.2rem">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam rerum quis consequatur voluptatibus praesentium. Ex commodi beatae cum sequi. Impedit repudiandae iste adipisci omnis velit dignissimos ad minus incidunt maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut similique, minus et blanditiis aliquid quidem sunt ipsam. Voluptas voluptatem beatae, tempora deleniti qui earum voluptatibus, cumque natus et ut, pariatur.</p>
 +
</div>
 +
<div class="viewer contenido_hidden" id="viewer5">
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class="sem1">
 +
<div class="fecha6 fecha">
 +
<div class="circulofecha" id="seis">
 +
<p style="font-family: Nunito, Times; font-size: 1.2rem; display: inline-block;">Week 6</p>
 +
 +
</div>
 +
<div class="flecha">
 +
</div>
 +
</div>
 +
<div class="contenido">
 +
<div class="descripcion">
 +
<p style="font-family: 'Roboto', sans-serif; text-align: justify-all; font-size: 1.2rem">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam rerum quis consequatur voluptatibus praesentium. Ex commodi beatae cum sequi. Impedit repudiandae iste adipisci omnis velit dignissimos ad minus incidunt maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut similique, minus et blanditiis aliquid quidem sunt ipsam. Voluptas voluptatem beatae, tempora deleniti qui earum voluptatibus, cumque natus et ut, pariatur.</p>
 +
</div>
 +
<div class="viewer contenido_hidden" id="viewer6">
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class="sem1">
 +
<div class="fecha7 fecha">
 +
<div class="circulofecha" id="siete">
 +
<p style="font-family: Nunito, Times; font-size: 1.2rem; display: inline-block;">Week 7</p>
 +
 +
</div>
 +
<div class="flecha">
 +
</div>
 +
</div>
 +
<div class="contenido">
 +
<div class="descripcion">
 +
<p style="font-family: 'Roboto', sans-serif; text-align: justify-all; font-size: 1.2rem">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam rerum quis consequatur voluptatibus praesentium. Ex commodi beatae cum sequi. Impedit repudiandae iste adipisci omnis velit dignissimos ad minus incidunt maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut similique, minus et blanditiis aliquid quidem sunt ipsam. Voluptas voluptatem beatae, tempora deleniti qui earum voluptatibus, cumque natus et ut, pariatur.</p>
 +
</div>
 +
<div class="viewer contenido_hidden" id="viewer7">
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class="sem1">
 +
<div class="fecha8 fecha">
 +
<div class="circulofecha" id="ocho">
 +
<p style="font-family: Nunito, Times; font-size: 1.2rem; display: inline-block;">Week 8</p>
 +
 +
</div>
 +
<div class="flecha">
 +
</div>
 +
</div>
 +
<div class="contenido">
 +
<div class="descripcion">
 +
<p style="font-family: 'Roboto', sans-serif; text-align: justify-all; font-size: 1.2rem">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam rerum quis consequatur voluptatibus praesentium. Ex commodi beatae cum sequi. Impedit repudiandae iste adipisci omnis velit dignissimos ad minus incidunt maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut similique, minus et blanditiis aliquid quidem sunt ipsam. Voluptas voluptatem beatae, tempora deleniti qui earum voluptatibus, cumque natus et ut, pariatur.</p>
 +
</div>
 +
<div class="viewer contenido_hidden" id="viewer8">
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class="sem1">
 +
<div class="fecha9 fecha">
 +
<div class="circulofecha" id="nueve">
 +
<p style="font-family: Nunito, Times; font-size: 1.2rem; display: inline-block;">Week 9</p>
 +
 +
</div>
 +
<div class="flecha">
 +
</div>
 +
</div>
 +
<div class="contenido">
 +
<div class="descripcion">
 +
<p style="font-family: 'Roboto', sans-serif; text-align: justify-all; font-size: 1.2rem">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam rerum quis consequatur voluptatibus praesentium. Ex commodi beatae cum sequi. Impedit repudiandae iste adipisci omnis velit dignissimos ad minus incidunt maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut similique, minus et blanditiis aliquid quidem sunt ipsam. Voluptas voluptatem beatae, tempora deleniti qui earum voluptatibus, cumque natus et ut, pariatur.</p>
 +
</div>
 +
<div class="viewer contenido_hidden" id="viewer9">
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class="sem1">
 +
<div class="fecha10 fecha">
 +
<div class="circulofecha" id="diez">
 +
<p style="font-family: Nunito, Times; font-size: 1.2rem; display: inline-block;">Week 10</p>
 +
 +
</div>
 +
<div class="flecha">
 +
</div>
 +
</div>
 +
<div class="contenido">
 +
<div class="descripcion">
 +
<p style="font-family: 'Roboto', sans-serif; text-align: justify-all; font-size: 1.2rem">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam rerum quis consequatur voluptatibus praesentium. Ex commodi beatae cum sequi. Impedit repudiandae iste adipisci omnis velit dignissimos ad minus incidunt maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut similique, minus et blanditiis aliquid quidem sunt ipsam. Voluptas voluptatem beatae, tempora deleniti qui earum voluptatibus, cumque natus et ut, pariatur.</p>
 +
</div>
 +
<div class="viewer contenido_hidden" id="viewer10">
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class="sem1">
 +
<div class="fecha11 fecha">
 +
<div class="circulofecha" id="once">
 +
<p style="font-family: Nunito, Times; font-size: 1.2rem; display: inline-block;">Week 11</p>
 +
 +
</div>
 +
<div class="flecha">
 +
</div>
 +
</div>
 +
<div class="contenido">
 +
<div class="descripcion">
 +
<p style="font-family: 'Roboto', sans-serif; text-align: justify-all; font-size: 1.2rem">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam rerum quis consequatur voluptatibus praesentium. Ex commodi beatae cum sequi. Impedit repudiandae iste adipisci omnis velit dignissimos ad minus incidunt maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut similique, minus et blanditiis aliquid quidem sunt ipsam. Voluptas voluptatem beatae, tempora deleniti qui earum voluptatibus, cumque natus et ut, pariatur.</p>
 +
</div>
 +
<div class="viewer contenido_hidden" id="viewer11">
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class="sem1">
 +
<div class="fecha12 fecha">
 +
<div class="circulofecha" id="doce">
 +
<p style="font-family: Nunito, Times; font-size: 1.2rem; display: inline-block;">Week 12</p>
 +
 +
</div>
 +
<div class="flecha">
 +
</div>
 +
</div>
 +
<div class="contenido">
 +
<div class="descripcion">
 +
<p style="font-family: 'Roboto', sans-serif; text-align: justify-all; font-size: 1.2rem">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam rerum quis consequatur voluptatibus praesentium. Ex commodi beatae cum sequi. Impedit repudiandae iste adipisci omnis velit dignissimos ad minus incidunt maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut similique, minus et blanditiis aliquid quidem sunt ipsam. Voluptas voluptatem beatae, tempora deleniti qui earum voluptatibus, cumque natus et ut, pariatur.</p>
 +
</div>
 +
<div class="viewer contenido_hidden" id="viewer12">
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class="sem1">
 +
<div class="fecha13 fecha">
 +
<div class="circulofecha" id="trece">
 +
<p style="font-family: Nunito, Times; font-size: 1.2rem; display: inline-block;">Week 13</p>
 +
 +
</div>
 +
<div class="flecha">
 +
</div>
 +
</div>
 +
<div class="contenido">
 +
<div class="descripcion">
 +
<p style="font-family: 'Roboto', sans-serif; text-align: justify-all; font-size: 1.2rem">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam rerum quis consequatur voluptatibus praesentium. Ex commodi beatae cum sequi. Impedit repudiandae iste adipisci omnis velit dignissimos ad minus incidunt maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut similique, minus et blanditiis aliquid quidem sunt ipsam. Voluptas voluptatem beatae, tempora deleniti qui earum voluptatibus, cumque natus et ut, pariatur.</p>
 +
</div>
 +
<div class="viewer contenido_hidden" id="viewer13">
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class="sem1">
 +
<div class="fecha14 fecha">
 +
<div class="circulofecha" id="catorce">
 +
<p style="font-family: Nunito, Times; font-size: 1.2rem; display: inline-block;">Week 14</p>
 +
 +
</div>
 +
<div class="flecha">
 +
</div>
 +
</div>
 +
<div class="contenido">
 +
<div class="descripcion">
 +
<p style="font-family: 'Roboto', sans-serif; text-align: justify-all; font-size: 1.2rem">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam rerum quis consequatur voluptatibus praesentium. Ex commodi beatae cum sequi. Impedit repudiandae iste adipisci omnis velit dignissimos ad minus incidunt maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut similique, minus et blanditiis aliquid quidem sunt ipsam. Voluptas voluptatem beatae, tempora deleniti qui earum voluptatibus, cumque natus et ut, pariatur.</p>
 +
</div>
 +
<div class="viewer contenido_hidden" id="viewer14">
 +
</div>
 +
</div>
 +
</div>
 +
 +
 +
<div class="sem1">
 +
<div class="fecha15 fecha">
 +
<div class="circulofecha" id="quince">
 +
<p style="font-family: Nunito, Times; font-size: 1.2rem; display: inline-block;">Protocols</p>
 +
</div>
 +
<div class="flechafinal">
 +
</div>
 +
</div>
 +
<div class="contenido">
 +
<div class="descripcion">
 +
<p style="font-family: 'Roboto', sans-serif; text-align: justify-all; font-size: 1.2rem">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam rerum quis consequatur voluptatibus praesentium. Ex commodi beatae cum sequi. Impedit repudiandae iste adipisci omnis velit dignissimos ad minus incidunt maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut similique, minus et blanditiis aliquid quidem sunt ipsam. Voluptas voluptatem beatae, tempora deleniti qui earum voluptatibus, cumque natus et ut, pariatur.</p>
 +
</div>
 +
<div class="viewer contenido_hidden" id="viewer15">
 +
</div>
 +
</div>
 +
</div>
 +
 +
</div>
 +
<div class="menu_lateral" id="menu_lateral">
 +
<ul style="list-style: none; margin: 0; padding: 0;">
 +
<li style="margin-top: 1rem; cursor: default; font-weight: bold; font-size: 1.7rem; font-family: Nunito, Times; border-bottom: 2.5px solid #000">
 +
<center>Index</center></li>
 +
<li id="to1" class="menu_section" style="font-family: Nunito, Times; font-size: 1.1rem">Week 1</li>
 +
<li id="to2" class="menu_section" style="font-family: Nunito, Times; font-size: 1.1rem">Week 2</li>
 +
<li id="to3" class="menu_section" style="font-family: Nunito, Times; font-size: 1.1rem">Week 3</li>
 +
<li id="to4" class="menu_section" style="font-family: Nunito, Times; font-size: 1.1rem">Week 4</li>
 +
<li id="to5" class="menu_section" style="font-family: Nunito, Times; font-size: 1.1rem">Week 5</li>
 +
<li id="to6" class="menu_section" style="font-family: Nunito, Times; font-size: 1.1rem">Week 6</li>
 +
<li id="to7" class="menu_section" style="font-family: Nunito, Times; font-size: 1.1rem">Week 7</li>
 +
<li id="to8" class="menu_section" style="font-family: Nunito, Times; font-size: 1.1rem">Week 8</li>
 +
<li id="to9" class="menu_section" style="font-family: Nunito, Times; font-size: 1.1rem">Week 9</li>
 +
<li id="to10" class="menu_section" style="font-family: Nunito, Times; font-size: 1.1rem">Week 10</li>
 +
<li id="to11" class="menu_section" style="font-family: Nunito, Times; font-size: 1.1rem">Week 11</li>
 +
<li id="to12" class="menu_section" style="font-family: Nunito, Times; font-size: 1.1rem">Week 12</li>
 +
<li id="to13" class="menu_section" style="font-family: Nunito, Times; font-size: 1.1rem">Week 13</li>
 +
<li id="to14" class="menu_section" style="font-family: Nunito, Times; font-size: 1.1rem">Protocols</li>
 +
</ul>
 +
<div style="align-self: center; border-radius: 100rem; overflow: hidden; box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);">
 +
<img src="https://static.igem.org/mediawiki/2021/1/1c/T--TecCEM--logo.png" style = "width: 100%"  alt="TecCEM logo">
 +
</div>
 +
</div>
 +
<div class="tips">
 +
<img src="https://static.igem.org/mediawiki/2021/5/58/T--TecCEM--idea.png" style="width: 25%; display: inline-block" alt="idea">
 +
<h4 style="display: inline-block; font-family: Nunito; font-size: 1.8rem">Tips</h4>
 +
<p style="padding: 0; margin: 0; display: inline; font-family: Roboto; font-size: 1.1rem; text-align: center">Click on "week"</p>
 +
</div>
 +
</div>
  
−
<h1>Notebook</h1>
+
</body>
−
<p> Document the dates you worked on your project. This should be a detailed account of the work done each day for your project.</p>
+
<style>
 +
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700&family=Roboto&display=swap');
 +
.tips{
 +
display: flex;
 +
transition: transform 0.6s ease-out;
 +
flex-wrap: wrap;
 +
width: 10%;
 +
background: #FDEBC5;
 +
border-radius: 2rem;
 +
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
 +
justify-content: center;
 +
align-content: center;
 +
align-items: center;
 +
max-height: 45rem;
 +
position: fixed;
 +
top: 15%;
 +
margin-left: 2rem;
 +
padding: 1rem;
 +
right: 26px;
 +
transform: translateX(+150%) translateY(0);
 +
 +
}
 +
.tips_hidden{
 +
transform: translateX(0%) translateY(0);
 +
/*100% - .menu_lateral.height + .menu_lateral_teccem.heigh
 +
100 - 35 + 20 = 85
 +
*/
 +
}
 +
 +
.sem1{
 +
 +
display: flex;
 +
flex-direction: row;
 +
width: 100%;
 +
/*border-top: 4px solid black;*/
 +
 +
}
 +
.fecha{
 +
display: flex;
 +
width: 20%;
 +
height: 100%;
 +
background: white;
 +
justify-content: center;
 +
align-content: center;
 +
align-items: center;
 +
flex-direction: column;
 +
 +
}
 +
.circulofecha{
 +
width: 100px;
 +
height: 100px;
 +
background: #45ACFF;
 +
border-radius: 40rem;
 +
display: flex;
 +
align-content: center;
 +
align-items: center;
 +
justify-content: center;
 +
cursor: pointer;
 +
transition: all 1s ease-out;
 +
}
 +
.circulofecha:hover{
 +
background: #B1E7EF;
 +
}
 +
.circulofecha:hover > p{
 +
transform: scale(1.05);
 +
}
 +
.circulofecha > p{
 +
transition: all 1s ease-out;
 +
}
 +
 +
 +
.flecha{
 +
width: 50%;
 +
align-self: flex-start;
 +
height: 100%;
 +
border-right: 5px dotted #CDECA9;
 +
}
 +
.flechafinal{
 +
width: 50%;
 +
align-self: flex-start;
 +
height: 100%;
 +
}
 +
.contenido_hidden{
 +
display: none;
 +
}
 +
.contenido{
 +
display: flex;
 +
width: 80%;
 +
height: 100%;
 +
flex-direction: column;
 +
}
 +
.descripcion{
 +
padding: 1rem;
 +
text-align: justify;
 +
  text-justify: inter-word;
 +
}
 +
.viewer{
 +
height: 80vh;
 +
width: 100%;
 +
margin-bottom: 2rem;
 +
 +
}
 +
h1{
 +
font-family: "Hoefler Text", "Liberation Serif", "Times New Roman", "serif";
 +
font-size: 1.3rem;
 +
}
 +
h2, h3{
 +
border-left: 4px solid #CDECA9;
 +
border-right: 4px solid #CDECA9;
 +
display: inline-block;
 +
width: 100%;
 +
text-align: center;
 +
color: #45ACFF;
 +
}
 +
 +
.txt{
 +
text-align: justify;
 +
  text-justify: inter-word;
 +
}
 +
.survey{
 +
display: flex;
 +
align-content: center;
 +
justify-content: center;
 +
align-items: center;
 +
}
 +
body{
 +
margin: 0;
 +
padding: 0;
 +
}
 +
.Imagen_principal{
 +
display: flex;
 +
align-content: center;
 +
justify-content: center;
 +
align-items: center;
 +
width: 100vw;
 +
height: 100vh;
 +
}
 +
.Imagen_principal > img{
 +
width: 100%;
 +
height: 100%;
 +
}
 +
.Titulo{
 +
position: absolute;
 +
background: white;
 +
padding: 1rem;
 +
border-radius: 1rem;
 +
z-index: 10;
 +
}
 +
.Titulo > h1{
 +
display: inline;
 +
opacity: 1;
 +
font-size: 4rem;
 +
}
 +
.Difuminado{
 +
width: 100vw;
 +
height: 100vh;
 +
position: absolute;
 +
z-index: 9;
 +
background: white;
 +
opacity: .4;
 +
}
 +
.cuerpo_principal{
 +
display: flex;
 +
flex-direction: row;
 +
}
 +
.menu_lateral{
 +
display: flex;
 +
transition: transform 0.6s ease-out;
 +
 +
flex-wrap: wrap;
 +
width: 10%;
 +
justify-content: center;
 +
align-content: center;
 +
align-items: center;
 +
max-height: 45rem;
 +
position: fixed;
 +
top: 10%;
 +
margin-left: 2rem;
 +
padding: 1rem;
 +
transform: translateX(-150%) translateY(0);
 +
 +
}
 +
.menu_lateral_hidden{
 +
transform: translateX(0%) translateY(0);
 +
/*100% - .menu_lateral.height + .menu_lateral_teccem.heigh
 +
100 - 35 + 20 = 85
 +
*/
 +
}
 +
.Espacio_menu_lateral{
 +
width: 17%;
 +
}
 +
.menu_lateral li{
 +
margin-bottom: 1rem;
 +
cursor: pointer;
 +
transition: all 0.4s ease-out;
 +
 +
}
 +
.menu_section:hover{
 +
transform: translateX(10%) translateY(0);
 +
text-decoration: underline;
 +
}
 +
.sobresalirmenu{
 +
transform: translateX(10%) translateY(0);
 +
text-decoration: underline;
 +
}
 +
.Texto{
 +
width: 65%;
 +
padding: 1rem;
 +
justify-content: center;
 +
display: flex;
 +
flex-direction: column;
 +
align-items: center;
 +
display: inline;
 +
 +
}
 +
.Texto h2{
 +
align-self: left;
 +
}
 +
 +
.Texto p {
 +
text-align: justify;
 +
display: inline;
 +
}
 +
 +
.Texto img{
 +
width: 70%;
 +
max-height: 500px;
 +
}
 +
 +
.Caption{
 +
width: 70%;
 +
}
 +
html, body {
 +
    height: 100vh;
 +
}
 +
.cite{
 +
position: absolute;
 +
bottom: 55px;
 +
width: 500px;
 +
background: #fff;
 +
padding: 20px;
 +
box-sizing: border-box;
 +
visibility: hidden;
 +
opacity: 0;
 +
transition: 0.5s;
 +
transform: translateX(-50%) translateY(50px)
 +
}
 +
.Apacite:hover .cite{
 +
visibility: visible;
 +
opacity: 1;
 +
transform: translateX(-50%) translateY(0px);
 +
z-index: 99999;
 +
 +
}
 +
.Apacite {
 +
  position: relative;
 +
display: inline;
 +
transition: 0.5s;
 +
cursor: pointer;
 +
width: auto;
 +
}
 +
.Apacite:hover{
 +
text-decoration: underline;
 +
}
 +
 +
</style>
 +
 +
<script>
  
−
</div>
 
−
<div class="clear"></div>
 
  
 +
function getElementY(query) {
 +
  return window.pageYOffset + document.querySelector(query).getBoundingClientRect().top
 +
}
  
 +
function doScrolling(element, duration) {
 +
var startingY = window.pageYOffset + 60
 +
  var elementY = getElementY(element)
 +
  // If element is close to page's bottom then window will scroll only to some position above the element.
 +
  var targetY = document.body.scrollHeight - elementY < window.innerHeight ? document.body.scrollHeight - window.innerHeight : elementY
 +
var diff = targetY - startingY
 +
  // Easing function: easeInOutCubic
 +
  // From: https://gist.github.com/gre/1650294
 +
  var easing = function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 }
 +
  var start
  
−
<div class="column two_thirds_size">
+
  if (!diff) return
−
<h3>What should this page have?</h3>
+
−
<ul>
+
−
<li>Chronological notes of what your team is doing.</li>
+
−
<li> Brief descriptions of daily important events.</li>
+
−
<li>Pictures of your progress. </li>
+
−
<li>Mention who participated in what task.</li>
+
−
</ul>
+
  
−
</div>
+
// Bootstrap our animation - it will get called right before next frame shall be rendered.
 +
window.requestAnimationFrame(function step(timestamp) {
 +
    if (!start) start = timestamp
 +
    // Elapsed miliseconds since start of scrolling.
 +
    var time = timestamp - start
 +
// Get percent of completion in range [0, 1].
 +
    var percent = Math.min(time / duration, 1)
 +
    // Apply the easing.
 +
    // It can cause bad-looking slow frames in browser performance tool, so be careful.
 +
    percent = easing(percent)
  
−
<div class="column third_size">
+
    window.scrollTo(0, startingY + diff * percent -60)
−
<div class="highlight decoration_A_full">
+
−
<h3>Inspiration</h3>
+
−
<p>You can see what others teams have done to organize their notes:</p>
+
  
−
<ul>
+
// Proceed with animation as long as we wanted it to.
−
<li><a href="https://2018.igem.org/Team:Munich/Notebook">2018 Munich</a></li>
+
    if (time < duration) {
 +
      window.requestAnimationFrame(step)
 +
    }
 +
 +
  })
 +
console.log(elementY)
 +
}
  
−
<li><a href="https://2019.igem.org/Team:Georgia_State/Notebook">2019 Georgia State</a></li>
+
// Apply event handlers. Example of firing the scrolling mechanism.
−
<li><a href="https://2019.igem.org/Team:Newcastle/Notebook">2019 Newcastle</a></li>
+
document.getElementById('to1').addEventListener('click', doScrolling.bind(null, '#uno', 1000))
 +
document.getElementById('to2').addEventListener('click', doScrolling.bind(null, '#dos', 1000))
 +
document.getElementById('to3').addEventListener('click', doScrolling.bind(null, '#tres', 1000))
  
 +
</script>
 +
<script>
  
−
<li><a href="https://2020.igem.org/Team:IISER-Pune-India/Notebook">2020 IISER Pune India</a></li>
+
$(window).scroll(function(){
−
<li><a href="https://2020.igem.org/Team:Lund/Notebook">2020 Lund</a></li>
+
                var f =  $(document).scrollTop();
−
<li><a href="https://2020.igem.org/Team:NOVA_LxPortugal/Notebook">2020 NOVA LxPortugal</a></li>
+
 
−
<li><a href="https://2020.igem.org/Team:RDFZ-China/NoteBook">2020 RDFZ China</a></li>
+
 
−
</ul>
+
  if(f > 650){
−
</div>
+
document.querySelector(".menu_lateral").classList.add("menu_lateral_hidden");
−
</div>
+
  }else{
 +
document.querySelector(".menu_lateral").classList.remove("menu_lateral_hidden");
 +
  }
 +
});
 +
</script>
 +
 
 +
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.1.1/pdfobject.js"></script>
 +
 +
 +
<script>
 +
PDFObject.embed("https://static.igem.org/mediawiki/2021/5/5f/T--TecCEM--Week1.pdf", $("#viewer"));
 +
PDFObject.embed("https://static.igem.org/mediawiki/2021/d/dc/T--TecCEM--Week2.pdf", $("#viewer2"));
 +
PDFObject.embed("https://static.igem.org/mediawiki/2021/9/95/T--TecCEM--Week3.pdf", $("#viewer3"));
 +
PDFObject.embed("https://static.igem.org/mediawiki/2021/1/12/T--TecCEM--Week4.pdf", $("#viewer4"));
 +
PDFObject.embed("https://static.igem.org/mediawiki/2021/4/44/T--TecCEM--Week5.pdf", $("#viewer5"));
 +
PDFObject.embed("https://static.igem.org/mediawiki/2021/6/60/T--TecCEM--Week6.pdf", $("#viewer6"));
 +
PDFObject.embed("https://static.igem.org/mediawiki/2021/7/77/T--TecCEM--Week7.pdf", $("#viewer7"));
 +
PDFObject.embed("https://static.igem.org/mediawiki/2021/c/ca/T--TecCEM--Week8.pdf", $("#viewer8"));
 +
PDFObject.embed("https://static.igem.org/mediawiki/2021/e/e9/T--TecCEM--Week9.pdf", $("#viewer9"));
 +
PDFObject.embed("https://static.igem.org/mediawiki/2021/a/a9/T--TecCEM--Week10.pdf", $("#viewer10"));
 +
PDFObject.embed("https://static.igem.org/mediawiki/2021/8/8a/T--TecCEM--Week11.pdf", $("#viewer11"));
 +
PDFObject.embed("https://static.igem.org/mediawiki/2021/a/a6/T--TecCEM--Week12.pdf", $("#viewer12"));
 +
PDFObject.embed("https://static.igem.org/mediawiki/2021/a/a6/T--TecCEM--Week12.pdf", $("#viewer13"));
 +
PDFObject.embed("https://static.igem.org/mediawiki/2021/a/a6/T--TecCEM--Week12.pdf", $("#viewer14"));
 +
PDFObject.embed("https://static.igem.org/mediawiki/2021/f/ff/T--TecCEM--Protocols.pdf", $("#viewer15"));
 +
</script>
 +
<script>
 +
$(window).scroll(function(){
 +
var f = $(document).scrollTop();
 +
        var uno = getElementY("#uno")-62;
 +
var dos = getElementY("#dos")-62;
 +
var tres =  getElementY("#tres")-62;
 +
var cuatro =  getElementY("#cuatro")-62;
 +
var cinco =  getElementY("#cinco")-62;
 +
var seis =  getElementY("#seis")-62;
 +
var siete =  getElementY("#siete")-62;
 +
var ocho =  getElementY("#ocho")-62;
 +
var nueve =  getElementY("#nueve")-62;
 +
var diez =  getElementY("#diez")-62;
 +
var once =  getElementY("#once")-62;
 +
var doce =  getElementY("#doce")-62;
 +
var trece =  getElementY("#trece")-62;
 +
var catorce =  getElementY("#catorce")-62;
 +
 +
               
 +
 
 +
if(f >= uno){
 +
if(f >= dos){
 +
if(f >= tres){
 +
 +
console.log("tercera");  
 +
document.querySelector("#to3").classList.add("sobresalirmenu");
 +
document.querySelector("#to2").classList.remove("sobresalirmenu");
 +
document.querySelector("#to4").classList.remove("sobresalirmenu");
 +
 +
}else{
 +
console.log("Segunda");  
 +
document.querySelector("#to2").classList.add("sobresalirmenu");
 +
document.querySelector("#to3").classList.remove("sobresalirmenu");
 +
document.querySelector("#to1").classList.remove("sobresalirmenu");
 +
}
 +
  }else{
 +
console.log("Primera sección");  
 +
  document.querySelector("#to1").classList.add("sobresalirmenu");
 +
document.querySelector("#to2").classList.remove("sobresalirmenu");
 +
  }
 +
}
 +
if(f>=650){
 +
if(f<=dos){
 +
document.querySelector(".tips").classList.add("tips_hidden");
 +
}else{
 +
document.querySelector(".tips").classList.remove("tips_hidden");
 +
}
 +
}else{
 +
document.querySelector(".tips").classList.remove("tips_hidden");
 +
}
 +
});
 +
 
 +
</script>
 +
<script>
 +
 +
const toggleModal_1 = () => {
 +
document.querySelector("#viewer").classList.toggle("contenido_hidden");
 +
};
 +
const toggleModal_2 = () => {
 +
document.querySelector("#viewer2").classList.toggle("contenido_hidden");
 +
};
 +
const toggleModal_3 = () => {
 +
document.querySelector("#viewer3").classList.toggle("contenido_hidden");
 +
};
 +
const toggleModal_4 = () => {
 +
document.querySelector("#viewer4").classList.toggle("contenido_hidden");
 +
};
 +
const toggleModal_5 = () => {
 +
document.querySelector("#viewer5").classList.toggle("contenido_hidden");
 +
};
 +
    const toggleModal_6 = () => {
 +
document.querySelector("#viewer6").classList.toggle("contenido_hidden");
 +
};
 +
const toggleModal_7 = () => {
 +
document.querySelector("#viewer7").classList.toggle("contenido_hidden");
 +
};
 +
const toggleModal_8 = () => {
 +
document.querySelector("#viewer8").classList.toggle("contenido_hidden");
 +
};
 +
const toggleModal_9 = () => {
 +
document.querySelector("#viewer9").classList.toggle("contenido_hidden");
 +
};
 +
const toggleModal_10 = () => {
 +
document.querySelector("#viewer10").classList.toggle("contenido_hidden");
 +
};
 +
const toggleModal_11 = () => {
 +
document.querySelector("#viewer11").classList.toggle("contenido_hidden");
 +
};
 +
const toggleModal_12 = () => {
 +
document.querySelector("#viewer12").classList.toggle("contenido_hidden");
 +
};
 +
const toggleModal_13 = () => {
 +
document.querySelector("#viewer13").classList.toggle("contenido_hidden");
 +
};
 +
const toggleModal_14 = () => {
 +
document.querySelector("#viewer14").classList.toggle("contenido_hidden");
 +
};
 +
const toggleModal_15 = () => {
 +
document.querySelector("#viewer15").classList.toggle("contenido_hidden");
 +
};
 +
 +
    document.querySelector(".fecha1").addEventListener("click", toggleModal_1);
 +
document.querySelector(".fecha2").addEventListener("click", toggleModal_2);
 +
document.querySelector(".fecha3").addEventListener("click", toggleModal_3);
 +
document.querySelector(".fecha4").addEventListener("click", toggleModal_4);
 +
document.querySelector(".fecha5").addEventListener("click", toggleModal_5);
 +
document.querySelector(".fecha6").addEventListener("click", toggleModal_6);
 +
document.querySelector(".fecha7").addEventListener("click", toggleModal_7);
 +
document.querySelector(".fecha8").addEventListener("click", toggleModal_8);
 +
document.querySelector(".fecha9").addEventListener("click", toggleModal_9);
 +
document.querySelector(".fecha10").addEventListener("click", toggleModal_10);
 +
document.querySelector(".fecha11").addEventListener("click", toggleModal_11);
 +
document.querySelector(".fecha12").addEventListener("click", toggleModal_12);
 +
document.querySelector(".fecha13").addEventListener("click", toggleModal_13);
 +
document.querySelector(".fecha14").addEventListener("click", toggleModal_14);
 +
document.querySelector(".fecha15").addEventListener("click", toggleModal_15);
 +
</script>
  
 
</html>
 
</html>

Revision as of 14:14, 11 October 2021

Untitled Document i

Home

Team

Project

Awards

Human Practices

Parts

Judging form

Untitled Document

Notebook lab

Week 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam rerum quis consequatur voluptatibus praesentium. Ex commodi beatae cum sequi. Impedit repudiandae iste adipisci omnis velit dignissimos ad minus incidunt maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut similique, minus et blanditiis aliquid quidem sunt ipsam. Voluptas voluptatem beatae, tempora deleniti qui earum voluptatibus, cumque natus et ut, pariatur. Click on "week 1" to see the full weekly notebook

Week 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam rerum quis consequatur voluptatibus praesentium. Ex commodi beatae cum sequi. Impedit repudiandae iste adipisci omnis velit dignissimos ad minus incidunt maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut similique, minus et blanditiis aliquid quidem sunt ipsam. Voluptas voluptatem beatae, tempora deleniti qui earum voluptatibus, cumque natus et ut, pariatur.

Week 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam rerum quis consequatur voluptatibus praesentium. Ex commodi beatae cum sequi. Impedit repudiandae iste adipisci omnis velit dignissimos ad minus incidunt maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut similique, minus et blanditiis aliquid quidem sunt ipsam. Voluptas voluptatem beatae, tempora deleniti qui earum voluptatibus, cumque natus et ut, pariatur.

Week 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam rerum quis consequatur voluptatibus praesentium. Ex commodi beatae cum sequi. Impedit repudiandae iste adipisci omnis velit dignissimos ad minus incidunt maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut similique, minus et blanditiis aliquid quidem sunt ipsam. Voluptas voluptatem beatae, tempora deleniti qui earum voluptatibus, cumque natus et ut, pariatur.

Week 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam rerum quis consequatur voluptatibus praesentium. Ex commodi beatae cum sequi. Impedit repudiandae iste adipisci omnis velit dignissimos ad minus incidunt maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut similique, minus et blanditiis aliquid quidem sunt ipsam. Voluptas voluptatem beatae, tempora deleniti qui earum voluptatibus, cumque natus et ut, pariatur.

Week 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam rerum quis consequatur voluptatibus praesentium. Ex commodi beatae cum sequi. Impedit repudiandae iste adipisci omnis velit dignissimos ad minus incidunt maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut similique, minus et blanditiis aliquid quidem sunt ipsam. Voluptas voluptatem beatae, tempora deleniti qui earum voluptatibus, cumque natus et ut, pariatur.

Week 7

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam rerum quis consequatur voluptatibus praesentium. Ex commodi beatae cum sequi. Impedit repudiandae iste adipisci omnis velit dignissimos ad minus incidunt maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut similique, minus et blanditiis aliquid quidem sunt ipsam. Voluptas voluptatem beatae, tempora deleniti qui earum voluptatibus, cumque natus et ut, pariatur.

Week 8

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam rerum quis consequatur voluptatibus praesentium. Ex commodi beatae cum sequi. Impedit repudiandae iste adipisci omnis velit dignissimos ad minus incidunt maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut similique, minus et blanditiis aliquid quidem sunt ipsam. Voluptas voluptatem beatae, tempora deleniti qui earum voluptatibus, cumque natus et ut, pariatur.

Week 9

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam rerum quis consequatur voluptatibus praesentium. Ex commodi beatae cum sequi. Impedit repudiandae iste adipisci omnis velit dignissimos ad minus incidunt maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut similique, minus et blanditiis aliquid quidem sunt ipsam. Voluptas voluptatem beatae, tempora deleniti qui earum voluptatibus, cumque natus et ut, pariatur.

Week 10

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam rerum quis consequatur voluptatibus praesentium. Ex commodi beatae cum sequi. Impedit repudiandae iste adipisci omnis velit dignissimos ad minus incidunt maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut similique, minus et blanditiis aliquid quidem sunt ipsam. Voluptas voluptatem beatae, tempora deleniti qui earum voluptatibus, cumque natus et ut, pariatur.

Week 11

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam rerum quis consequatur voluptatibus praesentium. Ex commodi beatae cum sequi. Impedit repudiandae iste adipisci omnis velit dignissimos ad minus incidunt maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut similique, minus et blanditiis aliquid quidem sunt ipsam. Voluptas voluptatem beatae, tempora deleniti qui earum voluptatibus, cumque natus et ut, pariatur.

Week 12

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam rerum quis consequatur voluptatibus praesentium. Ex commodi beatae cum sequi. Impedit repudiandae iste adipisci omnis velit dignissimos ad minus incidunt maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut similique, minus et blanditiis aliquid quidem sunt ipsam. Voluptas voluptatem beatae, tempora deleniti qui earum voluptatibus, cumque natus et ut, pariatur.

Week 13

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam rerum quis consequatur voluptatibus praesentium. Ex commodi beatae cum sequi. Impedit repudiandae iste adipisci omnis velit dignissimos ad minus incidunt maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut similique, minus et blanditiis aliquid quidem sunt ipsam. Voluptas voluptatem beatae, tempora deleniti qui earum voluptatibus, cumque natus et ut, pariatur.

Week 14

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam rerum quis consequatur voluptatibus praesentium. Ex commodi beatae cum sequi. Impedit repudiandae iste adipisci omnis velit dignissimos ad minus incidunt maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut similique, minus et blanditiis aliquid quidem sunt ipsam. Voluptas voluptatem beatae, tempora deleniti qui earum voluptatibus, cumque natus et ut, pariatur.

Protocols

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam rerum quis consequatur voluptatibus praesentium. Ex commodi beatae cum sequi. Impedit repudiandae iste adipisci omnis velit dignissimos ad minus incidunt maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut similique, minus et blanditiis aliquid quidem sunt ipsam. Voluptas voluptatem beatae, tempora deleniti qui earum voluptatibus, cumque natus et ut, pariatur.

idea

Tips

Click on "week"