Difference between revisions of "Template:TecCEM/TeamCss"

 
(62 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
 
     <style>
 
     <style>
−
                 .igem_2021_team_content
+
                 @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700&family=Roboto&display=swap');
−
                 .igem_2021_team_column_wrapper
+
                 .blue_body{
−
.blue_body{
+
width: 100vw;
−
background-color: #b1e7ef;
+
                        /*background-color: #b1e7ef;*/
 +
                        background: rgb(255,255,255);
 +
                        //background: linear-gradient(180deg, rgba(177,231,239,1) 39%, rgba(50,113,246,1) 100%);
 
}
 
}
 
.overlay_container{
 
.overlay_container{
Line 11: Line 13:
 
.overlaying_div_top{
 
.overlaying_div_top{
 
position: absolute;
 
position: absolute;
−
/*background-color: green;*/
 
 
}
 
}
 
.wave{
 
.wave{
−
/*background-color: red;*/
 
 
position: absolute;
 
position: absolute;
−
bottom: 0%;
+
bottom: -1%;
 +
left: 0%;
 +
width: 100%;
 +
}
 +
                .island{
 +
position: absolute;
 +
bottom:10%;
 
left: 0%;
 
left: 0%;
 
width: 100%;
 
width: 100%;
Line 22: Line 28:
 
.overlaying_div_bottom{
 
.overlaying_div_bottom{
 
position: relative;
 
position: relative;
−
width: 100%
+
width: 100%;
 
height: 100%;
 
height: 100%;
 
}
 
}
Line 36: Line 42:
 
width: 100%;
 
width: 100%;
 
height: 100%;
 
height: 100%;
−
/*opacity: 0.2;*/
 
 
}
 
}
 
.full_screen_table{
 
.full_screen_table{
 
width: 100%;
 
width: 100%;
 
position: relative;
 
position: relative;
−
border
+
                                background-color: rgb(255,255,255,0.0);
−
/*background-color: red;*/
+
                                /*opacity:0.2;*/
 
}
 
}
−
/*td img{
 
−
display: block;
 
−
margin-left: auto;
 
−
margin-right: auto;
 
−
border-radius: 20%;
 
−
margin: 50px;
 
−
width: 50%;
 
−
}*/
 
 
.td_person_table{
 
.td_person_table{
 
position: relative;
 
position: relative;
−
border: 5px solid #CDECA9;
+
/*border: 5px solid #CDECA9;
−
border-radius: 50px;
+
border-radius: 50px;*/
−
/*background-color: blue;*/
+
 
}
 
}
 
.person_image_div img{
 
.person_image_div img{
−
border-radius: 20%;
+
border-radius: 100%;
−
width: 100%;
+
width: 100%;
 +
                        height: 100%;
 +
                        cursor: pointer;
 +
                        border: solid 5px #04ADD2;
 
}
 
}
 
.person_image_div{
 
.person_image_div{
−
/*background-color: green;
+
width: 200px;
−
width: 50%;*/
+
margin-left: 50%;
 +
margin-top: 15%;
 +
margin-bottom: 15%;
 +
transform: translate(-50%,0%);
 +
}
 +
                .person_name_tb{
 +
                        width: 100%;
 +
                        margin-top: 5%;
 +
margin-bottom: 5%;
 +
 +
                }
 +
                .advisor_image_div img{
 +
border-radius: 20%;
 +
width: 100%;
 +
                        border: solid 5px #85D6A5;
 +
}
 +
.advisor_image_div{
 +
width: 200px;
 +
margin-left: 50%;
 +
margin-top: 15%;
 +
margin-bottom: 15%;
 +
transform: translate(-50%,0%);
 +
}
 +
                .investigator_image_div img{
 +
border-radius: 20%;
 +
width: 100%;
 +
                        border: solid 5px #3A9300
 +
}
 +
.investigator_image_div{
 
width: 200px;
 
width: 200px;
 
margin-left: 50%;
 
margin-left: 50%;
Line 79: Line 106:
 
border-radius: 5%;
 
border-radius: 5%;
 
width: 50%;
 
width: 50%;
−
}
+
}
−
.table_title{
+
              .table_title{
−
color: black;
+
color: #45ACFF;
 
font-size: 50px;
 
font-size: 50px;
 
font-family: sans-serif;
 
font-family: sans-serif;
Line 95: Line 122:
 
animation-name: rise_up;
 
animation-name: rise_up;
 
animation-iteration-count: infinite;
 
animation-iteration-count: infinite;
 +
}
 +
                .image_slider{
 +
                        width:100%;
 +
                }
 +
                .image_slider img{
 +
                        width:60%;
 +
                        margin-left: 50%;
 +
                        margin-top: 10%;
 +
                        margin-bottom: 10%;
 +
  transform: translate(-50%,0%);
 +
                }
 +
                .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
 +
*/
 
}
 
}
  
−
@keyframes rise_up{
+
/*@keyframes rise_up{
 
from{
 
from{
−
bottom: -200%
+
bottom: 10%;
 
}
 
}
 
to{
 
to{
−
bottom: 0%;
+
bottom: 80%;
 
}
 
}
−
}
+
}*/
  
 
     </style>
 
     </style>
 
</html>
 
</html>

Latest revision as of 01:33, 18 October 2021