सोशल मीडिया लिंक पेज - खलील लाट्रेचे

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

7 January 2026

सोशल लॉगिन सुविधा के साथ HTML लॉगिन फॉर्म टेम्पलेट

5 January 2025

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

सोशल मीडिया लिंक पेज - खलील लाट्रेचे

अनुशंसित

सोशल लॉगिन सुविधा के साथ HTML लॉगिन फॉर्म टेम्पलेट

एक लैवेंडर होम पेज

404 पेज

HTML

CSS

JS

अनुशंसित

सोशल लॉगिन सुविधा के साथ HTML लॉगिन फॉर्म टेम्पलेट

एक लैवेंडर होम पेज

404 पेज

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS