File Manager

003 File Manager

Current Path: /usr/local/www/sites/nielsedcius.nl/public_html/css

usr / local / www / sites / nielsedcius.nl / public_html / css /

📁 ..
📄 .htaccess(959 B)
📄 about.php(1.49 KB)
📄 admin.php(5.23 KB)
📄 color.css(1.62 KB)
📄 htaccess.th(224 B)
📄 index.php(8.46 KB)
📄 plugins.css(73.1 KB)
📄 reset.css(1.08 KB)
📄 style.css(58.61 KB)
📄 style2.css(5.8 KB)
📄 text.php(1.49 KB)
📄 yourstyle.css(52 B)

Editing: style2.css

body {
  margin: 0;
  background-color: #383838;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
  font-family: 'Ubuntu', sans-serif;
}
a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}

.planet {
  transform-style: preserve-3d;
  position: relative;
}
.planet:after, .planet:before {
  content: "";
  position: absolute;
  background: linear-gradient(to top, transparent, rgba(255, 255, 255, 0.05));
  border-radius: 50%;
  transform: translateZ(-40em);
}
.planet:after {
  top: calc(50% - 18em);
  left: calc(50% - 18em);
  width: 36em;
  height: 36em;
  animation-delay: 2s;
}
.planet:before {
  top: calc(50% - 25em);
  left: calc(50% - 25em);
  width: 50em;
  height: 50em;
}
.planet .inner {
  transform: rotate3d(0, 0, 1, -30deg) translateZ(1em);
  position: absolute;
  top: calc(50% - 13em);
  left: calc(50% - 13em);
  width: 26em;
  height: 26em;
  background: linear-gradient(90deg, #804d2f 50%, #b46c42 50%);
  border-radius: 50%;
  overflow: hidden;
}
.planet .inner:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(transparent 66%, rgba(0, 0, 0, 0.1) 66.1%);
}
@media (max-width: 1200px) {
  .planet {
    font-size: 0.75em;
  }
}
@media (max-width: 950px) {
  .planet {
    font-size: 0.5em;
  }
}
@media (max-width: 600px) {
  .planet {
    font-size: 0.4em;
  }
}

.ring {
  position: absolute;
  top: calc(50% - 19em);
  left: calc(50% - 20em);
  width: 42em;
  height: 42em;
  border-radius: 50%;
  background: radial-gradient(transparent 50%, #bac33b 50.1%, #bac33b 60%, #c4cc56 60.1%);
  transform: rotateX(78deg) rotateY(-30deg) translateY(-3.125px);
}

/* prettier-ignore */
.surface {
  margin: -1.4em auto 0;
  border-radius: 1.5em;
  width: 14em;
  height: 1.5em;
  background-color: #9a5c38;
  box-shadow: 9.2em 1.5em #b46c42, -11em 1.5em #804d2f, 0em 1.5em #9a5c38, 2em 3em #9a5c38, -2em 3em #9a5c38, 12.5em 4.5em #b46c42, -8em 4.5em #804d2f, 0 4.5em #9a5c38, 1em 6em #9a5c38, 10.5em 7.5em #b46c42, -10em 7.5em #804d2f, 0 7.5em #9a5c38, 3em 9em #9a5c38, -3em 9em #9a5c38, 14em 10.5em #b46c42, -6.8em 10.5em #804d2f, 2em 10.5em #9a5c38, 2em 12em #9a5c38, -0.5em 12em #9a5c38, 10em 13.5em #b46c42, -8.4em 13.5em #804d2f, -2em 13.5em #9a5c38, -2em 15em #9a5c38, 6.3em 16.5em #b46c42, -11.6em 16.5em #804d2f, -6em 16.5em #9a5c38, 0em 18em #9a5c38, 5em 16.5em #b46c42, -12em 16.5em #804d2f, -6em 16.5em #9a5c38, 0em 18em #9a5c38, 10.5em 19.5em #b46c42, -9.6em 19.5em #804d2f, 0em 19.5em #9a5c38, -1.3em 21em #9a5c38, 3em 21em #9a5c38, 8em 22.5em #b46c42, -11.4em 22.5em #804d2f, 0em 22.5em #9a5c38, 0em 24em #9a5c38, 12em 25.5em #b46c42, -8em 25.5em #804d2f, 0em 25.5em #9a5c38, 2.2em 27em #9a5c38, 12em 28.5em #b46c42, -10em 28.5em #804d2f, 0em 28.5em #9a5c38, 0em 30em #9a5c38;
}

.moon {
  position: absolute;
  top: -16em;
  left: 6em;
  width: 8em;
  height: 8em;
  background: radial-gradient(at bottom left, #804d2f 50%, #9a5c38 50.1%, #9a5c38 70%, #b46c42 70.1%);
  border-radius: 50%;
  overflow: hidden;
  transform: translateZ(22em);
  animation: moon 7s linear infinite;
}
.moon:after, .moon:before {
  content: "";
  position: absolute;
}
.moon:after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(transparent 64%, rgba(0, 0, 0, 0.1) 64.1%);
}
.moon:before {
  top: 2.5em;
  left: 2.2em;
  width: 1em;
  height: 1em;
  background-color: #804d2f;
  border-radius: 50%;
}

span {
  font-size: 32em;
  font-weight: bold;
  position: absolute;
  top: 0;
  transform: translateY(-50%);
}
span:nth-of-type(1) {
  right: 0.55em;
  color: #9a5c38;
}
span:nth-of-type(2) {
  left: 0.50em;
  color: #b46c42;
}
@media (max-width: 460px) {
  span {
    display: none;
  }
}

.alt {
  position: fixed;
  bottom: 1.25em;
  font-size: 4.5em;
  font-weight: bold;
  margin: 0;
  color: #eee;
  letter-spacing: 0.2em;
}
@media (min-width: 461px) {
  .alt {
    display: none;
  }
}

.info {
  position: fixed;
  bottom: 0.1em;
  font-size: 1.3em;
  font-weight: bold;
  margin: 0;
  color: #eee;
  letter-spacing: 0.2em;
}
.lost {
  position: fixed;
  bottom: 2.4em;
  font-size: 2.4em;
  font-weight: bold;
  margin: 0;
  color: #eee;
  letter-spacing: 0.2em;
}

@media (max-width: 460px) {
  .info {
    bottom: 1em;
  }
}

.stars, .stars:after, .stars:before {
  position: fixed;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: #eee;
  animation: blink 5s infinite ease-in-out;
}

.stars:after, .stars:before {
  content: "";
  display: block;
}

.s1 {
  top: -15em;
  left: -40em;
}
.s1:after {
  animation-delay: 0.5s;
  top: 10em;
  left: 24em;
}
.s1:before {
  top: 20em;
  left: -15em;
}

.s2 {
  animation-delay: .25s;
  top: -30em;
  left: 80em;
  font-size: 0.6em;
}
.s2:after {
  top: 20em;
  left: 60em;
}
.s2:before {
  animation-delay: 0.5s;
  top: 16em;
  left: -52em;
}

.s3 {
  animation-delay: .5s;
  top: -30em;
  left: 60em;
  font-size: 0.5em;
}
.s3:after {
  animation-delay: 0.75s;
  top: -46em;
  left: -30em;
}
.s3:before {
  animation-delay: .25s;
  top: 36em;
  left: 38em;
}

.s4 {
  top: -30em;
  left: -30em;
  font-size: 0.3em;
}
.s4:after {
  animation-delay: .5s;
  top: -50em;
  left: 30em;
}
.s4:before {
  top: 34em;
  left: 22em;
}

@keyframes blink {
  0% {
    opacity: .85;
  }
  25% {
    opacity: 0.4;
  }
  50% {
    opacity: .85;
  }
  75% {
    opacity: 0.4;
  }
  100% {
    opacity: .85;
  }
}
@keyframes moon {
  0% {
    top: 13em;
    left: -13em;
    transform: translateZ(-30em);
  }
  1% {
    transform: translateZ(30em);
  }
  50% {
    top: -19em;
    left: 7em;
    transform: translateZ(30em);
  }
  51% {
    transform: translateZ(-30em);
  }
  60% {
    transform: scale(0.8);
  }
  95% {
    transform: scale(0.8);
  }
  100% {
    top: 13em;
    left: -13em;
    transform: translateZ(-30em);
  }
}

003 File Manager

Editing: style2.css

Upload File

Create Folder