|
|
| Line 1: |
Line 1: |
| − | {{Amoy}}
| |
| − | <html>
| |
| − | <head>
| |
| − | <title>Amoy</title>
| |
| | | | |
| − | <style>
| |
| − | body{
| |
| − | background-color: green;
| |
| − | }
| |
| − | * {
| |
| − | margin:0;
| |
| − | padding:0;
| |
| − | }
| |
| − | .grid {
| |
| − | margin: 40px auto 120px;
| |
| − | max-width: 1000px;
| |
| − | width: 90%;
| |
| − | }
| |
| − | .grid a {
| |
| − | float: left;
| |
| − | max-width: 250px;
| |
| − | width: 25%;
| |
| − | color: #333;
| |
| − | }
| |
| − | .grid a:nth-child(odd) {
| |
| − | margin: 30px 0 -30px 0;
| |
| − | }
| |
| − | .grid figure {
| |
| − | position: relative;
| |
| − | overflow: hidden;
| |
| − | margin: 5px;
| |
| − | background: #333;
| |
| − | }
| |
| − | .grid figure img {
| |
| − | position: relative;
| |
| − | display: block;
| |
| − | width: 100%;
| |
| − | opacity: 0.7;
| |
| − | -webkit-transition: opacity 0.3s;
| |
| − | transition: opacity 0.3s;
| |
| − | }
| |
| − | .grid figcaption {
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | z-index: 11;
| |
| − | padding: 10px;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | text-align: center;
| |
| − | }
| |
| − | .grid figcaption h2 {
| |
| − | margin: 0 0 20px 0;
| |
| − | color: #3498db;
| |
| − | text-transform: uppercase;
| |
| − | letter-spacing: 1px;
| |
| − | font-weight: 300;
| |
| − | font-size: 130%;
| |
| − | -webkit-transition: -webkit-transform 0.3s;
| |
| − | transition: transform 0.3s;
| |
| − | }
| |
| − | .grid figcaption p {
| |
| − | padding: 0 20px;
| |
| − | color: #aaa;
| |
| − | font-weight: 300;
| |
| − | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
| |
| − | transition: opacity 0.3s, transform 0.3s;
| |
| − | }
| |
| − | .grid figcaption h2, .grid figcaption p {
| |
| − | -webkit-transform: translateY(50px);
| |
| − | transform: translateY(50px);
| |
| − | }
| |
| − | .grid figure button {
| |
| − | position: absolute;
| |
| − | padding: 4px 20px;
| |
| − | border: none;
| |
| − | text-transform: uppercase;
| |
| − | letter-spacing: 1px;
| |
| − | font-weight: bold;
| |
| − | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
| |
| − | transition: opacity 0.3s, transform 0.3s;
| |
| − | }
| |
| − | .grid figcaption, .grid figcaption h2, .grid figcaption p, .grid figure button {
| |
| − | -webkit-backface-visibility: hidden;
| |
| − | backface-visibility: hidden;
| |
| − | }
| |
| − | /* Style for SVG */
| |
| − | .grid svg {
| |
| − | position: absolute;
| |
| − | top: -1px; /* fixes rendering issue in FF */
| |
| − | z-index: 10;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | }
| |
| − | .grid svg path {
| |
| − | fill: #fff;
| |
| − | }
| |
| − | /* Hover effects */
| |
| − | .grid a:hover figure img {
| |
| − | opacity: 1;
| |
| − | }
| |
| − | .grid a:hover figcaption h2, .grid a:hover figcaption p {
| |
| − | -webkit-transform: translateY(0);
| |
| − | transform: translateY(0);
| |
| − | }
| |
| − | .grid a:hover figcaption p {
| |
| − | opacity: 0;
| |
| − | }
| |
| − | /* Individual styles */
| |
| − | .demo-1 body {
| |
| − | background: #3498db;
| |
| − | }
| |
| − | .demo-1 .grid figure button, .demo-3 .grid figure button {
| |
| − | top: 50%;
| |
| − | left: 50%;
| |
| − | border: 3px solid #fff;
| |
| − | background: transparent;
| |
| − | color: #fff;
| |
| − | opacity: 0;
| |
| − | -webkit-transform: translateY(-50%) translateX(-50%) scale(0.25);
| |
| − | transform: translateY(-50%) translateX(-50%) scale(0.25);
| |
| − | }
| |
| − | .demo-1 .grid a:hover figure button, .demo-3 .grid a:hover figure button {
| |
| − | opacity: 1;
| |
| − | -webkit-transform: translateY(-50%) translateX(-50%) scale(1);
| |
| − | transform: translateY(-50%) translateX(-50%) scale(1);
| |
| − | }
| |
| − | .demo-2 body {
| |
| − | background: #e74c3c;
| |
| − | }
| |
| − | .demo-2 .grid figcaption h2 {
| |
| − | color: #e74c3c;
| |
| − | }
| |
| − | .demo-2 .grid figcaption p {
| |
| − | -webkit-transition-delay: 0.05s;
| |
| − | transition-delay: 0.05s;
| |
| − | }
| |
| − | .demo-2 .grid figure button {
| |
| − | bottom: 0;
| |
| − | left: 0;
| |
| − | padding: 15px;
| |
| − | width: 100%;
| |
| − | background: #fff;
| |
| − | color: #333;
| |
| − | font-weight: 300;
| |
| − | -webkit-transform: translateY(100%);
| |
| − | transform: translateY(100%);
| |
| − | }
| |
| − | .demo-2 .grid a:hover figure button {
| |
| − | -webkit-transition-timing-function: ease-out;
| |
| − | transition-timing-function: ease-out;
| |
| − | -webkit-transform: translateY(0);
| |
| − | transform: translateY(0);
| |
| − | }
| |
| − | .demo-2 .grid figcaption h2, .demo-2 .grid figcaption p, .demo-3 .grid figcaption h2, .demo-3 .grid figcaption p {
| |
| − | -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.115, 1); /* older webkit */
| |
| − | -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.115, 1.445);
| |
| − | timing-function: cubic-bezier(0.250, 0.250, 0.115, 1.445);
| |
| − | }
| |
| − | .demo-2 .grid a:hover figcaption p, .demo-3 .grid a:hover figcaption p {
| |
| − | -webkit-transition-delay: 0s;
| |
| − | transition-delay: 0s;
| |
| − | -webkit-transition-duration: 0.1s;
| |
| − | transition-duration: 0.1s;
| |
| − | }
| |
| − | .demo-3 body {
| |
| − | background: #52be7f;
| |
| − | }
| |
| − | .demo-3 .grid figcaption h2 {
| |
| − | color: #52be7f;
| |
| − | }
| |
| − | .demo-3 .grid a:hover figcaption h2 {
| |
| − | -webkit-transform: translateY(5px);
| |
| − | transform: translateY(5px);
| |
| − | }
| |
| − |
| |
| − | /* Media Queries */
| |
| − | /* Let's redefine the width of each anchor and the margins */
| |
| − |
| |
| − | @media screen and (max-width: 58em) {
| |
| − | .grid a {
| |
| − | width: 33.333%;
| |
| − | }
| |
| − | .grid a:nth-child(odd) {
| |
| − | margin: 0;
| |
| − | }
| |
| − | .grid a:nth-child(3n-1) {
| |
| − | margin: 30px 0 -30px 0;
| |
| − | }
| |
| − | }
| |
| − | @media screen and (max-width: 45em) {
| |
| − | .grid {
| |
| − | max-width: 500px;
| |
| − | }
| |
| − | .grid a {
| |
| − | width: 50%;
| |
| − | }
| |
| − | .grid a:nth-child(3n-1) {
| |
| − | margin: 0;
| |
| − | }
| |
| − | .grid a:nth-child(even) {
| |
| − | margin: 30px 0 -30px 0;
| |
| − | }
| |
| − | .grid figcaption h2 {
| |
| − | margin-bottom: 0px;
| |
| − | -webkit-transform: translateY(30px);
| |
| − | transform: translateY(30px);
| |
| − | }
| |
| − | .grid figcaption p {
| |
| − | margin: 0;
| |
| − | padding: 0 10px;
| |
| − | }
| |
| − | }
| |
| − | @media screen and (max-width: 27em) {
| |
| − | .grid {
| |
| − | max-width: 250px;
| |
| − | }
| |
| − | .grid a {
| |
| − | width: 100%;
| |
| − | }
| |
| − | .grid a:nth-child(even) {
| |
| − | margin: 0;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| − | </head>
| |
| − | <body>
| |
| − | <div>
| |
| − | <p>THIS IS OUR PROJECT NAME</p>
| |
| − | <p>WELCOME TO AMOY CHINA</p>
| |
| − | <img src="#"/>
| |
| − | <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
| |
| − | <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
| |
| − | <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
| |
| − | <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
| |
| − | </div>
| |
| − |
| |
| − | <div class="container">
| |
| − | <section id="grid" class="grid clearfix">
| |
| − | <a href="http://www.lanrenzhijia.com/" data-path-hover="M 0,0 0,38 90,58 180.5,38 180,0 z">
| |
| − | <figure>
| |
| − | <img src="http://demo.lanrenzhijia.com/2015/svg0116/images/lanrenzhijia1.png" />
| |
| − | <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 0 0 L 0 182 L 90 126.5 L 180 182 L 180 0 L 0 0 z "/></svg>
| |
| − | <figcaption>
| |
| − | <h2>Crystalline</h2>
| |
| − | <p>Soko radicchio bunya nuts gram dulse.</p>
| |
| − | <button>View</button>
| |
| − | </figcaption>
| |
| − | </figure>
| |
| − | </a>
| |
| − | <a href="http://www.lanrenzhijia.com/" data-path-hover="M 0,0 0,38 90,58 180.5,38 180,0 z">
| |
| − | <figure>
| |
| − | <img src="http://demo.lanrenzhijia.com/2015/svg0116/images/lanrenzhijia2.png" />
| |
| − | <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 0 0 L 0 182 L 90 126.5 L 180 182 L 180 0 L 0 0 z "/></svg>
| |
| − | <figcaption>
| |
| − | <h2>Cacophony</h2>
| |
| − | <p>Two greens tigernut soybean radish.</p>
| |
| − | <button>View</button>
| |
| − | </figcaption>
| |
| − | </figure>
| |
| − | </a>
| |
| − | <a href="http://www.lanrenzhijia.com/" data-path-hover="M 0,0 0,38 90,58 180.5,38 180,0 z">
| |
| − | <figure>
| |
| − | <img src="http://demo.lanrenzhijia.com/2015/svg0116/images/lanrenzhijia3.png" />
| |
| − | <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 0 0 L 0 182 L 90 126.5 L 180 182 L 180 0 L 0 0 z "/></svg>
| |
| − | <figcaption>
| |
| − | <h2>Languid</h2>
| |
| − | <p>Beetroot water spinach okra water.</p>
| |
| − | <button>View</button>
| |
| − | </figcaption>
| |
| − | </figure>
| |
| − | </a>
| |
| − | <a href="http://www.lanrenzhijia.com/" data-path-hover="M 0,0 0,38 90,58 180.5,38 180,0 z">
| |
| − | <figure>
| |
| − | <img src="http://demo.lanrenzhijia.com/2015/svg0116/images/lanrenzhijia4.png" />
| |
| − | <svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 0 0 L 0 182 L 90 126.5 L 180 182 L 180 0 L 0 0 z "/></svg>
| |
| − | <figcaption>
| |
| − | <h2>Serene</h2>
| |
| − | <p>Water spinach arugula pea tatsoi.</p>
| |
| − | <button>View</button>
| |
| − | </figcaption>
| |
| − | </figure>
| |
| − | </a>
| |
| − | </section>
| |
| − | </div>
| |
| − |
| |
| − | <script src="http://www.lanrenzhijia.com/ajaxjs/snap.svg-min.js"></script>
| |
| − | <!--[if IE]>
| |
| − | <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
| |
| − | <![endif]-->
| |
| − | <script>
| |
| − | (function() {
| |
| − | function init() {
| |
| − | var speed = 300,
| |
| − | easing = mina.backout;
| |
| − | [].slice.call ( document.querySelectorAll( '#grid > a' ) ).forEach( function( el ) {
| |
| − | var s = Snap( el.querySelector( 'svg' ) ), path = s.select( 'path' ),
| |
| − | pathConfig = {
| |
| − | from : path.attr( 'd' ),
| |
| − | to : el.getAttribute( 'data-path-hover' )
| |
| − | };
| |
| − |
| |
| − | el.addEventListener( 'mouseenter', function() {
| |
| − | path.animate( { 'path' : pathConfig.to }, speed, easing );
| |
| − | } );
| |
| − |
| |
| − | el.addEventListener( 'mouseleave', function() {
| |
| − | path.animate( { 'path' : pathConfig.from }, speed, easing );
| |
| − | } );
| |
| − | } );
| |
| − | }
| |
| − |
| |
| − | init();
| |
| − |
| |
| − | })();
| |
| − | </script>
| |
| − |
| |
| − | </body>
| |
| − | </html>
| |