Responsive Iframe with Device Preview Navigation

Open In Editor Video Publish Your Code

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

Responsive Iframe with Device Preview Navigation

Recommended

HTML Login Form with Geometric Background

Glass effect social media buttons with neon glow

Pricing Card with 3D Tilt & Energy Ring Effect

HTML

CSS

JS

Recommended

HTML Login Form with Geometric Background

Glass effect social media buttons with neon glow

Pricing Card with 3D Tilt & Energy Ring Effect

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS