(81 intermediate revisions by 2 users not shown) | |||
Line 4: | Line 4: | ||
<style> | <style> | ||
+ | /* Three columns side by side */ | ||
+ | .column { | ||
+ | display:inline-block; | ||
+ | padding: 0 8px; | ||
+ | padding-top:50px; | ||
+ | } | ||
+ | |||
+ | p{ | ||
+ | color: #CACACA; | ||
+ | } | ||
+ | |||
+ | .row{ | ||
+ | padding-top:150px; | ||
+ | padding-bottom:150px; | ||
+ | text-align:center; | ||
+ | /*background-image:url(https://cdn140.picsart.com/236732937035201.gif);*/ | ||
+ | background-image:url(http://45.media.tumblr.com/b9a1e94fda926661e595b6d07f223093/tumblr_nz0l8uXXqE1s2t3cto1_1280.gif); | ||
+ | background-color:#282828; | ||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | + | /* Display the columns below each other instead of side by side on small screens */ | |
− | + | @media screen and (max-width: 650px) { | |
+ | .column { | ||
+ | width: 100%; | ||
+ | display: block; | ||
+ | } | ||
} | } | ||
− | + | /* Add some shadows to create a card effect */ | |
− | + | .card { | |
+ | padding-top:20px; | ||
+ | box-shadow: 0 4px 8px 0; | ||
+ | background-color:#2D2D2D; | ||
+ | width:220px; | ||
} | } | ||
− | + | #bodyContent h2{ | |
− | + | color: #6B76A7; | |
} | } | ||
− | + | /* Some left and right padding inside the container */ | |
− | + | .container { | |
+ | padding: 0 16px; | ||
} | } | ||
− | + | /* Clear floats */ | |
+ | .container::after, .row::after { | ||
+ | content: ""; | ||
+ | clear: both; | ||
+ | display: table; | ||
+ | } | ||
− | + | .title { | |
+ | color: grey; | ||
+ | } | ||
+ | .button { | ||
+ | border: none; | ||
+ | outline: 0; | ||
+ | display: inline-block; | ||
+ | padding: 8px; | ||
+ | color: white; | ||
+ | background-color: #000; | ||
+ | text-align: center; | ||
+ | cursor: pointer; | ||
+ | width: 100%; | ||
} | } | ||
+ | .button:hover { | ||
+ | background-color: #555; | ||
+ | } | ||
+ | |||
+ | .body{ | ||
+ | display: flex; | ||
+ | background-color:#282828; | ||
+ | background-image:url(https://www.colourbox.com/preview/18306009-seamless-pattern-with-chemistry-and-biology-elements.jpg); | ||
+ | } | ||
</style> | </style> | ||
Line 40: | Line 89: | ||
− | |||
− | |||
<body> | <body> | ||
+ | <div class="row"> | ||
− | |||
− | < | + | <div class="column"> |
+ | <div class="card"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/b/bd/T--Melbourne--michelle.png" alt="John" style="width:100px; height:120px;"> | ||
+ | <div class="container"> | ||
+ | <h2>Michelle Oeum</h2> | ||
+ | <p class="title">Team Leader</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
− | < | + | <br> |
− | |||
+ | <div class="column"> | ||
+ | <div class="card"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/2/2f/T--Melbourne--carl.png" alt="Carl Xing" style="width:90px; height:120px; "> | ||
+ | <div class="container"> | ||
+ | <h2>Carl Xing</h2> | ||
+ | <p class="title">Design Team & Wet Lab Team</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
− | < | + | <div class="column"> |
+ | <div class="card"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/3/35/T--Melbourne--naushad.png" alt="Naushad Talati" style="width:95px; height:120px;"> | ||
+ | <div class="container"> | ||
+ | <h2>Naushad Talati</h2> | ||
+ | <p class="title">Design Team & Wet Lab Team</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
− | < | + | <div class="column"> |
+ | <div class="card"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/b/b0/T--Melbourne--vlad.png" alt="Vlad Lungu" style="width:100px; height:120px;"> | ||
+ | <div class="container"> | ||
+ | <h2>Vlad Lungu</h2> | ||
+ | <p class="title">Design Team & Wet Lab Team</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
− | <p class = " | + | <div class="column"> |
+ | <div class="card"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/a/a4/T--Melbourne--paul.png" alt="Paul - Marie Beau" style="width:100px; height:120px;"> | ||
+ | <div class="container"> | ||
+ | <h2>Paul - Marie Beau</h2> | ||
+ | <p class="title">Social Media & Wet Lab Team</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
− | <div class=" | + | <div class="column"> |
− | < | + | <div class="card"> |
− | </p></div> | + | <img src="https://static.igem.org/mediawiki/2018/d/dd/T--Melbourne--caitlin.png" alt="Caitlin Pizer" style="width:100px; height:120px;"> |
+ | <div class="container"> | ||
+ | <h2>Caitlin Pizer</h2> | ||
+ | <p class="title">Social Media & Wet Lab Team</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="column"> | ||
+ | <div class="card"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/0/04/T--Melbourne--emily.png" alt="Emily Chen" style="width:100px; height:120px;"> | ||
+ | <div class="container"> | ||
+ | <h2>Emily Chen</h2> | ||
+ | <p class="title">Sponsrship</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="column"> | ||
+ | <div class="card"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/9/90/T--Melbourne--gavin_w.png" alt="Gavin Eka Cipta" style="width:100px; height:120px;"> | ||
+ | <div class="container"> | ||
+ | <h2>Gavin Eka Cipta</h2> | ||
+ | <p class="title">Website Wiki</p> | ||
+ | <p>Leave me a Wiki Feedback on gcwsite@gmail.com</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="column"> | ||
+ | <div class="card"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/c/c9/T--Melbourne--chris.png" alt="John" style="width:100px; height:120px;"> | ||
+ | <div class="container"> | ||
+ | <h2>Christian Gioia</h2> | ||
+ | <p class="title">Website Wiki</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | </div> | ||
− | |||
</body> | </body> | ||
Latest revision as of 02:06, 18 October 2018
Michelle Oeum
Team Leader
Carl Xing
Design Team & Wet Lab Team
Naushad Talati
Design Team & Wet Lab Team
Vlad Lungu
Design Team & Wet Lab Team
Paul - Marie Beau
Social Media & Wet Lab Team
Caitlin Pizer
Social Media & Wet Lab Team
Emily Chen
Sponsrship
Gavin Eka Cipta
Website Wiki
Leave me a Wiki Feedback on gcwsite@gmail.com
Christian Gioia
Website Wiki