Difference between revisions of "Template:Rotterdam HR/css/team"

Revision as of 14:34, 2 December 2018

/* ------ TEAMLEDEN CSS ------ */ h1 { background: var(--color-primary); color: white; text-align: center; padding: 20px 0; margin: 20px 0; }

.item p { margin: 0; padding: 10px; } .item h3 { margin: 0; } .item ul { margin: 0; padding: 3px 0 3px 10px; list-style-type: none; border-left: black solid 2px; } .team-banner { margin: 20px; } .multiple-items { display: flex; flex-wrap: wrap; width: 90%; justify-content: space-evenly; margin: 0 auto; } .item { transition: 200ms; margin: 10px; padding: 10px; } .item .summary { background: rgba(255, 255, 255, 0.8); display: none; width: 100%; height: 100%; overflow: hidden; } .item .profile-picture { width: 320px; height: 320px; border-radius: 50%; transition: all 200ms, background-image 200ms 500ms; } .item .title { margin: 10px 0; padding: 5px 0; background: rgba(255,255,255,0.7) !important; display: flex; color: black; text-decoration: none; } .item .title .linked-in:hover{ filter: grayscale(50%); } .item .title:hover { text-decoration: underline; } .item .title .linked-in { margin: 5px; } .item:hover { margin: 0; } .item:hover .summary{ display: block; } .item:hover .profile-picture { border-radius: 0%; padding: 10px; } @media (max-width: 860px) { .item .profile-picture { width: 280px; height: 280px; } } @media (max-width: 480px) { .team-banner { display: none; } } /* ------ PROFILE PICTURES ------ */ .item #mei-ju { background: url('https://static.igem.org/mediawiki/2018/4/42/T--Rotterdam_HR--mei-ju.jpeg'); background-size: 100%; } .item #dustin { background: url('https://static.igem.org/mediawiki/2018/3/39/T--Rotterdam_HR--dustin.jpeg'); background-size: 100%; } .item #suzanne { background: url('https://static.igem.org/mediawiki/2018/f/f3/T--Rotterdam_HR--suzanne.jpeg'); background-size: 100%; } .item #randall { background: url('https://static.igem.org/mediawiki/2018/8/80/T--Rotterdam_HR--randall.jpeg'); background-size: 100%; } .item #elise { background: url('https://static.igem.org/mediawiki/2018/e/e0/T--Rotterdam_HR--elise.jpeg'); background-size: 100%; } .item #paul { background: url('https://static.igem.org/mediawiki/2018/c/c0/T--Rotterdam_HR--paul.jpeg'); background-size: 100%; } .item #mike { background: url('https://static.igem.org/mediawiki/2018/f/f6/T--Rotterdam_HR--mike.jpeg'); background-size: 100%; } .item #loraine { background: url('https://static.igem.org/mediawiki/2018/9/99/T--Rotterdam_HR--loraine.jpeg'); background-size: 100%; } .item #tom { background: url('https://static.igem.org/mediawiki/2018/a/a4/T--Rotterdam_HR--tom.jpeg'); background-size: 100%; } .item #rens { background: url('https://static.igem.org/mediawiki/2018/9/98/T--Rotterdam_HR--rens.jpeg'); background-size: 100%; } .item #jos { background: url('https://static.igem.org/mediawiki/2018/5/51/T--Rotterdam_HR--jos.jpeg'); background-size: 100%; } .item #eric { background: url('https://static.igem.org/mediawiki/2018/a/a5/T--Rotterdam_HR--eric.jpeg'); background-size: 100%; } .item #esra { background: url('https://static.igem.org/mediawiki/2018/d/d4/T--Rotterdam_HR--esra.jpeg'); background-size: 100%; }

.item:hover #mei-ju { background: url('https://static.igem.org/mediawiki/2018/a/a5/T--Rotterdam_HR--mei-ju-extra.jpg'); background-size: 100%; } .item:hover #mike { background: url('https://static.igem.org/mediawiki/2018/8/8b/T--Rotterdam_HR--Mike-extra.jpeg'); background-size: 100%; } .item #rens:hover { background: url('https://static.igem.org/mediawiki/2018/c/cc/T--Rotterdam_HR--rens-extra.jpeg'); background-size: 100%; } .item:hover #dustin { background: url('https://static.igem.org/mediawiki/2018/1/12/T--Rotterdam_HR--dustin-extra.jpeg'); background-size: 100%; } .item:hover #suzanne { background: url('https://static.igem.org/mediawiki/2018/8/82/T--Rotterdam_HR--suzanne-extra.jpeg'); background-size: 100%; } .item:hover #randall { background: url('https://static.igem.org/mediawiki/2018/1/10/T--Rotterdam_HR--randall-extra.jpeg'); background-size: 100%; }

.item:hover #loraine { background: url('https://static.igem.org/mediawiki/2018/c/cb/T--Rotterdam_HR--loraine-extra.jpeg'); background-size: 100%; } .item:hover #tom { background: url('https://static.igem.org/mediawiki/2018/9/92/T--Rotterdam_HR--tom-extra.jpeg'); background-size: 100%; } .item:hover #elise { background: url('https://static.igem.org/mediawiki/2018/8/87/T--Rotterdam_HR--elise-extra.jpeg'); background-size: 100%; }