Página de links de mídias sociais - Khalil Latreche

146 klomlat33

Abrir no Editor Publique Seu Código

Página de links de mídias sociais - Khalil Latreche

Recomendado

6 November 2024

Modelo de site de portfólio de desenvolvedor

28 May 2025

Um Código de Metehan

9 July 2025

Iframe responsivo com navegação de visualização do dispositivo

HTML

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>khalil latreche</title>
<style>
  :root {
    --accent1: #ff3cff; /* وردي */
    --accent2: #7f7fff; /* بنفسجي أزرق */
    --bg-dark: #0b0b10;
    --text: #f5f5f5;
    --muted: #ffffff;
    --radius: 32px;
  }

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: "Poppins", "Segoe UI", Tahoma, sans-serif;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    overflow: hidden;
  }

/* خلفية متحركة */
  body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(120deg, #6e004a6b, #001f4db4, #330050, #1e0046, #000000);
    background-size: 400% 400%;
    animation: moveBg 20s ease infinite;
    z-index: -1;
  }

@keyframes moveBg {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

.phone-frame {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius);
    padding: 30px 20px;
    width: 380px;
    max-width: 95%;
    box-shadow: 0 0 20px rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
  }

.logo {
    text-align: center;
    margin-bottom: 20px;
  }
  .logo img {
    width: 90px;
    height: 90px;
    border-radius: 24px;
    box-shadow: 0 0 16px rgba(255,255,255,0.1);
  }
  .logo h1 {
    font-size: 22px;
    margin: 10px 0 0;
    background: linear-gradient(90deg, var(--accent1), var(--accent2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .logo p {
    font-size: 14px;
    color: var(--muted);
    margin: 4px 0 0;
  }

.btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    padding: 14px 18px;
    margin-top: 14px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    position: relative;
  }

/* تأثير اللمعان */
  .btn:hover {
    background: linear-gradient(90deg, var(--accent1), var(--accent2));
    box-shadow: 0 0 20px rgba(255, 110, 199, 0.5);
    color: #ffffff;
    transform: translateY(-4px);
  }

.btn-icon {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .btn-icon svg {
    width: 26px;
    height: 26px;
  }

.triangle {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 10px solid var(--accent1);
    cursor: pointer;
    transition: transform 0.3s ease;
  }

.triangle.open {
    transform: rotate(180deg);
  }

/* قائمة الأرقام */
  .dropdown {
    display: none;
    flex-direction: column;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    margin-top: 8px;
    border-radius: 16px;
    overflow: hidden;
  }

.dropdown button {
    background: transparent;
    color: var(--text);
    border: none;
    text-align: right;
    padding: 12px 16px;
    font-size: 15px;
    cursor: pointer;
    transition: 0.25s;
  }

.dropdown button:hover {
    background: rgba(255,255,255,0.1);
    color: var(--accent1);
  }

.popup button {
    background: none;
    border: none;
    color: var(--text);
    padding: 8px 16px;
    text-align: right;
    cursor: pointer;
    transition: 0.2s;
  }
.popup button:hover {
    background: rgba(255,255,255,0.05);
    color: var(--accent1);
  }
</style>
</head>
<body>
  <div class="phone-frame">
    <div class="logo">
      <img src="Capture d’écran 2025-10-10 145045.png" alt="Logo" />
      <h1>khalil latreche</h1>
      <p>photographer</p>
    </div>

<a class="btn" href="https://www.instagram.com/khalil_latreche_/" target="_blank">
      <div class="btn-icon">
        <svg fill="currentColor" viewBox="0 0 24 24"><path d="M7.5 2h9A5.5 5.5 0 0 1 22 7.5v9a5.5 5.5 0 0 1-5.5 5.5h-9A5.5 5.5 0 0 1 2 16.5v-9A5.5 5.5 0 0 1 7.5 2zM12 7.5a4.5 4.5 0 1 0 4.5 4.5A4.505 4.505 0 0 0 12 7.5zm6.75-1.75a1.25 1.25 0 1 0 1.25 1.25A1.25 1.25 0 0 0 18.75 5.75z"/></svg>
        <span>Instagram</span>
      </div>
    </a>

<a class="btn" href="https://www.facebook.com/khalil.latreche.7" target="_blank">
      <div class="btn-icon">
        <svg fill="currentColor" viewBox="0 0 24 24"><path d="M22 12a10 10 0 1 0-11.5 9.9v-7h-2v-2.9h2v-2.3c0-2 1.2-3.1 3-3.1a12 12 0 0 1 1.8.2v2h-1c-1 0-1.3.5-1.3 1.2v2h2.3l-.3 2.9h-2v7A10 10 0 0 0 22 12z"/></svg>
        <span>Facebook</span>
      </div>
    </a>

<a class="btn" href="https://www.tiktok.com/@khalillatreche4?is_from_webapp=1&sender_device=pc" target="_blank">
      <div class="btn-icon">
        <svg fill="currentColor" viewBox="0 0 24 24"><path d="M12 2h2.6c.2 1.7 1.6 3.2 3.3 3.4v2.6a6.1 6.1 0 0 1-3.3-1v7.5a5.5 5.5 0 1 1-5.5-5.5v2.8a2.7 2.7 0 1 0 2.7 2.7V2z"/></svg>
        <span>TikTok</span>
      </div>
    </a>

</script>
</body>
</html>

Página de links de mídias sociais - Khalil Latreche

Recomendado

Modelo de site de portfólio de desenvolvedor

Um Código de Metehan

Iframe responsivo com navegação de visualização do dispositivo

HTML

CSS

JS

Recomendado

Modelo de site de portfólio de desenvolvedor

Um Código de Metehan

Iframe responsivo com navegação de visualização do dispositivo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS