Difference between revisions of "Team:UNOTT/Design2"

(Created page with "<html> <head> </head> <body> <div class=""="container" style=" background-color: #02263E;"> <div id="icons"> <figure><img src="https://www.iconexperience.com/_img/g_collecti...")
 
Line 1: Line 1:
 
<html>
 
<html>
 
<head>
 
<head>
 +
<style>
 +
html {
 +
  font-size:62.5%;
 +
}
 +
body {
 +
  height: 100%;
 +
  margin-top:100px;
 +
 
 +
}
 +
 +
#icons {
 +
  max-width:96rem;
 +
  width:100%;
 +
  min-height:200px;
 +
  height:auto;
 +
  margin:0 auto;
 +
  background-color:#02263E;
 +
  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>
 
</head>
 
<body>
 
<body>

Revision as of 10:47, 1 September 2017