nearby around circle

by Osama Qassar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Nearby Circular Layout</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .nearby_holder {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background: #f0f0f0;
    }

    .nearby {
      position: relative;
      width: 400px;
      height: 400px;
    }

    .nearby_item {
      position: absolute;
      top: 50%;
      left: 50%;
      transform-origin: center center;
      text-align: center;
      width: 100px;
      transform: translate(-50%, -50%);
      font-family: sans-serif;
    }

    .icn {
      display: block;
      font-size: 20px;
      margin-bottom: 5px;
    }

    .center-image {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 180px;
      height: 180px;
      border-radius: 50%;
      overflow: hidden;
      transform: translate(-50%, -50%);
      border: 10px solid #0005;
    }

    .center-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha512-q3eWabyZPc1XTCmF+8/LuE1ozpg5xxn7iO89yfSOd5/oKvyqLngoNGsx8jq92Y8eXJ/IRxQbEC+FGSYxtk2oiw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

</head>
<body>
<div class="nearby_holder">
<div class="nearby" id="nearby">
  <div class="center-image">
    <img src="https://ptimages.s3.eu-west-2.amazonaws.com/img/properties_photos/Villa%201-105263-1731423014_en.webp" alt="City">
  </div>

  <span class="nearby_item">
    <i class="fas fa-plane icn"></i>
    <div>Airport<br>50m</div>
  </span>

  <span class="nearby_item">
    <i class="fas fa-school icn"></i>
    <div>Schools<br>50m</div>
  </span>

  <span class="nearby_item">
    <i class="fas...