Team:Tec-Monterrey/ITESM14 team.css

From 2014.igem.org

(Difference between revisions)
 
(7 intermediate revisions not shown)
Line 1: Line 1:
-
/*Team cards*/
+
#team-members .bussinesscard {
-
#wiki-content #team-members p {
+
-
  padding: 0;
+
-
  margin: 0;
+
   display: inline-block;
   display: inline-block;
 +
  height: 331px;
 +
  width: 500px;
 +
  height: 331px;
 +
  margin-top: 4%;
 +
  margin-left: 2%;
 +
  margin-right: 2%;
 +
  box-shadow: 0px 0px 23px -10px black;
}
}
-
#wiki-content #team-members a {
+
#team-members .nametroduction {
-
  color: #CC004D;
+
   font-size: 2vw;
-
  text-decoration: none;
+
   background-color: rgba(255, 255, 255, 0.8);
-
  -moz-transition: all 0.2s ease-in-out;
+
   color: #ff0060;
-
  -o-transition: all 0.2s ease-in-out;
+
   width: 50%;
-
  -webkit-transition: all 0.2s ease-in-out;
+
-
  transition: all 0.2s ease-in-out;
+
-
}
+
-
#wiki-content #team-members #image-team a {
+
-
   color: #FFD82E;
+
-
  text-decoration: none;
+
-
}
+
-
#wiki-content #team-members a:hover {
+
-
   color: #B20043;
+
-
}
+
-
#wiki-content #team-members #image-team a:hover {
+
-
  color: #F4FF3B;
+
-
}
+
-
#wiki-content #team-members hr {
+
-
border-top: 2px solid #eee;
+
-
}
+
-
#wiki-content #team-members {
+
-
margin: 5%;
+
-
}
+
-
#wiki-content #team-members .bussinesscard{
+
-
height:400px;
+
-
width:500px;
+
-
overflow:hidden;
+
-
position: static;
+
-
margin: 0% 0 1% 1%;
+
-
box-shadow: 0px 0px 43px -10px black;
+
-
display: inline-block;
+
-
@include translate(-50%,-50%);
+
-
}
+
-
#wiki-content #team-members #femsa-btc .bussinesscard{
+
-
  width:99%; 
+
-
  height: 500px;
+
-
  overflow:hidden;
+
-
  position: static;
+
-
  margin: 0% 0 1% 1%;
+
-
  box-shadow: 0px 0px 43px -10px black;
+
-
  left: 50%;
+
-
  top: 50%;
+
-
  display: inline-block;
+
-
  @include translate(-50%,-50%); 
+
-
}
+
-
#wiki-content #team-members #team-assistants .bussinesscard{
+
-
  height:400px;
+
-
  width:500px; 
+
-
  position: static;
+
-
  margin: 0% 0 1% 1%;
+
-
  box-shadow: 0px 0px 43px -10px black;
+
-
  display: inline-block;
+
-
}
+
-
#wiki-content #team-members .bussinesscard .flip {
+
-
  -moz-transition: all 0.5s ease;
+
-
  -o-transition: all 0.5s ease;
+
-
  -webkit-transition: all 0.5s ease;
+
-
  transition: all 0.5s ease;
+
-
}
+
-
#wiki-content #team-members .bussinesscard .front {
+
-
  z-index: 11;
+
-
  width: 100%;
+
-
  position: static;
+
-
  height: 100%;
+
-
  background: #fff;
+
-
  box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.45);
+
-
   -moz-transform: scale(1, 1);
+
-
  -ms-transform: scale(1, 1);
+
-
  -webkit-transform: scale(1, 1);
+
-
  transform: scale(1, 1);
+
-
  -moz-transition: all 0.6s ease;
+
-
  -o-transition: all 0.6s ease;
+
-
  -webkit-transition: all 0.6s ease;
+
-
  transition: all 0.6s ease;
+
-
}
+
-
#wiki-content #team-members .bussinesscard .front .top {
+
-
  height: 50%;
+
-
  box-shadow: 0px 0px 20px #C7004B;
+
-
  background: #ff0060;
+
-
}
+
-
#wiki-content #team-members #femsa-btc .bussinesscard .front .top {
+
-
  height: 70%;
+
-
  box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
+
-
  background: #ff0060;
+
-
}
+
-
#wiki-content #team-members #team-assistants .bussinesscard .front .top {
+
-
  height: 50%;
+
-
  box-shadow: 0px 0px 20px #C7004B;
+
-
}
+
-
#wiki-content #team-members #image-team .bussinesscard .front .top {
+
-
  box-shadow: 0px 0px 20px #626618;
+
-
  background: #F4FF3B;
+
-
}
+
-
#wiki-content #team-members #team-assistants .bussinesscard .front .top {
+
-
  box-shadow: 0px 0px 20px #626618;
+
-
  background: #36d8c5;
+
-
}
+
-
#wiki-content #team-members .bussinesscard .front .top:after {
+
-
  position: absolute;
+
-
  content: '';
+
-
  pointer-events: none;
+
-
}
+
-
#wiki-content #team-members .bussinesscard .front .top:after {
+
-
  left: 50%;
+
-
   width: 4em;
+
-
  height: 4em;
+
-
  -moz-transform: translateX(-50%) rotate(45deg);
+
-
  -ms-transform: translateX(-50%) rotate(45deg);
+
-
  -webkit-transform: translateX(-50%) rotate(45deg);
+
-
  transform: translateX(-50%) rotate(45deg);
+
-
  bottom: 12.3em;
+
-
  z-index: 10;
+
-
  background: inherit;
+
-
  background: #ff0060;
+
-
}
+
-
#wiki-content #team-members #femsa-btc .bussinesscard .front .top:after {
+
-
  left: 50%;
+
-
  width: 4em;
+
-
  height: 4em;
+
-
  -moz-transform: translateX(-50%) rotate(45deg);
+
-
  -ms-transform: translateX(-50%) rotate(45deg);
+
-
  -webkit-transform: translateX(-50%) rotate(45deg);
+
-
  transform: translateX(-50%) rotate(45deg);
+
-
  bottom: 12.3em;
+
-
  z-index: 10;
+
-
  background: inherit;
+
-
  background: #ff0060;
+
-
}
+
-
#wiki-content #team-members #image-team .bussinesscard .front .top:after {
+
-
  background: #F4FF3B;
+
-
}
+
-
#wiki-content #team-members #team-assistants .bussinesscard .front .top:after {
+
-
  background: #36d8c5;
+
-
}
+
-
#wiki-content #team-members .bussinesscard .front .top .logo {
+
-
  display: inline-block;
+
-
  color: #fff;
+
-
  z-index: 11;
+
-
  padding: .16em;
+
   position: relative;
   position: relative;
-
   pointer-events: none;
+
   top: 2%;
-
   -moz-transform: translateX(-50%);
+
   border-top-right-radius:0.2em;
-
  -ms-transform: translateX(-50%);
+
   border-bottom-right-radius:0.2em;
-
   -webkit-transform: translateX(-50%);
+
-
  transform: translateX(-50%);
+
-
  left: 50%;
+
-
  margin-top: .4em;
+
-
  font-size: 4em;
+
}
}
-
#wiki-content #team-members .bussinesscard .front .top .logo img{
+
#team-members .information_member{
-
  height: 2.5em;
+
   color:C7004B;
-
  width: 2.5em;
+
   background-color: #ffffff;
-
  position: relative;
+
   width: 75%;
-
  pointer-events: none;
+
-
  -moz-transform: translateX(-50%);
+
-
  -ms-transform: translateX(-50%);
+
-
  -webkit-transform: translateX(-50%);
+
-
  transform: translateX(-50%);
+
-
  left: 50%;
+
-
}
+
-
#wiki-content #team-members #team-assistants .logo img{
+
-
  height: 2.5em;
+
-
  width: 2.5em;
+
-
  position: relative;
+
-
  left: 50%;
+
-
}
+
-
#wiki-content #team-members .bussinesscard .front .nametroduction {
+
-
  margin-top: 2.4em;
+
-
  -moz-transform: translateY(0);
+
-
  -ms-transform: translateY(0);
+
-
  -webkit-transform: translateY(0);
+
-
  transform: translateY(0);
+
-
  z-index: 8;
+
-
  font-weight: 300;
+
-
}
+
-
#wiki-content #team-members #femsa-btc .bussinesscard .front .nametroduction {
+
-
  margin-top: 1%;
+
-
  -moz-transform: translateY(0);
+
-
  -ms-transform: translateY(0);
+
-
  -webkit-transform: translateY(0);
+
-
  transform: translateY(0);
+
-
  z-index: 8;
+
-
  font-weight: 300;
+
-
}
+
-
#wiki-content #team-members .bussinesscard .front .name {
+
-
   color: #CC004D;
+
-
   font-weight: 400;
+
-
  font-size: 4.9em;
+
-
  text-align: center;
+
-
  position: relative;
+
-
}
+
-
#wiki-content #team-members #team-assistants .bussinesscard .front .top .nametroduction .name {
+
-
  color: #36d8c5;
+
-
  font-weight: 400;
+
-
  font-size: 4.9em;
+
-
  text-align: center;
+
-
  position: relative;
+
-
  top:25px;
+
-
}
+
-
#wiki-content #team-members #femsa-btc .bussinesscard .front .name {
+
-
  color: #0039a6;
+
-
}
+
-
#wiki-content #team-members #image-team .bussinesscard .front .name {
+
-
  color: #FFD82E;
+
-
}
+
-
#wiki-content #team-members .bussinesscard .front .name:after {
+
-
  content: '';
+
-
  position: static;
+
-
  top: 1.3em;
+
-
   width: 20%;
+
-
  left: 40%;
+
-
  right: 40%;
+
-
  height: 1px;
+
-
  background: #CC004D;
+
-
}
+
-
#wiki-content #team-members #image-team .bussinesscard .front .name:after {
+
-
  background: #FFD82E;
+
-
}
+
-
#wiki-content #team-members .bussinesscard .front .introduction {
+
-
  text-align: center;
+
-
  color: #CC004D;
+
-
  font-style: italic;
+
-
  font-size: 1.5em;
+
-
}
+
-
#wiki-content #team-members #team-assistants .bussinesscard .front .top .nametroduction .introduction {
+
-
  color: #36d8c5;
+
-
  font-style: italic;
+
-
  font-size: 1.5em;
+
-
  position: relative;
+
   margin-top: 5%;
   margin-top: 5%;
 +
  border-top-right-radius:0.5em;
 +
  border-bottom-right-radius:0.5em;
 +
  border-top-left-radius:0.5em;
 +
  border-bottom-left-radius:0.5em;
}
}
-
#wiki-content #team-members #team-assistants .bussinesscard .front .top .nametroduction .mayor span{
+
#team-members .nametroduction .name {
-
   color: #36d8c5;
+
   margin-left: 2%;
-
   font-size: 1.5em;
+
   margin-right: 2%;
-
  display: inline-block;
+
}
}
-
#wiki-content #team-members #team-assistants .bussinesscard .front .top .nametroduction .mayor{
+
#team-members .introduction {
-
  left: 30px;
+
-
  position: relative;
+
-
  margin-left: 31.5%;
+
   font-style: italic;
   font-style: italic;
 +
  font-size: 1.1vw;
 +
  padding-top: 3%;
 +
  padding-bottom: 3%;
 +
  margin-left: 2%;
 +
  text-align: left;
}
}
-
#wiki-content #team-members #image-team .bussinesscard .front .introduction {
+
 
-
   color: #FFD82E;
+
#team-members .description_team_members{
 +
  font-size: 1.3vw;
 +
  line-height: 1.2em;
 +
   margin: 3% 3% 3% 2%;
 +
  text-align: left;
}
}
-
#wiki-content #team-members .bussinesscard .front .description p{
+
#team-members .description_team_members p{
-
  color: #CC004D;
+
   font-size: 1.3vw;
-
  text-align: justify;
+
   margin: 5px;
-
  margin-left: 1em;
+
-
  margin-right: 1em;
+
-
  font-weight: 300;
+
-
   font-size: 2em;
+
-
   -moz-transform: translateY(400%);
+
-
  -ms-transform: translateY(400%);
+
-
  -webkit-transform: translateY(400%);
+
-
  transform: translateY(400%);
+
}
}
-
#wiki-content #team-members #image-team .bussinesscard .front .description p{
+
#team-members .contact_invisible{
-
   color: #FFD82E;
+
   padding-bottom: 3%;
 +
  margin-left: 2%;
 +
  font-size: 1.1vw;
 +
  text-align: left;
}
}
-
#wiki-content #team-members .bussinesscard .front .contact {
+
#team-members .contact_visible{
-
   color: #CC004D;
+
   padding-bottom: 3%;
-
   margin-left: 2em;
+
   margin-left: 2%;
-
  font-weight: 300;
+
   font-size: 1.1vw;
-
   font-size: 1.2em;
+
   text-align: left;
-
   -moz-transform: translateY(400%);
+
-
  -ms-transform: translateY(400%);
+
-
  -webkit-transform: translateY(400%);
+
-
  transform: translateY(400%);
+
}
}
-
#wiki-content #team-members .bussinesscard .front .contact span {
+
#team-members .contact a{
-
   color: #CC004D;
+
   margin-left: 2%;
-
  font-size: 1.7em;
+
   color: #C7004B;
-
   width: 1.3em;
+
-
  display: inline-block;
+
}
}
-
#wiki-content #team-members #image-team .bussinesscard .front .contact span {
+
#team-members .contact a:hover{
-
  color: #FFD82E;
+
   color: #ff0060;
-
}
+
-
#wiki-content #team-members .bussinesscard .front .contact a {
+
-
  position: relative;
+
-
  bottom: .24em;
+
-
}
+
-
#wiki-content #team-members .bussinesscard .back {
+
-
   width: 100%;
+
-
  height: 100%;
+
-
  background: #fff;
+
-
  backface-visibility: hidden;
+
-
  position: static;
+
}
}
-
#wiki-content #team-members .tooltip {
 
-
  position: static;
 
-
  left: 1em;
 
-
  bottom: 1em;
 
-
  color: #fff;
 
-
  font-weight: 300;
 
-
  padding: .4em;
 
-
  background: #36d8c5;
 
-
}
 
-
/* HOVER ANIMATIONS */
+
.information_member{
-
#wiki-content #team-members .front .top .logo, .front .top, .front .top:after, .front .nametroduction, .front .contact, .front .description p {
+
   position: absolute;
-
   -moz-transition: 0.7s all ease-in-out;
+
   /*top: 0;*/
-
   -o-transition: 0.7s all ease-in-out;
+
   width: 50px;
-
  -webkit-transition: 0.7s all ease-in-out;
+
   opacity: 0;
-
  transition: 0.7s all ease-in-out;
+
   -webkit-transition: opacity 500ms;
-
}
+
   -moz-transition: opacity 500ms;
-
 
+
   -o-transition: opacity 500ms;
-
#wiki-content #team-members .flip:hover .front .top .logo {
+
   transition: opacity 500ms;
-
  margin-top: .28em;
+
-
  font-size: 1.3em;
+
-
  margin-left: .15em;
+
-
  -moz-transform: translateX(0);
+
-
   -ms-transform: translateX(0);
+
-
   -webkit-transform: translateX(0);
+
-
  transform: translateX(0);
+
-
  left: 0;
+
-
}
+
-
 
+
-
#wiki-content #team-members .flip:hover .front .top {
+
-
  height: 15%;
+
-
}
+
-
#wiki-content #team-members .flip:hover .front .top:after {
+
-
  width: 2em;
+
-
  height: 2em;
+
-
  bottom: 23.5em;
+
-
}
+
-
 
+
-
#wiki-content #team-members .flip:hover .front .nametroduction {
+
-
  -moz-transform: translateY(400%);
+
-
  -ms-transform: translateY(400%);
+
-
   -webkit-transform: translateY(400%);
+
-
  transform: translateY(400%);
+
-
}
+
-
 
+
-
#wiki-content #team-members .flip:hover .front .contact {
+
-
   -moz-transform: translateY(-90%);
+
-
   -ms-transform: translateY(-90%);
+
-
   -webkit-transform: translateY(-90%);
+
-
  transform: translateY(-90%);
+
}
}
-
#wiki-content #team-members .flip:hover .front .description p{
+
.information_member:hover {
-
   -moz-transform: translateY(-60%);
+
   opacity: 0.8;
-
  -ms-transform: translateY(-60%);
+
-
  -webkit-transform: translateY(-60%);
+
-
  transform: translateY(-60%);
+
}
}

Latest revision as of 03:01, 18 October 2014

  1. team-members .bussinesscard { 
 display: inline-block;
 height: 331px;
 width: 500px;
 height: 331px;
 margin-top: 4%;
 margin-left: 2%;
 margin-right: 2%;
 box-shadow: 0px 0px 23px -10px black;

}

  1. team-members .nametroduction { 
 font-size: 2vw;
 background-color: rgba(255, 255, 255, 0.8);
 color: #ff0060;
 width: 50%;
 position: relative;
 top: 2%;
 border-top-right-radius:0.2em;
 border-bottom-right-radius:0.2em;

}

  1. team-members .information_member{ 
 color:C7004B;
 background-color: #ffffff;
 width: 75%;
 margin-top: 5%;
 border-top-right-radius:0.5em;
 border-bottom-right-radius:0.5em;
 border-top-left-radius:0.5em;
 border-bottom-left-radius:0.5em;

}

  1. team-members .nametroduction .name { 
 margin-left: 2%;
 margin-right: 2%;

}

  1. team-members .introduction { 
 font-style: italic;
 font-size: 1.1vw;
 padding-top: 3%;
 padding-bottom: 3%;
 margin-left: 2%;
 text-align: left;

}

  1. team-members .description_team_members{ 
 font-size: 1.3vw;
 line-height: 1.2em;
 margin: 3% 3% 3% 2%;
 text-align: left;

}

  1. team-members .description_team_members p{ 
 font-size: 1.3vw;
 margin: 5px;

}

  1. team-members .contact_invisible{ 
 padding-bottom: 3%;
 margin-left: 2%;
 font-size: 1.1vw;
 text-align: left;

}

  1. team-members .contact_visible{ 
 padding-bottom: 3%;
 margin-left: 2%;
 font-size: 1.1vw;
 text-align: left;

}

  1. team-members .contact a{ 
 margin-left: 2%;
 color: #C7004B;

}

  1. team-members .contact a:hover{ 
 color: #ff0060;

}


.information_member{ 

 position: absolute;
 /*top: 0;*/
 width: 50px;
 opacity: 0;
 -webkit-transition: opacity 500ms;
 -moz-transition: opacity 500ms;
 -o-transition: opacity 500ms;
 transition: opacity 500ms;

} .information_member:hover { 

 opacity: 0.8;

}

Retrieved from "http://2014.igem.org/Team:Tec-Monterrey/ITESM14_team.css"