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

Line 6: Line 6:
 
body {background-color:white; }
 
body {background-color:white; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
−
@font-face {
+
html, body, div, span, applet, object, iframe,
−
    font-family: 'banaue';
+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
−
    src: url('https://static.igem.org/mediawiki/2017/b/b0/T--Sydney_Australia--Wiki_Font_Banaue-Regular.Media-File.ogg');
+
a, abbr, acronym, address, big, cite, code,
−
    font-weight: normal;
+
del, dfn, em, img, ins, kbd, q, s, samp,
−
    font-style: normal;
+
small, strike, strong, sub, sup, tt, var,
 +
b, u, i, center,
 +
dl, dt, dd, ol, ul, li,
 +
fieldset, form, label, legend,
 +
table, caption, tbody, tfoot, thead, tr, th, td,
 +
article, aside, canvas, details, embed,
 +
figure, figcaption, footer, header, hgroup,
 +
menu, nav, output, ruby, section, summary,
 +
time, mark, audio, video {
 +
margin: 0;
 +
padding: 0;
 +
border: 0;
 +
font-size: 100%;
 +
font: inherit;
 +
vertical-align: baseline;
 
}
 
}
−
.hexagon {
+
/* HTML5 display-role reset for older browsers */
−
  position: relative;
+
article, aside, details, figcaption, figure,
−
  width: 300px;
+
footer, header, hgroup, menu, nav, section {
−
  height: 173.21px;
+
display: block;
−
  background-color: #64C7CC;
+
−
  margin: 86.60px 0;
+
 
}
 
}
 +
body {
 +
line-height: 1;
 +
}
 +
ol, ul {
 +
list-style: none;
 +
}
 +
blockquote, q {
 +
quotes: none;
 +
}
 +
blockquote:before, blockquote:after,
 +
q:before, q:after {
 +
content: '';
 +
content: none;
 +
}
 +
table {
 +
border-collapse: collapse;
 +
border-spacing: 0;
 +
}
 +
 +
#lab {
 +
width: 1000px;
 +
overflow: hidden;
 +
padding-bottom: 70px;
 +
position: relative;
 +
margin: 0 auto;
 +
margin-bottom: 2.5em;
 +
background: rgb(236, 236, 236);
  
−
.hexagon:before,
+
-webkit-transition: all ease 500ms;
−
.hexagon:after {
+
-moz-transition: all ease 500ms;
−
  content: "";
+
-o-transition: all ease 500ms;
−
  position: absolute;
+
-ms-transition: all ease 500ms;
−
  width: 0;
+
transition: all ease 500ms;
−
  border-left: 150px solid transparent;
+
−
  border-right: 150px solid transparent;
+
 
}
 
}
  
−
.hexagon:before {
+
h1 {
−
  bottom: 100%;
+
font-family: bebas_neueregular ,sans-serif;
−
  border-bottom: 86.60px solid #64C7CC;
+
font-size: 1.75em;
 +
padding: 0.2em 0 0.2em 0.2em;
 +
color: white;
 +
text-shadow: 0 0.06em 0 #424242;
 +
position: relative;
 
}
 
}
  
−
.hexagon:after {
+
#lab h1 {
−
  top: 100%;
+
background: #B0DAD4;
−
  width: 0;
+
−
  border-top: 86.60px solid #64C7CC;
+
 
}
 
}
−
/* Hexagons */
 
−
#hexGrid {
 
−
  overflow: hidden;
 
−
  width: 90%;
 
−
  margin: 0 auto;
 
−
  padding: 0.866% 0;
 
−
  font-family: 'banaue', sans-serif;
 
−
  font-size: 16px;
 
  
 +
.beaker {
 +
-webkit-filter: drop-shadow(#424242 0px 1px 0px);
 +
border-bottom: 2em solid #FFF;
 +
border-left: 1em solid transparent;
 +
border-right: 1em solid transparent;
 +
border-radius: .5em;
 +
height: 0;
 +
width: 1em;
 +
position: absolute;
 +
right: 0.7em;
 +
bottom: 22%;
 +
font-size: 0.6em;
 
}
 
}
  
−
#hexGrid:after {
+
.beaker::before {
−
  content: "";
+
border-left: .25em solid #FFF;
−
  display: block;
+
border-radius: .25em;
−
  clear: both;
+
border-right: .25em solid #FFF;
 +
content: '';
 +
height: .25em;
 +
left: -.25em;
 +
position: absolute;
 +
top: -1em;
 +
width: 1em;
 
}
 
}
  
−
.hex {
+
.beaker::after {
−
  position: relative;
+
border-left: .25em solid #FFF;
−
  list-style-type: none;
+
border-right: .25em solid #FFF;
−
  float: left;
+
content: '';
−
  overflow: hidden;
+
height: 1em;
−
  visibility: hidden;
+
left: 0;
−
  outline: 1px solid transparent; /* fix for jagged edges in FF on hover transition */
+
position: absolute;
−
  transform: rotate(-60deg) skewY(30deg) translatez(-1px);
+
top: -1em;
 +
width: .5em;
 
}
 
}
  
−
.hex * {
+
.sectionheader {
−
  position: absolute;
+
position: relative;
−
  visibility: visible;
+
−
  outline: 1px solid green;  /* fix for jagged edges in FF on hover transition */
+
 
}
 
}
  
−
.hexIn {
+
.lab_item {
−
  display: block;
+
width: 200px;
−
  width: 100%;
+
height: 230px;
−
  height: 100%;
+
position: relative;
−
  text-align: center;
+
display: inline-block;
−
  color: blue;
+
−
  overflow: hidden;
+
−
  transform: skewY(-30deg) rotate(60deg);
+
 
}
 
}
  
 +
.hexagon2 {
 +
position: absolute;
 +
width: 200px;
 +
height: 400px;
 +
top: -85px;
 +
}
  
−
/*** HEX CONTENT **********************************************************************/
+
.hexagon {
 +
overflow: hidden;
 +
visibility: hidden;
  
−
.hex img {
+
-webkit-transform: rotate(120deg);
−
  left: -100%;
+
-moz-transform: rotate(120deg);
−
  right: -100%;
+
-o-transform: rotate(120deg);
−
  width: auto;
+
-ms-transform: rotate(120deg);
−
  height: 100%;
+
transform: rotate(120deg);
−
  margin: 0 auto;
+
cursor: pointer;
 
}
 
}
  
−
.hex h1,
+
.hexagon-in1 {
−
.hex p {
+
overflow: hidden;
−
  margin: 0;
+
width: 100%;
−
  width: 102%;
+
height: 100%;
−
  left: -1%; /* prevent line on the right where background doesn't cover image */
+
 
−
  padding: 5%;
+
-webkit-transform: rotate(-60deg);
−
  box-sizing: border-box;
+
-moz-transform: rotate(-60deg);
−
  color: #3f3f3f!important
+
-o-transform: rotate(-60deg);
−
  font-weight: 300;
+
-ms-transform: rotate(-60deg);
−
  transition: transform .2s ease-out, opacity .3s ease-out;
+
transform: rotate(-60deg);
 
}
 
}
  
−
/* setting colour of hexagons when you hover*/
+
.hexagon-in2 {
−
.hex:nth-child(3n+1) h1,
+
-webkit-box-shadow: inset 0 0 0 200px rgba(176, 218, 212, 0.48);
−
.hex:nth-child(3n+1) p {
+
box-shadow: inset 0 0 0 200px rgba(176, 218, 212, 0.48);
−
  background-color: rgba(247, 196, 66, 0.8);}
+
overflow: hidden;
−
.hex:nth-child(3n+2) h1,
+
width: 100%;
−
.hex:nth-child(3n+2) p {
+
height: 100%;
−
  background-color: rgba(94, 172, 195, 0.8);}
+
background-repeat: no-repeat;
−
  .hex:nth-child(3n+3) h1,
+
background-position: 50%;
−
.hex:nth-child(3n+3) p {
+
 
−
  background-color: rgba(220, 77, 80, 0.8);}
+
-webkit-background-size: 125%;
−
 
+
-moz-background-size: 125%;
−
.hex h1 {
+
background-size: 125%;
−
  bottom: 50%;
+
visibility: visible;
−
  padding-top: 50%;
+
 
−
  font-size: 1.5em;
+
-webkit-transform: rotate(-60deg);
−
  z-index: 1;
+
-moz-transform: rotate(-60deg);
−
  transform: translateY(-100%) translatez(-1px);
+
-o-transform: rotate(-60deg);
−
  color: white;
+
-ms-transform: rotate(-60deg);
 +
transform: rotate(-60deg);
 +
 
 +
-webkit-transition: all 0.5s ease;
 +
-moz-transition: all 0.5s ease;
 +
-o-transition: all 0.5s ease;
 +
-ms-transition: all 0.5s ease;
 +
transition: all 0.5s ease;
 
}
 
}
  
−
.hex h1:after {
+
.hexagon-in2:hover {
−
  content: '';
+
-webkit-box-shadow: inset 0 0 0 0px #B0DAD4;
−
  position: absolute;
+
box-shadow: inset 0 0 0 0px #B0DAD4;
−
  bottom: 0;
+
−
  left: 45%;
+
−
  width: 10%;
+
−
  text-align: center;
+
−
  border-bottom: 1px solid #fff;
+
 
}
 
}
  
−
.hex p {
+
#lab article {
−
  top: 50%;
+
padding-top: 1em;
−
  padding-bottom: 50%;
+
width: 820px;
−
  transform: translateY(100%) translatez(-1px);
+
margin: 0 auto;
−
  color: white;
+
 
}
 
}
  
−
.box .box-content .tag-title h1 { font-family: 'banaue', sans-serif;}
+
.lab_item:nth-child(7n-2) {
 +
margin-left: 101px;
 +
}
  
−
/*** HOVER EFFECT  **********************************************************************/
+
.lab_item:nth-child(n+5) {
 +
margin-top: -55px;
 +
}
  
−
.hexIn:hover h1, .hexIn:focus h1, .hexIn:hover p, .hexIn:focus p {
+
@media (max-width: 1015px) {
−
  transform: translateY(5%) translatez(-1px);
+
#lab {
 +
width: 100%;
 
}
 
}
  
 +
}
  
−
/*** SPACING AND SIZING *****************************************************************/
+
@media (max-width: 820px) {
 +
.lab_item:nth-child(5n-1) {
 +
margin-left: 102px;
 +
}
  
−
@media (min-width:1201px) {  /* <- 2-3  hexagons per row */
+
.lab_item:nth-child(n+4) {
−
  .hex {
+
margin-top: -62px;
−
    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 */
+
.lab_item:nth-child(7n-2) {
−
  .hex {
+
margin-left: 0px;
−
    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;
+
−
  }
+
 
}
 
}
  
−
@media (max-width: 400px) {
+
.lab_item:nth-child(n+5) {
−
  #hexGrid {
+
margin-top: -56px;
−
    font-size: 13px;
+
−
  }
+
 
}
 
}
  
 +
#lab article {
 +
width: 610px;
 +
}
  
−
/*sets grey background colour*/
+
}
−
* {background-color: e2e2e2;}
+
  
 +
@media (max-width: 640px) {
 +
#lab article {
 +
width: 405px;
 +
}
  
−
/* Making 'Team' image nice and crispy*/
+
.lab_item:nth-child(5n-1) {
−
.banner {
+
margin-left: 0px;
−
image-rendering: -moz-crisp-edges;
+
}
−
image-rendering: -o-crisp-edges;
+
−
image-rendering: -webkit-optimize-contrast;
+
−
-ms-interpolation-mode: nearest-neighbor;
+
−
    }
+
  
−
/*putting 'team' image in the center- NEED TO FIX*/
+
.lab_item:nth-child(3n) {
−
.col-xs-12 {align:center;}
+
margin-left: 102px;
 +
}
  
−
/*PROFILES DESIGN*/
+
.lab_item:nth-child(n+3) {
−
.box {
+
margin-top: -56px;
−
  background:#fff;
+
−
  transition:all 0.2s ease;
+
−
  border:2px dashed #dadada;
+
−
  margin-top: 10px;
+
−
  box-sizing: border-box;
+
−
  border-radius: 5px;
+
−
  background-clip: padding-box;
+
−
  padding:0 20px 20px 20px;
+
−
  min-height:340px;
+
 
}
 
}
  
−
.box:hover {
 
−
  border:2px solid #525C7A;
 
 
}
 
}
  
−
.box span.box-title {
+
@media (max-width: 450px) {
−
    color: #fff;
+
#lab article {
−
    font-size: 20px;
+
width: 300px;
−
    font-weight: 300;
+
−
    text-transform: uppercase;
+
 
}
 
}
  
 +
.lab_item:nth-child(3n) {
 +
margin-left: 0px;
 +
}
  
−
.box .box-content {
+
.lab_item:nth-child(2n) {
−
  padding: 16px;
+
margin-left: 102px;
−
  border-radius: 0 0 2px 2px;
+
−
  background-clip: padding-box;
+
−
  box-sizing: border-box;
+
−
  background:#fff!important
+
 
}
 
}
−
.box .box-content p {
+
 
−
  color:#515c66;
+
.lab_item:nth-child(n+2) {
−
  text-transform:none;
+
margin-top: -56px;
−
  background:#fff!important
+
 
}
 
}
−
.tag-title p {  background:#fff;}
 
−
 
−
/*keeps profiles hidden when no hover*/
 
−
#alex, #courtney, #emaleen, #erica, #grace {display:none;}
 
−
#jamie, #ruby, #stephanie, #nicholas, #idk {display:none;}
 
  
 +
}
  
 
</style>
 
</style>
 
</head>
 
</head>
 
<body>
 
<body>
−
<div class="container-fluid page-heading">
+
<section id="lab">
−
<div class="row">
+
<div class="sectionheader"> <h1>The lab</h1><div class="beaker"></div></div>
−
<div class="col-xs-8">
+
    <article>
−
<ul id="hexGrid">
+
 
−
  <li class="hex" >
+
        <div class="lab_item">
−
    <a class="hexIn" id="alex-pic" href="#">
+
        <div class="hexagon hexagon2">
−
      <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" />
+
            <div class="hexagon-in1">
−
      <h1>Alex Kelly</h1>
+
                <div class="hexagon-in2" style="background-image: url('http://placekitten.com/200/305');">               
−
      <p>Economics Eidolon</p>
+
                </div>
−
    </a>
+
            </div>
−
  </li>
+
        </div>
−
</ul>
+
        </div>
−
</div>
+
          <div class="lab_item">
−
</div>
+
          <div class="hexagon hexagon2">
−
<div class="hexagon"></div>
+
            <div class="hexagon-in1">
 +
                <div class="hexagon-in2" style="background-image: url(http://placekitten.com/200/320);">              
 +
                </div>
 +
            </div>
 +
        </div>
 +
        </div>
 +
<div class="lab_item">
 +
          <div class="hexagon hexagon2">
 +
            <div class="hexagon-in1">
 +
                <div class="hexagon-in2" style="background-image: url(http://placekitten.com/200/310);">              
 +
                </div>
 +
            </div>
 +
        </div>
 +
        </div>
 +
<div class="lab_item">
 +
          <div class="hexagon hexagon2">
 +
            <div class="hexagon-in1">
 +
                <div class="hexagon-in2" style="background-image: url(http://placekitten.com/200/300);">               
 +
                </div>
 +
            </div>
 +
        </div>
 +
        </div>
 +
              <div class="lab_item">       
 +
        <div class="hexagon hexagon2">
 +
            <div class="hexagon-in1">
 +
                <div class="hexagon-in2" style="background-image: url(http://placekitten.com/300/300);">               
 +
                </div>
 +
            </div>
 +
        </div>
 +
        </div>
 +
          <div class="lab_item">
 +
          <div class="hexagon hexagon2">
 +
            <div class="hexagon-in1">
 +
                <div class="hexagon-in2" style="background-image: url(http://placekitten.com/300/400);">               
 +
                </div>
 +
            </div>
 +
        </div>
 +
        </div>
 +
          <div class="lab_item">
 +
          <div class="hexagon hexagon2">
 +
            <div class="hexagon-in1">
 +
                <div class="hexagon-in2" style="background-image: url(http://placekitten.com/500/500);">              
 +
                </div>
 +
            </div>
 +
        </div>
 +
        </div>
 +
          <div class="lab_item">
 +
          <div class="hexagon hexagon2">
 +
            <div class="hexagon-in1">
 +
                <div class="hexagon-in2" style="background-image: url(http://placekitten.com/600/600);">              
 +
                </div>
 +
            </div>
 +
        </div>
 +
        </div>
 +
          <div class="lab_item">
 +
          <div class="hexagon hexagon2">
 +
            <div class="hexagon-in1">
 +
                <div class="hexagon-in2" style="background-image: url(http://placekitten.com/700/700);">               
 +
                </div>
 +
            </div>
 +
        </div>
 +
        </div>
 +
          <div class="lab_item">
 +
          <div class="hexagon hexagon2">
 +
            <div class="hexagon-in1">
 +
                <div class="hexagon-in2" style="background-image: url(http://placekitten.com/250/300);">               
 +
                </div>
 +
            </div>
 +
        </div>
 +
        </div>
 +
          <div class="lab_item">
 +
          <div class="hexagon hexagon2">
 +
            <div class="hexagon-in1">
 +
                <div class="hexagon-in2" style="background-image: url(http://placekitten.com/230/300);">               
 +
                </div>
 +
            </div>
 +
        </div>
 +
        </div>
 +
          <div class="lab_item">
 +
          <div class="hexagon hexagon2">
 +
            <div class="hexagon-in1">
 +
                <div class="hexagon-in2" style="background-image: url(http://placekitten.com/280/300);">               
 +
                </div>
 +
            </div>
 +
        </div>
 +
        </div>
 +
          <div class="lab_item">
 +
          <div class="hexagon hexagon2">
 +
            <div class="hexagon-in1">
 +
                <div class="hexagon-in2" style="background-image: url(http://placekitten.com/290/300);">               
 +
                </div>
 +
            </div>
 +
        </div>
 +
        </div>
 +
 
 +
       
 +
         
 +
</article>
 +
</section>
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 12:00, 27 August 2017

The lab