(Replaced content with "{{:Team:UNOTT/Template/NavBarTest}} <html> </html> {{:Team:UNOTT/Template/Footer}}") |
|||
Line 2: | Line 2: | ||
<html> | <html> | ||
+ | <head> | ||
+ | <style> | ||
+ | html { | ||
+ | font-size:62.5%; | ||
+ | } | ||
+ | body { | ||
+ | margin:0; | ||
+ | font-size:1.4rem; | ||
+ | font-family:arial; | ||
+ | background-color:#ddd; | ||
+ | } | ||
+ | #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> | ||
Revision as of 13:50, 28 August 2017