Página de enlaces a redes sociales - Khalil Latreche

487 klomlat33

Abrir en el editor Video Publica tu código

Página de enlaces a redes sociales - Khalil Latreche

Recomendado

14 September 2024

Interacción con carteles de películas

2 June 2025

HORARIO DE EJEMPLO

30 May 2025

Codificación manual de la página de inicio de sesión de Facebook

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 enlaces a redes sociales - Khalil Latreche

Recomendado

Interacción con carteles de películas

HORARIO DE EJEMPLO

Codificación manual de la página de inicio de sesión de Facebook

HTML

CSS

JS

Recomendado

Interacción con carteles de películas

HORARIO DE EJEMPLO

Codificación manual de la página de inicio de sesión de Facebook

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS