  <style>
  .container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* İçerik kutuları alt satıra geçebilir */
  justify-content: space-around; /* İçerik kutularını yatayda dağıtır */
}

.iconbox {
  width: 300px;
  padding: 20px;
  margin: 10px;
  border: 1px solid black;
}

/* Ekran genişliği 768px'ten küçükse */
@media (max-width: 768px) {
  .container {
    flex-direction: column; /* İçerik kutuları dikey olarak sıralanır */
  }
  .icobox {
    width: 90%; /* Kutular ekranın %90'ını kaplar */
    margin: 10px auto; /* Kutular ortalanır */
  }
}
  
    body {
      font-family: sans-serif;
    }
    .container {
      display: flex;
      flex-wrap: wrap;
    }
    .icon-box {
      flex: 1 1 200px;
      padding: 10px;
      margin: 5px;
      border: 1px solid #ccc;
    }
    @media (max-width: 768px) {
      .icon-box {
        flex-basis: 500%; /* Tam genişlik */
      }
    }
      .icon-box {
  width: 300px; /* veya istediğiniz genişlik */
  padding: 33px;
  border: 1px solid #ccc; /* İsteğe bağlı, kutu kenarlığı */
  margin-bottom: 10px; /* Alt alta sıralama için boşluk */
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); /* Gölgelendirme */
  background-color: #ffffff; /* İsteğe bağlı arka plan rengi */
}

    /* İsteğe bağlı: Eğer kutuların içindeki metni ortalamak isterseniz: */
       .icon-box p {
  text-align: center;
}

body { background-color: #b6bfcb; } opacity : Şeffaflık

        /* Bu bölümde CSS kodları yer alacak */
        .icon-box {
            font-size: 2em;
            color: blue;
            margin: 20px;
        }
		
		.yuvarlak-resim {
  width: 200px; /* İstediğiniz çapı ayarlayın */
  height: 200px; /* İstediğiniz çapı ayarlayın */
  border-radius: 50%; /* Daire şekli için */
  overflow: hidden; /* Taşmaları gizlemek için */
  position: relative; /* Resmin pozisyonunu ayarlamak için */
}

.yuvarlak-resim img {
  width: 100%; /* Resmin daireye sığması için */
  height: 100%; /* Resmin daireye sığması için */
  object-fit: cover; /* Oranları koruyarak resmi doldurmak için */
  position: absolute; /* Daire içinde ortalamak için */
  top: 50%; /* Daire içinde dikeyde ortalamak için */
  left: 50%; /* Daire içinde yatayda ortalamak için */
  transform: translate(-50%, -50%); /* Tam ortalamak için */
}
</style>
