Planets Nav - CPC Fork This

index.html

<nav>
  <ul>
    <li><a href="#0">Home</a></li>
    <li><a href="#0">About</a></li>
    <li>
      <a href="#0">Clients</a>
      <ul>
        <li><a href="#0">Burger King</a></li>
        <li><a href="#0">Southwest Airlines</a></li>
        <li><a href="#0">Levi Strauss</a></li>
      </ul>
    </li>
    <li>
      <a href="#0">Services</a>
      <ul>
        <li><a href="#0">Print Design</a></li>
        <li><a href="#0">Web Design</a></li>
        <li><a href="#0">Mobile App Development</a></li>
      </ul>
    </li>
    <li><a href="#0">Contact</a></li>
  </ul>
</nav>

planets-nav-cpc-fork-this.markdown

Planets Nav - CPC Fork This

I was trying to challenge myself to make this without touching any JavaScript or HTML. The only thing correct about this in relation to reality is the order of the planets. They are very obviously not to scale, and they don't have the right rotation, and blah blah blah...

Not responsive :|

A Pen by Lucas Lang on CodePen.

License.

style.scss

@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');

$earth-diameter: 150px;

html {
  background: url(https://drive.google.com/uc?export=view&id=1HfPk_rWsi9cFFq9P9Syxt8jxnxk1C5eS);
  background-size: 160px 400px;
  margin: 0;
  padding: 0;
  font-family: Poppins, sans-serif;
  box-sizing: border-box;
}

nav {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 97vw;
  margin: 0;
  padding: 0;
  box-sizing: content-box;
  
  &:after {
    content: "*Planets might maybe possibly not be to scale";
    color: white;
    position: fixed;
    bottom: 0;
    z-index: -5;
  }
}

nav > ul {
  display: flex;
}

nav > ul > li {
    width: $earth-diameter;
    height: $earth-diameter;
    position: relative; 
    border-radius: 50%;
    list-style-type: none;
    background: white;
    animation: move 35s linear infinite;
    cursor: pointer;
    margin-bottom: 75px;
    transition: .5s all;
  
    &:nth-child(1) {
     background: url(https://images.pexels.com/photos/87652/earth-map-summer-july-87652.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=150&w=420); 
      box-shadow:inset -10px -10px 40px rgba(52, 115, 105,0.5), 0 0 60px -20px rgba(131, 191, 103,.72), -10px -10px 40px -10px rgba(131, 191, 103,.23);
      &:after {
        content: "";
        background:url(https://drive.google.com/uc?export=view&id=1Al9iQ0kViMjtlkAVOontGg-ck3hGa_oQ);
        width: $earth-diameter;
        height: $earth-diameter;
        position:absolute;
        border-radius:50%;
        animation: move 30s infinite linear;
        opacity: 0.4;
      }
    }
  
    &:nth-child(2) {
     background: url(https://drive.google.com/uc?export=view&id=1WsdbWaFcsh6fIU_52JJx0DVGX3c8wch8);
     box-shadow:inset -10px -10px 40px rgba(194, 104, 48,0.5), 0 0 60px -20px rgba(194, 104, 48,.72), -10px -10px 40px -10px rgba(194, 104, 48,.23);
    }
  
    &:nth-child(3) {
      background:url(https://drive.google.com/uc?export=view&id=1Q3OkJv9xAsxU7LzM7qKelh9OSRmkXrnZ);
     box-shadow:inset -10px -10px 40px rgba(255, 183, 138,0.5), 0 0 60px -20px rgba(255, 183, 138,.72), -10px -10px 40px -10px rgba(255, 183, 138,.23);
    }

    &:nth-child(4) {
        background:url(https://drive.google.com/uc?export=view&id=1bq6uep1BfPCkogheyrmGKglkjmgRFspF);
     box-shadow:inset -10px -10px 40px rgba(255, 209, 181,0.5), 0 0 60px -20px rgba(255, 209, 181,.72), -10px -10px 40px -10px rgba(255, 209, 181,.23);
    }
  
    &:nth-child(5) {
          background:url(https://drive.google.com/uc?export=view&id=1NS_ffyQnZi7PqedQl0e6I0Tyk6usRZvC);
     box-shadow:inset -10px -10px 40px rgba(120, 253, 255,0.5), 0 0 60px -20px rgba(120, 253, 255,.72), -10px -10px 40px -10px rgba(120, 253, 255,.23);
      }
    &:hover {
      transform: scale(1.2);
      margin: 0px 50px;
      
      a {
        color: white;
      }
    }
  
  & > a {
    color: white;
    z-index: 10;
    text-decoration: inherit;
    position: absolute;
    bottom: -50px;
    font-size: 30px;
    left: 50%;
    transform: translateX(-25%) rotateZ(60deg);
  }
}

li > ul {
  position: absolute;
  transform: rotateZ(60deg);
  bottom: -150px;
  right: -110px;
  width: 300px;
  
  & > li {
    list-style-type: none;
    position: relative;
    display: flex;

    & > a {
      color: rgba(255,255,255,0);
      z-index: 10;
      text-decoration: inherit;
      transition: .2s all;
      
      &:hover {
        color: rgb(150,150,150);
      }
    }
  }
}


@keyframes move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -600px 0;
  }
}