BambooPanda (Talk | contribs) (Created page with "<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <...") |
BambooPanda (Talk | contribs) |
||
(One intermediate revision by the same user not shown) | |||
Line 1: | Line 1: | ||
+ | {{NUS_Singapore-A}} | ||
+ | {{:Team:NUS_Singapore-A/Templates/Style}} | ||
+ | |||
<html> | <html> | ||
+ | |||
<head> | <head> | ||
− | + | <meta charset="utf-8"> | |
− | + | <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
− | + | <meta name="viewport" content="width=device-width, initial-scale=1"> | |
− | |||
− | |||
− | |||
− | |||
− | |||
</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> | ||
+ | <div class="inner-border" style="border-top: none;"> | ||
+ | <div class="all-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> | ||
+ | |||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </body> | ||
</html> | </html> | ||
+ | {{:Team:NUS_Singapore-A/Templates/Footer}} |
Latest revision as of 11:44, 14 December 2018
CONNECT WITH US