Skip to content
  • Acueil
  • A porpos
  • Contact
  • Acueil
  • A porpos
  • Contact
Contact us

This Headline Grabs Visitors’ Attention

A short description introducing visitors to your business and the services you offer

Contact us

About Us

Use this section to describe your company and the services you offer. You could share your company’s story and details about why you are in business. The goal is to create a connection with the visitor and give them confidence to work with you.

Learn more

Our Services

This text briefly introduces visitors to your main services.

Service 1

A short description of the service and how the visitor will benefit from it.

Service 2

A short description of the service and how the visitor will benefit from it.

Service 3

A short description of the service and how the visitor will benefit from it.

Service 4

A short description of the service and how the visitor will benefit from it.

Why Choose Us

benefit 1

A short description of the benefit.

benefit 2

A short description of the benefit.

benefit 3

A short description of the benefit.

benefit 4

A short description of the benefit.

Client Testimonials

“A testimonial from a client who benefited from your product or service. Testimonials can be a highly effective way of establishing credibility and increasing your company's reputation.”
Client Name
“A testimonial from a client who benefited from your product or service. Testimonials can be a highly effective way of establishing credibility and increasing your company's reputation.”
Client Name
“A testimonial from a client who benefited from your product or service. Testimonials can be a highly effective way of establishing credibility and increasing your company's reputation.”
Client Name

A Title to Turn the Visitor Into a Lead

Use this short paragraph to explain how you will deliver this benefit to the visitor if they decide to work with you.
Learn more
  • 123-456-7890
  • 123 Main Street, New York, NY 10001
  • Mon-Fri 9:00AM - 5:00PM
Facebook-f Twitter

© 2026 All Rights Reserved.

Digital Tower

Studio — Identité Visuelle & Sites No-Code (Maquette) :root{ --bg0:#050A14; /* bleu nuit */ --bg1:#07132B; /* bleu marine */ --line:rgba(120,170,255,.18); --line2:rgba(120,170,255,.10); --text:rgba(235,245,255,.92); --muted:rgba(235,245,255,.68); --accent:#67B8FF; /* bleu clair */ --accent2:#A9D7FF; --card:rgba(255,255,255,.03); --card2:rgba(255,255,255,.06); --shadow: 0 20px 60px rgba(0,0,0,.45); --radius:18px; } *{box-sizing:border-box} body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; color:var(--text); background: radial-gradient(1200px 700px at 20% 10%, #0B2B64 0%, transparent 60%), radial-gradient(1200px 700px at 80% 20%, #0B1E3B 0%, transparent 60%), linear-gradient(180deg, var(--bg1), var(--bg0)); min-height:100vh; overflow-x:hidden; } /* === BACKGROUND ANIM (wireframe ambiance aeronautique) === */ .sky{ position:fixed; inset:0; pointer-events:none; opacity:.95; z-index:-1; } .grid{ position:absolute; inset:-40px; background-image: linear-gradient(to right, var(--line2) 1px, transparent 1px), linear-gradient(to bottom, var(--line2) 1px, transparent 1px); background-size: 64px 64px; transform: perspective(900px) rotateX(62deg) translateY(120px); transform-origin: top; filter: blur(.2px); opacity:.6; animation: drift 12s linear infinite; } @keyframes drift{ 0%{background-position:0 0} 100%{background-position:0 320px} } /* Radar ring + sweep */ .radar{ position:absolute; width:680px; height:680px; left:50%; top: -60px; transform: translateX(-50%); border-radius:50%; background: radial-gradient(circle at center, rgba(103,184,255,.20) 0 2px, transparent 2px 100%), radial-gradient(circle at center, rgba(103,184,255,.14), transparent 55%), repeating-radial-gradient(circle at center, rgba(103,184,255,.14) 0 1px, transparent 1px 52px); mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 0 58%, rgba(0,0,0,.0) 72%); opacity:.55; filter: drop-shadow(0 0 18px rgba(103,184,255,.18)); } .sweep{ position:absolute; width:680px; height:680px; left:50%; top:-60px; transform: translateX(-50%); border-radius:50%; background: conic-gradient(from 0deg, rgba(103,184,255,.0) 0 330deg, rgba(103,184,255,.35) 342deg, rgba(103,184,255,.0) 360deg); mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 0 58%, rgba(0,0,0,.0) 72%); opacity:.55; animation: rotate 6s linear infinite; filter: drop-shadow(0 0 24px rgba(103,184,255,.25)); } @keyframes rotate{ to { transform: translateX(-50%) rotate(360deg); } } /* Floating blips (traffic points) */ .blips{ position:absolute; inset:0; opacity:.85; } .blip{ position:absolute; width:6px; height:6px; border-radius:50%; background: var(--accent); box-shadow: 0 0 14px rgba(103,184,255,.55); animation: pulse 2.2s ease-in-out infinite; } @keyframes pulse{ 0%,100%{ transform: scale(1); opacity:.75} 50%{ transform: scale(1.8); opacity:1} } .trail{ position:absolute; height:1px; background: linear-gradient(90deg, rgba(103,184,255,.0), rgba(103,184,255,.35), rgba(103,184,255,.0)); opacity:.55; animation: trail 4.5s linear infinite; } @keyframes trail{ 0%{ transform: translateX(-120px); opacity:.0} 15%{opacity:.65} 100%{ transform: translateX(120px); opacity:.0} } /* === LAYOUT === */ .container{ width:min(1120px, 92vw); margin:0 auto; } header{ position:sticky; top:0; backdrop-filter: blur(10px); background: linear-gradient(180deg, rgba(5,10,20,.75), rgba(5,10,20,.35)); border-bottom:1px solid rgba(120,170,255,.10); z-index:10; } .nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:16px; } .brand{ display:flex; align-items:center; gap:10px; letter-spacing:.4px; font-weight:700; } .logo{ width:34px; height:34px; border-radius:10px; background: radial-gradient(circle at 30% 30%, rgba(103,184,255,.35), transparent 55%), linear-gradient(135deg, rgba(103,184,255,.22), rgba(255,255,255,.02)); border:1px solid rgba(120,170,255,.18); box-shadow: 0 10px 22px rgba(0,0,0,.35); position:relative; overflow:hidden; } .logo:before{ content:""; position:absolute; inset:-40%; background: conic-gradient(from 90deg, rgba(103,184,255,.0), rgba(103,184,255,.35), rgba(103,184,255,.0)); animation: rotate 7s linear infinite; opacity:.8; } .nav a{ color:var(--muted); text-decoration:none; font-size:14px; } .navlinks{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; justify-content:flex-end; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:10px 14px; border-radius:999px; border:1px solid rgba(120,170,255,.20); background: rgba(255,255,255,.03); color:var(--text); text-decoration:none; font-weight:600; box-shadow: 0 10px 28px rgba(0,0,0,.30); } .btn.primary{ background: linear-gradient(135deg, rgba(103,184,255,.22), rgba(103,184,255,.06)); border-color: rgba(103,184,255,.35); } .btn:hover{ transform: translateY(-1px); } /* HERO */ .hero{ padding: 68px 0 18px; position:relative; } .hero-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap:24px; align-items:start; } h1{ margin:0 0 10px; font-size: clamp(28px, 3.6vw, 44px); line-height:1.05; letter-spacing:-.6px; } .lead{ margin:0 0 18px; color:var(--muted); font-size: 16px; line-height:1.6; max-width: 60ch; } .hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; } .tagrow{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; } .tag{ font-size:12px; padding:7px 10px; border-radius:999px; border:1px dashed rgba(120,170,255,.25); color:var(--muted); background: rgba(255,255,255,.02); } /* Right wireframe card */ .panel{ border-radius: var(--radius); border:1px solid rgba(120,170,255,.14); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); box-shadow: var(--shadow); overflow:hidden; } .panel-head{ padding:14px 16px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(120,170,255,.10); } .pill{ font-size:12px; color:var(--muted); border:1px solid rgba(120,170,255,.18); background: rgba(255,255,255,.03); padding:6px 10px; border-radius:999px; } .panel-body{ padding:16px; } .wf{ display:grid; gap:10px; } .wf .bar{ height:10px; border-radius:8px; background: rgba(255,255,255,.06); border:1px solid rgba(120,170,255,.10); } .wf .bar.short{ width:65%} .wf .bar.med{ width:85%} .wf .bar.long{ width:100%} .wf .box{ height:84px; border-radius:14px; background: rgba(255,255,255,.03); border:1px dashed rgba(120,170,255,.22); position:relative; overflow:hidden; } .wf .box:before{ content:""; position:absolute; inset:0; background-image: linear-gradient(to right, rgba(120,170,255,.08) 1px, transparent 1px), linear-gradient(to bottom, rgba(120,170,255,.08) 1px, transparent 1px); background-size: 22px 22px; opacity:.55; } .mini{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
TON STUDIO — identité & no-code
Services Méthode Packs FAQ Demander un devis

Une identité visuelle claire.
Un site no-code qui décolle.

J’accompagne les PME, e-commerce et artisans à construire une présence en ligne cohérente : logo, charte graphique, puis site vitrine, réservation ou vente en no-code — avec une approche accessible, transparente et proche de vos besoins.

📩 Réserver un appel découverte Voir les services
✅ Sans jargon ✅ Délais & étapes clairs ✅ No-code (vitrine / booking / vente) ✅ Brand + site cohérents
Maquette (wireframe) Accueil animé • Bleu nuit

Objectif : visualiser les sections & le contenu. Pas un design final.

// Create deterministic-ish blips (traffic points) so it's not empty. // No external libs needed. (function(){ const blips = document.getElementById('blips'); if(!blips) return; const W = window.innerWidth; const H = window.innerHeight; function addBlip(x,y,delay,scale){ const b = document.createElement('div'); b.className = 'blip'; b.style.left = x + 'px'; b.style.top = y + 'px'; b.style.animationDelay = delay + 's'; b.style.transform = `scale(${scale})`; blips.appendChild(b); const t = document.createElement('div'); t.className = 'trail'; t.style.left = (x - 60) + 'px'; t.style.top = (y + 3) + 'px'; t.style.width = (80 + Math.random()*120) + 'px'; t.style.animationDelay = (delay + 0.3) + 's'; blips.appendChild(t); } // Place blips mainly in upper half for "airspace" const count = Math.max(10, Math.min(18, Math.floor(W/110))); for(let i=0;i<count;i++){ const x = Math.floor(Math.random() * (W*0.92)); const y = Math.floor(Math.random() * (H*0.45)); const delay = (Math.random()*2.8).toFixed(2); const scale = (0.8 + Math.random()*0.6).toFixed(2); addBlip(x,y,delay,scale); } })();