macOS Monterey

index.html

<div class="menu-bar">
  <div class="left">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Apple_logo_white.svg/1010px-Apple_logo_white.svg.png" class="apple-logo" alt="">
    <span class="menus active">Finder</span>
    <span class="menus">File</span>
    <span class="menus">Edit</span>
    <span class="menus">View</span>
    <span class="menus">Go</span>
    <span class="menus">Window</span>
    <span class="menus">Help</span>
  </div>
  <div class="right">

    <div class="menu-ico">
      <img src="https://freepngimg.com/download/united_states/76187-sound-information-united-business-states-address-email.png" alt="" class="vol">
    </div>
    <div class="menu-ico">
      <i class="fab fa-bluetooth-b"></i>
    </div>
    <div class="menu-ico">
      <i class="fas fa-battery-half"></i>
    </div>
    <div class="menu-ico">
      <i class="fas fa-wifi"></i>
    </div>
    <div class="menu-ico">
      <i class="fas fa-search"></i>
    </div>
    <div class="menu-ico">
      <img src="https://eshop.macsales.com/blog/wp-content/uploads/2021/03/control-center-icon.png" alt="" class="control-center">
    </div>
    <div class="menu-ico">
      <img src="https://upload.wikimedia.org/wikipedia/en/8/8e/AppleSiriIcon2017.png" alt="" class="siri">
    </div>

    <div class="menutime">
     
    </div>

  </div>
</div>

<div class="dock">
  <div class="dock-container">
    <li class="li-1">
      <div class="name">Finder</div>
      <img class="ico" src="https://uploads-ssl.webflow.com/5f7081c044fb7b3321ac260e/5f70853981255cc36b3a37af_finder.png" alt="">
    </li>
    <li class="li-2">
      <div class="name">Siri</div>
      <img class="ico" src="https://uploads-ssl.webflow.com/5f7081c044fb7b3321ac260e/5f70853ff3bafbac60495771_siri.png" alt="">
    </li>
    <li class="li-3">
      <div class="name">LaunchPad</div>
      <img class="ico" src="https://uploads-ssl.webflow.com/5f7081c044fb7b3321ac260e/5f70853943597517f128b9b4_launchpad.png" alt="">
    </li>
    <li class="li-4">
      <div class="name">Contacts</div>
      <img class="ico" src="https://uploads-ssl.webflow.com/5f7081c044fb7b3321ac260e/5f70853743597518c528b9b3_contacts.png" alt="">
    </li>
    <li class="li-5">
      <div class="name">Notes</div>
      <img class="ico" src="https://uploads-ssl.webflow.com/5f7081c044fb7b3321ac260e/5f70853c849ec3735b52cef9_notes.png" alt="">
    </li>
    <li class="li-6">
      <div class="name">Reminders</div>
      <img class="ico" src="https://uploads-ssl.webflow.com/5f7081c044fb7b3321ac260e/5f70853d44d99641ce69afeb_reminders.png" alt="">
    </li>
    <li class="li-7">
      <div class="name">Photos</div>
      <img class="ico" src="https://uploads-ssl.webflow.com/5f7081c044fb7b3321ac260e/5f70853c55558a2e1192ee09_photos.png" alt="">
    </li>
    <li class="li-8">
      <div class="name">Messages</div>
      <img class="ico" src="https://uploads-ssl.webflow.com/5f7081c044fb7b3321ac260e/5f70853a55558a68e192ee08_messages.png" alt="">
    </li>
    <li class="li-9">
      <div class="name">FaceTime</div>
      <img class="ico" src="https://uploads-ssl.webflow.com/5f7081c044fb7b3321ac260e/5f708537f18e2cb27247c904_facetime.png" alt="">
    </li>
    <li class="li-10">
      <div class="name">Music</div>
      <img class="ico" src="https://uploads-ssl.webflow.com/5f7081c044fb7b3321ac260e/5f70853ba0782d6ff2aca6b3_music.png" alt="">
    </li>
    <li class="li-11">
      <div class="name">Podcasts</div>
      <img class="ico" src="https://uploads-ssl.webflow.com/5f7081c044fb7b3321ac260e/5f70853cc718ba9ede6888f9_podcasts.png" alt="">
    </li>
    <li class="li-12">
      <div class="name">TV</div>
      <img class="ico" src="https://uploads-ssl.webflow.com/5f7081c044fb7b3321ac260e/5f708540dd82638d7b8eda70_tv.png" alt="">
    </li>
    <li class="li-12">
      <div class="name">App Store</div>
      <img class="ico" src="https://uploads-ssl.webflow.com/5f7081c044fb7b3321ac260e/5f70853270b5e2ccfd795b49_appstore.png" alt="">
    </li>
    <li class="li-14">
      <div class="name">Safari</div>
      <img class="ico" src="https://uploads-ssl.webflow.com/5f7081c044fb7b3321ac260e/5f70853ddd826358438eda6d_safari.png" alt="">
    </li>
    <li class="li-bin li-15">
      <div class="name">Bin</div>
      <img class="ico ico-bin" src="https://findicons.com/files/icons/569/longhorn_objects/128/trash.png" alt="">
    </li>

  </div>
</div>

macos-monterey.markdown

macOS Monterey

WWDC 2021 macOS 12 Monterey Pure Full CSS

A Pen by Oğuz Y on CodePen.

License.

script.js

let icons = document.querySelectorAll(".ico");
let length = icons.length;

icons.forEach((item, index) => {
  item.addEventListener("mouseover", (e) => {
    focus(e.target, index);
  });
  item.addEventListener("mouseleave", (e) => {
    icons.forEach((item) => {
      item.style.transform = "scale(1)  translateY(0px)";
    });
  });
});

const focus = (elem, index) => {
  let previous = index - 1;
  let previous1 = index - 2;
  let next = index + 1;
  let next2 = index + 2;

  if (previous == -1) {
    console.log("first element");
    elem.style.transform = "scale(1.5)  translateY(-10px)";
  } else if (next == icons.length) {
    elem.style.transform = "scale(1.5)  translateY(-10px)";
    console.log("last element");
  } else {
    elem.style.transform = "scale(1.5)  translateY(-10px)";
    icons[previous].style.transform = "scale(1.2) translateY(-6px)";
    icons[previous1].style.transform = "scale(1.1)";
    icons[next].style.transform = "scale(1.2) translateY(-6px)";
    icons[next2].style.transform = "scale(1.1)";
  }
};
function menutime() {// We create a new Date object and assign it to a variable called "time".
var time = new Date(),
    
    // Access the "getHours" method on the Date object with the dot accessor.
    hours = time.getHours(),
    
    // Access the "getMinutes" method with the dot accessor.
    minutes = time.getMinutes(),
    
    
    seconds = time.getSeconds();

document.querySelectorAll('.menutime')[0].innerHTML = harold(hours) + ":" + harold(minutes);
  
  function harold(standIn) {
    if (standIn < 10) {
      standIn = '0' + standIn
    }
    return standIn;
  }
}
setInterval(menutime, 1000);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

style.scss

*,
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "San Francisco";
}

@font-face {
  font-family: "San Francisco";
  font-weight: 400;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
}

@font-face {
  font-family: "San Francisco";
  font-weight: 800;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-bold-webfont.woff");
}

body {
  background: url(https://wallpapercave.com/wp/wp9307100.jpg);
	background-size: 100%;
}

.menu-bar {
  width: 100%;
  height: 30px;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(83, 83, 83, 0.4);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);

  .left {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: auto;
    margin-left: 20px;

    .apple-logo {
      transform: scale(0.5);
    }
    .menus {
      height: 100%;
      display: flex;
      align-items: center;
      margin-left: 20px;
      color: rgba(255, 255, 255, 0.95);
      font-size: 14px;
    }
    .active {
      font-weight: bold;
      color: #fff !important;
    }
  }
  .right {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 380px;
    margin-right: 20px;
    .vol {
      transform: scale(0.6);
      margin-right: -10px;
    }
    .menutime {
      height: 100%;
      width: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
			font-weight:bold;
    }
    .menu-ico {
      height: 100%;
      width: 10px;
      display: flex;
      align-items: center;
      justify-content: center;

      .control-center {
        -webkit-filter: invert(100%);
        filter: invert(100%);
        transform: scale(0.5);
      }
      .siri {
        transform: scale(0.7);
        object-fit: fill;
      }

      i {
        display: contents;
        font-size: 16px;
        color: #fff;
      }
    }
  }
}

.dock {
  width: auto;
  height: 60px;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);

  .dock-container {
    padding: 3px;
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(83, 83, 83, 0.25);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    border: 1px solid rgba(255, 255, 255, 0.18);

    .li-bin {
      margin-left: 20px;
      border-left: 1.5px solid rgba(255, 255, 255, 0.4);
      padding: 0px 10px;
    }
    .li-1 {
      &::after {
        position: absolute;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
        content: "";
        bottom: 2px;
      }
    }

    li {
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 50px;
      vertical-align: bottom;
      transition: 0.2s;
      transform-origin: 50% 100%;
      &:hover {
        margin: 0px 13px 0px 13px;
      }

      .name {
        position: absolute;
        top: -70px;
        background: rgba(0, 0, 0, 0.5);
        color: rgba(255, 255, 255, 0.9);
        height: 10px;
        padding: 10px 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
        visibility: hidden;
        &::after {
          content: "";
          position: absolute;
          bottom: -10px;
          width: 0;
          height: 0;
          backdrop-filter: blur(13px);
          -webkit-backdrop-filter: blur(13px);
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
          border-top: 10px solid rgba(0, 0, 0, 0.5);
        }
      }

      .ico {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: 0.2s;
      }
      .ico-bin {
        width: 94% !important;
        height: 94% !important;
        object-fit: cover;
        transition: 0.2s;

        &:hover {
          margin-left: 10px;
        }
      }
    }
  }
}

@for $i from 1 through 15 {
  .li-#{$i}:hover {
    .name {
      visibility: visible !important;
    }
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />