Difference between revisions of "Team:TecCEM/Collaborations"

Line 39: Line 39:
 
</style>
 
</style>
  
 +
<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>
  
 
<?xml version="1.0"?>
 
<?xml version="1.0"?>
Line 69: Line 335:
  
 
-->
 
-->
−
<div class="world_contenedor">
+
<div class="cuerpo_principal">
 +
 +
<div class="Espacio_menu_lateral">
 +
 +
</div>
 +
 +
<div class="Texto" style="display: flex">
 +
<div class="sem1">
 +
<div class="world_contenedor">
 
<svg baseprofile="tiny" fill="#ececec" height="857" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width=".2" version="1.2" viewbox="0 0 2000 857" width="2000" xmlns="http://www.w3.org/2000/svg">
 
<svg baseprofile="tiny" fill="#ececec" height="857" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width=".2" version="1.2" viewbox="0 0 2000 857" width="2000" xmlns="http://www.w3.org/2000/svg">
 
  <path d="M1383 261.6l1.5 1.8-2.9 0.8-2.4 1.1-5.9 0.8-5.3 1.3-2.4 2.8 1.9 2.7 1.4 3.2-2 2.7 0.8 2.5-0.9 2.3-5.2-0.2 3.1 4.2-3.1 1.7-1.4 3.8 1.1 3.9-1.8 1.8-2.1-0.6-4 0.9-0.2 1.7-4.1 0-2.3 3.7 0.8 5.4-6.6 2.7-3.9-0.6-0.9 1.4-3.4-0.8-5.3 1-9.6-3.3 3.9-5.8-1.1-4.1-4.3-1.1-1.2-4.1-2.7-5.1 1.6-3.5-2.5-1 0.5-4.7 0.6-8 5.9 2.5 3.9-0.9 0.4-2.9 4-0.9 2.6-2-0.2-5.1 4.2-1.3 0.3-2.2 2.9 1.7 1.6 0.2 3 0 4.3 1.4 1.8 0.7 3.4-2 2.1 1.2 0.9-2.9 3.2 0.1 0.6-0.9-0.2-2.6 1.7-2.2 3.3 1.4-0.1 2 1.7 0.3 0.9 5.4 2.7 2.1 1.5-1.4 2.2-0.6 2.5-2.9 3.8 0.5 5.4 0z" id="AF" name="Afghanistan">
 
  <path d="M1383 261.6l1.5 1.8-2.9 0.8-2.4 1.1-5.9 0.8-5.3 1.3-2.4 2.8 1.9 2.7 1.4 3.2-2 2.7 0.8 2.5-0.9 2.3-5.2-0.2 3.1 4.2-3.1 1.7-1.4 3.8 1.1 3.9-1.8 1.8-2.1-0.6-4 0.9-0.2 1.7-4.1 0-2.3 3.7 0.8 5.4-6.6 2.7-3.9-0.6-0.9 1.4-3.4-0.8-5.3 1-9.6-3.3 3.9-5.8-1.1-4.1-4.3-1.1-1.2-4.1-2.7-5.1 1.6-3.5-2.5-1 0.5-4.7 0.6-8 5.9 2.5 3.9-0.9 0.4-2.9 4-0.9 2.6-2-0.2-5.1 4.2-1.3 0.3-2.2 2.9 1.7 1.6 0.2 3 0 4.3 1.4 1.8 0.7 3.4-2 2.1 1.2 0.9-2.9 3.2 0.1 0.6-0.9-0.2-2.6 1.7-2.2 3.3 1.4-0.1 2 1.7 0.3 0.9 5.4 2.7 2.1 1.5-1.4 2.2-0.6 2.5-2.9 3.8 0.5 5.4 0z" id="AF" name="Afghanistan">
Line 1,019: Line 1,293:
 
</svg>
 
</svg>
 
</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>
 +
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 04:35, 13 October 2021

Untitled Document i

Home

Team

Project

Awards

Human Practices

Parts

Judging form

Untitled Document
idea

Tips

Click on "week"