Iframe reattivo con navigazione in anteprima dispositivo

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

2 February 2026

<!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>

Iframe reattivo con navigazione in anteprima dispositivo

Consigliato

gioco di guida maladin

LOGIN

Fumetto HTML con design SVG

HTML

CSS

JS

Consigliato

gioco di guida maladin

LOGIN

Fumetto HTML con design SVG

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS