|
|
| Line 26: |
Line 26: |
| | #introBlurb {text-align: left;} | | #introBlurb {text-align: left;} |
| | | | |
| − | /*FOOTER CSS RULES BEGINS*/
| |
| − | .footerMenu {-webkit-filter: url("#goo"); filter: url("#goo");}
| |
| | | | |
| − | .footerMenu-item, .footerMenu-open-button {background: #377b7e; border-radius: 100%; width: 65px; height: 65px; margin-left: -40px; position: absolute; top: 20px; color: white; text-align: center; line-height: 80px; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: -webkit-transform ease-out 200ms; transition: -webkit-transform ease-out 200ms; transition: transform ease-out 200ms; transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;}
| |
| − |
| |
| − | .footerMenu-open {display: none;}
| |
| − |
| |
| − | .dots {width: 5px; height: 5px; border-radius: 50%; background: white; display: block; position: absolute; top: 50%; left: 50%; margin-left: -2px; margin-top: -2px; -webkit-transition: -webkit-transform 200ms; transition: -webkit-transform 200ms; transition: transform 200ms; transition: transform 200ms, -webkit-transform 200ms;}
| |
| − |
| |
| − | .dots-1 {-webkit-transform: translate3d(0, -8px, 0); transform: translate3d(0, -8px, 0);}
| |
| − | .dots-2 {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
| |
| − | .dots-3 {-webkit-transform: translate3d(0, 8px, 0); transform: translate3d(0, 8px, 0);}
| |
| − |
| |
| − | .footerMenu-open:checked + .footerMenu-open-button .dots-1 {-webkit-transform: translate3d(0, 0, 0) rotate(45deg); transform: translate3d(0, 0, 0) rotate(45deg);}
| |
| − | .footerMenu-open:checked + .footerMenu-open-button .dots-2 {-webkit-transform: translate3d(0, 0, 0) scale(0.1, 1); transform: translate3d(0, 0, 0) scale(0.1, 1);}
| |
| − | .footerMenu-open:checked + .footerMenu-open-button .dots-3 {-webkit-transform: translate3d(0, 0, 0) rotate(-45deg); transform: translate3d(0, 0, 0) rotate(-45deg);}
| |
| − |
| |
| − | .footerMenu {position: absolute; left: 50%; margin-left: -190px; padding-top: 20px; padding-left: 190px; width: 380px; height: 250px; box-sizing: border-box; font-size: 20px; text-align: left;}
| |
| − |
| |
| − | .footerMenu-item:hover {background: #f5af3e; color: #e91e63; z-index: 9999;}
| |
| − |
| |
| − | .footerMenu-item:nth-child(3)
| |
| − | z-index: 9999;
| |
| − | -webkit-transition-duration: 180ms;
| |
| − | transition-duration: 180ms;
| |
| − | }
| |
| − | .footerMenu-item:nth-child(4) {
| |
| − | z-index: 9999;
| |
| − | -webkit-transition-duration: 180ms;
| |
| − | transition-duration: 180ms;
| |
| − | }
| |
| − | .footerMenu-item:nth-child(5) {
| |
| − | z-index: 9999;
| |
| − | -webkit-transition-duration: 180ms;
| |
| − | transition-duration: 180ms;
| |
| − | }
| |
| − | .footerMenu-item:nth-child(6) {
| |
| − | z-index: 9999;
| |
| − | -webkit-transition-duration: 180ms;
| |
| − | transition-duration: 180ms;
| |
| − | }
| |
| − | .footerMenu-item:nth-child(7) {
| |
| − | z-index: 9999;
| |
| − | -webkit-transition-duration: 180ms;
| |
| − | transition-duration: 180ms;
| |
| − | }
| |
| − | .footerMenu-item:nth-child(8) {
| |
| − | z-index: 9999;
| |
| − | -webkit-transition-duration: 180ms;
| |
| − | transition-duration: 180ms;
| |
| − | }
| |
| − | .footerMenu-item:nth-child(9) {
| |
| − | z-index: 9999;
| |
| − | -webkit-transition-duration: 180ms;
| |
| − | transition-duration: 180ms;
| |
| − | }
| |
| − |
| |
| − | .footerMenu-open-button {
| |
| − | z-index: 2;
| |
| − | -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
| |
| − | transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
| |
| − | -webkit-transition-duration: 400ms;
| |
| − | transition-duration: 400ms;
| |
| − | -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
| |
| − | transform: scale(1.1, 1.1) translate3d(0, 0, 0);
| |
| − | cursor: pointer;
| |
| − | }
| |
| − |
| |
| − | .footerMenu-open-button:hover {
| |
| − | z-index: 9999;
| |
| − | -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
| |
| − | transform: scale(1.2, 1.2) translate3d(0, 0, 0);
| |
| − | }
| |
| − |
| |
| − | .footerMenu-open:checked + .footerMenu-open-button {
| |
| − | z-index: 9999;
| |
| − | -webkit-transition-timing-function: linear;
| |
| − | transition-timing-function: linear;
| |
| − | -webkit-transition-duration: 200ms;
| |
| − | transition-duration: 200ms;
| |
| − | -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
| |
| − | transform: scale(0.8, 0.8) translate3d(0, 0, 0);
| |
| − | }
| |
| − |
| |
| − | .footerMenu-open:checked ~ .footerMenu-item {
| |
| − | z-index: 9999;
| |
| − | -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
| |
| − | transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
| |
| − | }
| |
| − | .footerMenu-open:checked ~ .footerMenu-item:nth-child(3) {
| |
| − | z-index: 9999;
| |
| − | -webkit-transition-duration: 180ms;
| |
| − | transition-duration: 180ms;
| |
| − | -webkit-transform: translate3d(0.08361px, -104.99997px, 0);
| |
| − | transform: translate3d(0.08361px, -104.99997px, 0);
| |
| − | }
| |
| − | .footerMenu-open:checked ~ .footerMenu-item:nth-child(4) {
| |
| − | z-index: 9999;
| |
| − | -webkit-transition-duration: 280ms;
| |
| − | transition-duration: 280ms;
| |
| − | -webkit-transform: translate3d(90.9466px, -52.47586px, 0);
| |
| − | transform: translate3d(90.9466px, -52.47586px, 0);
| |
| − | }
| |
| − | .footerMenu-open:checked ~ .footerMenu-item:nth-child(5) {
| |
| − | z-index: 9999;
| |
| − | -webkit-transition-duration: 380ms;
| |
| − | transition-duration: 380ms;
| |
| − | -webkit-transform: translate3d(90.9466px, 52.47586px, 0);
| |
| − | transform: translate3d(90.9466px, 52.47586px, 0);
| |
| − | }
| |
| − | .footerMenu-open:checked ~ .footerMenu-item:nth-child(6) {
| |
| − | z-index: 9999;
| |
| − | -webkit-transition-duration: 480ms;
| |
| − | transition-duration: 480ms;
| |
| − | -webkit-transform: translate3d(0.08361px, 104.99997px, 0);
| |
| − | transform: translate3d(0.08361px, 104.99997px, 0);
| |
| − | }
| |
| − | .footerMenu-open:checked ~ .footerMenu-item:nth-child(7) {
| |
| − | z-index: 9999;
| |
| − | -webkit-transition-duration: 580ms;
| |
| − | transition-duration: 580ms;
| |
| − | -webkit-transform: translate3d(-90.86291px, 52.62064px, 0);
| |
| − | transform: translate3d(-90.86291px, 52.62064px, 0);
| |
| − | }
| |
| − | .footerMenu-open:checked ~ .footerMenu-item:nth-child(8) {
| |
| − | z-index: 9999;
| |
| − | -webkit-transition-duration: 680ms;
| |
| − | transition-duration: 680ms;
| |
| − | -webkit-transform: translate3d(-91.03006px, -52.33095px, 0);
| |
| − | transform: translate3d(-91.03006px, -52.33095px, 0);
| |
| − | }
| |
| − | .footerMenu-open:checked ~ .footerMenu-item:nth-child(9) {
| |
| − | z-index: 9999;
| |
| − | -webkit-transition-duration: 780ms;
| |
| − | transition-duration: 780ms;
| |
| − | -webkit-transform: translate3d(-0.25084px, -104.9997px, 0);
| |
| − | transform: translate3d(-0.25084px, -104.9997px, 0);
| |
| − | }
| |
| − | /* FOOTER CSS RULES ENDS*/
| |
| | </style> | | </style> |
| | <body> | | <body> |
| Line 192: |
Line 54: |
| | </div> | | </div> |
| | </div> | | </div> |
| − |
| |
| − |
| |
| | | | |
| | <!--<img src="https://static.igem.org/mediawiki/2017/9/96/Temp_footer_banner.png" class="centerBanner fitBanner">--> | | <!--<img src="https://static.igem.org/mediawiki/2017/9/96/Temp_footer_banner.png" class="centerBanner fitBanner">--> |
| | | | |
| − |
| |
| − |
| |
| − | <!--footer animation-->
| |
| − | <nav class="footerMenu">
| |
| − | <input type="checkbox" href="#" class="footerMenu-open" name="footerMenu-open" id="footerMenu-open"/>
| |
| − | <label class="footerMenu-open-button" for="footerMenu-open">
| |
| − | <span class="dots dots-1"></span>
| |
| − | <span class="dots dots-2"></span>
| |
| − | <span class="dots dots-3"></span>
| |
| − | </label>
| |
| − | <a href="#" class="footerMenu-item"> <i class="fa fa-topBrowser"></i> </a>
| |
| − | <a href="#" class="footerMenu-item"> <i class="fa fa-nvhome"></i> </a>
| |
| − | <!--<a href="#" class="footerMenu-item"> <i class="fa fa-heart"></i> </a>-->
| |
| − | <!--<a href="#" class="footerMenu-item"> <i class="fa fa-envelope"></i> </a>-->
| |
| − | <!--<a href="#" class="footerMenu-item"> <i class="fa fa-cog"></i> </a>-->
| |
| − | <!--<a href="#" class="footerMenu-item"> <i class="fa fa-ellipsis-h"></i> </a>-->
| |
| − | </nav>
| |
| − | <!-- filters -->
| |
| − | <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
| |
| − | <defs>
| |
| − | <filter id="shadowed-goo">
| |
| − |
| |
| − | <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
| |
| − | <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
| |
| − | <feGaussianBlur in="goo" stdDeviation="3" result="shadow" />
| |
| − | <feColorMatrix in="shadow" mode="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 -0.2" result="shadow" />
| |
| − | <feOffset in="shadow" dx="1" dy="1" result="shadow" />
| |
| − | <feBlend in2="shadow" in="goo" result="goo" />
| |
| − | <feBlend in2="goo" in="SourceGraphic" result="mix" />
| |
| − | </filter>
| |
| − | <filter id="goo">
| |
| − | <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
| |
| − | <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
| |
| − | <feBlend in2="goo" in="SourceGraphic" result="mix" />
| |
| − | </filter>
| |
| − | </defs>
| |
| − | </svg>
| |
| | </body> | | </body> |
| | </html> | | </html> |
Description
Lorem ipsum dolor sit amet, nec nam rutrum tincidunt dolor venenatis sed, justo sit tempus vestibulum, ligula sit nibh augue. Morbi nulla, placerat turpis lectus rutrum ante a facilisi, suspendisse rhoncus integer sit quis, nam nunc velit commodo eu consequat at. Donec eget nunc orci id, pede commodo placerat. Praesent lacus, quisque metus sem. Rutrum lacus feugiat, dis dui, at malesuada leo in nisl. Ut laoreet integer nibh duis, fermentum ut ut metus id, curabitur semper amet faucibus. Non tempus odio fermentum, a vitae praesent. At at eros porta, mauris purus eget felis nullam, aliquet turpis nonummy velit justo. In dictum, venenatis iaculis, porttitor mauris nec, mauris eu aliquam amet elit, in pede vel.
Lorem ipsum dolor sit amet, nec nam rutrum tincidunt dolor venenatis sed, justo sit tempus vestibulum, ligula sit nibh augue. Morbi nulla, placerat turpis lectus rutrum ante a facilisi, suspendisse rhoncus integer sit quis, nam nunc velit commodo eu consequat at. Donec eget nunc orci id, pede commodo placerat. Praesent lacus, quisque metus sem. Rutrum lacus feugiat, dis dui, at malesuada leo in nisl. Ut laoreet integer nibh duis, fermentum ut ut metus id, curabitur semper amet faucibus. Non tempus odio fermentum, a vitae praesent. At at eros porta, mauris purus eget felis nullam, aliquet turpis nonummy velit justo. In dictum, venenatis iaculis, porttitor mauris nec, mauris eu aliquam amet elit, in pede vel.
Design
Lorem ipsum dolor sit amet, nec nam rutrum tincidunt dolor venenatis sed, justo sit tempus vestibulum, ligula sit nibh augue. Morbi nulla, placerat turpis lectus rutrum ante a facilisi, suspendisse rhoncus integer sit quis, nam nunc velit commodo eu consequat at. Donec eget nunc orci id, pede commodo placerat. Praesent lacus, quisque metus sem. Rutrum lacus feugiat, dis dui, at malesuada leo in nisl. Ut laoreet integer nibh duis, fermentum ut ut metus id, curabitur semper amet faucibus. Non tempus odio fermentum, a vitae praesent. At at eros porta, mauris purus eget felis nullam, aliquet turpis nonummy velit justo. In dictum, venenatis iaculis, porttitor mauris nec, mauris eu aliquam amet elit, in pede vel.
Lorem ipsum dolor sit amet, nec nam rutrum tincidunt dolor venenatis sed, justo sit tempus vestibulum, ligula sit nibh augue. Morbi nulla, placerat turpis lectus rutrum ante a facilisi, suspendisse rhoncus integer sit quis, nam nunc velit commodo eu consequat at. Donec eget nunc orci id, pede commodo placerat. Praesent lacus, quisque metus sem. Rutrum lacus feugiat, dis dui, at malesuada leo in nisl. Ut laoreet integer nibh duis, fermentum ut ut metus id, curabitur semper amet faucibus. Non tempus odio fermentum, a vitae praesent. At at eros porta, mauris purus eget felis nullam, aliquet turpis nonummy velit justo. In dictum, venenatis iaculis, porttitor mauris nec, mauris eu aliquam amet elit, in pede vel.
Demonstrate
Lorem ipsum dolor sit amet, nec nam rutrum tincidunt dolor venenatis sed, justo sit tempus vestibulum, ligula sit nibh augue. Morbi nulla, placerat turpis lectus rutrum ante a facilisi, suspendisse rhoncus integer sit quis, nam nunc velit commodo eu consequat at. Donec eget nunc orci id, pede commodo placerat. Praesent lacus, quisque metus sem. Rutrum lacus feugiat, dis dui, at malesuada leo in nisl. Ut laoreet integer nibh duis, fermentum ut ut metus id, curabitur semper amet faucibus. Non tempus odio fermentum, a vitae praesent. At at eros porta, mauris purus eget felis nullam, aliquet turpis nonummy velit justo. In dictum, venenatis iaculis, porttitor mauris nec, mauris eu aliquam amet elit, in pede vel.
Lorem ipsum dolor sit amet, nec nam rutrum tincidunt dolor venenatis sed, justo sit tempus vestibulum, ligula sit nibh augue. Morbi nulla, placerat turpis lectus rutrum ante a facilisi, suspendisse rhoncus integer sit quis, nam nunc velit commodo eu consequat at. Donec eget nunc orci id, pede commodo placerat. Praesent lacus, quisque metus sem. Rutrum lacus feugiat, dis dui, at malesuada leo in nisl. Ut laoreet integer nibh duis, fermentum ut ut metus id, curabitur semper amet faucibus. Non tempus odio fermentum, a vitae praesent. At at eros porta, mauris purus eget felis nullam, aliquet turpis nonummy velit justo. In dictum, venenatis iaculis, porttitor mauris nec, mauris eu aliquam amet elit, in pede vel.
