Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en" dir="ltr">
- <head>
- <title>Beta || Slogan</title>
- <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
- <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
- <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
- <link rel="stylesheet" type="text/css" media="screen" href="template/style/base.css">
- <!--[if IE 6]><META http-equiv="refresh" content="1; URL=indexIE"><![endif]-->
- <!--[if IE 7]><META http-equiv="refresh" content="1; URL=indexIE"><![endif]-->
- <!--[if IE 8]><META http-equiv="refresh" content="1; URL=indexIE"><![endif]-->
- <div id="fb-root"></div>
- <script src="/dev/v3_landing_top2.js" type="text/javascript"></script>
- <style>
- body {
- color:#333;
- /*background-image:url('/dev/bgni.png');
- background-position: center bottom;
- background-repeat: no-repeat;
- background-attachment:fixed;
- background-size:1599px 1200px;*/
- padding:0;
- margin:0;
- }
- }
- .login-logo {
- background:url("http://localhost/app/tpl/skins/Beta/images/logo2");
- position:center;
- width:100px;
- height:50px;
- }
- .loginForm {
- background-color: rgba(0,0,0,.70);
- width: 385px;
- position: absolute;
- margin-top: 650px;
- border-radius: 3px;
- color: #fff;
- display: inline-block;
- }
- #logo {
- margin:10px;
- }
- #header {
- background:rgba(0,0,0,.8);
- width:100%;
- position:fixed;
- z-index:4999;
- border-bottom: 1px solid #5eb4c9;
- text-align:center;
- font-family: 'Open Sans', sans-serif;
- }
- #footer {
- background:rgba(0,0,0,.8);
- width:100%;
- position:fixed;
- z-index:4998;
- border-top: 1px solid #5eb4c9;
- text-align:center;
- bottom:0;
- font-family: 'Open Sans', sans-serif;
- color: #425c73;
- font-size:11px;
- letter-spacing:0!important;
- font-weight: 400;
- }
- #footer a {
- color:#425c73;
- text-decoration:underline;
- }
- #footer a:hover {
- color:#567ea1;
- }
- #central {
- background-color: rgba(0,0,0,.70);
- font-family: 'Open Sans', sans-serif;
- width: 385px;
- position: absolute;
- border-radius: 3px;
- color: #fff;
- display: inline-block;
- font-size:14px;
- position:absolute;
- width:385px;
- left:50%;
- margin-left:-190px;
- border:1px solid #d7d7d7;
- border-bottom:2px solid #d7d7d7;
- border-radius:3px;
- -moz-border-radius:3px;
- -webkit-border-radius:3px;
- background-color:white;
- top:37%;
- -webkit-transition: all 0.4s ease;
- -moz-transition: all 0.4s ease;
- -o-transition: all 0.4s ease;
- -ms-transition: all 0.4s ease;
- transition: all 0.4s ease;
- z-index:5000;
- opacity:0;
- }
- .aUser {
- -webkit-transition: all 0.2s ease;
- -moz-transition: all 0.2s ease;
- -o-transition: all 0.2s ease;
- -ms-transition: all 0.2s ease;
- transition: all 0.2s ease;
- padding:8px;
- cursor:pointer;
- }
- .aUser:hover {
- background:#fff;
- -webkit-transition: all 0.4s ease;
- -moz-transition: all 0.4s ease;
- -o-transition: all 0.4s ease;
- -ms-transition: all 0.4s ease;
- transition: all 0.4s ease;
- }
- .round {
- width:65px;
- height:65px;
- border-radius:50px;
- border:4px solid #fff;
- -moz-box-shadow: 0px 0px 1px 1px #bbbbbb;
- -webkit-box-shadow: 0px 0px 1px 1px #bbbbbb;
- box-shadow: 0px 0px 0px 1px #bbbbbb;
- float:left;
- }
- .line {
- border-top:1px solid #ccc;
- margin-left:10px;
- margin-right:10px;
- }
- .pat1 {
- background: #c40000; /* Old browsers */
- /* IE9 SVG, needs conditional override of 'filter' to 'none' */
- background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M0MDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhZDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
- background: -moz-linear-gradient(top, #c40000 0%, #ad0000 100%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c40000), color-stop(100%,#ad0000)); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, #c40000 0%,#ad0000 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, #c40000 0%,#ad0000 100%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, #c40000 0%,#ad0000 100%); /* IE10+ */
- background: linear-gradient(to bottom, #c40000 0%,#ad0000 100%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c40000', endColorstr='#ad0000',GradientType=0 ); /* IE6-8 */
- }
- .blue {
- background: #33579b; /* Old browsers */
- /* IE9 SVG, needs conditional override of 'filter' to 'none' */
- background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzNTc5YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxNTQ0OWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
- background: -moz-linear-gradient(top, #33579b 0%, #15449b 100%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#33579b), color-stop(100%,#15449b)); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, #33579b 0%,#15449b 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, #33579b 0%,#15449b 100%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, #33579b 0%,#15449b 100%); /* IE10+ */
- background: linear-gradient(to bottom, #33579b 0%,#15449b 100%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33579b', endColorstr='#15449b',GradientType=0 ); /* IE6-8 */
- }
- .grey {
- background: #4c5054; /* Old browsers */
- /* IE9 SVG, needs conditional override of 'filter' to 'none' */
- background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRjNTA1NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyODM0M2IiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
- background: -moz-linear-gradient(top, #4c5054 0%, #28343b 100%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c5054), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, #4c5054 0%,#28343b 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, #4c5054 0%,#28343b 100%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, #4c5054 0%,#28343b 100%); /* IE10+ */
- background: linear-gradient(to bottom, #4c5054 0%,#28343b 100%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c5054', endColorstr='#28343b',GradientType=0 ); /* IE6-8 */
- }
- .pat3 {
- background: #ffaf4b; /* Old browsers */
- /* IE9 SVG, needs conditional override of 'filter' to 'none' */
- background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYWY0YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjkyMGEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
- background: -moz-linear-gradient(top, #ffaf4b 0%, #ff920a 100%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffaf4b), color-stop(100%,#ff920a)); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, #ffaf4b 0%,#ff920a 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, #ffaf4b 0%,#ff920a 100%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, #ffaf4b 0%,#ff920a 100%); /* IE10+ */
- background: linear-gradient(to bottom, #ffaf4b 0%,#ff920a 100%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#ff920a',GradientType=0 ); /* IE6-8 */
- }
- .pat2 {
- background: #9dd53a; /* Old browsers */
- /* IE9 SVG, needs conditional override of 'filter' to 'none' */
- background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzlkZDUzYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3Y2JjMGEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
- background: -moz-linear-gradient(top, #9dd53a 0%, #7cbc0a 100%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, #9dd53a 0%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, #9dd53a 0%,#7cbc0a 100%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, #9dd53a 0%,#7cbc0a 100%); /* IE10+ */
- background: linear-gradient(to bottom, #9dd53a 0%,#7cbc0a 100%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); /* IE6-8 */
- }
- .pat4 {
- background: #ff5db1; /* Old browsers */
- /* IE9 SVG, needs conditional override of 'filter' to 'none' */
- background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmNWRiMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZjAxN2MiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
- background: -moz-linear-gradient(top, #ff5db1 0%, #ef017c 100%); /* FF3.6+ */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff5db1), color-stop(100%,#ef017c)); /* Chrome,Safari4+ */
- background: -webkit-linear-gradient(top, #ff5db1 0%,#ef017c 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top, #ff5db1 0%,#ef017c 100%); /* Opera 11.10+ */
- background: -ms-linear-gradient(top, #ff5db1 0%,#ef017c 100%); /* IE10+ */
- background: linear-gradient(to bottom, #ff5db1 0%,#ef017c 100%); /* W3C */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5db1', endColorstr='#ef017c',GradientType=0 ); /* IE6-8 */
- }
- .username {
- float:left;
- margin-left:25px;
- }
- .clear {
- clear:both;
- }
- .username .u {
- font-family: 'Open Sans', sans-serif;
- text-transform:uppercase;
- font-weight:300;
- font-size:19px;
- margin-bottom:3px;
- margin-top:12px;
- }
- .username .d {
- color:#444444;
- }
- .bT {
- background:rgba(0,0,0,.8)!important;
- color:#fff!important;
- width:320px!important;
- margin-left:-160px!important;
- -webkit-transition: all 0.4s ease;
- -moz-transition: all 0.4s ease;
- -o-transition: all 0.4s ease;
- -ms-transition: all 0.4s ease;
- transition: all 0.4s ease;
- border-color:#fff;
- }
- .bT .aUser:hover {
- background:rgba(0,0,0,.8)!important;
- cursor:default;
- }
- .bT .username,.bT .round {
- float:inherit!important;
- }
- .avatarImg {
- height:65px;
- border-radius:50px;
- background-repeat: no-repeat!important;
- }
- .bT .round {
- margin-left:auto;
- margin-right:auto;
- width:100px;
- height:100px;
- -webkit-transition: all 0.4s ease;
- -moz-transition: all 0.4s ease;
- -o-transition: all 0.4s ease;
- -ms-transition: all 0.4s ease;
- transition: all 0.4s ease;
- }
- .bT .username {
- text-align:center;
- margin-left:0;
- }
- .avatarr {
- height:100px!important;
- -webkit-transition: all 0.4s ease;
- -moz-transition: all 0.4s ease;
- -o-transition: all 0.4s ease;
- -ms-transition: all 0.4s ease;
- transition: all 0.4s ease;
- }
- .form {
- display:none;
- text-align:center;
- margin-top:10px;
- margin-bottom:2px;
- }
- input[type=text], input[type=password] {
- background:#fff;
- border:0;
- padding:7px;
- font-size:13px;
- outline:none;
- -webkit-transition: all 0.2s ease;
- -moz-transition: all 0.2s ease;
- -o-transition: all 0.2s ease;
- -ms-transition: all 0.2s ease;
- transition: all 0.2s ease;
- border-radius:3px;
- -moz-border-radius:3px;
- width:200px;
- }
- input[type=text]:focus, input[type=password]:focus {
- background:#ffffc6;
- -webkit-transition: all 0.4s ease;
- -moz-transition: all 0.4s ease;
- -o-transition: all 0.4s ease;
- -ms-transition: all 0.4s ease;
- transition: all 0.4s ease;
- }
- #return {
- display:none;
- padding:10px;
- cursor:pointer;
- -webkit-transition: all 0.2s ease;
- -moz-transition: all 0.2s ease;
- -o-transition: all 0.2s ease;
- -ms-transition: all 0.2s ease;
- transition: all 0.2s ease;
- }
- #return:hover {
- opacity:0.8;
- -webkit-transition: all 0.4s ease;
- -moz-transition: all 0.4s ease;
- -o-transition: all 0.4s ease;
- -ms-transition: all 0.4s ease;
- transition: all 0.4s ease;
- }
- /* BACKGROUND */
- #night {
- background-color:#42D2F9;
- position:fixed;
- z-index:500;
- height:100%;
- width:100%;
- z-index:300;
- }
- #light {
- background-color:#42D2F9;
- position:fixed;
- z-index:400;
- height:100%;
- width:100%;
- z-index:200;
- }
- #bottomRight {
- background:url(/dev/vueBlack.png);
- position:fixed;
- height:780px;
- width:1360px;
- bottom:0;
- left:0;
- z-index:1000;
- opacity:0.9;
- }
- #bottomRightClear {
- background:url(/dev/vue.png);
- position:fixed;
- height:780px;
- width:1400px;
- bottom:0;
- left:0;
- z-index:950;
- }
- #sun {
- background:url(/dev/sun3.png);
- height:634px;
- width:610px;
- position:fixed;
- z-index:1100;
- right:-600px;
- bottom:-700px;
- }
- #anhabbo1 {
- position:fixed;
- z-index:2000;
- bottom:2000px;
- left:290px;
- }
- #leftDoor {
- width:50%;
- height:280px;
- margin-top:-150px;
- position:fixed;
- top:50%;
- z-index:3000;
- background:rgba(0,0,0,.8);
- border-top: 1px solid #5eb4c9;
- border-bottom: 1px solid #5eb4c9;
- left:-50%;
- text-align:right;
- }
- #rightDoor {
- width:50%;
- height:280px;
- margin-top:-150px;
- position:fixed;
- top:50%;
- z-index:2900;
- background:rgba(0,0,0,.8);
- border-top: 1px solid #5eb4c9;
- border-bottom: 1px solid #5eb4c9;
- right:-50%;
- }
- a,
- a:after,
- a::before,
- nav,
- nav:after,
- nav::before,
- a span,
- a span:after,
- a span::before {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
- nav a {
- position: relative;
- display: inline-block;
- margin: 10px 5px;
- outline: none;
- color: #fff;
- text-decoration: none;
- text-transform: uppercase;
- letter-spacing: 1px;
- font-weight: 400;
- text-shadow: 0 0 1px rgba(255,255,255,0.3);
- font-size: 1.35em;
- }
- nav a:hover,
- nav a:focus {
- outline: none;
- }
- /* Effect 1: Brackets */
- .cl-effect-1 a::before,
- .cl-effect-1 a::after {
- display: inline-block;
- opacity: 0;
- -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
- -moz-transition: -moz-transform 0.3s, opacity 0.2s;
- transition: transform 0.3s, opacity 0.2s;
- }
- .cl-effect-1 a::before {
- margin-right: 10px;
- content: '[';
- -webkit-transform: translateX(20px);
- -moz-transform: translateX(20px);
- transform: translateX(20px);
- }
- .cl-effect-1 a::after {
- margin-left: 10px;
- content: ']';
- -webkit-transform: translateX(-20px);
- -moz-transform: translateX(-20px);
- transform: translateX(-20px);
- }
- .cl-effect-1 a:hover::before,
- .cl-effect-1 a:hover::after,
- .cl-effect-1 a:focus::before,
- .cl-effect-1 a:focus::after {
- opacity: 1;
- -webkit-transform: translateX(0px);
- -moz-transform: translateX(0px);
- transform: translateX(0px);
- }
- /* Effect 2: 3D rolling links, idea from http://hakim.se/thoughts/rolling-links */
- .cl-effect-2 a {
- line-height: 44px;
- -webkit-perspective: 1000px;
- -moz-perspective: 1000px;
- perspective: 1000px;
- }
- .cl-effect-2 a span {
- position: relative;
- display: inline-block;
- padding: 0 14px;
- background: #2195de;
- -webkit-transition: -webkit-transform 0.3s;
- -moz-transition: -moz-transform 0.3s;
- transition: transform 0.3s;
- -webkit-transform-origin: 50% 0;
- -moz-transform-origin: 50% 0;
- transform-origin: 50% 0;
- -webkit-transform-style: preserve-3d;
- -moz-transform-style: preserve-3d;
- transform-style: preserve-3d;
- }
- .csstransforms3d .cl-effect-2 a span::before {
- position: absolute;
- top: 100%;
- left: 0;
- width: 100%;
- height: 100%;
- background: #0965a0;
- content: attr(data-hover);
- -webkit-transition: background 0.3s;
- -moz-transition: background 0.3s;
- transition: background 0.3s;
- -webkit-transform: rotateX(-90deg);
- -moz-transform: rotateX(-90deg);
- transform: rotateX(-90deg);
- -webkit-transform-origin: 50% 0;
- -moz-transform-origin: 50% 0;
- transform-origin: 50% 0;
- }
- .cl-effect-2 a:hover span,
- .cl-effect-2 a:focus span {
- -webkit-transform: rotateX(90deg) translateY(-22px);
- -moz-transform: rotateX(90deg) translateY(-22px);
- transform: rotateX(90deg) translateY(-22px);
- }
- .csstransforms3d .cl-effect-2 a:hover span::before,
- .csstransforms3d .cl-effect-2 a:focus span::before {
- background: #28a2ee;
- }
- /* Effect 3: bottom line slides/fades in */
- .cl-effect-3 a {
- padding: 8px 0;
- }
- .cl-effect-3 a::after {
- position: absolute;
- top: 100%;
- left: 0;
- width: 100%;
- height: 4px;
- background: rgba(0,0,0,0.1);
- content: '';
- opacity: 0;
- -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
- -moz-transition: opacity 0.3s, -moz-transform 0.3s;
- transition: opacity 0.3s, transform 0.3s;
- -webkit-transform: translateY(10px);
- -moz-transform: translateY(10px);
- transform: translateY(10px);
- }
- .cl-effect-3 a:hover::after,
- .cl-effect-3 a:focus::after {
- opacity: 1;
- -webkit-transform: translateY(0px);
- -moz-transform: translateY(0px);
- transform: translateY(0px);
- }
- /* Effect 4: bottom border enlarge */
- .cl-effect-4 a {
- padding: 0 0 10px;
- }
- .cl-effect-4 a::after {
- position: absolute;
- top: 100%;
- left: 0;
- width: 100%;
- height: 1px;
- background: #fff;
- content: '';
- opacity: 0;
- -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
- -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
- transition: height 0.3s, opacity 0.3s, transform 0.3s;
- -webkit-transform: translateY(-10px);
- -moz-transform: translateY(-10px);
- transform: translateY(-10px);
- }
- .cl-effect-4 a:hover::after,
- .cl-effect-4 a:focus::after {
- height: 5px;
- opacity: 1;
- -webkit-transform: translateY(0px);
- -moz-transform: translateY(0px);
- transform: translateY(0px);
- }
- /* Effect 5: same word slide in */
- .cl-effect-5 a {
- overflow: hidden;
- padding: 0 4px;
- height: 1em;
- }
- .cl-effect-5 a span {
- position: relative;
- display: inline-block;
- -webkit-transition: -webkit-transform 0.3s;
- -moz-transition: -moz-transform 0.3s;
- transition: transform 0.3s;
- }
- .cl-effect-5 a span::before {
- position: absolute;
- top: 100%;
- content: attr(data-hover);
- font-weight: 700;
- -webkit-transform: translate3d(0,0,0);
- -moz-transform: translate3d(0,0,0);
- transform: translate3d(0,0,0);
- }
- .cl-effect-5 a:hover span,
- .cl-effect-5 a:focus span {
- -webkit-transform: translateY(-100%);
- -moz-transform: translateY(-100%);
- transform: translateY(-100%);
- }
- /* Effect 5: same word slide in and border bottom */
- .cl-effect-6 a {
- margin: 0 10px;
- padding: 10px 20px;
- }
- .cl-effect-6 a::before {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 2px;
- background: #fff;
- content: '';
- -webkit-transition: top 0.3s;
- -moz-transition: top 0.3s;
- transition: top 0.3s;
- }
- .cl-effect-6 a::after {
- position: absolute;
- top: 0;
- left: 0;
- width: 2px;
- height: 2px;
- background: #fff;
- content: '';
- -webkit-transition: height 0.3s;
- -moz-transition: height 0.3s;
- transition: height 0.3s;
- }
- .cl-effect-6 a:hover::before {
- top: 100%;
- opacity: 1;
- }
- .cl-effect-6 a:hover::after {
- height: 100%;
- }
- /* Effect 7: second border slides up */
- .cl-effect-7 a {
- padding: 12px 10px 10px;
- color: #566473;
- text-shadow: none;
- font-weight: 700;
- }
- .cl-effect-7 a::before,
- .cl-effect-7 a::after {
- position: absolute;
- top: 100%;
- left: 0;
- width: 100%;
- height: 3px;
- background: #566473;
- content: '';
- -webkit-transition: -webkit-transform 0.3s;
- -moz-transition: -moz-transform 0.3s;
- transition: transform 0.3s;
- -webkit-transform: scale(0.85);
- -moz-transform: scale(0.85);
- transform: scale(0.85);
- }
- .cl-effect-7 a::after {
- opacity: 0;
- -webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s;
- -moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s;
- transition: top 0.3s, opacity 0.3s, transform 0.3s;
- }
- .cl-effect-7 a:hover::before,
- .cl-effect-7 a:hover::after,
- .cl-effect-7 a:focus::before,
- .cl-effect-7 a:focus::after {
- -webkit-transform: scale(1);
- -moz-transform: scale(1);
- transform: scale(1);
- }
- .cl-effect-7 a:hover::after,
- .cl-effect-7 a:focus::after {
- top: 0%;
- opacity: 1;
- }
- /* Effect 8: border slight translate */
- .cl-effect-8 a {
- padding: 10px 20px;
- }
- .cl-effect-8 a::before,
- .cl-effect-8 a::after {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- border: 3px solid #354856;
- content: '';
- -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
- -moz-transition: -moz-transform 0.3s, opacity 0.3s;
- transition: transform 0.3s, opacity 0.3s;
- }
- .cl-effect-8 a::after {
- border-color: #fff;
- opacity: 0;
- -webkit-transform: translateY(-7px) translateX(6px);
- -moz-transform: translateY(-7px) translateX(6px);
- transform: translateY(-7px) translateX(6px);
- }
- .cl-effect-8 a:hover::before,
- .cl-effect-8 a:focus::before {
- opacity: 0;
- -webkit-transform: translateY(5px) translateX(-5px);
- -moz-transform: translateY(5px) translateX(-5px);
- transform: translateY(5px) translateX(-5px);
- }
- .cl-effect-8 a:hover::after,
- .cl-effect-8 a:focus::after {
- opacity: 1;
- -webkit-transform: translateY(0px) translateX(0px);
- -moz-transform: translateY(0px) translateX(0px);
- transform: translateY(0px) translateX(0px);
- }
- /* Effect 9: second text and borders */
- .cl-effect-9 a {
- margin: 0 20px;
- padding: 18px 20px;
- }
- .cl-effect-9 a::before,
- .cl-effect-9 a::after {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 1px;
- background: #fff;
- content: '';
- opacity: 0.2;
- -webkit-transition: opacity 0.3s, height 0.3s;
- -moz-transition: opacity 0.3s, height 0.3s;
- transition: opacity 0.3s, height 0.3s;
- }
- .cl-effect-9 a::after {
- top: 100%;
- opacity: 0;
- -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
- -moz-transition: -moz-transform 0.3s, opacity 0.3s;
- transition: transform 0.3s, opacity 0.3s;
- -webkit-transform: translateY(-10px);
- -moz-transform: translateY(-10px);
- transform: translateY(-10px);
- }
- .cl-effect-9 a span:first-child {
- z-index: 2;
- display: block;
- font-weight: 300;
- }
- .cl-effect-9 a span:last-child {
- z-index: 1;
- display: block;
- padding: 8px 0 0 0;
- color: rgba(0,0,0,0.4);
- text-shadow: none;
- text-transform: none;
- font-style: italic;
- font-size: 0.75em;
- font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
- opacity: 0;
- -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
- -moz-transition: -moz-transform 0.3s, opacity 0.3s;
- transition: transform 0.3s, opacity 0.3s;
- -webkit-transform: translateY(-100%);
- -moz-transform: translateY(-100%);
- transform: translateY(-100%);
- }
- .cl-effect-9 a:hover::before,
- .cl-effect-9 a:focus::before {
- height: 6px;
- }
- .cl-effect-9 a:hover::before,
- .cl-effect-9 a:hover::after,
- .cl-effect-9 a:focus::before,
- .cl-effect-9 a:focus::after {
- opacity: 1;
- -webkit-transform: translateY(0px);
- -moz-transform: translateY(0px);
- transform: translateY(0px);
- }
- .cl-effect-9 a:hover span:last-child,
- .cl-effect-9 a:focus span:last-child {
- opacity: 1;
- -webkit-transform: translateY(0%);
- -moz-transform: translateY(0%);
- transform: translateY(0%);
- }
- /* Effect 10: reveal, push out */
- .cl-effect-10 {
- position: relative;
- z-index: 1;
- border-radius:3px;
- -moz-border-radius:3px;
- -webkit-border-radius:3px;
- }
- .cl-effect-10 a {
- overflow: hidden;
- margin: 0 15px;
- font-size:13px;
- border-radius:3px;
- -moz-border-radius:3px;
- -webkit-border-radius:3px;
- }
- .cl-effect-10 a span {
- display: block;
- padding: 10px 20px;
- background: #bd2f68;
- -webkit-transition: -webkit-transform 0.3s;
- -moz-transition: -moz-transform 0.3s;
- transition: transform 0.3s;
- border-radius:3px;
- -moz-border-radius:3px;
- -webkit-border-radius:3px;
- }
- .cl-effect-10 a::before {
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
- padding: 10px 20px;
- width: 100%;
- height: 100%;
- background: #fff;
- color: #bd2f68;
- content: attr(data-hover);
- -webkit-transition: -webkit-transform 0.3s;
- -moz-transition: -moz-transform 0.3s;
- transition: transform 0.3s;
- -webkit-transform: translateY(-25%);
- border-radius:3px;
- -moz-border-radius:3px;
- -webkit-border-radius:3px;
- }
- .cl-effect-10 a:hover span,
- .cl-effect-10 a:focus span {
- -webkit-transform: translateY(100%);
- -moz-transform: translateY(100%);
- transform: translateY(100%);
- }
- .cl-effect-10 a:hover::before,
- .cl-effect-10 a:focus::before {
- -webkit-transform: translateY(0%);
- -moz-transform: translateY(0%);
- transform: translateY(0%);
- }
- /* Effect 11: text fill based on Lea Verou's animation http://dabblet.com/gist/6046779 */
- .cl-effect-11 a {
- padding: 10px 0;
- border-top: 2px solid #0972b4;
- color: #0972b4;
- text-shadow: none;
- }
- .cl-effect-11 a::before {
- position: absolute;
- top: 0;
- left: 0;
- overflow: hidden;
- padding: 10px 0;
- max-width: 0;
- border-bottom: 2px solid #fff;
- color: #fff;
- content: attr(data-hover);
- -webkit-transition: max-width 0.5s;
- -moz-transition: max-width 0.5s;
- transition: max-width 0.5s;
- }
- .cl-effect-11 a:hover::before,
- .cl-effect-11 a:focus::before {
- max-width: 100%;
- }
- /* Effect 12: circle */
- .cl-effect-12 a::before,
- .cl-effect-12 a::after {
- position: absolute;
- top: 50%;
- left: 50%;
- width: 100px;
- height: 100px;
- border: 2px solid rgba(0,0,0,0.1);
- border-radius: 50%;
- content: '';
- opacity: 0;
- -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
- -moz-transition: -moz-transform 0.3s, opacity 0.3s;
- transition: transform 0.3s, opacity 0.3s;
- -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
- -moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
- transform: translateX(-50%) translateY(-50%) scale(0.2);
- }
- .cl-effect-12 a::after {
- width: 90px;
- height: 90px;
- border-width: 6px;
- -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
- -moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
- transform: translateX(-50%) translateY(-50%) scale(0.8);
- }
- .cl-effect-12 a:hover::before,
- .cl-effect-12 a:hover::after,
- .cl-effect-12 a:focus::before,
- .cl-effect-12 a:focus::after {
- opacity: 1;
- -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
- -moz-transform: translateX(-50%) translateY(-50%) scale(1);
- transform: translateX(-50%) translateY(-50%) scale(1);
- }
- /* Effect 13: three circles */
- .cl-effect-13 a {
- -webkit-transition: color 0.3s;
- -moz-transition: color 0.3s;
- transition: color 0.3s;
- }
- .cl-effect-13 a::before {
- position: absolute;
- top: 100%;
- left: 50%;
- color: transparent;
- content: '•';
- text-shadow: 0 0 transparent;
- font-size: 1.2em;
- -webkit-transition: text-shadow 0.3s, color 0.3s;
- -moz-transition: text-shadow 0.3s, color 0.3s;
- transition: text-shadow 0.3s, color 0.3s;
- -webkit-transform: translateX(-50%);
- -moz-transform: translateX(-50%);
- transform: translateX(-50%);
- pointer-events: none;
- }
- .cl-effect-13 a:hover::before,
- .cl-effect-13 a:focus::before {
- color: #fff;
- text-shadow: 10px 0 #fff, -10px 0 #fff;
- }
- .cl-effect-13 a:hover,
- .cl-effect-13 a:focus {
- color: #ba7700;
- }
- /* Effect 14: border switch */
- .cl-effect-14 a {
- padding: 0 20px;
- height: 45px;
- line-height: 45px;
- }
- .cl-effect-14 a::before,
- .cl-effect-14 a::after {
- position: absolute;
- width: 45px;
- height: 2px;
- background: #fff;
- content: '';
- opacity: 0.2;
- -webkit-transition: all 0.3s;
- -moz-transition: all 0.3s;
- transition: all 0.3s;
- pointer-events: none;
- }
- .cl-effect-14 a::before {
- top: 0;
- left: 0;
- -webkit-transform: rotate(90deg);
- -moz-transform: rotate(90deg);
- transform: rotate(90deg);
- -webkit-transform-origin: 0 0;
- -moz-transform-origin: 0 0;
- transform-origin: 0 0;
- }
- .cl-effect-14 a::after {
- right: 0;
- bottom: 0;
- -webkit-transform: rotate(90deg);
- -moz-transform: rotate(90deg);
- transform: rotate(90deg);
- -webkit-transform-origin: 100% 0;
- -moz-transform-origin: 100% 0;
- transform-origin: 100% 0;
- }
- .cl-effect-14 a:hover::before,
- .cl-effect-14 a:hover::after,
- .cl-effect-14 a:focus::before,
- .cl-effect-14 a:focus::after {
- opacity: 1;
- }
- .cl-effect-14 a:hover::before,
- .cl-effect-14 a:focus::before {
- left: 50%;
- -webkit-transform: rotate(0deg) translateX(-50%);
- -moz-transform: rotate(0deg) translateX(-50%);
- transform: rotate(0deg) translateX(-50%);
- }
- .cl-effect-14 a:hover::after,
- .cl-effect-14 a:focus::after {
- right: 50%;
- -webkit-transform: rotate(0deg) translateX(50%);
- -moz-transform: rotate(0deg) translateX(50%);
- transform: rotate(0deg) translateX(50%);
- }
- /* Effect 15: scale down, reveal */
- .cl-effect-15 a {
- color: rgba(0,0,0,0.2);
- font-weight: 700;
- text-shadow: none;
- }
- .cl-effect-15 a::before {
- color: #fff;
- content: attr(data-hover);
- position: absolute;
- -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
- -moz-transition: -moz-transform 0.3s, opacity 0.3s;
- transition: transform 0.3s, opacity 0.3s;
- }
- .cl-effect-15 a:hover::before,
- .cl-effect-15 a:focus::before {
- -webkit-transform: scale(0.9);
- -moz-transform: scale(0.9);
- transform: scale(0.9);
- opacity: 0;
- }
- /* Effect 16: fall down */
- .cl-effect-16 a {
- color: #6f8686;
- text-shadow: 0 0 1px rgba(111,134,134,0.3);
- }
- .cl-effect-16 a::before {
- color: #fff;
- content: attr(data-hover);
- position: absolute;
- opacity: 0;
- text-shadow: 0 0 1px rgba(255,255,255,0.3);
- -webkit-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
- -moz-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
- transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
- -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
- -moz-transition: -moz-transform 0.3s, opacity 0.3s;
- transition: transform 0.3s, opacity 0.3s;
- pointer-events: none;
- }
- .cl-effect-16 a:hover::before,
- .cl-effect-16 a:focus::before {
- -webkit-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
- -moz-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
- transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
- opacity: 1;
- }
- /* Effect 17: move up fade out, push border */
- .cl-effect-17 a {
- color: #10649b;
- text-shadow: none;
- padding: 10px 0;
- }
- .cl-effect-17 a::before {
- color: #fff;
- text-shadow: 0 0 1px rgba(255,255,255,0.3);
- content: attr(data-hover);
- position: absolute;
- -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
- -moz-transition: -moz-transform 0.3s, opacity 0.3s;
- transition: transform 0.3s, opacity 0.3s;
- pointer-events: none;
- }
- .cl-effect-17 a::after {
- content: '';
- position: absolute;
- left: 0;
- bottom: 0;
- width: 100%;
- height: 2px;
- background: #fff;
- opacity: 0;
- -webkit-transform: translateY(5px);
- -moz-transform: translateY(5px);
- transform: translateY(5px);
- -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
- -moz-transition: -moz-transform 0.3s, opacity 0.3s;
- transition: transform 0.3s, opacity 0.3s;
- pointer-events: none;
- }
- .cl-effect-17 a:hover::before,
- .cl-effect-17 a:focus::before {
- opacity: 0;
- -webkit-transform: translateY(-2px);
- -moz-transform: translateY(-2px);
- transform: translateY(-2px);
- }
- .cl-effect-17 a:hover::after,
- .cl-effect-17 a:focus::after {
- opacity: 1;
- -webkit-transform: translateY(0px);
- -moz-transform: translateY(0px);
- transform: translateY(0px);
- }
- /* Effect 18: cross */
- .cl-effect-18 {
- position: relative;
- z-index: 1;
- }
- .cl-effect-18 a {
- padding: 0 3px;
- color: #fff;
- -webkit-transition: color 0.3s;
- -moz-transition: color 0.3s;
- transition: color 0.3s;
- }
- .cl-effect-18 a::before,
- .cl-effect-18 a::after {
- position: absolute;
- width: 100%;
- left: 0;
- top: 50%;
- height: 1px;
- margin-top: -1px;
- background: #fff;
- content: '';
- z-index: -1;
- -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
- -moz-transition: -moz-transform 0.3s, opacity 0.3s;
- transition: transform 0.3s, opacity 0.3s;
- pointer-events: none;
- }
- .cl-effect-18 a::before {
- -webkit-transform: translateY(-13px);
- -moz-transform: translateY(-13px);
- transform: translateY(-13px);
- }
- .cl-effect-18 a::after {
- -webkit-transform: translateY(13px);
- -moz-transform: translateY(13px);
- transform: translateY(13px);
- }
- .cl-effect-18 a:hover,
- .cl-effect-18 a:focus {
- color: #fff;
- }
- .cl-effect-18 a:hover::before,
- .cl-effect-18 a:hover::after,
- .cl-effect-18 a:focus::before,
- .cl-effect-18 a:focus::after {
- opacity: 0.7;
- }
- .cl-effect-18 a:hover::before,
- .cl-effect-18 a:focus::before {
- -webkit-transform: rotate(45deg);
- -moz-transform: rotate(45deg);
- transform: rotate(45deg);
- }
- .cl-effect-18 a:hover::after,
- .cl-effect-18 a:focus::after {
- -webkit-transform: rotate(-45deg);
- -moz-transform: rotate(-45deg);
- transform: rotate(-45deg);
- }
- /* Effect 19: 3D side */
- .cl-effect-19 a {
- line-height: 2em;
- margin: 15px;
- -webkit-perspective: 800px;
- -moz-perspective: 800px;
- perspective: 800px;
- width: 200px;
- }
- .cl-effect-19 a span {
- position: relative;
- display: inline-block;
- width: 100%;
- padding: 0 14px;
- background: #e35041;
- -webkit-transition: -webkit-transform 0.4s, background 0.4s;
- -moz-transition: -moz-transform 0.4s, background 0.4s;
- transition: transform 0.4s, background 0.4s;
- -webkit-transform-style: preserve-3d;
- -moz-transform-style: preserve-3d;
- transform-style: preserve-3d;
- -webkit-transform-origin: 50% 50% -100px;
- -moz-transform-origin: 50% 50% -100px;
- transform-origin: 50% 50% -100px;
- }
- .csstransforms3d .cl-effect-19 a span::before {
- position: absolute;
- top: 0;
- left: 100%;
- width: 100%;
- height: 100%;
- background: #b53a2d;
- content: attr(data-hover);
- -webkit-transition: background 0.4s;
- -moz-transition: background 0.4s;
- transition: background 0.4s;
- -webkit-transform: rotateY(90deg);
- -moz-transform: rotateY(90deg);
- transform: rotateY(90deg);
- -webkit-transform-origin: 0 50%;
- -moz-transform-origin: 0 50%;
- transform-origin: 0 50%;
- pointer-events: none;
- }
- .cl-effect-19 a:hover span,
- .cl-effect-19 a:focus span {
- background: #b53a2d;
- -webkit-transform: rotateY(-90deg);
- -moz-transform: rotateY(-90deg);
- transform: rotateY(-90deg);
- }
- .csstransforms3d .cl-effect-19 a:hover span::before,
- .csstransforms3d .cl-effect-19 a:focus span::before {
- background: #ef5e50;
- }
- /* Effect 20: 3D side */
- .cl-effect-20 a {
- line-height: 2em;
- -webkit-perspective: 800px;
- -moz-perspective: 800px;
- perspective: 800px;
- }
- .cl-effect-20 a span {
- position: relative;
- display: inline-block;
- padding: 3px 15px 0;
- background: #587285;
- box-shadow: inset 0 3px #2f4351;
- -webkit-transition: background 0.6s;
- -moz-transition: background 0.6s;
- transition: background 0.6s;
- -webkit-transform-origin: 50% 0;
- -moz-transform-origin: 50% 0;
- transform-origin: 50% 0;
- -webkit-transform-style: preserve-3d;
- -moz-transform-style: preserve-3d;
- transform-style: preserve-3d;
- -webkit-transform-origin: 0% 50%;
- -moz-transform-origin: 0% 50%;
- transform-origin: 0% 50%;
- }
- .cl-effect-20 a span::before {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: #fff;
- color: #2f4351;
- content: attr(data-hover);
- -webkit-transform: rotateX(270deg);
- -moz-transform: rotateX(270deg);
- transform: rotateX(270deg);
- -webkit-transition: -webkit-transform 0.6s;
- -moz-transition: -moz-transform 0.6s;
- transition: transform 0.6s;
- -webkit-transform-origin: 0 0;
- -moz-transform-origin: 0 0;
- transform-origin: 0 0;
- pointer-events: none;
- }
- .cl-effect-20 a:hover span,
- .cl-effect-20 a:focus span {
- background: #2f4351;
- }
- .cl-effect-20 a:hover span::before,
- .cl-effect-20 a:focus span::before {
- -webkit-transform: rotateX(10deg);
- -moz-transform: rotateX(10deg);
- transform: rotateX(10deg);
- }
- /* Effect 21: borders slight translate */
- .cl-effect-21 a {
- padding: 10px;
- color: #237546;
- font-weight: 700;
- text-shadow: none;
- -webkit-transition: color 0.3s;
- -moz-transition: color 0.3s;
- transition: color 0.3s;
- }
- .cl-effect-21 a::before,
- .cl-effect-21 a::after {
- position: absolute;
- left: 0;
- width: 100%;
- height: 2px;
- background: #fff;
- content: '';
- opacity: 0;
- -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
- -moz-transition: opacity 0.3s, -moz-transform 0.3s;
- transition: opacity 0.3s, transform 0.3s;
- -webkit-transform: translateY(-10px);
- -moz-transform: translateY(-10px);
- transform: translateY(-10px);
- }
- .cl-effect-21 a::before {
- top: 0;
- -webkit-transform: translateY(-10px);
- -moz-transform: translateY(-10px);
- transform: translateY(-10px);
- }
- .cl-effect-21 a::after {
- bottom: 0;
- -webkit-transform: translateY(10px);
- -moz-transform: translateY(10px);
- transform: translateY(10px);
- }
- .cl-effect-21 a:hover,
- .cl-effect-21 a:focus {
- color: #fff;
- }
- .cl-effect-21 a:hover::before,
- .cl-effect-21 a:focus::before,
- .cl-effect-21 a:hover::after,
- .cl-effect-21 a:focus::after {
- opacity: 1;
- -webkit-transform: translateY(0px);
- -moz-transform: translateY(0px);
- transform: translateY(0px);
- }
- #errorLogin {
- background:#c03131;
- width:100%;
- padding-top:10px;
- padding-bottom:10px;
- margin-bottom:10px;
- text-align:center;
- color:#fff;
- font-weight:100;
- letter-spacing:1px;
- display:none;
- }
- .delItem {
- float:right;
- margin-top:28px;
- color:#ccc;
- -webkit-transition: all 0.4s ease;
- -moz-transition: all 0.4s ease;
- -o-transition: all 0.4s ease;
- -ms-transition: all 0.4s ease;
- transition: all 0.4s ease;
- }
- .delItem:hover {
- color:#333;
- -webkit-transition: all 0.4s ease;
- -moz-transition: all 0.4s ease;
- -o-transition: all 0.4s ease;
- -ms-transition: all 0.4s ease;
- transition: all 0.4s ease;
- }
- .regbutton {
- padding: 10px;
- margin-top: 0px;
- text-transform: uppercase;
- color: #FFF;
- font-weight: 300;
- background: #3498db;
- text-decoration: none;
- text-align: center;
- font-size: 15px;
- border-radius: 4px;
- width: 82%;
- outline: none;
- border: none;
- box-shadow: 0px 3px hsla(0,0%,0%,.50);
- border-bottom: 2px solid hsla(0,0%,0%,.30);
- cursor: pointer;
- transition: 0.5s;
- -webkit-transition: 0.5s;
- -moz-transition: 0.5s;
- margin-top: 10px;
- }
- .loginbutton2 {
- padding: 10px;
- margin-top: 0px;
- text-transform: uppercase;
- color: #FFF;
- font-weight: 300;
- background: #9cc12a;
- font-size: 15px;
- border-radius: 4px;
- width: 87%;
- outline: none;
- border: none;
- box-shadow: 0px 3px hsla(0,0%,0%,.50);
- border-bottom: 2px solid hsla(0,0%,0%,.30);
- cursor: pointer;
- transition: 0.5s;
- -webkit-transition: 0.5s;
- -moz-transition: 0.5s;
- text-align: center;
- }
- </style>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
- <script>
- (function(d){d.each(["backgroundColor","borderBottomColor","borderLeftColor","borderRightColor","borderTopColor","color","outlineColor"],function(f,e){d.fx.step[e]=function(g){if(!g.colorInit){g.start=c(g.elem,e);g.end=b(g.end);g.colorInit=true}g.elem.style[e]="rgb("+[Math.max(Math.min(parseInt((g.pos*(g.end[0]-g.start[0]))+g.start[0]),255),0),Math.max(Math.min(parseInt((g.pos*(g.end[1]-g.start[1]))+g.start[1]),255),0),Math.max(Math.min(parseInt((g.pos*(g.end[2]-g.start[2]))+g.start[2]),255),0)].join(",")+")"}});function b(f){var e;if(f&&f.constructor==Array&&f.length==3){return f}if(e=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(f)){return[parseInt(e[1]),parseInt(e[2]),parseInt(e[3])]}if(e=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(f)){return[parseFloat(e[1])*2.55,parseFloat(e[2])*2.55,parseFloat(e[3])*2.55]}if(e=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(f)){return[parseInt(e[1],16),parseInt(e[2],16),parseInt(e[3],16)]}if(e=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(f)){return[parseInt(e[1]+e[1],16),parseInt(e[2]+e[2],16),parseInt(e[3]+e[3],16)]}if(e=/rgba\(0, 0, 0, 0\)/.exec(f)){return a.transparent}return a[d.trim(f).toLowerCase()]}function c(g,e){var f;do{f=d.css(g,e);if(f!=""&&f!="transparent"||d.nodeName(g,"body")){break}e="backgroundColor"}while(g=g.parentNode);return b(f)}var a={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0],transparent:[255,255,255]}})(jQuery);
- (function($){$.extend($.fn,{caret:function(start,end){var elem=this[0];if(elem){if(typeof start=="undefined")if(elem.selectionStart!=undefined){start=elem.selectionStart;end=elem.selectionEnd}else{if(document.selection){var val=this.val();var range=document.selection.createRange().duplicate();range.moveEnd("character",val.length);start=range.text==""?val.length:val.lastIndexOf(range.text);range=document.selection.createRange().duplicate();range.moveStart("character",-val.length);end=range.text.length}}else{var val=
- this.val();if(typeof start!="number")start=-1;if(typeof end!="number")end=-1;if(start<0)start=0;if(end>val.length)end=val.length;if(end<start)end=start;if(start>end)start=end;elem.focus();if(elem.selectionStart){elem.selectionStart=start;elem.selectionEnd=end}else if(document.selection){var range=elem.createTextRange();range.collapse(true);range.moveStart("character",start);range.moveEnd("character",end-start);range.select()}}return{start:start,end:end}}}})})(jQuery);
- function centerBox(){
- h = parseInt('-'+parseInt($('#central').height())/2.15);
- $('#central').css({marginTop: h});
- }
- function see(idi) {
- idd = "#aUser"+idi;
- $('.aUser:not('+idd+')').hide();
- $('.line').hide();
- $('.d').slideUp(300);
- $('#central').addClass('bT');
- $(idd+' .avatarImg').addClass('avatarr');
- $(idd+' .form').slideDown(300);
- $(idd).removeClass('aUser');
- $('#aUser1,#aUser2').hide();
- $('#return').show();
- $('.delItem').hide();
- if(idi==0){
- $('#aUser0').show();
- } else {
- setTimeout(function(){
- $('#password'+idi).focus();
- }, 550);
- }
- centerBox();
- setTimeout(function(){
- centerBox();
- },200);
- setTimeout(function(){
- centerBox();
- },400);
- }
- function dontSee() {
- $('#errorLogin').hide();
- $('.aUser').show();
- $('.line').show();
- $('.d').slideDown(300);
- $('#central').removeClass('bT');
- $('.aUc').addClass('aUser');
- $('.avatarImg').removeClass('avatarr');
- $('.form').hide();
- $('#aUser0').hide();
- $('#return').hide();
- $('#aUser1,#aUser2').slideDown();
- $('.delItem').fadeIn();
- setTimeout(function(){
- centerBox();
- },200);
- setTimeout(function(){
- centerBox();
- },400);
- }
- $(function(){
- });
- function light() {
- $('#bottomRight').animate({'opacity':0},1400);
- $('#night').fadeOut(1400);
- }
- function star() {
- $('#star1').fadeOut(300);
- $('#star2').fadeIn(300);
- setTimeout(function(){
- $('#star2').fadeOut(300);
- $('#star1').fadeIn(300);
- },300);
- setTimeout(function(){
- $('#star2').fadeIn(300);
- $('#star1').fadeIn(300);
- },700);
- setTimeout(function(){
- $('#star1').fadeOut(600);
- $('#star2').fadeOut(600);
- },1100);
- }
- $(window).load(function(){
- setTimeout(function(){
- light();
- },1500);
- setTimeout(function(){
- $('#sun').animate({right:'-280px',top:'-300px'},2000);
- },1400);
- setTimeout(function(){
- door();
- },1800);
- star();
- });
- function login(u,p) {
- $('#loader').fadeIn('fast');
- $('#errorLogin').slideUp();
- $.post("ajaxIndex/login2.php", {
- username: u,
- password: p
- })
- .done(function(data) {
- $('#errorLogin').html(data);
- });
- }
- function errorL() {
- $('#errorLogin').slideDown();
- }
- function delItem(iiid) {
- $('#lid'+iiid+'').fadeOut();
- $('#central').fadeOut('fast',function(){
- $.post("ajaxIndex/delItem.php", {
- id: iiid
- })
- .done(function(data) {
- alert(data);
- $('.id'+iiid).hide();
- $('#lid'+iiid+'').hide();
- dontSee();
- setTimeout(function(){
- $('#central').fadeIn('fast');
- },500);
- });
- });
- }
- setTimeout(function(){
- $('#central').animate({opacity:1});
- centerBox();
- },1000);
- </script>
- </head>
- <body>
- <div id="night"></div>
- <div id="light"></div>
- <div id="star1"></div>
- <div id="star2"></div>
- <div id="bottomRight"></div>
- <div id="bottomRightClear"></div>
- <div id="sun"></div>
- <div id="cookies"></div>
- <div id="header">
- <center>
- <table>
- <tr>
- <td>
- <div id="logo">
- <img src="http://localhost/app/tpl/skins/Beta/images/logo2.png">
- </div>
- <center
- </nav>
- </td>
- </tr>
- </table>
- </center>
- </div>
- <div id="central">
- <!--<div id="return" onclick="dontSee();">← Retour</div>-->
- <nav class="cl-effect-18" id="return"><a style="color:#fff;font-size:12px!important;" href="javascript:void(0);" onclick="dontSee();" data-hover="← Retour">← Terug</a></nav>
- <div id="errorLogin"></div>
- </center>
- <div id="l">
- <div style="padding: 10px;">
- <center>
- <div id="people-inside">
- <b><span><span class="stats-fig"><font color="black">Er zijn {online} Beta(s) online!</font></span><br> </span></b>
- <i></i><div></div>
- </div>
- <div class="index_titel"><font color="black">Meld je aan!</font></div>
- <form id="loginformitem" name="loginformitem" method="post">
- <input style="color: #8C8C8C; width: 87%; border: 1px solid blue;" type="text" placeholder="Gebruikersnaam" name="log_username" id="credentials-email" /><br /><br />
- <input style="color: #8C8C8C; width: 87%; border: 1px solid blue;"type="password" placeholder="Wachtwoord" name="log_password" id="credentials-password" /><br /><br />
- <input class="loginbutton2"type="submit" name='login' value="Login" >
- <a href="register" display="block"><div class="regbutton" style="text-decoration:none;" id="regbutton"><center>Registreren</center></div></a>
- </form>
- </div>
- <div class="clear"></div>
- </div>
- <div id="central">
- </div>
- <div class="form">
- </nav>
- <div style="height:7px;"></div>
- </div>
- <div class="clear"></div>
- </div>
- <div class="clear"></div>
- <div class="aUser aUc" id="aUser0" style="display:none;" onclick="see(0);">
- <div class="round grey">
- </div>
- <div class="username">
- </nav>
- <div style="height:7px;"></div>
- </div>
- <div class="clear"></div>
- </div>
- </div>
- </div>
- </body>
- </html>
Add Comment
Please, Sign In to add comment