| Server IP : 122.155.17.190 / Your IP : 18.222.82.248 Web Server : Apache/2 System : Linux cat17190.thaihostserver.com 5.10.0-21-amd64 #1 SMP Debian 5.10.162-1 (2023-01-21) x86_64 User : bungkla ( 1054) PHP Version : 5.6.40 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname MySQL : ON | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /home/bungkla/domains/bungkla.go.th/public_html/css/ |
Upload File : |
* {
font-family: "Lato" !important;
}
.nav {
width: 500px;
height: 500px;
text-align: center;
display: inline-block;
vertical-align: middle;
float: left;
position: relative;
margin-right: 20px;
}
.nav:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.nav:after {
content: "";
display: inline-block;
position: absolute;
bottom: 0;
right: 0;
top: 100%;
border-right: 1px solid #3e5edf;
transition: all 0.5s;
transition-delay: 0.5s;
}
.nav.active:after {
top: 0;
}
.radial-nav {
position: relative;
display: inline-block;
width: 70px;
height: 38px;
-webkit-transform-origin: center center;
}
.radial-nav .menu {
border: none !important;
position: relative;
width: 70px;
height: 38px;
z-index: 100;
transition: all 0.5s;
display: table-cell;
vertical-align: middle;
}
.radial-nav .menu:active {
-webkit-transform: rotate(-15deg);
}
.radial-nav li:not(.menu) {
position: absolute;
left: 0;
width: 70px;
height: 70px;
border-radius: 70px;
border: 1px solid transparent;
text-align: center;
display: inline-block;
vertical-align: middle;
transition: all 0.5s;
z-index: 1;
}
.radial-nav li:not(.menu).selected {
-webkit-transform: rotate(0deg) translateX(120px) rotate(0deg);
border: 1px solid #5151F1;
}
.radial-nav li:not(.menu).selected a {
opacity: 1;
}
.radial-nav li:not(.menu):before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.radial-nav li:not(.menu) a {
display: inline-block;
vertical-align: middle;
opacity: 0;
-webkit-transition: all 0.5s;
}
.radial-nav.expanded li:not(.menu) {
border: 1px solid #5151F1;
}
.radial-nav.expanded li:not(.menu):hover {
background-color: #5151F1;
}
.radial-nav.expanded li:nth-child(1) {
-webkit-transform: translateY(-120px);
}
.radial-nav.expanded li:nth-child(2) {
-webkit-transform: rotate(-45deg) translateX(120px) rotate(45deg);
}
.radial-nav.expanded li:nth-child(3) {
-webkit-transform: translateX(120px);
}
.radial-nav.expanded li:nth-child(4) {
-webkit-transform: rotate(45deg) translateX(120px) rotate(-45deg);
}
.radial-nav.expanded li:nth-child(5) {
-webkit-transform: translateY(120px);
}
.radial-nav.expanded li:nth-child(6) {
-webkit-transform: rotate(135deg) translateX(120px) rotate(-135deg);
}
.radial-nav.expanded li:nth-child(7) {
-webkit-transform: rotate(180deg) translateX(120px) rotate(-180deg);
}
.radial-nav.expanded li:nth-child(8) {
-webkit-transform: rotate(225deg) translateX(120px) rotate(-225deg);
}
.radial-nav.expanded li a {
opacity: 1;
}
.radial-nav.expanded .icon-menu {
border-color: #5151F1;
-webkit-transform: rotate(90deg);
}
.radial-nav.expanded .icon-menu:before {
border-color: #5151F1;
}
.radial-nav.expanded .menu:active {
-webkit-transform: rotate(15deg) !important;
}
.icon-menu {
display: inline-block;
border-top: 3px solid #E00578;
border-bottom: 3px solid #E00578;
width: 30px;
height: 30px;
cursor: pointer;
-webkit-transition: all 0.3s;
}
.icon-menu:before {
content: "";
display: inline-block;
border-bottom: 3px solid #E00578;
width: 100%;
-webkit-transition: all 0.3s;
}
.icon-menu:hover {
border-color: #00003A;
}
.icon-menu:hover:before {
border-color: #00003A;
}
html, body {
height: 100%;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {
color: #d1d1d1;
}
.content {
padding-top: 65px;
overflow: hidden;
}
.content .item {
opacity: 0;
transition: all 0.5s;
transition-delay: 1.3s;
position: absolute;
}
.content .item.active {
opacity: 1;
position: static;
}
.content .item h1 {
font-size: 25px;
margin-bottom: 0.3em;
}