BambooPanda (Talk | contribs) |
BambooPanda (Talk | contribs) |
||
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