Difference between revisions of "Team:Valencia UPV/OurTeam"
Line 30: | Line 30: | ||
</header> | </header> | ||
− | < | + | <html> |
− | + | <style> | |
+ | |||
+ | .ch-grid { | ||
+ | margin: 0 0 0 0; | ||
+ | padding: 0; | ||
+ | list-style: none; | ||
+ | display: block; | ||
+ | text-align: center; | ||
+ | width: 100%; | ||
+ | height: 15em; | ||
+ | } | ||
+ | |||
+ | .ch-grid:after, | ||
+ | .ch-item:before { | ||
+ | content: ''; | ||
+ | display: table; | ||
+ | } | ||
+ | |||
+ | .ch-grid:after { | ||
+ | clear: both; | ||
+ | } | ||
+ | |||
+ | .ch-grid li { | ||
+ | width: 220px; | ||
+ | height: 220px; | ||
+ | display: inline-block; | ||
+ | margin: 20px; | ||
+ | } | ||
+ | |||
+ | .ch-item { | ||
+ | width: 100%; | ||
+ | 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(http://www.wallspick.com/wp-content/uploads/2014/10/Nice-Cute-Cat-640x400.jpg); | ||
+ | } | ||
+ | |||
+ | .ch-img-2 { | ||
+ | background-image: url(http://www.wallspick.com/wp-content/uploads/2014/10/Nice-Cute-Cat-640x400.jpg); | ||
+ | } | ||
+ | |||
+ | .ch-img-3 { | ||
+ | background-image: url(http://www.wallspick.com/wp-content/uploads/2014/10/Nice-Cute-Cat-640x400.jpg); | ||
+ | } | ||
+ | |||
+ | .ch-img-4 { | ||
+ | background-image: url(https://static.igem.org/mediawiki/2015/3/39/Valencia_upv_littleplant.jpg); | ||
+ | background-repeat: no-repeat; | ||
+ | |||
+ | } | ||
+ | |||
+ | .ch-info h3 { | ||
+ | color: #fff; | ||
+ | text-transform: uppercase; | ||
+ | letter-spacing: 2px; | ||
+ | font-size: 14px; | ||
+ | margin: 0 15px; | ||
+ | padding: 40px 0 0 0; | ||
+ | height: 2.2em; | ||
+ | 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); | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | |||
+ | <section class="main"> | ||
− | < | + | <ul class="ch-grid"> |
− | <h3 style=" | + | |
− | </h3> | + | <li> |
− | </ | + | <div class="ch-item ch-img-2"> |
− | + | <div class="ch-info-wrap"> | |
− | <p> | + | <div class="ch-info"> |
+ | <div class="ch-info-front ch-img-2"></div> | ||
+ | <div class="ch-info-back"> | ||
+ | <h3>Daniel Pellicer</h3> | ||
+ | <p>Minecraft master<a href="http://drbl.in/elmi">View</a></p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li> | ||
+ | <div class="ch-item ch-img-3"> | ||
+ | <div class="ch-info-wrap"> | ||
+ | <div class="ch-info"> | ||
+ | <div class="ch-info-front ch-img-3"></div> | ||
+ | <div class="ch-info-back"> | ||
+ | <h3>Ruben Escriba</h3> | ||
+ | <p>Just Batman<a href="http://drbl.in/dfhn">View</a></p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | </ul> | ||
+ | |||
+ | <ul class="ch-grid"> | ||
+ | |||
+ | <li style="margin-right:100px"> | ||
+ | <div class="ch-item ch-img-1"> | ||
+ | <div class="ch-info-wrap"> | ||
+ | <div class="ch-info"> | ||
+ | <div class="ch-info-front ch-img-1"></div> | ||
+ | <div class="ch-info-back"> | ||
+ | <h3>Pilar Baldominos</h3> | ||
+ | <p>Queen of protoplasts<a href="http://drbl.in/ewUW">View</a></p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <div class="ch-item ch-img-4"> | ||
+ | <div class="ch-info-wrap"> | ||
+ | <div class="ch-info"> | ||
+ | <div class="ch-info-front ch-img-4"></div> | ||
+ | <div class="ch-info-back"> | ||
+ | <h3>Biotechnologists</h3> | ||
+ | <p>Ready to pipette<a href="http://drbl.in/ewUW">View</a></p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li style="margin-left:100px"> | ||
+ | <div class="ch-item ch-img-1"> | ||
+ | <div class="ch-info-wrap"> | ||
+ | <div class="ch-info"> | ||
+ | <div class="ch-info-front ch-img-1"></div> | ||
+ | <div class="ch-info-back"> | ||
+ | <h3>Pilar Baldominos</h3> | ||
+ | <p>Queen of protoplasts<a href="http://drbl.in/ewUW">View</a></p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | </ul> | ||
+ | |||
+ | <ul class="ch-grid"> | ||
+ | <li> | ||
+ | <div class="ch-item ch-img-2"> | ||
+ | <div class="ch-info-wrap"> | ||
+ | <div class="ch-info"> | ||
+ | <div class="ch-info-front ch-img-2"></div> | ||
+ | <div class="ch-info-back"> | ||
+ | <h3>Daniel Pellicer</h3> | ||
+ | <p>Minecraft master<a href="http://drbl.in/elmi">View</a></p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | <li> | ||
+ | <div class="ch-item ch-img-3"> | ||
+ | <div class="ch-info-wrap"> | ||
+ | <div class="ch-info"> | ||
+ | <div class="ch-info-front ch-img-3"></div> | ||
+ | <div class="ch-info-back"> | ||
+ | <h3>Ruben Escriba</h3> | ||
+ | <p>Just Batman<a href="http://drbl.in/dfhn">View</a></p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </li> | ||
+ | </ul> | ||
+ | |||
+ | |||
+ | </section> | ||
+ | |||
+ | </html> | ||
</section> | </section> |
Revision as of 16:25, 13 September 2015