Difference between revisions of "Team:Sydney Australia/Hexagon"

Line 1: Line 1:
−
<html>
+
/* Hexagons */
−
<head>
+
#hexGrid {
−
<style>
+
  overflow: hidden;
−
#sideMenu, #top_title {display:none;}
+
  width: 90%;
−
#content { padding:0px; width:90%; margin-top:-7px; margin-left:5%;, margin-right: 5%}
+
  margin: 0 auto;
−
body {background-color:white; }
+
  padding: 0.866% 0;
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
  font-family: 'Banaue', sans-serif;
 +
  font-size: 20px;
 +
}
 +
 
 +
#hexGrid:after {
 +
  content: "";
 +
  display: block;
 +
  clear: both;
 +
}
  
−
.hexagon {
+
.hex {
 
   position: relative;
 
   position: relative;
−
   width: 300px;  
+
   list-style-type: none;
−
   height: 173.21px;
+
   float: left;
−
   background-color: #64C7CC;
+
   overflow: hidden;
−
   margin: 86.60px 0;
+
   visibility: hidden;
 +
  outline: 3px solid transparent;  /* fix for jagged edges in FF on hover transition */
 +
  transform: rotate(-60deg) skewY(30deg) translatez(-1px);
 
}
 
}
  
−
.hexagon:before,
+
.hex * {
−
.hexagon:after {
+
−
  content: "";
+
 
   position: absolute;
 
   position: absolute;
−
   width: 0;
+
   visibility: visible;
−
   border-left: 150px solid transparent;
+
   outline: 3px solid transparent; /* fix for jagged edges in FF on hover transition */
−
  border-right: 150px solid transparent;
+
 
}
 
}
  
−
.hexagon:before {
+
.hexIn {
−
   bottom: 100%;
+
   display: block;
−
   border-bottom: 86.60px solid #64C7CC;
+
  width: 100%;
 +
   height: 100%;
 +
  text-align: center;
 +
  color: #fff;
 +
  overflow: hidden;
 +
  transform: skewY(-30deg) rotate(60deg);
 
}
 
}
 +
/*** SPACING AND SIZING *****************************************************************/
  
−
.hexagon:after {
+
@media (min-width:1201px) { /* <- 2-3  hexagons per row */
−
   top: 100%;
+
   .hex {
−
   width: 0;
+
    width: 32.666%;    /* = (100-2) / 3 */
−
   border-top: 86.60px solid #64C7CC;
+
    padding-bottom: 37.720%;   /* =  width / sin(60) */
 +
   }
 +
  .hex:nth-child(5n+1),
 +
  .hex:nth-child(5n+2) {
 +
    transform: translateX(50%) rotate(-60deg) skewY(30deg);
 +
   }
 +
  .hex:nth-child(5n+3),
 +
  .hex:nth-child(5n+4),
 +
  .hex:nth-child(5n+5) {
 +
    margin-top: -8.564%;
 +
    margin-bottom: -8.564%;
 +
  }
 +
  .hex:nth-child(5n+2),
 +
  .hex:nth-child(5n+4) {
 +
    margin-right: 1%;
 +
    margin-left: 1%;
 +
  }
 +
  .hex:nth-child(5n+1) {
 +
    margin-left: 0.5%;
 +
  }
 +
  .hex:nth-child(5n+3),
 +
  .hex:nth-child(5n+6) {
 +
    clear: left;
 +
  }
 
}
 
}
 +
 +
@media (max-width: 1200px) {  /* <- 1-2  hexagons per row */
 +
  .hex {
 +
    width: 49.5%;    /* = (100-1) / 2 */
 +
    padding-bottom: 57.158%;    /* =  width / sin(60) */
 +
  }
 +
  .hex:nth-child(3n+1) {
 +
    transform: translateX(50%) rotate(-60deg) skewY(30deg);
 +
  }
 +
  .hex:nth-child(3n+2),
 +
  .hex:nth-child(3n+3) {
 +
    margin-top: -13.423%;
 +
    margin-bottom: -13.423%;
 +
  }
 +
  .hex:nth-child(3n+1) {
 +
    margin-left: 0.5%
 +
  }
 +
  .hex:nth-child(3n+3) {
 +
    margin-left: 1%;
 +
  }
 +
  .hex:nth-child(3n+2),
 +
  .hex:nth-child(3n+4) {
 +
    clear: left;
 +
  }
 +
}
 +
 +
 
</style>
 
</style>
 
</head>
 
</head>
 
<body>
 
<body>
−
<div class="hexagon"></div>
+
<div class="container-fluid page-heading">
 +
<div class="center">
 +
      <img src="https://static.igem.org/mediawiki/2017/d/d1/T--Sydney_Australia--Team_Banner.png" class="banner img-center" width="100%" />
 +
</div>
 +
<div class="row">
 +
<div class="col-xs-8">
 +
<ul id="hexGrid">
 +
  <li class="hex" >
 +
    <a class="hexIn" id="alex-pic" href="#">
 +
      <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" />
 +
      <h1>Alex Kelly</h1>
 +
      <p>Economics Eidolon</p>
 +
    </a>
 +
  </li>
 +
</ul>
 +
</div>
 +
</div>
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 11:47, 27 August 2017

/* Hexagons */

  1. hexGrid {
 overflow: hidden;
 width: 90%;
 margin: 0 auto;
 padding: 0.866% 0;
 font-family: 'Banaue', sans-serif;
 font-size: 20px;

}

  1. hexGrid:after {
 content: "";
 display: block;
 clear: both;

}

.hex { 

 position: relative;
 list-style-type: none;
 float: left;
 overflow: hidden;
 visibility: hidden;
 outline: 3px solid transparent;  /* fix for jagged edges in FF on hover transition */
 transform: rotate(-60deg) skewY(30deg) translatez(-1px);

}

.hex * { 

 position: absolute;
 visibility: visible;
 outline: 3px solid transparent;  /* fix for jagged edges in FF on hover transition */

}

.hexIn { 

 display: block;
 width: 100%;
 height: 100%;
 text-align: center;
 color: #fff;
 overflow: hidden;
 transform: skewY(-30deg) rotate(60deg);

} /*** SPACING AND SIZING *****************************************************************/

@media (min-width:1201px) { /* <- 2-3 hexagons per row */ 

 .hex {
   width: 32.666%;    /* = (100-2) / 3 */
   padding-bottom: 37.720%;    /* =  width / sin(60) */
 }
 .hex:nth-child(5n+1),
 .hex:nth-child(5n+2) {
   transform: translateX(50%) rotate(-60deg) skewY(30deg);
 }
 .hex:nth-child(5n+3),
 .hex:nth-child(5n+4),
 .hex:nth-child(5n+5) {
   margin-top: -8.564%;
   margin-bottom: -8.564%;
 }
 .hex:nth-child(5n+2),
 .hex:nth-child(5n+4) {
   margin-right: 1%;
   margin-left: 1%;
 }
 .hex:nth-child(5n+1) {
   margin-left: 0.5%;
 }
 .hex:nth-child(5n+3),
 .hex:nth-child(5n+6) {
   clear: left;
 }

}

@media (max-width: 1200px) { /* <- 1-2 hexagons per row */ 

 .hex {
   width: 49.5%;    /* = (100-1) / 2 */
   padding-bottom: 57.158%;    /* =  width / sin(60) */
 }
 .hex:nth-child(3n+1) {
   transform: translateX(50%) rotate(-60deg) skewY(30deg);
 }
 .hex:nth-child(3n+2),
 .hex:nth-child(3n+3) {
   margin-top: -13.423%;
   margin-bottom: -13.423%;
 }
 .hex:nth-child(3n+1) {
   margin-left: 0.5%
 }
 .hex:nth-child(3n+3) {
   margin-left: 1%;
 }
 .hex:nth-child(3n+2),
 .hex:nth-child(3n+4) {
   clear: left;
 }

}


</style> </head> <body> 

     <img src="T--Sydney_Australia--Team_Banner.png" class="banner img-center" width="100%" />
  • <a class="hexIn" id="alex-pic" href="#"> <img src="8048823381_0fbc2d8efb.jpg" alt="" />

    Alex Kelly

    Economics Eidolon

       </a>

</body>

</html>