Page de liens vers les réseaux sociaux - Khalil Latreche

639 klomlat33

Ouvrir dans l'éditeur Video Publiez votre code

Page de liens vers les réseaux sociaux - Khalil Latreche

Recommandé

26 August 2024

Jeu de tennis

22 June 2025

Exemple de formulaire de connexion HTML

10 January 2026

Modèle HTML de portfolio de développeur Full Stack

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>

Page de liens vers les réseaux sociaux - Khalil Latreche

Recommandé

Jeu de tennis

Exemple de formulaire de connexion HTML

Modèle HTML de portfolio de développeur Full Stack

HTML

CSS

JS

Recommandé

Jeu de tennis

Exemple de formulaire de connexion HTML

Modèle HTML de portfolio de développeur Full Stack

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS