Difference between revisions of "Team:Lethbridge"
Keithaiken (Talk | contribs) |
Keithaiken (Talk | contribs) |
||
| Line 3: | Line 3: | ||
<html> | <html> | ||
<style> | <style> | ||
| − | /* | + | /*SIDE MENU FOR IGEM STUFF*/ |
| − | + | #sideMenu{width: 200px;position: absolute;top: 20px;left: 1020px;z-index: 10;padding-top: 0px;padding-bottom: 15px;padding-left: 15px;padding-right: 15px;background-color: white;text-align: left;display: none;z-index: 9996;} | |
| − | + | #content{width: 100%;padding: 0px;margin-left: 0px;} | |
| − | + | #top_title{overflow: hidden;display: none;} | |
| − | + | #top_menu_14{height: 20px;} | |
| − | + | #top_menu_under{height: 0px;} | |
| − | + | /*#globalWrapper{padding-bottom: 200px;}*/ | |
| − | + | ||
| − | /* | + | /*VISIBLE CONTENT STYLING BEGINS HERE*/ |
| − | + | ||
body {padding-top: 3.9em;} | body {padding-top: 3.9em;} | ||
| + | |||
.centerBanner {display: block; margin: auto;} | .centerBanner {display: block; margin: auto;} | ||
| + | |||
.fitBanner {max-height: 100%; max-width: 100%;} | .fitBanner {max-height: 100%; max-width: 100%;} | ||
| + | |||
.centerContainer {margin-left: 5%; margin-right: 5%; text-align: center; font-family: "Arial"; font-size: 125%;} | .centerContainer {margin-left: 5%; margin-right: 5%; text-align: center; font-family: "Arial"; font-size: 125%;} | ||
| + | |||
.textTitle {font-size: 200%; font-style: oblique; text-align: center;} | .textTitle {font-size: 200%; font-style: oblique; text-align: center;} | ||
| + | |||
p {text-align: left !important; z-index=1;} | p {text-align: left !important; z-index=1;} | ||
| + | |||
#introBlurb {text-align: left;} | #introBlurb {text-align: left;} | ||
/*FOOTER CSS RULES BEGINS*/ | /*FOOTER CSS RULES BEGINS*/ | ||
| − | .footerMenu { | + | .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-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 { | + | .footerMenu-open {display: none;} |
| − | + | ||
| − | + | ||
| − | } | + | |
| − | .dots { | + | .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-1 {-webkit-transform: translate3d(0, -8px, 0); transform: translate3d(0, -8px, 0);} | ||
| Line 51: | Line 39: | ||
.dots-3 {-webkit-transform: translate3d(0, 8px, 0); transform: translate3d(0, 8px, 0);} | .dots-3 {-webkit-transform: translate3d(0, 8px, 0); transform: translate3d(0, 8px, 0);} | ||
| − | .footerMenu-open:checked + .footerMenu-open-button .dots-1 { | + | .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-open:checked + .footerMenu-open-button .dots-2 { | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | } | + | |
| − | .footerMenu-open:checked + .footerMenu-open-button .dots-3 { | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | } | + | |
| − | .footerMenu | + | .footerMenu-item:hover {background: #f5af3e; color: #e91e63; z-index: 9999;} |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | } | + | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
.footerMenu-item:nth-child(3) | .footerMenu-item:nth-child(3) | ||
z-index: 9999; | z-index: 9999; | ||
Revision as of 20:07, 10 October 2017
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.
