Iframe adaptable con navegación de vista previa del dispositivo

Abrir en el editor Publica tu código

Recomendado

11 May 2025

Impresionante sitio web de portafolios

2 July 2025

<!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 adaptable con navegación de vista previa del dispositivo

Recomendado

Impresionante sitio web de portafolios

Un código de Mete

Mensaje de motivación

HTML

CSS

JS

Recomendado

Impresionante sitio web de portafolios

Un código de Mete

Mensaje de motivación

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS