Site en construction
Fabriqué en Haïti
L’élégance haïtienne arrive bientôt.
KOREK Collection est une marque haïtienne spécialisée dans la création de vêtements premium en tissu satin. Des pièces élégantes, confortables et soigneusement fabriquées en Haïti pour mettre en valeur votre style avec distinction.
Notre boutique en ligne sera bientôt disponible.
Qualité premium
Made in Haiti
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>KOREK Collection | Bientôt disponible</title>
<meta
name="description"
content="KOREK Collection, marque haïtienne de vêtements premium en tissu satin. Notre boutique en ligne sera bientôt disponible."
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap"
rel="stylesheet"
/>
<style>
:root {
--gold: #cda84f;
--gold-dark: #9d7827;
--gold-light: #f1dfad;
--ink: #17130d;
--muted: #6c655b;
--cream: #fbf8f1;
--white: #ffffff;
--border: rgba(157, 120, 39, 0.22);
--shadow: 0 22px 70px rgba(55, 42, 16, 0.12);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
min-height: 100vh;
font-family: "DM Sans", sans-serif;
color: var(--ink);
background:
radial-gradient(circle at 10% 10%, rgba(205, 168, 79, 0.12), transparent 32%),
radial-gradient(circle at 92% 88%, rgba(205, 168, 79, 0.10), transparent 30%),
var(--cream);
overflow-x: hidden;
}
a {
color: inherit;
text-decoration: none;
}
img {
display: block;
max-width: 100%;
}
.page-shell {
position: relative;
min-height: 100vh;
isolation: isolate;
}
.decor {
position: fixed;
z-index: -1;
border: 1px solid rgba(205, 168, 79, 0.14);
border-radius: 50%;
pointer-events: none;
}
.decor-one {
width: 360px;
height: 360px;
top: -130px;
right: -120px;
}
.decor-two {
width: 260px;
height: 260px;
left: -100px;
bottom: -80px;
}
.container {
width: min(1180px, calc(100% - 40px));
margin: 0 auto;
}
.topbar {
padding: 24px 0 10px;
}
.topbar-inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
}
.brand-logo {
width: 245px;
max-height: 92px;
object-fit: contain;
object-position: left center;
}
.status-pill {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 10px 15px;
border: 1px solid var(--border);
border-radius: 999px;
color: var(--gold-dark);
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(12px);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 0 6px rgba(205, 168, 79, 0.13);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(0.75); opacity: 0.55; }
}
.hero {
padding: 42px 0 32px;
}
.hero-grid {
display: grid;
grid-template-columns: 1.02fr 0.98fr;
gap: 70px;
align-items: center;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
color: var(--gold-dark);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.eyebrow::before {
content: "";
width: 42px;
height: 1px;
background: var(--gold);
}
h1 {
max-width: 680px;
font-family: "Playfair Display", serif;
font-size: clamp(3rem, 6vw, 5.7rem);
line-height: 0.98;
letter-spacing: -0.055em;
}
h1 span {
color: var(--gold-dark);
}
.lead {
max-width: 650px;
margin-top: 26px;
color: var(--muted);
font-size: clamp(1rem, 1.6vw, 1.14rem);
line-height: 1.85;
}
.tagline {
margin-top: 18px;
color: var(--ink);
font-weight: 700;
}
.info-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 34px;
}
.info-card {
display: flex;
align-items: flex-start;
gap: 12px;
min-height: 88px;
padding: 17px;
border: 1px solid var(--border);
border-radius: 18px;
background: rgba(255, 255, 255, 0.63);
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.info-card:hover {
transform: translateY(-3px);
border-color: rgba(157, 120, 39, 0.4);
box-shadow: 0 14px 38px rgba(55, 42, 16, 0.08);
}
.icon-box {
flex: 0 0 auto;
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 12px;
color: var(--gold-dark);
background: rgba(205, 168, 79, 0.15);
}
.icon-box svg {
width: 18px;
height: 18px;
}
.info-label {
margin-bottom: 5px;
color: var(--muted);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.info-value {
font-size: 0.94rem;
font-weight: 600;
line-height: 1.45;
word-break: break-word;
}
.visual-wrap {
position: relative;
}
.visual-card {
position: relative;
overflow: hidden;
padding: 12px;
border: 1px solid rgba(205, 168, 79, 0.25);
border-radius: 34px;
background: rgba(255, 255, 255, 0.82);
box-shadow: var(--shadow);
}
.product-image {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 25px;
object-fit: cover;
object-position: center;
}
.visual-badge {
position: absolute;
left: -24px;
bottom: 38px;
width: 148px;
height: 148px;
display: grid;
place-items: center;
text-align: center;
border-radius: 50%;
color: var(--white);
background: var(--ink);
box-shadow: 0 18px 45px rgba(23, 19, 13, 0.22);
transform: rotate(-8deg);
}
.visual-badge span {
display: block;
padding: 20px;
font-family: "Playfair Display", serif;
font-size: 1rem;
line-height: 1.25;
}
.visual-badge strong {
display: block;
margin-top: 5px;
color: var(--gold-light);
font-family: "DM Sans", sans-serif;
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.social-section {
padding: 25px 0 35px;
}
.social-panel {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
padding: 22px 26px;
border: 1px solid var(--border);
border-radius: 24px;
background: rgba(255, 255, 255, 0.62);
backdrop-filter: blur(14px);
}
.social-copy h2 {
font-family: "Playfair Display", serif;
font-size: 1.4rem;
}
.social-copy p {
margin-top: 5px;
color: var(--muted);
font-size: 0.92rem;
}
.social-links {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.social-link {
width: 44px;
height: 44px;
display: grid;
place-items: center;
border: 1px solid var(--border);
border-radius: 50%;
color: var(--ink);
background: var(--white);
transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.social-link:hover {
transform: translateY(-3px);
color: var(--white);
background: var(--ink);
}
.social-link svg {
width: 19px;
height: 19px;
fill: currentColor;
}
footer {
padding: 8px 0 28px;
color: var(--muted);
text-align: center;
font-size: 0.84rem;
}
@media (max-width: 960px) {
.hero {
padding-top: 26px;
}
.hero-grid {
grid-template-columns: 1fr;
gap: 46px;
}
.hero-copy {
text-align: center;
}
.eyebrow {
justify-content: center;
}
.lead {
margin-left: auto;
margin-right: auto;
}
.info-grid {
max-width: 760px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.visual-wrap {
width: min(690px, 100%);
margin: 0 auto;
}
}
@media (max-width: 680px) {
.container {
width: min(100% - 26px, 1180px);
}
.topbar {
padding-top: 16px;
}
.topbar-inner {
flex-direction: column;
align-items: center;
gap: 16px;
}
.brand-logo {
width: min(255px, 78vw);
object-position: center;
}
.status-pill {
font-size: 0.69rem;
}
.hero {
padding: 28px 0 24px;
}
h1 {
font-size: clamp(2.65rem, 15vw, 4rem);
}
.lead {
margin-top: 20px;
font-size: 0.98rem;
line-height: 1.72;
}
.info-grid {
grid-template-columns: 1fr;
margin-top: 28px;
}
.info-card {
min-height: unset;
}
.visual-card {
border-radius: 25px;
}
.product-image {
border-radius: 18px;
}
.visual-badge {
left: 14px;
bottom: 18px;
width: 112px;
height: 112px;
}
.visual-badge span {
padding: 14px;
font-size: 0.8rem;
}
.visual-badge strong {
font-size: 0.58rem;
}
.social-panel {
flex-direction: column;
text-align: center;
padding: 22px 18px;
}
.social-links {
justify-content: center;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
</style>
</head>
<body>
<div class="page-shell">
<div class="decor decor-one"></div>
<div class="decor decor-two"></div>
<header class="topbar">
<div class="container topbar-inner">
<!-- Placez le logo dans le même dossier que ce fichier HTML -->
<img
class="brand-logo"
src="kcunoff.png"
alt="Logo KOREK Collection"
/>
<div class="status-pill">
<span class="status-dot"></span>
Site en construction
</div>
</div>
</header>
<main>
<section class="hero">
<div class="container hero-grid">
<div class="hero-copy">
<div class="eyebrow">Fabriqué en Haïti</div>
<h1>
L’élégance haïtienne arrive <span>bientôt.</span>
</h1>
<p class="lead">
KOREK Collection est une marque haïtienne spécialisée dans la
création de vêtements premium en tissu satin. Des pièces élégantes,
confortables et soigneusement fabriquées en Haïti pour mettre en
valeur votre style avec distinction.
</p>
<p class="tagline">Notre boutique en ligne sera bientôt disponible.</p>
<div class="info-grid">
<a
class="info-card"
href="https://maps.google.com/?q=Port-au-Prince,Haiti"
target="_blank"
rel="noopener noreferrer"
>
<span class="icon-box" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
<path d="M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0Z"/>
<circle cx="12" cy="10" r="2.5"/>
</svg>
</span>
<span>
<span class="info-label">Adresse</span>
<span class="info-value">Port-au-Prince, Haïti</span>
</span>
</a>
<a class="info-card" href="tel:+50936682222">
<span class="icon-box" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
<path d="M22 16.92v3a2 2 0 0 1-2.18 2A19.79 19.79 0 0 1 3.09 5.18 2 2 0 0 1 5.08 3h3a2 2 0 0 1 2 1.72c.12.9.33 1.78.62 2.62a2 2 0 0 1-.45 2.11L9 10.7a16 16 0 0 0 4.3 4.3l1.25-1.25a2 2 0 0 1 2.11-.45c.84.29 1.72.5 2.62.62A2 2 0 0 1 22 16.92Z"/>
</svg>
</span>
<span>
<span class="info-label">Téléphone</span>
<span class="info-value">+509 36 68 22 22</span>
</span>
</a>
<a class="info-card" href="mailto:info@korekcollection.com">
<span class="icon-box" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
<rect x="3" y="5" width="18" height="14" rx="2"/>
<path d="m3 7 9 6 9-6"/>
</svg>
</span>
<span>
<span class="info-label">E-mail</span>
<span class="info-value">info@korekcollection.com</span>
</span>
</a>
<a
class="info-card"
href="https://wa.me/50936682222"
target="_blank"
rel="noopener noreferrer"
>
<span class="icon-box" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
<path d="M21 11.5a8.38 8.38 0 0 1-9 8.5 8.9 8.9 0 0 1-3.8-.9L3 21l1.8-5a8.5 8.5 0 1 1 16.2-4.5Z"/>
<path d="M9.4 8.8c.3 2 2 3.7 4 4.1"/>
</svg>
</span>
<span>
<span class="info-label">WhatsApp</span>
<span class="info-value">Écrivez-nous directement</span>
</span>
</a>
</div>
</div>
<div class="visual-wrap">
<div class="visual-card">
<!-- Placez la photo produit dans le même dossier que ce fichier HTML -->
<img
class="product-image"
src="583620501_17900937627328183_4544792717752043228_n.jpg"
alt="Exemples de vêtements KOREK Collection"
/>
</div>
<div class="visual-badge">
<span>
Qualité premium
<strong>Made in Haiti</strong>
</span>
</div>
</div>
</div>
</section>
<section class="social-section">
<div class="container">
<div class="social-panel">
<div class="social-copy">
<h2>Suivez KOREK Collection</h2>
<p>Découvrez prochainement nos nouveautés et collections.</p>
</div>
<div class="social-links" aria-label="Réseaux sociaux">
<!-- Remplacez # par les liens officiels de vos pages -->
<a class="social-link" href="#" aria-label="Facebook KOREK Collection">
<svg viewBox="0 0 24 24">
<path d="M13.7 22v-8h2.7l.4-3.1h-3.1V8.9c0-.9.3-1.5 1.6-1.5H17V4.6c-.3 0-1.3-.1-2.5-.1-2.5 0-4.2 1.5-4.2 4.3v2.1H7.5V14h2.8v8h3.4Z"/>
</svg>
</a>
<a class="social-link" href="#" aria-label="Instagram KOREK Collection">
<svg viewBox="0 0 24 24">
<path d="M7.8 2h8.4A5.8 5.8 0 0 1 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8A5.8 5.8 0 0 1 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2Zm-.2 2A3.6 3.6 0 0 0 4 7.6v8.8A3.6 3.6 0 0 0 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6A3.6 3.6 0 0 0 16.4 4H7.6Zm9.1 1.5a1.3 1.3 0 1 1 0 2.6 1.3 1.3 0 0 1 0-2.6ZM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z"/>
</svg>
</a>
<a class="social-link" href="#" aria-label="TikTok KOREK Collection">
<svg viewBox="0 0 24 24">
<path d="M15.6 2c.3 2.2 1.5 3.5 3.7 3.7v3.2a8.8 8.8 0 0 1-3.7-.9v6.5a6.5 6.5 0 1 1-5.6-6.4v3.3a3.3 3.3 0 1 0 2.4 3.1V2h3.2Z"/>
</svg>
</a>
<a class="social-link" href="#" aria-label="X KOREK Collection">
<svg viewBox="0 0 24 24">
<path d="M18.2 2H22l-8.3 9.5L23.5 22h-7.7l-6-7.9L2.9 22H-.9l8.9-10.2L-1.4 2h7.9l5.4 7.1L18.2 2Zm-1.3 18h2.1L5.4 3.9H3.1L16.9 20Z" transform="translate(1.2 0)"/>
</svg>
</a>
</div>
</div>
</div>
</section>
</main>
<footer>
<div class="container">
© <span id="year"></span> KOREK Collection. Tous droits réservés.
</div>
</footer>
</div>
<script>
document.getElementById("year").textContent = new Date().getFullYear();
</script>
</body>
</html>