Webleb - HTML UI Elements - sabine

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Orbiting Electrons</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<body>
    <div class="container">
        <div 
            class="nucleus"
            onmouseenter="handleMouseEnter()"
            onmouseleave="handleMouseLeave()"
        >
            <span class="icon-nucleus">VS</span>
        </div>

<div class="orbit orbit-1">
            <div class="electron">
                <i class="fa-brands fa-react"></i>
                <div class="popup">ReactJS</div>
            </div>
        </div>
        <div class="orbit orbit-2">
            <div class="electron">
                <i class="fa-brands fa-css3-alt"></i>
                <div class="popup">TailwindCSS</div>
            </div>
        </div>
        <div class="orbit orbit-3">
            <div class="electron">
                <i class="fa-brands fa-python"></i>
                <div class="popup">Python</div>
            </div>
        </div>
        <div class="orbit orbit-4">
            <div class="electron">
                <i class="fa-solid fa-mobile"></i>
                <div class="popup">Mobile</div>
            </div>
        </div>
        <div class="orbit orbit-5">
            <div class="electron">
                <i class="fa-solid fa-server"></i>
                <div class="popup">Server</div>
            </div>
        </div>
        <div class="orbit orbit-6">
            <div class="electron">
                <i class="fa-solid fa-house"></i>
                <div class="popup">Hone</div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

/* style.css */

@keyframes orbit-1 {
    0% {
      transform: rotate(0deg) translateX(100px) rotate(0deg);
    }
    100% {
      transform: rotate(360deg) translateX(100px) rotate(-360deg);
    }
  }
  
  @keyframes orbit-2 {
    0% {
      transform: rotate(0deg) translateX(150px) rotate(0deg);
    }
    100% {
      transform: rotate(-360deg) translateX(150px) rotate(360deg);
    }
  }
  
  @keyframes orbit-3 {
    0% {
      transform: rotate(0deg) translateX(200px) rotate(0deg);
    }
    100% {
      transform: rotate(360deg) translateX(200px) rotate(-360deg);
    }
  }
  
  @keyframes orbit-4 {
    0% {
      transform: rotate(0deg) translateX(250px) rotate(0deg);
    }
    100% {
      transform: rotate(-360deg) translateX(250px) rotate(360deg);
    }
  }
  
  @keyframes orbit-5 {
    0% {
      transform: rotate(0deg) translateX(300px) rotate(0deg);
    }
    100% {
      transform: rotate(360deg) translateX(300px) rotate(-360deg);
    }
  }
  
  @keyframes orbit-6 {
    0% {
      transform: rotate(0deg) translateX(350px) rotate(0deg);
    }
    100% {
      transform: rotate(-360deg) translateX(350px) rotate(360deg);
    }
  }
  
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    position: relative;
  }
  
  .nucleus {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #059669;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 10;
  }
  
  .icon-nucleus {
    font-size: 24px;
    font-weight: bold;
    color: white;
  }
  
  .electron {
    position: absolute;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #3490dc;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transition: transform 0.5s ease, background-color 0.3s ease;
  }
  
  .electron:hover {
    background-color: #ffcc00;
  }
  
  .icon {
    width: 30px;
    height: 30px;
    color: white;
  }
  
  .orbit {
    position: absolute;
    width: 100px; /* Diameter of the orbit */
    height: 100px; /* Diameter of the orbit */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease;
  }
  
  .orbit-1 {
    animation: orbit-1 4s linear infinite;
  }
  
  .orbit-2 {
    animation: orbit-2 6s linear infinite;
  }
  
  .orbit-3 {
    animation: orbit-3 8s linear infinite;
  }
  
  .orbit-4 {
    animation: orbit-4 10s linear infinite;
  }
  
  .orbit-5 {
    animation: orbit-5 12s linear infinite;
  }
  
  .orbit-6 {
    animation: orbit-6 14s linear infinite;
  }
  
  .orbit.align {
    animation: none;
  }
  
  .orbit-1.align .electron {
    transform: translateX(-150px) translateY(-100px);
  }
  
  .orbit-2.align .electron {
    transform: translateX(-90px) translateY(-100px);
  }
  
  .orbit-3.align .electron {
    transform: translateX(-30px) translateY(-100px);
  }
  
  .orbit-4.align .electron {
    transform: translateX(30px) translateY(-100px);
  }
  
  .orbit-5.align .electron {
    transform: translateX(90px) translateY(-100px);
  }
  
  .orbit-6.align .electron {
    transform: translateX(150px) translateY(-100px);
  }
  
  .orbit .electron:hover .popup {
    display: block;
  }
  
  .popup {
    display: none;
    position: absolute;
    top: -30px; /* Adjust this to position the popup */
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    padding: 5px 10px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    z-index: 20;
  }

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS