Difference between revisions of "Team:NUS Singapore-A/Jamboree"

 
Line 10: Line 10:
  
 
</head>
 
</head>
 +
 +
<style>
 +
 +
* {
 +
    box-sizing: border-box;
 +
}
 +
 +
body {
 +
    margin: 0;
 +
    font-family: Arial;
 +
}
 +
 +
.header {
 +
    text-align: center;
 +
    padding: 32px;
 +
}
 +
 +
.row {
 +
    display: -ms-flexbox; /* IE10 */
 +
    display: flex;
 +
    -ms-flex-wrap: wrap; /* IE10 */
 +
    flex-wrap: wrap;
 +
    padding: 0 4px;
 +
}
 +
 +
/* Create three equal columns that sits next to each other */
 +
.column {
 +
    -ms-flex: 50%; /* IE10 */
 +
    flex: 50%;
 +
    max-width: 50%;
 +
    padding: 0 8px;
 +
}
 +
 +
.column img {
 +
    border-radius: 2px;
 +
    margin-top: 14px;
 +
    vertical-align: middle;
 +
    cursor: pointer;
 +
    transition: 0.3s;
 +
}
 +
 +
.column img:hover {opacity: 0.8;}
 +
 +
/* Responsive layout - makes a two column-layout instead of four columns */
 +
@media screen and (max-width: 800px) {
 +
    .column {
 +
        -ms-flex: 100%;
 +
        flex: 100%;
 +
        max-width: 100%;
 +
    }
 +
}
 +
 +
<!--/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
 +
@media screen and (max-width: 600px) {
 +
    .column {
 +
        -ms-flex: 100%;
 +
        flex: 100%;
 +
        max-width: 100%;
 +
    }
 +
}
 +
-->
 +
 +
 +
</style>
  
 
<body>
 
<body>
Line 15: Line 79:
 
<div class="all-wrapper">
 
<div class="all-wrapper">
 
<div class="content-wrapper">  
 
<div class="content-wrapper">  
 +
 +
 +
 +
<img src="https://static.igem.org/mediawiki/2018/c/cc/T--NUS_Singapore-A--Group_Photo.jpeg"  style="width:90%">
 +
 +
<!-- Photo Grid -->
 +
<div class="row">
 +
  <div class="column">
 +
 +
  </div>
 +
 +
  <div class="column">
 +
 +
  </div>
 +
</div>
  
  

Latest revision as of 11:44, 14 December 2018

CONNECT WITH US