SITIO WEB DE APPLE

1,302 kevekıbhack

Abrir en el editor Publica tu código

Recomendado

20 February 2026

Plantilla HTML de portafolio de desarrollador con fondo animado

11 February 2026

Granny (juego de terror)

16 February 2026

Juego de la serpiente en JavaScript con inicio y reinicio

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>KEVAKİB WEB SİT</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="robots" content="noindex, nofollow" />
  <style>
    /* Temel Reset ve Font */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    html, body {
      width: 100%;
      height: 100%;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(to bottom right, #d0f0ff, #a8e6ff); /* Açık mavi geçişli */
      color: #3273b4;
      overflow: hidden;
      animation: fadeIn 1s ease-in;
    }

@keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

a {
      color: #0077cc;
      text-decoration: none;
      transition: color 0.3s ease;
    }
    a:hover {
      color: #004477;
    }

iframe {
      width: 100%;
      height: 100vh;
      border: none;
      background: #d13b3b70;
      animation: slideIn 1s ease-out;
    }

@keyframes slideIn {
      from { opacity: 0; transform: translateX(50px); }
      to { opacity: 1; transform: translateX(0); }
    }

/* Navigasyon */
    .nav {
      position: fixed;
      bottom: 0;
      right: 200px;
      padding: 20px;
      border-radius: 15px 0 0 15px;
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
      justify-content: space-between;
      background-color: rgba(255, 255, 255, 0.85);
      box-shadow: 0 0 15px rgba(0,0,0,0.1);
      transform: translateX(100%);
      transition: transform 0.4s ease-in-out;
      z-index: 1000;
      animation: fadeInUp 1.2s ease-out;
    }

@keyframes fadeInUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

.nav.show {
      transform: translateX(0);
    }

.devices {
      display: flex;
      gap: 10px;
    }

.devices a {
      color: #2c3e50;
      transition: transform 0.3s ease;
    }

.devices a:hover {
      color: #0077cc;
      transform: scale(1.2);
    }

.btn-settings {
      padding: 12px 20px;
      border: 2px solid #0077cc;
      background-color: #ffffffcc;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      color: #0077cc;
      border-radius: 50px;
      cursor: pointer;
      transition: transform 0.3s ease, background-color 0.3s ease;
      font-weight: bold;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

.btn-settings:hover {
      transform: scale(1.05);
      background-color: #e0f7ff;
    }

svg {
      display: block;
    }
  </style>
</head>
<body>

<div id="demo-page-nav" class="nav">
    <div class="devices">
      <a href="#desktop" title="Masaüstü">
        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24">
          <path fill="currentColor" d="M19 2H5a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h3v2H5a1 1 0 0 0 0 2h14a1 1 0 0 0 0-2h-3v-2h3a3 3 0 0 0 3-3V5a3 3 0 0 0-3-3Zm-5 18h-4v-2h4Zm6-5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16Zm0-3H4V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1Z"/>
        </svg>
      </a>
      <a href="#laptop" title="Laptop">
        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24">
          <path fill="currentColor" d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16Z"/>
        </svg>
      </a>
      <a href="#tab" title="Tablet">
        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24">
          <path fill="currentColor" d="M17 2H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V5a3 3 0 0 0-3-3Zm1 17a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1Zm-5.29-2.71a1 1 0 0 0-.91-.29l-.18.06a.76.76 0 0 0-.18.09l-.15.12a1 1 0 0 0-.21.33a1 1 0 0 0 .21 1.09a1.46 1.46 0 0 0 .33.22a1 1 0 0 0 1.09-.22A1 1 0 0 0 13 17a.84.84 0 0 0-.08-.38a1.15 1.15 0 0 0-.21-.33Z"/>
        </svg>
      </a>
      <a href="#phone" title="Telefon">
        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24">
          <path fill="currentColor" d="M16 2H8a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V5a3 3 0 0 0-3-3Zm1 17a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-1h10Zm0-3H7V5a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1Z"/>
        </svg>
      </a>
    </div>
    <div id="toggle-btn" class="btn-settings" title="Ayarları Aç/Kapat">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
        <path fill="currentColor" d="M12 8a4 4 0 1 0 4 4a4 4 0 0 0-4-4Zm0 6a2 2 0 1 1 2-2a2 2 0 0 1-2 2Zm8.66-3.06l-2-3.46a1 1 0 0 0-1.73 0l-2 3.46a1 1 0 0 0 0 1l2 3.46a1 1 0 0 0 1.73 0l2-3.46a1 1 0 0 0 0-1Zm-1.73 3l-1.14-2l1.14-2l1.14 2Zm-15.59-3a1 1 0 0 0 0 1l2 3.46a1 1 0 0 0 1.73 0l2-3.46a1 1 0 0 0 0-1l-2-3.46a1 1 0 0 0-1.73 0Zm2.86-2l1.14 2l-1.14 2l-1.14-2Z"/>
      </svg>
      Ayarlar
    </div>
  </div>

toggleBtn.addEventListener('click', () => {
      nav.classList.toggle('show');
    });
  </script>

</body>
</html>

CSS