<title>Daire İçinde Logolar</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #000; margin: 0; font-family: sans-serif; color: white; } .logo-container { position: relative; width: 400px; height: 400px; } .logo-item { position: absolute; width: 100px; /* Logo boyutunu ayarlayabilirsiniz */ height: 100px; /* Logo boyutunu ayarlayabilirsiniz */ border-radius: 50%; overflow: hidden; display: flex; justify-content: center; align-items: center; transition: transform 0.3s ease; } .logo-item img { width: 100%; height: 100%; object-fit: cover; } /* Her bir logo için pozisyon belirleme */ .logo-item:nth-child(1) { transform: rotate(0deg) translate(200px) rotate(0deg); } .logo-item:nth-child(2) { transform: rotate(60deg) translate(200px) rotate(-60deg); } .logo-item:nth-child(3) { transform: rotate(120deg) translate(200px) rotate(-120deg); } .logo-item:nth-child(4) { transform: rotate(180deg) translate(200px) rotate(-180deg); } .logo-item:nth-child(5) { transform: rotate(240deg) translate(200px) rotate(-240deg); } .logo-item:nth-child(6) { transform: rotate(300deg) translate(200px) rotate(-300deg); } .logo-item:nth-child(7) { transform: rotate(360deg) translate(200px) rotate(-360deg); } </style> </head> <body> <div class="logo-container"> <div class="logo-item"><img src="rna_logo.png" alt="RNA Logo"></div> <div class="logo-item"><img src="erga_logo.png" alt="Erga Logo"></div> <div class="logo-item"><img src="ewa_logo.png" alt="EWA Logo"></div> <div class="logo-item"><img src="umut_cocuklari_logo.png" alt="Umut Çocukları Derneği Logo"></div> <div class="logo-item"><img src="tkf_logo.png" alt="TKF Logo"></div> <div class="logo-item"><img src="adc_profil_logo.png" alt="ADC Profil Logo"></div> </div> </body> </html>
Mobilde bu şekilde alan dışına taşma ve kesilme oluyor hocam bende html ile ekleme yaptım aslında en son çare olarak ama bunu çözemedim