Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- body {
- font-family: 'Lato', sans-serif;
- color: #fff;
- }
- canvas{
- position: absolute;
- width: 100%; height: 100%;
- top: 0; right: 0; bottom: 0; left: 0;
- }
- .centered {
- text-align: center;
- font-size: 1.5em;
- font-weight: 300;
- position: fixed;
- bottom: 50px;
- right: 0%;
- left: 0;
- margin: auto;
- }
- a {
- color: #5dc;
- text-decoration: none;
- }
- a:hover {
- color: #6ae1d2;
- }
- .container {
- margin: 0;
- padding: 0;
- background: url('background.png') no-repeat bottom;
- width: 100%;
- height: 100vh;
- position: relative;
- -webkit-transition: all 0.3s;
- -moz-transition: all 0.3s;
- -o-transition: all 0.3s;
- transition: all 0.3s;
- overflow-y: hidden;
- }
- .container.menu-open {
- position: relative;
- /*right:230px;*/
- -webkit-transform: translate(-230px, 0);
- -moz-transform: translate(-230px, 0);
- -ms-transform: translate(-230px, 0);
- -o-transform: translate(-230px, 0);
- transform: translate(-230px, 0);
- /* .animation( open 0.6s linear once); */
- overflow-y: visible;
- }
- .container #nav {
- height: 50px;
- text-align: center;
- margin: 0;
- padding: 25px 0 0;
- }
- .container #nav.open .bars .bar1 {
- -webkit-transform: rotate(45deg) translate(8px, 7px);
- -moz-transform: rotate(45deg) translate(8px, 7px);
- -ms-transform: rotate(45deg) translate(8px, 7px);
- -o-transform: rotate(45deg) translate(8px, 7px);
- transform: rotate(45deg) translate(8px, 7px);
- }
- .container #nav.open .bars .bar2 {
- opacity: 0;
- }
- .container #nav.open .bars .bar3 {
- -webkit-transform: rotate(-45deg) translate(7px, -6px);
- -moz-transform: rotate(-45deg) translate(7px, -6px);
- -ms-transform: rotate(-45deg) translate(7px, -6px);
- -o-transform: rotate(-45deg) translate(7px, -6px);
- transform: rotate(-45deg) translate(7px, -6px);
- }
- .container #nav li {
- display: inline-block;
- }
- .container #nav li.bars {
- display: none;
- position: absolute;
- left: -55px;
- top: 0;
- cursor: pointer;
- background: rgba(0, 0, 0, 0.6);
- padding: 15px 15px 10px;
- }
- .container #nav li.bars .bar1,
- .container #nav li.bars .bar2,
- .container #nav li.bars .bar3 {
- width: 25px;
- height: 2px;
- background: #FFF;
- margin-bottom: 8px;
- -webkit-transition: all 0.6s;
- -moz-transition: all 0.6s;
- -o-transition: all 0.6s;
- transition: all 0.6s;
- }
- .container #nav li a {
- display: block;
- color: #fff;
- font-size: 18px;
- padding: 10px 25px;
- border: 2px solid transparent;
- text-decoration: none;
- -webkit-transition: all 0.3s;
- -moz-transition: all 0.3s;
- -o-transition: all 0.3s;
- transition: all 0.3s;
- }
- .container #nav li a:hover {
- border: 2px solid #fff;
- }
- .box {
- width: 50%;
- max-width: 425px;
- height: 450px;
- text-align: center;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 300;
- margin: auto;
- padding: 10px 0;
- -webkit-border-radius: 5px;
- -webkit-background-clip: padding-box;
- -moz-border-radius: 5px;
- -moz-background-clip: padding;
- }
- .box2 {
- width: 50%;
- max-width: 425px;
- height: 450px;
- text-align: center;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 350px;
- right: 0;
- margin: auto;
- padding: 10px 0;
- -webkit-border-radius: 5px;
- -webkit-background-clip: padding-box;
- -moz-border-radius: 5px;
- -moz-background-clip: padding;
- }
- .box h2 {
- font-weight: 300;
- font-size: 1.5em;
- margin: 10px 0 0;
- }
- @media (max-width: 480px) {
- body {
- min-width: 320px;
- }
- .box {
- width: 90%;
- }
- .container #nav {
- width: 230px;
- max-width: 480px;
- height: inherit;
- position: absolute;
- top: 0;
- right: -230px;
- }
- .container #nav li.bars {
- display: block;
- }
- .container #nav li a:hover {
- border-color: transparent;
- color: #5cd;
- }
- }
- .box3 {
- width: 50%;
- max-width: 425px;
- height: 450px;
- text-align: center;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 470px;
- right: 0;
- margin: auto;
- padding: 10px 0;
- -webkit-border-radius: 5px;
- -webkit-background-clip: padding-box;
- -moz-border-radius: 5px;
- -moz-background-clip: padding;
- }
- .box4 {
- width: 50%;
- max-width: 425px;
- height: 450px;
- text-align: center;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 590px;
- right: 0;
- margin: auto;
- padding: 10px 0;
- -webkit-border-radius: 5px;
- -webkit-background-clip: padding-box;
- -moz-border-radius: 5px;
- -moz-background-clip: padding;
- }
- .box5 {
- width: 50%;
- max-width: 425px;
- height: 450px;
- text-align: center;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 710px;
- right: 0;
- margin: auto;
- padding: 10px 0;
- -webkit-border-radius: 5px;
- -webkit-background-clip: padding-box;
- -moz-border-radius: 5px;
- -moz-background-clip: padding;
- }
- .box6 {
- width: 50%;
- max-width: 425px;
- height: 450px;
- text-align: center;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 950px;
- right: 0;
- margin: auto;
- padding: 10px 0;
- -webkit-border-radius: 5px;
- -webkit-background-clip: padding-box;
- -moz-border-radius: 5px;
- -moz-background-clip: padding;
- }
- .box7 {
- width: 50%;
- max-width: 425px;
- height: 450px;
- text-align: center;
- position: absolute;
- top: 0;
- bottom: 0;
- left: 830px;
- right: 0;
- margin: auto;
- padding: 10px 0;
- -webkit-border-radius: 5px;
- -webkit-background-clip: padding-box;
- -moz-border-radius: 5px;
- -moz-background-clip: padding;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement