SITE WEB D'APPLE

294 kevekıbhack

Ouvrir dans l'éditeur Publiez votre code

Recommandé

17 July 2024

Modèle de site Web de portfolio HTML 2024

18 October 2024

Modèle de site Web de portefeuille HTML CSS

11 May 2025

Superbe site Web de portfolio

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>

Recommandé

Modèle de site Web de portfolio HTML 2024

Modèle de site Web de portefeuille HTML CSS

Superbe site Web de portfolio

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS