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

(Replaced content with "{{:Team:Sydney_Australia/Templates/Navbar}} <html> <head> <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> <link rel="stylesheet" href="https://maxcd...")
Line 1: Line 1:
 +
{{:Team:Sydney_Australia/Templates/Navbar}}
 
<html>
 
<html>
 
<head>
 
<head>
Line 5: Line 6:
 
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  
−
<style>  
+
<body>  
−
/* Hexagons */
+
background:#e2e2e2
−
#hexGrid {
+
−
  overflow: hidden;
+
−
  width: 90%;
+
−
  margin: 0 auto;
+
−
  padding: 0.866% 0;
+
−
  font-family: 'Raleway', sans-serif;
+
−
  font-size: 15px;
+
−
}
+
−
 
+
−
#hexGrid:after {
+
−
  content: "";
+
−
  display: block;
+
−
  clear: both;
+
−
}
+
−
 
+
−
.hex {
+
−
  position: relative;
+
−
  list-style-type: none;
+
−
  float: left;
+
−
  overflow: hidden;
+
−
  visibility: hidden;
+
−
  outline: 1px solid transparent;  /* fix for jagged edges in FF on hover transition */
+
−
  transform: rotate(-60deg) skewY(30deg) translatez(-1px);
+
−
}
+
−
 
+
−
.hex * {
+
−
  position: absolute;
+
−
  visibility: visible;
+
−
  outline: 1px 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);
+
−
}
+
−
 
+
−
 
+
−
/*** HEX CONTENT **********************************************************************/
+
−
 
+
−
.hex img {
+
−
  left: -100%;
+
−
  right: -100%;
+
−
  width: auto;
+
−
  height: 100%;
+
−
  margin: 0 auto;
+
−
}
+
−
 
+
−
.hex h1,
+
−
.hex p {
+
−
  margin: 0;
+
−
  width: 102%;
+
−
  left: -1%;  /* prevent line on the right where background doesn't cover image */
+
−
  padding: 5%;
+
−
  box-sizing: border-box;
+
−
  background-color: rgba(0, 128, 128, 0.8);
+
−
  font-weight: 300;
+
−
  transition: transform .2s ease-out, opacity .3s ease-out;
+
−
}
+
−
 
+
−
.hex h1 {
+
−
  bottom: 50%;
+
−
  padding-top: 50%;
+
−
  font-size: 1.5em;
+
−
  z-index: 1;
+
−
  transform: translateY(-100%) translatez(-1px);
+
−
}
+
−
 
+
−
.hex h1:after {
+
−
  content: '';
+
−
  position: absolute;
+
−
  bottom: 0;
+
−
  left: 45%;
+
−
  width: 10%;
+
−
  text-align: center;
+
−
  border-bottom: 1px solid #fff;
+
−
}
+
−
 
+
−
.hex p {
+
−
  top: 50%;
+
−
  padding-bottom: 50%;
+
−
  transform: translateY(100%) translatez(-1px);
+
−
}
+
−
 
+
−
 
+
−
/*** HOVER EFFECT  **********************************************************************/
+
−
 
+
−
.hexIn:hover h1, .hexIn:focus h1, .hexIn:hover p, .hexIn:focus p {
+
−
  transform: translateY(0%) translatez(-1px);
+
−
}
+
−
 
+
−
 
+
−
/*** 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;
+
−
  }
+
−
}
+
−
 
+
−
@media (max-width: 400px) {
+
−
  #hexGrid {
+
−
    font-size: 13px;
+
−
  }
+
−
}
+
−
 
+
−
/* End Hexagons */
+
−
/* fork on github button */
+
−
#fork{
+
−
  font-family: 'Raleway', sans-serif;
+
−
  position:fixed;
+
−
  top:0;
+
−
  left:0;
+
−
  color:#000;
+
−
  text-decoration:none;
+
−
  border:1px solid #000;
+
−
  padding:.5em .7em;
+
−
  margin:1%;
+
−
  transition: color .5s;
+
−
  overflow:hidden;
+
−
}
+
−
#fork:before {
+
−
  content: '';
+
−
  position: absolute;
+
−
  top: 0; left: 0;
+
−
  width: 130%; height: 100%;
+
−
  background: #000;
+
−
  z-index: -1;
+
−
  transform-origin:0 0 ;
+
−
  transform:translateX(-100%) skewX(-45deg);
+
−
  transition: transform .5s;
+
−
}
+
−
#fork:hover {
+
−
  color: #fff;
+
−
}
+
−
#fork:hover:before {
+
−
  transform: translateX(0) skewX(-45deg);
+
−
}
+
−
</style>
+
−
</head>
+
−
 
+
−
<body>
+
−
<ul id="hexGrid">
+
−
  <li class="hex">
+
−
    <a class="hexIn" href="#">
+
−
      <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" />
+
−
      <h1>This is a title</h1>
+
−
      <p>Some sample text about the article this hexagon leads to</p>
+
−
    </a>
+
−
  </li>
+
−
  <li class="hex">
+
−
    <a class="hexIn" href="#">
+
−
      <img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" alt="" />
+
−
      <h1>This is a title</h1>
+
−
      <p>Some sample text about the article this hexagon leads to</p>
+
−
    </a>
+
−
  </li>
+
−
  <li class="hex">
+
−
    <a class="hexIn" href="#">
+
−
      <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" />
+
−
      <h1>This is a title</h1>
+
−
      <p>Some sample text about the article this hexagon leads to</p>
+
−
    </a>
+
−
  </li>
+
−
  <li class="hex">
+
−
    <a class="hexIn" href="#">
+
−
      <img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" alt="" />
+
−
      <h1>This is a title</h1>
+
−
      <p>Some sample text about the article this hexagon leads to</p>
+
−
    </a>
+
−
  </li>
+
−
  <li class="hex">
+
−
    <a class="hexIn" href="#">
+
−
      <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" />
+
−
      <h1>This is a title</h1>
+
−
      <p>Some sample text about the article this hexagon leads to</p>
+
−
    </a>
+
−
  </li>
+
−
  <li class="hex">
+
−
    <a class="hexIn" href="#">
+
−
      <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" />
+
−
      <h1>This is a title</h1>
+
−
      <p>Some sample text about the article this hexagon leads to</p>
+
−
    </a>
+
−
  </li>
+
−
  <li class="hex">
+
−
    <a class="hexIn" href="#">
+
−
      <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" />
+
−
      <h1>This is a title</h1>
+
−
      <p>Some sample text about the article this hexagon leads to</p>
+
−
    </a>
+
−
  </li>
+
−
  <li class="hex">
+
−
    <a class="hexIn" href="#">
+
−
      <img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="" />
+
−
      <h1>This is a title</h1>
+
−
      <p>Some sample text about the article this hexagon leads to</p>
+
−
    </a>
+
−
  </li>
+
−
  <li class="hex">
+
−
    <a class="hexIn" href="#">
+
−
      <img src="https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg" alt="" />
+
−
      <h1>This is a title</h1>
+
−
      <p>Some sample text about the article this hexagon leads to</p>
+
−
    </a>
+
−
  </li>
+
−
  <li class="hex">
+
−
    <a class="hexIn" href="#">
+
−
      <img src="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" alt="" />
+
−
      <h1>This is a title</h1>
+
−
      <p>Some sample text about the article this hexagon leads to</p>
+
−
    </a>
+
−
  </li>
+
−
  <li class="hex">
+
−
    <a class="hexIn" href="#">
+
−
      <img src="https://farm8.staticflickr.com/7163/6822904141_50277565c3.jpg" alt="" />
+
−
      <h1>This is a title</h1>
+
−
      <p>Some sample text about the article this hexagon leads to</p>
+
−
    </a>
+
−
  </li>
+
−
  <li class="hex">
+
−
    <a class="hexIn" href="#">
+
−
      <img src="https://farm4.staticflickr.com/3771/13199704015_72aa535bd7.jpg" alt="" />
+
−
      <h1>This is a title</h1>
+
−
      <p>Some sample text about the article this hexagon leads to</p>
+
−
    </a>
+
−
  </li>
+
−
  <li class="hex">
+
−
    <a class="hexIn" href="#">
+
−
      <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" />
+
−
      <h1>This is a title</h1>
+
−
      <p>Some sample text about the article this hexagon leads to</p>
+
−
    </a>
+
−
  </li>
+
−
  <li class="hex">
+
−
    <a class="hexIn" href="#">
+
−
      <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" />
+
−
      <h1>This is a title</h1>
+
−
      <p>Some sample text about the article this hexagon leads to</p>
+
−
    </a>
+
−
  </li>
+
−
  <li class="hex">
+
−
    <a class="hexIn" href="#">
+
−
      <img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" alt="" />
+
−
      <h1>This is a title</h1>
+
−
      <p>Some sample text about the article this hexagon leads to</p>
+
−
    </a>
+
−
  </li>
+
−
  <li class="hex">
+
−
    <a class="hexIn" href="#">
+
−
      <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" />
+
−
      <h1>This is a title</h1>
+
−
      <p>Some sample text about the article this hexagon leads to</p>
+
−
    </a>
+
−
  </li>
+
−
  <li class="hex">
+
−
    <a class="hexIn" href="#">
+
−
      <img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" alt="" />
+
−
      <h1>This is a title</h1>
+
−
      <p>Some sample text about the article this hexagon leads to</p>
+
−
    </a>
+
−
  </li>
+
−
  <li class="hex">
+
−
    <a class="hexIn" href="#">
+
−
      <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" />
+
−
      <h1>This is a title</h1>
+
−
      <p>Some sample text about the article this hexagon leads to</p>
+
−
    </a>
+
−
  </li>
+
−
  <li class="hex">
+
−
    <a class="hexIn" href="#">
+
−
      <img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" alt="" />
+
−
      <h1>This is a title</h1>
+
−
      <p>Some sample text about the article this hexagon leads to</p>
+
−
    </a>
+
−
  </li>
+
−
  <li class="hex">
+
−
    <a class="hexIn" href="#">
+
−
      <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" />
+
−
      <h1>This is a title</h1>
+
−
      <p>Some sample text about the article this hexagon leads to</p>
+
−
    </a>
+
−
  </li>
+
−
  <li class="hex">
+
−
    <a class="hexIn" href="#">
+
−
      <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" />
+
−
      <h1>This is a title</h1>
+
−
      <p>Some sample text about the article this hexagon leads to</p>
+
−
    </a>
+
−
  </li>
+
−
  <li class="hex">
+
−
    <a class="hexIn" href="#">
+
−
      <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" />
+
−
      <h1>This is a title</h1>
+
−
      <p>Some sample text about the article this hexagon leads to</p>
+
−
    </a>
+
−
  </li>
+
−
  <li class="hex">
+
−
    <a class="hexIn" href="#">
+
−
      <img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="" />
+
−
      <h1>This is a title</h1>
+
−
      <p>Some sample text about the article this hexagon leads to</p>
+
−
    </a>
+
−
  </li>
+
−
  <li class="hex">
+
−
    <a class="hexIn" href="#">
+
−
      <img src="https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg" alt="" />
+
−
      <h1>This is a title</h1>
+
−
      <p>Some sample text about the article this hexagon leads to</p>
+
−
    </a>
+
−
  </li>
+
−
  <li class="hex">
+
−
    <a class="hexIn" href="#">
+
−
      <img src="https://farm9.staticflickr.com/8461/8048823381_0fbc2d8efb.jpg" alt="" />
+
−
      <h1>This is a title</h1>
+
−
      <p>Some sample text about the article this hexagon leads to</p>
+
−
    </a>
+
−
  </li>
+
−
  <li class="hex">
+
−
    <a class="hexIn" href="#">
+
−
      <img src="https://farm5.staticflickr.com/4144/5053682635_b348b24698.jpg" alt="" />
+
−
      <h1>This is a title</h1>
+
−
      <p>Some sample text about the article this hexagon leads to</p>
+
−
    </a>
+
−
  </li>
+
−
  <li class="hex">
+
−
    <a class="hexIn" href="#">
+
−
      <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" />
+
−
      <h1>This is a title</h1>
+
−
      <p>Some sample text about the article this hexagon leads to</p>
+
−
    </a>
+
−
  </li>
+
−
  <li class="hex">
+
−
    <a class="hexIn" href="#">
+
−
      <img src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" alt="" />
+
−
      <h1>This is a title</h1>
+
−
      <p>Some sample text about the article this hexagon leads to</p>
+
−
    </a>
+
−
  </li>
+
−
  <li class="hex">
+
−
    <a class="hexIn" href="#">
+
−
      <img src="https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg" alt="" />
+
−
      <h1>This is a title</h1>
+
−
      <p>Some sample text about the article this hexagon leads to</p>
+
−
    </a>
+
−
  </li>
+
−
  <li class="hex">
+
−
    <a class="hexIn" href="#">
+
−
      <img src="https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg" alt="" />
+
−
      <h1>This is a title</h1>
+
−
      <p>Some sample text about the article this hexagon leads to</p>
+
−
    </a>
+
−
  </li>
+
−
  <li class="hex">
+
−
    <a class="hexIn" href="#">
+
−
      <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" alt="" />
+
−
      <h1>This is a title</h1>
+
−
      <p>Some sample text about the article this hexagon leads to</p>
+
−
    </a>
+
−
  </li>
+
−
  <li class="hex">
+
−
    <a class="hexIn" href="#">
+
−
      <img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="" />
+
−
      <h1>This is a title</h1>
+
−
      <p>Some sample text about the article this hexagon leads to</p>
+
−
    </a>
+
−
  </li>
+
−
</ul>
+
−
<a id="fork" target="_blank" href="https://github.com/web-tiki/responsive-grid-of-hexagons">Fork on GitHub</a>
+
 
</body>
 
</body>
−
 
−
</html>
 

Revision as of 11:31, 27 August 2017

Team:Sydney Australia/Templates/Navbar background:#e2e2e2