Difference between revisions of "Team:Valencia UPV/logocolor"
(44 intermediate revisions by 2 users not shown) | |||
Line 340: | Line 340: | ||
/*footer*/ | /*footer*/ | ||
#footb{ | #footb{ | ||
− | background-color: | + | background-color: white; |
} | } | ||
Line 361: | Line 361: | ||
#sponsor { | #sponsor { | ||
− | + | text-align:center; | |
} | } | ||
Line 377: | Line 377: | ||
footer{ | footer{ | ||
− | background-color: | + | background-color: white; |
} | } | ||
Line 480: | Line 480: | ||
background-color: #006600; | background-color: #006600; | ||
} | } | ||
+ | |||
+ | li.button.alt a:visited{ | ||
+ | color: #926D41 | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Home items casi que se quita*/ | ||
ul.img-list { list-style-type: none;margin:0;padding:0;text-align:center; } | ul.img-list { list-style-type: none;margin:0;padding:0;text-align:center; } | ||
ul.img-list li {width:230px;height:180px;margin-right:1em;position:relative;margin-bottom:1.5em;display:inline-block;} | ul.img-list li {width:230px;height:180px;margin-right:1em;position:relative;margin-bottom:1.5em;display:inline-block;} | ||
ul.img-list li:hover span.text-content {opacity:1;} | ul.img-list li:hover span.text-content {opacity:1;} | ||
− | span.text-content {position:absolute;top:0;left:0;background:rgba(0,0,0,0.5);color:white;cursor:pointer;display:table;width:230px;height:180px;opacity:0; | + | span.text-content {position:absolute;top:0;left:0.5em;background:rgba(0,0,0,0.5);color:white;cursor:pointer;display:table;width:230px;height:180px;opacity:0; |
-webkit-transition: opacity 500ms; | -webkit-transition: opacity 500ms; | ||
-moz-transition: opacity 500ms; | -moz-transition: opacity 500ms; | ||
Line 491: | Line 498: | ||
span.text-content span {display:table-cell;vertical-align:middle;text-align:center;} | span.text-content span {display:table-cell;vertical-align:middle;text-align:center;} | ||
+ | /* Beginning of Team Style*/ | ||
+ | .ch-grid:after, | ||
+ | .ch-item:before { | ||
+ | content: ''; | ||
+ | display: table; | ||
+ | } | ||
+ | |||
+ | .ch-grid:after { | ||
+ | clear: both; | ||
+ | } | ||
+ | |||
+ | .ch-grid { | ||
+ | margin: auto; | ||
+ | padding: 0; | ||
+ | list-style: none; | ||
+ | display: block; | ||
+ | text-align: center; | ||
+ | width: 100%; | ||
+ | height: 15em; | ||
+ | } | ||
+ | |||
+ | .ch-grid li { | ||
+ | width: 220px; | ||
+ | height: 220px; | ||
+ | display: inline-block; | ||
+ | margin: 20px; | ||
+ | } | ||
+ | |||
+ | .ch-item { | ||
+ | width: 103%; | ||
+ | height: 100%; | ||
+ | border-radius: 50%; | ||
+ | position: relative; | ||
+ | box-shadow: 0 1px 2px rgba(0,0,0,0.1); | ||
+ | cursor: default; | ||
+ | } | ||
+ | |||
+ | .ch-info-wrap{ | ||
+ | position: absolute; | ||
+ | width: 180px; | ||
+ | height: 180px; | ||
+ | border-radius: 50%; | ||
+ | |||
+ | -webkit-perspective: 800px; | ||
+ | -moz-perspective: 800px; | ||
+ | -o-perspective: 800px; | ||
+ | -ms-perspective: 800px; | ||
+ | perspective: 800px; | ||
+ | |||
+ | -webkit-transition: all 0.4s ease-in-out; | ||
+ | -moz-transition: all 0.4s ease-in-out; | ||
+ | -o-transition: all 0.4s ease-in-out; | ||
+ | -ms-transition: all 0.4s ease-in-out; | ||
+ | transition: all 0.4s ease-in-out; | ||
+ | |||
+ | top: 20px; | ||
+ | left: 20px; | ||
+ | background: #f9f9f9; | ||
+ | box-shadow: | ||
+ | 0 0 0 20px rgba(255,255,255,0.2), | ||
+ | inset 0 0 3px rgba(115,114, 23, 0.8); | ||
+ | |||
+ | } | ||
+ | |||
+ | .ch-info{ | ||
+ | position: absolute; | ||
+ | width: 180px; | ||
+ | height: 180px; | ||
+ | border-radius: 50%; | ||
+ | |||
+ | -webkit-transition: all 0.4s ease-in-out; | ||
+ | -moz-transition: all 0.4s ease-in-out; | ||
+ | -o-transition: all 0.4s ease-in-out; | ||
+ | -ms-transition: all 0.4s ease-in-out; | ||
+ | transition: all 0.4s ease-in-out; | ||
+ | |||
+ | -webkit-transform-style: preserve-3d; | ||
+ | -moz-transform-style: preserve-3d; | ||
+ | -o-transform-style: preserve-3d; | ||
+ | -ms-transform-style: preserve-3d; | ||
+ | transform-style: preserve-3d; | ||
+ | |||
+ | } | ||
+ | |||
+ | .ch-info > div { | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | border-radius: 50%; | ||
+ | background-position: center center; | ||
+ | |||
+ | -webkit-backface-visibility: hidden; | ||
+ | -moz-backface-visibility: hidden; | ||
+ | -o-backface-visibility: hidden; | ||
+ | -ms-backface-visibility: hidden; | ||
+ | backface-visibility: hidden; | ||
+ | } | ||
+ | |||
+ | .ch-info .ch-info-back { | ||
+ | -webkit-transform: rotate3d(0,1,0,180deg); | ||
+ | -moz-transform: rotate3d(0,1,0,180deg); | ||
+ | -o-transform: rotate3d(0,1,0,180deg); | ||
+ | -ms-transform: rotate3d(0,1,0,180deg); | ||
+ | transform: rotate3d(0,1,0,180deg); | ||
+ | |||
+ | background: #000; | ||
+ | } | ||
+ | |||
+ | .ch-img-1 { | ||
+ | background-image: url(https://static.igem.org/mediawiki/2015/3/36/Dani.PNG); | ||
+ | } | ||
+ | |||
+ | .ch-img-2 { | ||
+ | background-image: url(https://static.igem.org/mediawiki/2015/5/50/Niki.jpg); | ||
+ | } | ||
+ | |||
+ | .ch-img-3 { | ||
+ | background-image: url(https://static.igem.org/mediawiki/2015/0/0e/Valencia_upv_ivan.png); | ||
+ | } | ||
+ | |||
+ | |||
+ | .ch-img-4 { | ||
+ | background-image: url(https://static.igem.org/mediawiki/2015/c/c0/Valencia_upv_pilar.png); | ||
+ | background-repeat: no-repeat; | ||
+ | |||
+ | } | ||
+ | |||
+ | .ch-img-5 { | ||
+ | background-image: url(https://static.igem.org/mediawiki/2015/f/f4/Valencia_UPV_Ruben.png); | ||
+ | background-repeat: no-repeat; | ||
+ | |||
+ | } | ||
+ | |||
+ | .ch-img-6 { | ||
+ | background-image: url(https://static.igem.org/mediawiki/2015/5/53/Valencia_upv_alba.png); | ||
+ | background-repeat: no-repeat; | ||
+ | |||
+ | } | ||
+ | |||
+ | .ch-img-7 { | ||
+ | background-image: url(https://static.igem.org/mediawiki/2015/0/04/Agos.PNG); | ||
+ | background-repeat: no-repeat; | ||
+ | |||
+ | } | ||
+ | |||
+ | .ch-img-8 { | ||
+ | background-image: url(https://static.igem.org/mediawiki/2015/f/fa/Alex.jpeg); | ||
+ | background-repeat: no-repeat; | ||
+ | |||
+ | } | ||
+ | |||
+ | .ch-img-9 { | ||
+ | background-image: url(https://static.igem.org/mediawiki/2015/3/3c/Valencia_UPV_Marta.png); | ||
+ | background-repeat: no-repeat; | ||
+ | |||
+ | } | ||
+ | |||
+ | .ch-img-10 { | ||
+ | background-image: url(https://static.igem.org/mediawiki/2015/d/dc/Guillermo.jpg); | ||
+ | background-repeat: no-repeat; | ||
+ | |||
+ | } | ||
+ | |||
+ | .ch-img-11 { | ||
+ | background-image: url(https://static.igem.org/mediawiki/2014/5/52/Profile_Alfredo.jpg); | ||
+ | background-repeat: no-repeat; | ||
+ | |||
+ | } | ||
+ | |||
+ | .ch-img-12 { | ||
+ | background-image: url(http://www.ibmcp.upv.es/FGB/images/people/asun.jpg); | ||
+ | background-repeat: no-repeat; | ||
+ | |||
+ | } | ||
+ | |||
+ | .ch-img-13 { | ||
+ | background-image: url(https://static.igem.org/mediawiki/2014/6/6e/VUPV_Profile_Diego.png); | ||
+ | background-repeat: no-repeat; | ||
+ | |||
+ | } | ||
+ | |||
+ | .ch-img-14 { | ||
+ | background-image: url(https://static.igem.org/mediawiki/2014/4/4c/V_UPV_Alberto_team.png); | ||
+ | background-repeat: no-repeat; | ||
+ | |||
+ | } | ||
+ | |||
+ | .ch-img-15 { | ||
+ | background-image: url(https://static.igem.org/mediawiki/2014/9/9a/Profile_Javier.jpg); | ||
+ | background-repeat: no-repeat; | ||
+ | |||
+ | } | ||
+ | |||
+ | .ch-img-16 { | ||
+ | background-image: url(https://static.igem.org/mediawiki/2014/f/fb/VUPVJPico.jpg); | ||
+ | background-repeat: no-repeat; | ||
+ | |||
+ | } | ||
+ | |||
+ | .ch-info h3 { | ||
+ | color: #fff; | ||
+ | text-transform: uppercase; | ||
+ | letter-spacing: 2px; | ||
+ | font-size: 14px; | ||
+ | margin: 10px 15px; | ||
+ | padding: 40px 0 0 0; | ||
+ | height: initial; | ||
+ | font-family: 'Open Sans', Arial, sans-serif; | ||
+ | text-shadow: | ||
+ | 0 0 1px #fff, | ||
+ | 0 1px 2px rgba(0,0,0,0.3); | ||
+ | } | ||
+ | |||
+ | .ch-info p { | ||
+ | color: #fff; | ||
+ | padding: 10px 5px; | ||
+ | font-style: italic; | ||
+ | margin: 0 30px; | ||
+ | font-size: 12px; | ||
+ | /* border-top: 1px solid rgba(255,255,255,0.5); */ | ||
+ | } | ||
+ | |||
+ | .ch-info p a { | ||
+ | display: block; | ||
+ | color: #fff; | ||
+ | color: rgba(255,255,255,0.7); | ||
+ | font-style: normal; | ||
+ | font-weight: 700; | ||
+ | text-transform: uppercase; | ||
+ | font-size: 9px; | ||
+ | letter-spacing: 1px; | ||
+ | padding-top: 4px; | ||
+ | font-family: 'Open Sans', Arial, sans-serif; | ||
+ | } | ||
+ | |||
+ | .ch-info p a:hover { | ||
+ | color: #fff222; | ||
+ | color: rgba(255,242,34, 0.8); | ||
+ | } | ||
+ | |||
+ | .ch-item:hover .ch-info-wrap { | ||
+ | box-shadow: | ||
+ | 0 0 0 0 rgba(255,255,255,0.8), | ||
+ | inset 0 0 3px rgba(115,114, 23, 0.8); | ||
+ | } | ||
+ | |||
+ | .ch-item:hover .ch-info { | ||
+ | -webkit-transform: rotate3d(0,1,0,-180deg); | ||
+ | -moz-transform: rotate3d(0,1,0,-180deg); | ||
+ | -o-transform: rotate3d(0,1,0,-180deg); | ||
+ | -ms-transform: rotate3d(0,1,0,-180deg); | ||
+ | transform: rotate3d(0,1,0,-180deg); | ||
+ | } | ||
+ | |||
+ | /* Textos desplegables */ | ||
+ | |||
+ | details{ | ||
+ | color: #000; | ||
+ | border: solid 1px #fff; | ||
+ | background: #fff; | ||
+ | } | ||
+ | summary{ | ||
+ | background: #fff; | ||
+ | padding: 10px; | ||
+ | color: 000; | ||
+ | } | ||
+ | |||
+ | .clsPadding{ | ||
+ | padding: 10px; | ||
+ | } | ||
+ | |||
+ | /*fix boxes*/ | ||
+ | ul.actions{ | ||
+ | margin-right:1.4em; | ||
+ | } | ||
+ | a{ | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | /*cambio imagen*/ | ||
+ | #brain{ | ||
+ | margin-left: -36em; | ||
+ | position: absolute; | ||
+ | width: 600px; | ||
+ | height: 337px; | ||
+ | opacity:0; | ||
+ | transition-duration: 1s; | ||
+ | transition-property:opacity; | ||
+ | } | ||
+ | |||
+ | #brain:hover{ | ||
+ | opacity:1; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Scroll IDs*/ | ||
#scroll1{} | #scroll1{} | ||
Line 508: | Line 812: | ||
#scrollsect4{} | #scrollsect4{} | ||
+ | |||
+ | .img-grey { | ||
+ | filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); | ||
+ | filter: gray; | ||
+ | -webkit-filter: grayscale(100%); | ||
+ | } | ||
+ | |||
+ | .img-grey:hover { | ||
+ | filter: none; | ||
+ | -webkit-filter: grayscale(0%); | ||
+ | } | ||
+ | |||
</style> | </style> | ||
</html> | </html> |
Latest revision as of 03:57, 19 September 2015