|
|
| Line 5: |
Line 5: |
| | <p style="font-size:40px"> | | <p style="font-size:40px"> |
| | <div align="left"> | | <div align="left"> |
| - | <head>
| |
| - |
| |
| | | | |
| - | <!-- CSS for Hexagon Presentation -->
| |
| - | <style>
| |
| - |
| |
| - |
| |
| - | /* ==========================================================================
| |
| - | Base styles: opinionated defaults
| |
| - | ========================================================================== */
| |
| - |
| |
| - |
| |
| - | /*
| |
| - | * Remove text-shadow in selection highlight: h5bp.com/i
| |
| - | * These selection declarations have to be separate.
| |
| - | * Customize the background color to match your design.
| |
| - | */
| |
| - |
| |
| - | ::-moz-selection {
| |
| - | text-shadow: none;
| |
| - | }
| |
| - |
| |
| - | ::selection {
| |
| - | text-shadow: none;
| |
| - | }
| |
| - |
| |
| - | /*
| |
| - | * A better looking default horizontal rule
| |
| - | */
| |
| - |
| |
| - | hr {
| |
| - | display: block;
| |
| - | height: 1px;
| |
| - | border: 0;
| |
| - | border-top: 1px solid #ccc;
| |
| - | margin: 1em 0;
| |
| - | padding: 0;
| |
| - | }
| |
| - |
| |
| - | /*
| |
| - | * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
| |
| - | */
| |
| - |
| |
| - | img {
| |
| - | vertical-align: middle;
| |
| - | }
| |
| - |
| |
| - | /*
| |
| - | * Remove default fieldset styles.
| |
| - | */
| |
| - |
| |
| - | fieldset {
| |
| - | border: 0;
| |
| - | margin: 0;
| |
| - | padding: 0;
| |
| - | }
| |
| - |
| |
| - | /*
| |
| - | * Allow only vertical resizing of textareas.
| |
| - | */
| |
| - |
| |
| - | textarea {
| |
| - | resize: vertical;
| |
| - | }
| |
| - |
| |
| - | /* ==========================================================================
| |
| - | Chrome Frame prompt
| |
| - | ========================================================================== */
| |
| - |
| |
| - | .chromeframe {
| |
| - | margin: 0.2em 0;
| |
| - | background: #ccc;
| |
| - | color: #000;
| |
| - | padding: 0.2em 0;
| |
| - | }
| |
| - |
| |
| - |
| |
| - | /* ==========================================================================
| |
| - | Basic layout
| |
| - | ========================================================================== */
| |
| - |
| |
| - | @media only screen and (-webkit-min-device-pixel-ratio: 2) {
| |
| - | body {
| |
| - | background-size: 50%;
| |
| - | }
| |
| - | }
| |
| - |
| |
| - | .site-header {
| |
| - | min-width: 280px;
| |
| - | max-width: 826px;
| |
| - | margin: 0 auto;
| |
| - | }
| |
| - |
| |
| - | .site-header {
| |
| - | padding: 0 0 42px;
| |
| - | }
| |
| - |
| |
| - | .site-header .tagline {
| |
| - | margin: 0;
| |
| - | }
| |
| - |
| |
| - | .sparator {
| |
| - | width: 100%;
| |
| - | }
| |
| - |
| |
| - | .site-header, .about-me, .from-my-blog {
| |
| - | width: 75%;
| |
| - | }
| |
| - |
| |
| - | @media all and (min-width:601px) and (max-width:1020px) {
| |
| - | .site-header, .about-me, .from-my-blog {
| |
| - | width: 82%;
| |
| - | }
| |
| - | }
| |
| - |
| |
| - | .works, .works-hex, nav, .blog-excerpts-wrapper {
| |
| - | background-color: rgba(0,0,0,0.4);
| |
| - | }
| |
| - |
| |
| - |
| |
| - | /* ==========================================================================
| |
| - | Navigation
| |
| - | ========================================================================== */
| |
| - |
| |
| - | nav {
| |
| - | height: 78px;
| |
| - | padding-bottom: 5px;
| |
| - | }
| |
| - |
| |
| - | .top-ribbon {
| |
| - | height: 5px;
| |
| - | }
| |
| - |
| |
| - | nav ul {
| |
| - | width: 75%;
| |
| - | min-width: 280px;
| |
| - | max-width: 826px;
| |
| - | margin: 0 auto;
| |
| - | padding: 0;
| |
| - | }
| |
| - |
| |
| - | nav li {
| |
| - | float: right;
| |
| - | display: inline-block;
| |
| - | padding: 15px 10px 2px;
| |
| - | margin: 0 6px;
| |
| - | -webkit-border-radius: 0 0 7px 7px;
| |
| - | -moz-border-radius: 0 0 7px 7px;
| |
| - | border-radius: 0 0 7px 7px;
| |
| - | cursor: pointer;
| |
| - | }
| |
| - |
| |
| - | .win nav li {
| |
| - | padding: 12px 10px 5px;
| |
| - | }
| |
| - |
| |
| - | nav li:hover {
| |
| - | background-color: rgb(192, 23, 104);
| |
| - | text-shadow: 1px 1px 3px rgb(0, 0, 0);
| |
| - | }
| |
| - |
| |
| - |
| |
| - | /* ==========================================================================
| |
| - | Hexagon shape defaults
| |
| - | ========================================================================== */
| |
| - |
| |
| - | .hexagon {
| |
| - | display: inline-block;
| |
| - | overflow: hidden;
| |
| - | visibility: hidden;
| |
| - | -webkit-transform: rotate(120deg);
| |
| - | -moz-transform: rotate(120deg);
| |
| - | transform: rotate(120deg);
| |
| - | }
| |
| - |
| |
| - | .hexagon-in1, .hexagon-in2 {
| |
| - | overflow: hidden;
| |
| - | display: block;
| |
| - | width: 100%;
| |
| - | height: 100%;
| |
| - | -webkit-transform: rotate(-60deg);
| |
| - | -moz-transform: rotate(-60deg);
| |
| - | transform: rotate(-60deg);
| |
| - | }
| |
| - |
| |
| - | .hexagon-in2 {
| |
| - | overflow: hidden;
| |
| - | visibility: visible;
| |
| - | background-color: rgba(46, 46, 46, 1);
| |
| - | }
| |
| - |
| |
| - |
| |
| - | /* ==========================================================================
| |
| - | Works & Gallery effects
| |
| - | ========================================================================== */
| |
| - |
| |
| - | @media all and (min-width:1031px) {
| |
| - |
| |
| - | .thumbnail {
| |
| - | -webkit-transition: all 0.2s ease-out;
| |
| - | -moz-transition: all 0.2s ease-out;
| |
| - | transition: all 0.2s ease-out;
| |
| - | }
| |
| - |
| |
| - | .thumbnail:hover {
| |
| - | -webkit-transition: all 0.2s ease-out;
| |
| - | -moz-transition: all 0.2s ease-out;
| |
| - | transition: all 0.2s ease-out;
| |
| - | }
| |
| - |
| |
| - | .works-hex .thumbnail:hover, .gallery-hex .thumbnail:hover {
| |
| - | width: 110%;
| |
| - | margin: 0 0 0 -5%;
| |
| - | }
| |
| - |
| |
| - | .works .thumbnail, .gallery .thumbnail {
| |
| - | -webkit-filter: grayscale(1) sepia(0.03);
| |
| - | }
| |
| - |
| |
| - | .works .thumbnail:hover , .gallery .thumbnail:hover {
| |
| - | -webkit-filter: grayscale(0) sepia(0);
| |
| - | }
| |
| - | }
| |
| - |
| |
| - |
| |
| - | /* ==========================================================================
| |
| - | Works
| |
| - | ========================================================================== */
| |
| - |
| |
| - | .thumbnail {
| |
| - | width: 100%;
| |
| - | }
| |
| - |
| |
| - | .works, .works-hex {
| |
| - | text-align: center;
| |
| - | overflow: hidden;
| |
| - | }
| |
| - |
| |
| - | .category {
| |
| - | border: none;
| |
| - | display: inline-block;
| |
| - | padding-bottom: 2%;
| |
| - | }
| |
| - |
| |
| - | .category:hover {
| |
| - | border: none;
| |
| - | }
| |
| - |
| |
| - | .works .category {
| |
| - | width: 23%;
| |
| - | min-width: 90px;
| |
| - | max-width: 256px;
| |
| - | margin: 0 12px;
| |
| - | }
| |
| - |
| |
| - | .four.works .category {
| |
| - | width: 17%;
| |
| - | min-width: 72px;
| |
| - | max-width: 186px;
| |
| - | margin: 0 11px;
| |
| - | }
| |
| - |
| |
| - | .works-hex .category {
| |
| - | width: 25%;
| |
| - | min-width: 100px;
| |
| - | max-width: 270px;
| |
| - | margin: 0 1px;
| |
| - | }
| |
| - |
| |
| - | @media all and (max-width:480px) {
| |
| - |
| |
| - | .works-hex .category {
| |
| - | margin: 0;
| |
| - | }
| |
| - | }
| |
| - |
| |
| - | @media all and (min-width:481px) and (max-width:1020px){
| |
| - |
| |
| - | .works .category {
| |
| - | margin: 0 1.5% 0;
| |
| - | width: 25%;
| |
| - | }
| |
| - |
| |
| - | .four.works .category {
| |
| - | margin: 0 1.5% 0;
| |
| - | width: 18%;
| |
| - | }
| |
| - | }
| |
| - |
| |
| - | @media all and (max-width:480px) {
| |
| - |
| |
| - | .works .category {
| |
| - | margin: 3% 1.5% 0;
| |
| - | width: 25%;
| |
| - | }
| |
| - |
| |
| - | .four.works .category {
| |
| - | margin: 3% 0.5% 0;
| |
| - | width: 21%;
| |
| - | }
| |
| - | }
| |
| - |
| |
| - | .works .thumbnail, .gallery .thumbnail {
| |
| - | -webkit-border-radius: 5px;
| |
| - | -moz-border-radius: 5px;
| |
| - | border-radius: 5px;
| |
| - | }
| |
| - |
| |
| - | .wrapper {
| |
| - | display: inline-block;
| |
| - | position: relative;
| |
| - | overflow: hidden;
| |
| - | width: 100%;
| |
| - | }
| |
| - |
| |
| - | .works .wrapper {
| |
| - | margin: 10% 0 17% 0;
| |
| - | }
| |
| - |
| |
| - | .works-hex .wrapper {
| |
| - | margin: 17% 0;
| |
| - | }
| |
| - |
| |
| - | .works-hex .wrapper:after {
| |
| - | padding-top: 116%; /*ratio*/
| |
| - | display: block;
| |
| - | content: '';
| |
| - | }
| |
| - |
| |
| - | .works-hex .hexagon {
| |
| - | position: absolute;
| |
| - | top: 0;
| |
| - | bottom: 0;
| |
| - | right: 0;
| |
| - | left: 0;
| |
| - | }
| |
| - |
| |
| - | .category-name {
| |
| - | display: inline-block;
| |
| - | margin-top: -9%;
| |
| - | }
| |
| - |
| |
| - | .win .category-name {
| |
| - | margin-top: -12%;
| |
| - | }
| |
| - |
| |
| - |
| |
| - |
| |
| - | /* ==========================================================================
| |
| - | Gallery
| |
| - | ========================================================================== */
| |
| - |
| |
| - | .gallery, .gallery-hex {
| |
| - | width: 85%;
| |
| - | min-width: 314px;
| |
| - | }
| |
| - |
| |
| - | .gallery-hex {
| |
| - | max-width: 719px;
| |
| - | margin: 70px auto 90px;
| |
| - | }
| |
| - |
| |
| - | .gallery {
| |
| - | max-width: 800px;
| |
| - | margin: 0 auto 90px;
| |
| - | }
| |
| - |
| |
| - | .gallery .wrapper, .gallery-hex .wrapper {
| |
| - | display: inline-block;
| |
| - | position: relative;
| |
| - | overflow: hidden;
| |
| - |
| |
| - | }
| |
| - |
| |
| - | .gallery-hex .wrapper {
| |
| - | width: 32%;
| |
| - | margin: -9.3% 0.2% 0;
| |
| - | }
| |
| - |
| |
| - | .gallery .wrapper {
| |
| - | width: 29%;
| |
| - | min-width: 100px;
| |
| - | margin: 2% 1.6%;
| |
| - | }
| |
| - |
| |
| - | .gallery .hexagon a {
| |
| - | border: none;
| |
| - | margin: 0;
| |
| - | }
| |
| - |
| |
| - | @media all and (max-width:800px) {
| |
| - |
| |
| - | .gallery-hex {
| |
| - | padding: 0 0 100px 1.9%;
| |
| - | margin-top: 6%;
| |
| - | }
| |
| - | }
| |
| - |
| |
| - | @media all and (max-width:320px) {
| |
| - |
| |
| - | .gallery {
| |
| - | margin-left: 5px;
| |
| - | }
| |
| - |
| |
| - | .gallery .wrapper {
| |
| - | margin: 0 0 7px;
| |
| - | }
| |
| - | }
| |
| - |
| |
| - | .gallery-hex .wrapper:after {
| |
| - | padding-top: 116%;
| |
| - | display: block;
| |
| - | content: '';
| |
| - | }
| |
| - |
| |
| - | .gallery-hex .wrapper:hover {
| |
| - | z-index: 100;
| |
| - | }
| |
| - |
| |
| - | .gallery-hex .hexagon {
| |
| - | position: absolute;
| |
| - | top: 0;
| |
| - | bottom: 0;
| |
| - | right: 0;
| |
| - | left: 0;
| |
| - | }
| |
| - |
| |
| - | .gallery-hex .wrapper:nth-child(5n+4) {
| |
| - | margin-left: 16.75%;
| |
| - | }
| |
| - |
| |
| - | .gallery-hex .hexagon a {
| |
| - | border: none;
| |
| - | margin: 0;
| |
| - | }
| |
| - |
| |
| - |
| |
| - | /* ==========================================================================
| |
| - | Single work
| |
| - | ========================================================================== */
| |
| - |
| |
| - | .single-work {
| |
| - | margin: 60px 0 90px;
| |
| - | }
| |
| - |
| |
| - | .description, .image {
| |
| - | display: inline-block;
| |
| - | vertical-align: top;
| |
| - | }
| |
| - |
| |
| - | .image {
| |
| - | width: 67%;
| |
| - | margin-left: 2em;
| |
| - | }
| |
| - |
| |
| - | .description {
| |
| - | width: 29%;
| |
| - | box-sizing: border-box;
| |
| - | padding: 0 2em;
| |
| - | margin-left: -4px;
| |
| - | }
| |
| - |
| |
| - | .image img {
| |
| - | width: 100%;
| |
| - | -webkit-border-radius: 3px;
| |
| - | -moz-border-radius: 3px;
| |
| - | border-radius: 3px;
| |
| - | }
| |
| - |
| |
| - | .image footer {
| |
| - | margin-top: 20px;
| |
| - | text-align: center;
| |
| - | }
| |
| - |
| |
| - | @media all and (max-width:1020px) {
| |
| - |
| |
| - | .single-work {
| |
| - | margin-top: 56px;
| |
| - | }
| |
| - |
| |
| - | .image {
| |
| - | width: 100%;
| |
| - | padding: 0;
| |
| - | margin-left: 0;
| |
| - | }
| |
| - |
| |
| - | .description {
| |
| - | width: 100%;
| |
| - | padding: 0 2em;
| |
| - | margin: 45px 0 0 0;
| |
| - | }
| |
| - |
| |
| - | .image img {
| |
| - | -webkit-border-radius: 0px;
| |
| - | -moz-border-radius: 0px;
| |
| - | border-radius: 0px;
| |
| - | }
| |
| - | }
| |
| - |
| |
| - |
| |
| - | @media all and (min-width:1601px) {
| |
| - |
| |
| - | .image {
| |
| - | width: 73%;
| |
| - | }
| |
| - |
| |
| - | .description {
| |
| - | width: 20%;
| |
| - | padding: 0 2%;
| |
| - | }
| |
| - | }
| |
| - |
| |
| - | .gallery .wrapper a {
| |
| - | border: none;
| |
| - | margin: 0;
| |
| - | padding: 0;
| |
| - | }
| |
| - |
| |
| - | /* ==========================================================================
| |
| - | Home button
| |
| - | ========================================================================== */
| |
| - |
| |
| - | .home {
| |
| - | position: absolute;
| |
| - | top: 6px;
| |
| - | left: 10px;
| |
| - | font-size: 34px;
| |
| - | }
| |
| - |
| |
| - | .home a {
| |
| - | margin: 0;
| |
| - | border: none;
| |
| - |
| |
| - | -webkit-transition: all 0.2s ease-out;
| |
| - | -moz-transition: all 0.2s ease-out;
| |
| - | transition: all 0.2s ease-out;
| |
| - | }
| |
| - |
| |
| - | .home a:hover {
| |
| - | -webkit-transition: all 0.2s ease-out;
| |
| - | -moz-transition: all 0.2s ease-out;
| |
| - | transition: all 0.2s ease-out;
| |
| - | }
| |
| - |
| |
| - |
| |
| - | /* ==========================================================================
| |
| - | Footer
| |
| - | ========================================================================== */
| |
| - |
| |
| - | .contact {
| |
| - | margin: 45px 15px 15px;
| |
| - | }
| |
| - |
| |
| - | .copyright {
| |
| - | margin: 0 15px 30px;
| |
| - | }
| |
| - |
| |
| - |
| |
| - | /* ==========================================================================
| |
| - | Helper classes
| |
| - | ========================================================================== */
| |
| - |
| |
| - | /*
| |
| - | * Image replacement
| |
| - | */
| |
| - |
| |
| - | .ir {
| |
| - | background-color: transparent;
| |
| - | border: 0;
| |
| - | overflow: hidden;
| |
| - | /* IE 6/7 fallback */
| |
| - | *text-indent: -9999px;
| |
| - | }
| |
| - |
| |
| - | .ir:before {
| |
| - | content: "";
| |
| - | display: block;
| |
| - | width: 0;
| |
| - | height: 100%;
| |
| - | }
| |
| - |
| |
| - | /*
| |
| - | * Hide from both screenreaders and browsers: h5bp.com/u
| |
| - | */
| |
| - |
| |
| - | .hidden {
| |
| - | display: none !important;
| |
| - | visibility: hidden;
| |
| - | }
| |
| - |
| |
| - | /*
| |
| - | * Hide only visually, but have it available for screenreaders: h5bp.com/v
| |
| - | */
| |
| - |
| |
| - | .visuallyhidden {
| |
| - | border: 0;
| |
| - | clip: rect(0 0 0 0);
| |
| - | height: 1px;
| |
| - | margin: -1px;
| |
| - | overflow: hidden;
| |
| - | padding: 0;
| |
| - | position: absolute;
| |
| - | width: 1px;
| |
| - | }
| |
| - |
| |
| - | /*
| |
| - | * Extends the .visuallyhidden class to allow the element to be focusable
| |
| - | * when navigated to via the keyboard: h5bp.com/p
| |
| - | */
| |
| - |
| |
| - | .visuallyhidden.focusable:active,
| |
| - | .visuallyhidden.focusable:focus {
| |
| - | clip: auto;
| |
| - | height: auto;
| |
| - | margin: 0;
| |
| - | overflow: visible;
| |
| - | position: static;
| |
| - | width: auto;
| |
| - | }
| |
| - |
| |
| - | /*
| |
| - | * Hide visually and from screenreaders, but maintain layout
| |
| - | */
| |
| - |
| |
| - | .invisible {
| |
| - | visibility: hidden;
| |
| - | }
| |
| - |
| |
| - | /*
| |
| - | * Clearfix: contain floats
| |
| - | *
| |
| - | * For modern browsers
| |
| - | * 1. The space content is one way to avoid an Opera bug when the
| |
| - | * `contenteditable` attribute is included anywhere else in the document.
| |
| - | * Otherwise it causes space to appear at the top and bottom of elements
| |
| - | * that receive the `clearfix` class.
| |
| - | * 2. The use of `table` rather than `block` is only necessary if using
| |
| - | * `:before` to contain the top-margins of child elements.
| |
| - | */
| |
| - |
| |
| - | .clearfix:before,
| |
| - | .clearfix:after {
| |
| - | content: " "; /* 1 */
| |
| - | display: table; /* 2 */
| |
| - | }
| |
| - |
| |
| - | .clearfix:after {
| |
| - | clear: both;
| |
| - | }
| |
| - |
| |
| - | /*
| |
| - | * For IE 6/7 only
| |
| - | * Include this rule to trigger hasLayout and contain floats.
| |
| - | */
| |
| - |
| |
| - | .clearfix {
| |
| - | *zoom: 1;
| |
| - | }
| |
| - |
| |
| - |
| |
| - | /* ==========================================================================
| |
| - | Print styles.
| |
| - | Inlined to avoid required HTTP connection: h5bp.com/r
| |
| - | ========================================================================== */
| |
| - |
| |
| - | @media print {
| |
| - | * {
| |
| - | background: transparent !important;
| |
| - | color: #000 !important; /* Black prints faster: h5bp.com/s */
| |
| - | box-shadow:none !important;
| |
| - | text-shadow: none !important;
| |
| - | }
| |
| - |
| |
| - | a,
| |
| - | a:visited {
| |
| - | text-decoration: underline;
| |
| - | }
| |
| - |
| |
| - | a[href]:after {
| |
| - | content: " (" attr(href) ")";
| |
| - | }
| |
| - |
| |
| - | abbr[title]:after {
| |
| - | content: " (" attr(title) ")";
| |
| - | }
| |
| - |
| |
| - | /*
| |
| - | * Don't show links for images, or javascript/internal links
| |
| - | */
| |
| - |
| |
| - | .ir a:after,
| |
| - | a[href^="javascript:"]:after,
| |
| - | a[href^="#"]:after {
| |
| - | content: "";
| |
| - | }
| |
| - |
| |
| - | pre,
| |
| - | blockquote {
| |
| - | border: 1px solid #999;
| |
| - | page-break-inside: avoid;
| |
| - | }
| |
| - |
| |
| - | thead {
| |
| - | display: table-header-group; /* h5bp.com/t */
| |
| - | }
| |
| - |
| |
| - | tr,
| |
| - | img {
| |
| - | page-break-inside: avoid;
| |
| - | }
| |
| - |
| |
| - | img {
| |
| - | max-width: 100% !important;
| |
| - | }
| |
| - |
| |
| - | @page {
| |
| - | margin: 0.5cm;
| |
| - | }
| |
| - |
| |
| - | p,
| |
| - | h2,
| |
| - | h3 {
| |
| - | orphans: 3;
| |
| - | widows: 3;
| |
| - | }
| |
| - |
| |
| - | h2,
| |
| - | h3 {
| |
| - | page-break-after: avoid;
| |
| - | }
| |
| - | }
| |
| - | </style>
| |
| - |
| |
| - | <script>
| |
| - | document.cookie='resolution='+Math.max(screen.width,screen.height)+("devicePixelRatio" in window ? ","+devicePixelRatio : ",1")+'; path=/';
| |
| - | </script><!-- Responsive images -->
| |
| - | </head>
| |
| - | <body>
| |
| - | <!--[if lt IE 7]>
| |
| - | <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
| |
| - | <![endif]-->
| |
| - |
| |
| - | <div class="top-ribbon"></div>
| |
| - | <div class="home"><a href="index.html"><i class="icon-home"></i></a></div>
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| - | <section class="gallery-hex">
| |
| - |
| |
| - | <div class="wrapper">
| |
| - | <div class="hexagon">
| |
| - | <div class="hexagon-in1">
| |
| - | <div class="hexagon-in2">
| |
| - | <a href="single-image.html">
| |
| - | <img class="thumbnail" src="https://static.igem.org/mediawiki/2014hs/d/dd/Brandon.png" alt="thumbnail"></a>
| |
| - | </div>
| |
| - | </div>
| |
| - | </div><!--hexagon-->
| |
| - | </div><!--wrapper-->
| |
| - |
| |
| - | <div class="wrapper">
| |
| - | <div class="hexagon">
| |
| - | <div class="hexagon-in1">
| |
| - | <div class="hexagon-in2">
| |
| - | <a href="single-image.html">
| |
| - | <img class="thumbnail" src="img/placeholder.jpg" alt="thumbnail"></a>
| |
| - | </div>
| |
| - | </div>
| |
| - | </div><!--hexagon-->
| |
| - | </div><!--wrapper-->
| |
| - |
| |
| - | <div class="wrapper">
| |
| - | <div class="hexagon">
| |
| - | <div class="hexagon-in1">
| |
| - | <div class="hexagon-in2">
| |
| - | <a href="single-image.html">
| |
| - | <img class="thumbnail" src="img/placeholder.jpg" alt="thumbnail"></a>
| |
| - | </div>
| |
| - | </div>
| |
| - | </div><!--hexagon-->
| |
| - | </div><!--wrapper-->
| |
| - |
| |
| - | <div class="wrapper">
| |
| - | <div class="hexagon">
| |
| - | <div class="hexagon-in1">
| |
| - | <div class="hexagon-in2">
| |
| - | <a href="single-image.html">
| |
| - | <img class="thumbnail" src="img/placeholder.jpg" alt="thumbnail"></a>
| |
| - | </div>
| |
| - | </div>
| |
| - | </div><!--hexagon-->
| |
| - | </div><!--wrapper-->
| |
| - |
| |
| - | <div class="wrapper">
| |
| - | <div class="hexagon">
| |
| - | <div class="hexagon-in1">
| |
| - | <div class="hexagon-in2">
| |
| - | <a href="single-image.html">
| |
| - | <img class="thumbnail" src="img/placeholder.jpg" alt="thumbnail"></a>
| |
| - | </div>
| |
| - | </div>
| |
| - | </div><!--hexagon-->
| |
| - | </div><!--wrapper-->
| |
| - |
| |
| - | <div class="wrapper">
| |
| - | <div class="hexagon">
| |
| - | <div class="hexagon-in1">
| |
| - | <div class="hexagon-in2">
| |
| - | <a href="single-image.html">
| |
| - | <img class="thumbnail" src="img/placeholder.jpg" alt="thumbnail"></a>
| |
| - | </div>
| |
| - | </div>
| |
| - | </div><!--hexagon-->
| |
| - | </div><!--wrapper-->
| |
| - |
| |
| - | <div class="wrapper">
| |
| - | <div class="hexagon">
| |
| - | <div class="hexagon-in1">
| |
| - | <div class="hexagon-in2">
| |
| - | <a href="single-image.html">
| |
| - | <img class="thumbnail" src="img/placeholder.jpg" alt="thumbnail"></a>
| |
| - | </div>
| |
| - | </div>
| |
| - | </div><!--hexagon-->
| |
| - | </div><!--wrapper-->
| |
| - |
| |
| - | <div class="wrapper">
| |
| - | <div class="hexagon">
| |
| - | <div class="hexagon-in1">
| |
| - | <div class="hexagon-in2">
| |
| - | <a href="single-image.html">
| |
| - | <img class="thumbnail" src="img/placeholder.jpg" alt="thumbnail"></a>
| |
| - | </div>
| |
| - | </div>
| |
| - | </div><!--hexagon-->
| |
| - | </div><!--wrapper-->
| |
| - |
| |
| - | <div class="wrapper">
| |
| - | <div class="hexagon">
| |
| - | <div class="hexagon-in1">
| |
| - | <div class="hexagon-in2">
| |
| - | <a href="single-image.html">
| |
| - | <img class="thumbnail" src="img/placeholder.jpg" alt="thumbnail"></a>
| |
| - | </div>
| |
| - | </div>
| |
| - | </div><!--hexagon-->
| |
| - | </div><!--wrapper-->
| |
| - |
| |
| - | <div class="wrapper">
| |
| - | <div class="hexagon">
| |
| - | <div class="hexagon-in1">
| |
| - | <div class="hexagon-in2">
| |
| - | <a href="single-image.html">
| |
| - | <img class="thumbnail" src="img/placeholder.jpg" alt="thumbnail"></a>
| |
| - | </div>
| |
| - | </div>
| |
| - | </div><!--hexagon-->
| |
| - | </div><!--wrapper-->
| |
| - |
| |
| - | </section><!--works-->
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| - | </body>
| |
| | </html> | | </html> |
"
