"
Team:IIT Madras/Team
From 2013.igem.org
(Difference between revisions)
JunaidBabu (Talk | contribs) (Replaced content with "{{:Team:IIT Madras/Templates/head}}<html> Team here </html>{{:Team:IIT Madras/Templates/foot}}") |
JunaidBabu (Talk | contribs) |
||
| Line 1: | Line 1: | ||
{{:Team:IIT Madras/Templates/head}}<html> | {{:Team:IIT Madras/Templates/head}}<html> | ||
| - | + | <div id="main" role="main" class="homepage"> | |
| + | |||
| + | <div class="row hover-slides clearfix"> | ||
| + | <ul class="ch-grid"> | ||
| + | <li> | ||
| + | <div class="ch-item ch-img-1"> | ||
| + | <div class="ch-info"> | ||
| + | <h3>Nandita Damaraju</h3> | ||
| + | <p><a href="#"></a></p> | ||
| + | </div> | ||
| + | </div> | ||
| + | </li> | ||
| + | <li> | ||
| + | <div class="ch-item ch-img-2"> | ||
| + | <div class="ch-info"> | ||
| + | <h3>Mitan Sutradhar</h3> | ||
| + | |||
| + | </div> | ||
| + | </div> | ||
| + | </li> | ||
| + | <li> | ||
| + | <div class="ch-item ch-img-3"> | ||
| + | <div class="ch-info"> | ||
| + | <h3>Rohan Bendre</h3> | ||
| + | |||
| + | </div> | ||
| + | </div> | ||
| + | </li> | ||
| + | <li> | ||
| + | <div class="ch-item ch-img-4"> | ||
| + | <div class="ch-info"> | ||
| + | <h3>Aman Kumar</h3> | ||
| + | <p><a href="#"></a></p> | ||
| + | </div> | ||
| + | </div> | ||
| + | </li> | ||
| + | <li> | ||
| + | <div class="ch-item ch-img-5"> | ||
| + | <div class="ch-info"> | ||
| + | <h3>Nishita Mohan</h3> | ||
| + | |||
| + | </div> | ||
| + | </div> | ||
| + | </li> | ||
| + | <li> | ||
| + | <div class="ch-item ch-img-6"> | ||
| + | <div class="ch-info"> | ||
| + | <h3>Mayank Choudhary</h3> | ||
| + | |||
| + | </div> | ||
| + | </div> | ||
| + | </li> | ||
| + | <li> | ||
| + | <div class="ch-item ch-img-7"> | ||
| + | <div class="ch-info"> | ||
| + | <h3>Kanishk Waghmare</h3> | ||
| + | <p><a href="#"></a></p> | ||
| + | </div> | ||
| + | </div> | ||
| + | </li> | ||
| + | <li> | ||
| + | <div class="ch-item ch-img-8"> | ||
| + | <div class="ch-info"> | ||
| + | <h3>Tolkappiyan Premkumar</h3> | ||
| + | |||
| + | </div> | ||
| + | </div> | ||
| + | </li> | ||
| + | <li> | ||
| + | <div class="ch-item ch-img-9"> | ||
| + | <div class="ch-info"> | ||
| + | <h3>Namit Holay</h3> | ||
| + | |||
| + | </div> | ||
| + | </div> | ||
| + | </li> | ||
| + | </ul> | ||
| + | <style type="text/css"> | ||
| + | .ch-grid { | ||
| + | margin: 20px 0 0 0; | ||
| + | padding: 0; | ||
| + | list-style: none; | ||
| + | display: block; | ||
| + | text-align: center; | ||
| + | width: 100%; | ||
| + | } | ||
| + | |||
| + | .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%; | ||
| + | overflow: hidden; | ||
| + | position: relative; | ||
| + | cursor: default; | ||
| + | box-shadow: | ||
| + | inset 0 0 0 16px rgba(255,255,255,0.6), | ||
| + | 0 1px 2px rgba(0,0,0,0.1); | ||
| + | transition: all 0.4s ease-in-out; | ||
| + | } | ||
| + | |||
| + | .ch-img-1 { | ||
| + | background-image: url(https://static.igem.org/mediawiki/2013/thumb/3/3a/Nandita.jpg/377px-Nandita.jpg); | ||
| + | background-size: cover; | ||
| + | background-repeat: no-repeat; | ||
| + | background-position:90%; | ||
| + | } | ||
| + | |||
| + | .ch-img-2 { | ||
| + | background-image: url(https://static.igem.org/mediawiki/2013/thumb/5/59/Mitan.jpg/569px-Mitan.jpg); | ||
| + | background-size: cover; | ||
| + | background-repeat: no-repeat; | ||
| + | background-position:90%; | ||
| + | } | ||
| + | |||
| + | .ch-img-3 { | ||
| + | background-image: url(https://static.igem.org/mediawiki/2013/thumb/d/de/Rohan.jpg/450px-Rohan.jpg); | ||
| + | background-size: cover; | ||
| + | background-repeat: no-repeat; | ||
| + | background-position:90%; | ||
| + | } | ||
| + | .ch-img-4 { | ||
| + | background-image: url(https://static.igem.org/mediawiki/2013/5/5b/Aman.jpg); | ||
| + | background-size: cover; | ||
| + | background-repeat: no-repeat; | ||
| + | background-position:90%; | ||
| + | } | ||
| + | .ch-img-5 { | ||
| + | background-image: url(https://static.igem.org/mediawiki/2013/f/fc/Nishita.jpg); | ||
| + | background-size: cover; | ||
| + | background-repeat: no-repeat; | ||
| + | background-position:90%; | ||
| + | } | ||
| + | .ch-img-6 { | ||
| + | background-image: url(https://static.igem.org/mediawiki/2013/thumb/c/cf/Mayank.jpg/800px-Mayank.jpg); | ||
| + | background-size: cover; | ||
| + | background-repeat: no-repeat; | ||
| + | background-position:90% 2%; | ||
| + | } | ||
| + | .ch-img-7 { | ||
| + | background-image: url(); | ||
| + | background-size: cover; | ||
| + | background-repeat: no-repeat; | ||
| + | background-position:90%; | ||
| + | } | ||
| + | .ch-img-8 { | ||
| + | background-image: url(); | ||
| + | background-size: cover; | ||
| + | background-repeat: no-repeat; | ||
| + | background-position:90%; | ||
| + | } | ||
| + | .ch-img-9 { | ||
| + | background-image: url(https://static.igem.org/mediawiki/2013/thumb/3/31/Namit.jpg/395px-Namit.jpg); | ||
| + | background-size: cover; | ||
| + | background-repeat: no-repeat; | ||
| + | background-position:90%; | ||
| + | } | ||
| + | |||
| + | .ch-info { | ||
| + | position: absolute; | ||
| + | background: rgba(63,147,147, 0.8); | ||
| + | width: inherit; | ||
| + | height: inherit; | ||
| + | border-radius: 50%; | ||
| + | overflow: hidden; | ||
| + | opacity: 0; | ||
| + | transition: all 0.4s ease-in-out; | ||
| + | transform: scale(0); | ||
| + | } | ||
| + | .ch-info h3 { | ||
| + | color: #fff; | ||
| + | text-transform: uppercase; | ||
| + | letter-spacing: 2px; | ||
| + | font-size: 22px; | ||
| + | margin: 0 30px; | ||
| + | padding: 45px 0 0 0; | ||
| + | height: 140px; | ||
| + | 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); | ||
| + | opacity: 0; | ||
| + | transition: all 1s ease-in-out 0.4s; | ||
| + | } | ||
| + | .ch-info p a { | ||
| + | display: block; | ||
| + | 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: rgba(255,242,34, 0.8); | ||
| + | } | ||
| + | .ch-item:hover { | ||
| + | box-shadow: | ||
| + | inset 0 0 0 1px rgba(255,255,255,0.1), | ||
| + | 0 1px 2px rgba(0,0,0,0.1); | ||
| + | } | ||
| + | .ch-item:hover .ch-info { | ||
| + | transform: scale(1); | ||
| + | opacity: 1; | ||
| + | } | ||
| + | .ch-item:hover .ch-info p { | ||
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | </style> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
</html>{{:Team:IIT Madras/Templates/foot}} | </html>{{:Team:IIT Madras/Templates/foot}} | ||
Revision as of 21:40, 16 September 2013
