Difference between revisions of "Team:Northwestern/Team"

Line 118: Line 118:
 
.border { border: 5px solid black; }
 
.border { border: 5px solid black; }
  
 +
 +
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800);
 +
*{
 +
  box-sizing:border-box;
 +
}
 +
body {
 +
  background:#246BB2;
 +
}
 +
h1{
 +
  font-family:'Open Sans',Arial,Helvetica,sans-serif;
 +
  font-size:72px;
 +
  color:#FFFFFF;
 +
  position: absolute;
 +
  top:0px;
 +
  margin:0px;
 +
}
 +
h2{
 +
  font-family:'Open Sans',Arial,Helvetica,sans-serif;
 +
  font-size:48px;
 +
  color:#FFFFFF;
 +
  position:relative;
 +
  top:50px;
 +
}
 +
div {
 +
  inline-block;
 +
  padding:0px;
 +
  margin:0px;
 +
}
 +
#container {
 +
  height:40%;
 +
  width:30%;
 +
  margin:auto;
 +
  position: absolute;
 +
  top:30%;
 +
  left:30%;
 +
  background:#687F8B;
 +
 +
}
 +
#tl{
 +
  height:33.34%;
 +
  width:33.34%;
 +
  position:absolute;
 +
  top:0%;
 +
  left:0%;
 +
  background:#FF5050;
 +
  box-shadow:5px 7px 0px 0px #662020;
 +
  transition:all ease .35s;
 +
}
 +
#tc{
 +
  height:33.34%;
 +
  width:33.34%;
 +
  position:absolute;
 +
  top:0%;
 +
  left:33.34%;
 +
  box-shadow:5px 7px 0px 0px #663D29;
 +
  background:#FF9966;
 +
  transition:all ease .35s;
 +
}
 +
#tr{
 +
  height:33.34%;
 +
  width:33.34%;
 +
  position:absolute;
 +
  top:0%;
 +
  left:66.67%;
 +
  background:#FFFF66;
 +
  transition:all ease .35s;
 +
}
 +
#ml{
 +
  height:33.34%;
 +
  width:33.34%;
 +
  position:absolute; 
 +
  top:33.34%;
 +
  left:0%;
 +
  background:#99FF66;
 +
  box-shadow:5px 7px 0px 0px #3D6629;
 +
  transition:all ease .35s;
 +
}
 +
#mc{
 +
  height:33.34%;
 +
  width:33.34%;
 +
  position:absolute; 
 +
  top:33.34%;
 +
  left:33.34%;
 +
  background:#00FF99;
 +
  box-shadow:5px 7px 0px 0px #00663D;
 +
  transition:all ease .35s;
 +
}
 +
#mr{
 +
  height:33.34%;
 +
  width:33.34%;
 +
  position:absolute; 
 +
  top:33.34%;
 +
  left:66.67%;
 +
  background:#0099FF;
 +
  transition:all ease .35s;
 +
}
 +
#bl{
 +
  height:33.34%;
 +
  width:33.34%;
 +
  position:absolute; 
 +
  top:66.67%;
 +
  left:0%;
 +
  background:#6666FF;
 +
  transition:all ease .35s;
 +
}
 +
#bc{
 +
  height:33.34%;
 +
  width:33.34%;
 +
  position:absolute; 
 +
  top:66.67%;
 +
  left:33.34%;
 +
  background:#9966FF;
 +
  transition:all ease .35s;
 +
}
 +
#br{
 +
  height:33.34%;
 +
  width:33.34%;
 +
  position:absolute; 
 +
  top:66.67%;
 +
  left:66.67%;
 +
  background:#9900FF;
 +
  transition:all ease .35s;
 +
}
 +
div p {
 +
  font-family: 'Open Sans',Arial,Helvetica,sans-serif;
 +
  color:#FFFFFF;
 +
  font-weight:bold;
 +
  text-align:center;
 +
  position:relative;
 +
  font-size:50px;
 +
  top:30%;
 +
  margin:0px;
 +
}
 +
#tl:hover {
 +
  top:-1.56%;
 +
  left:-1.11%;
 +
  transition:all ease .35s;
 +
}
 +
#tc:hover {
 +
  top:-1.56%;
 +
  left:32.22%;
 +
  transition:all ease .35s;
 +
}
 +
#tr:hover {
 +
  top:-1.56%;
 +
  left:65.56%;
 +
  box-shadow:5px 7px 0px 0px #666629;
 +
  transition:all ease .35s;
 +
}
 +
#ml:hover {
 +
  top:31.78%;
 +
  left:-1.11%;
 +
  transition:all ease .35s;
 +
}
 +
#mc:hover {
 +
  top:31.78%;
 +
  left:32.22%;
 +
  transition:all ease .35s;
 +
}
 +
#mr:hover {
 +
  top:31.78%;
 +
  left:65.56%;
 +
  box-shadow:5px 7px 0px 0px #003D66;
 +
  transition:all ease .35s
 +
}
 +
#bl:hover {
 +
  top:65.11%;
 +
  left:-1.11%;
 +
    box-shadow:5px 7px 0px 0px #292966;
 +
  transition:all ease .35s;
 +
}
 +
#bc:hover {
 +
  top:65.11%;
 +
  left:32.22%;
 +
    box-shadow:5px 7px 0px 0px #3D2966;
 +
  transition:all ease .35s;
 +
}
 +
#br:hover {
 +
  top:65.11%;
 +
  left:65.56%;
 +
  box-shadow:5px 7px 0px 0px #3D0066;
 +
  transition:all ease .35s;
 +
}
  
 
</style>
 
</style>
Line 123: Line 306:
  
 
<body class="w3-white">
 
<body class="w3-white">
 +
<div class = "container">
 +
 +
<div id="container">
 +
<div id="tl"><p>1</p></div>
 +
<div id="tc"><p>2</p></div>
 +
<div id="tr"><p>3</p></div>
 +
<div id="ml"><p>4</p></div>
 +
<div id="mc"><p>5</p></div>
 +
<div id="mr"><p>6</p></div>
 +
<div id="bl"><p>7</p></div>
 +
<div id="bc"><p>8</p></div>
 +
<div id="br"><p>9</p></div>
 +
</div>
 +
</div>
 +
  
  

Revision as of 16:07, 12 September 2017

Northwestern Template Northwestern Template

Northwestern Template

1

2

3

4

5

6

7

8

9