Difference between revisions of "Team:UNOTT/Design"

(Blanked the page)
Line 1: Line 1:
 +
{{:Team:UNOTT/Template/NavBarTest}}
 +
<html>
  
 +
<head>
 +
<style>
 +
html {
 +
  font-size:62.5%;
 +
}
 +
body {
 +
  height: 100%
 +
  margin-top:100px;
 +
  font-size:1.4rem;
 +
  font-family:arial;
 +
  background-color:#dd;
 +
}
 +
 +
#icons {
 +
  max-width:96rem;
 +
  width:100%;
 +
  min-height:200px;
 +
  height:auto;
 +
  margin:0 auto;
 +
  background-color:white;
 +
  box-sizing:border-box;
 +
  padding:0;
 +
  display:-webkit-flex;
 +
  display:flex;
 +
  -webkit-align-items:center;
 +
  align-items:center;
 +
  -webkit-justify-content:center;
 +
  justify-content:center;
 +
  -webkit-flex-direction:row;
 +
  flex-direction:row;
 +
  -webkit-flex-wrap:wrap;
 +
  flex-wrap:wrap;
 +
  -webkit-align-content:flex-end;
 +
  align-content:flex-end;
 +
}
 +
figure {
 +
  width:12.5rem;
 +
  height:12.5rem;
 +
  display:block;
 +
  margin:0.5rem 1rem 4rem 0.5rem;
 +
  padding:0;
 +
  box-sizing:content-box;
 +
  color:black;
 +
}
 +
figure img {
 +
  -webkit-border-radius:50%;
 +
  -moz-border-radius:50%; 
 +
  border-radius:50%;
 +
}
 +
#icons figure img {
 +
  -webkit-transition:opacity 0.26s ease-out; 
 +
  -moz-transition:opacity 0.26s ease-out; 
 +
  -ms-transition:opacity 0.26s ease-out; 
 +
  -o-transition:opacity 0.26s ease-out; 
 +
  transition:opacity 0.26s ease-out;   
 +
}
 +
#icons:hover img, #icons:active img {
 +
  opacity:0.3;
 +
}
 +
#icons:hover img:hover, #icons:active img:active {
 +
  opacity:1;
 +
}
 +
figcaption {
 +
  font-size:1.2rem;
 +
  text-align:center;
 +
}
 +
</style>
 +
</head>
 +
 +
<body>
 +
<div id="icons">
 +
  <figure><img src="https://www.iconexperience.com/_img/g_collection_png/standard/256x256/brain.png"><figcaption>Brainstorm</figcaption></figure>
 +
  <figure><img src="https://www.iconexperience.com/_img/g_collection_png/standard/256x256/dna.png"><figcaption>Plasmid Design</figcaption></figure>
 +
  <figure><img src="https://www.iconexperience.com/_img/g_collection_png/standard/128x128/key.png"><figcaption>Key. coli Design</figcaption></figure>
 +
  <figure><img src="https://www.iconexperience.com/_img/g_collection_png/standard/256x256/window_key.png"><figcaption>Key Transport Design</figcaption></figure>
 +
 +
</div>
 +
</body>
 +
 +
 +
</html>
 +
 +
{{:Team:UNOTT/Template/Footer}}

Revision as of 15:25, 28 August 2017

Brainstorm
Plasmid Design
Key. coli Design
Key Transport Design