Spaces:
Running
Running
Fais moi un site minimaliste et moderne. Le site sera en fond blanc et en noir et bleu ciel. C'est un site pour une agence de communication. Les services de cette agence sont la création de sites internet, le gestion des réseaux sociaux, la gestion de la communication globale, la gestion de l'image visuelle des entreprises. Il me faut une page pour chaque service. Un menu en haut de page, le logo à gauche du menu et à droite du menu un Call to action pour réserver un appel.
Browse files- README.md +8 -5
- communication-globale.html +108 -0
- components/navbar.js +113 -0
- creation-sites.html +108 -0
- identite-visuelle.html +108 -0
- index.html +113 -19
- reseaux-sociaux.html +108 -0
- style.css +56 -18
README.md
CHANGED
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: PixelPulse Comms 🌐
|
| 3 |
+
colorFrom: blue
|
| 4 |
+
colorTo: red
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://huggingface.co/deepsite).
|
communication-globale.html
ADDED
|
@@ -0,0 +1,108 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="fr">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Communication Globale | PixelPulse</title>
|
| 7 |
+
<link rel="stylesheet" href="style.css">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 11 |
+
<script src="components/navbar.js"></script>
|
| 12 |
+
<script src="components/footer.js"></script>
|
| 13 |
+
</head>
|
| 14 |
+
<body class="bg-white min-h-screen flex flex-col">
|
| 15 |
+
<custom-navbar></custom-navbar>
|
| 16 |
+
|
| 17 |
+
<main class="flex-grow container mx-auto px-4 py-12">
|
| 18 |
+
<section class="max-w-4xl mx-auto">
|
| 19 |
+
<div class="mb-12">
|
| 20 |
+
<h1 class="text-4xl font-bold text-black mb-6">Communication <span class="text-fuchsia-500">360°</span></h1>
|
| 21 |
+
<p class="text-lg text-gray-700 mb-8">
|
| 22 |
+
Une stratégie de communication cohérente et impactante sur tous vos canaux de diffusion.
|
| 23 |
+
</p>
|
| 24 |
+
<div class="bg-sky-100 p-6 rounded-xl">
|
| 25 |
+
<h3 class="text-xl font-semibold mb-4 text-black">Les avantages d'une communication globale</h3>
|
| 26 |
+
<ul class="space-y-3">
|
| 27 |
+
<li class="flex items-start">
|
| 28 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-1"></i>
|
| 29 |
+
<span class="text-gray-700">Cohérence de votre message</span>
|
| 30 |
+
</li>
|
| 31 |
+
<li class="flex items-start">
|
| 32 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-1"></i>
|
| 33 |
+
<span class="text-gray-700">Optimisation de votre budget</span>
|
| 34 |
+
</li>
|
| 35 |
+
<li class="flex items-start">
|
| 36 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-1"></i>
|
| 37 |
+
<span class="text-gray-700">Renforcement de votre image</span>
|
| 38 |
+
</li>
|
| 39 |
+
<li class="flex items-start">
|
| 40 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-1"></i>
|
| 41 |
+
<span class="text-gray-700">Adaptation à chaque cible</span>
|
| 42 |
+
</li>
|
| 43 |
+
</ul>
|
| 44 |
+
</div>
|
| 45 |
+
</div>
|
| 46 |
+
|
| 47 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
|
| 48 |
+
<div class="bg-white p-6 rounded-xl border border-gray-200">
|
| 49 |
+
<div class="bg-sky-500 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
|
| 50 |
+
<i data-feather="target" class="text-white w-6 h-6"></i>
|
| 51 |
+
</div>
|
| 52 |
+
<h3 class="text-xl font-semibold mb-3 text-black">Stratégie</h3>
|
| 53 |
+
<p class="text-gray-700 mb-4">Définition d'un plan de communication adapté à vos objectifs.</p>
|
| 54 |
+
<ul class="space-y-2 text-sm text-gray-600">
|
| 55 |
+
<li class="flex items-start">
|
| 56 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-0.5 w-4 h-4"></i>
|
| 57 |
+
<span>Analyse de votre écosystème</span>
|
| 58 |
+
</li>
|
| 59 |
+
<li class="flex items-start">
|
| 60 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-0.5 w-4 h-4"></i>
|
| 61 |
+
<span>Définition des objectifs</span>
|
| 62 |
+
</li>
|
| 63 |
+
<li class="flex items-start">
|
| 64 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-0.5 w-4 h-4"></i>
|
| 65 |
+
<span>Plan d'action détaillé</span>
|
| 66 |
+
</li>
|
| 67 |
+
</ul>
|
| 68 |
+
</div>
|
| 69 |
+
|
| 70 |
+
<div class="bg-white p-6 rounded-xl border border-gray-200">
|
| 71 |
+
<div class="bg-fuchsia-500 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
|
| 72 |
+
<i data-feather="trending-up" class="text-white w-6 h-6"></i>
|
| 73 |
+
</div>
|
| 74 |
+
<h3 class="text-xl font-semibold mb-3 text-black">Mise en œuvre</h3>
|
| 75 |
+
<p class="text-gray-700 mb-4">Exécution et suivi de votre stratégie sur tous les canaux.</p>
|
| 76 |
+
<ul class="space-y-2 text-sm text-gray-600">
|
| 77 |
+
<li class="flex items-start">
|
| 78 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-0.5 w-4 h-4"></i>
|
| 79 |
+
<span>Création des contenus</span>
|
| 80 |
+
</li>
|
| 81 |
+
<li class="flex items-start">
|
| 82 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-0.5 w-4 h-4"></i>
|
| 83 |
+
<span>Diffusion multi-canaux</span>
|
| 84 |
+
</li>
|
| 85 |
+
<li class="flex items-start">
|
| 86 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-0.5 w-4 h-4"></i>
|
| 87 |
+
<span>Analyse des performances</span>
|
| 88 |
+
</li>
|
| 89 |
+
</ul>
|
| 90 |
+
</div>
|
| 91 |
+
</div>
|
| 92 |
+
|
| 93 |
+
<div class="text-center">
|
| 94 |
+
<a href="#contact" class="bg-fuchsia-500 hover:bg-fuchsia-600 text-white font-medium py-3 px-8 rounded-full transition-all duration-300 inline-flex items-center">
|
| 95 |
+
Planifier ma stratégie
|
| 96 |
+
<i data-feather="arrow-right" class="ml-2 w-5 h-5"></i>
|
| 97 |
+
</a>
|
| 98 |
+
</div>
|
| 99 |
+
</section>
|
| 100 |
+
</main>
|
| 101 |
+
|
| 102 |
+
<custom-footer></custom-footer>
|
| 103 |
+
|
| 104 |
+
<script>
|
| 105 |
+
feather.replace();
|
| 106 |
+
</script>
|
| 107 |
+
</body>
|
| 108 |
+
</html>
|
components/navbar.js
ADDED
|
@@ -0,0 +1,113 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
class CustomNavbar extends HTMLElement {
|
| 2 |
+
connectedCallback() {
|
| 3 |
+
this.attachShadow({ mode: 'open' });
|
| 4 |
+
this.shadowRoot.innerHTML = `
|
| 5 |
+
<style>
|
| 6 |
+
:host {
|
| 7 |
+
display: block;
|
| 8 |
+
width: 100%;
|
| 9 |
+
position: sticky;
|
| 10 |
+
top: 0;
|
| 11 |
+
z-index: 50;
|
| 12 |
+
background-color: white;
|
| 13 |
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
| 14 |
+
}
|
| 15 |
+
|
| 16 |
+
.nav-container {
|
| 17 |
+
display: flex;
|
| 18 |
+
justify-content: space-between;
|
| 19 |
+
align-items: center;
|
| 20 |
+
max-width: 1280px;
|
| 21 |
+
margin: 0 auto;
|
| 22 |
+
padding: 1rem 2rem;
|
| 23 |
+
}
|
| 24 |
+
|
| 25 |
+
.logo {
|
| 26 |
+
font-weight: 700;
|
| 27 |
+
font-size: 1.5rem;
|
| 28 |
+
color: #111827;
|
| 29 |
+
display: flex;
|
| 30 |
+
align-items: center;
|
| 31 |
+
}
|
| 32 |
+
|
| 33 |
+
.logo span {
|
| 34 |
+
color: #d946ef;
|
| 35 |
+
}
|
| 36 |
+
|
| 37 |
+
.nav-links {
|
| 38 |
+
display: none;
|
| 39 |
+
}
|
| 40 |
+
|
| 41 |
+
.nav-cta {
|
| 42 |
+
display: none;
|
| 43 |
+
}
|
| 44 |
+
|
| 45 |
+
.mobile-menu-btn {
|
| 46 |
+
display: block;
|
| 47 |
+
background: none;
|
| 48 |
+
border: none;
|
| 49 |
+
cursor: pointer;
|
| 50 |
+
color: #111827;
|
| 51 |
+
}
|
| 52 |
+
|
| 53 |
+
.mobile-menu {
|
| 54 |
+
position: absolute;
|
| 55 |
+
top: 100%;
|
| 56 |
+
left: 0;
|
| 57 |
+
right: 0;
|
| 58 |
+
background-color: white;
|
| 59 |
+
padding: 1rem;
|
| 60 |
+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
| 61 |
+
display: none;
|
| 62 |
+
flex-direction: column;
|
| 63 |
+
gap: 0.5rem;
|
| 64 |
+
}
|
| 65 |
+
|
| 66 |
+
.mobile-menu.open {
|
| 67 |
+
display: flex;
|
| 68 |
+
}
|
| 69 |
+
|
| 70 |
+
.mobile-menu a {
|
| 71 |
+
padding: 0.5rem 1rem;
|
| 72 |
+
color: #374151;
|
| 73 |
+
border-radius: 0.375rem;
|
| 74 |
+
transition: all 0.2s;
|
| 75 |
+
}
|
| 76 |
+
|
| 77 |
+
.mobile-menu a:hover {
|
| 78 |
+
background-color: #f3f4f6;
|
| 79 |
+
color: #d946ef;
|
| 80 |
+
}
|
| 81 |
+
|
| 82 |
+
@media (min-width: 768px) {
|
| 83 |
+
.mobile-menu-btn {
|
| 84 |
+
display: none;
|
| 85 |
+
}
|
| 86 |
+
|
| 87 |
+
.nav-links, .nav-cta {
|
| 88 |
+
display: flex;
|
| 89 |
+
}
|
| 90 |
+
|
| 91 |
+
.nav-links {
|
| 92 |
+
gap: 1.5rem;
|
| 93 |
+
}
|
| 94 |
+
|
| 95 |
+
.nav-links a {
|
| 96 |
+
color: #374151;
|
| 97 |
+
font-weight: 500;
|
| 98 |
+
transition: color 0.2s;
|
| 99 |
+
}
|
| 100 |
+
|
| 101 |
+
.nav-links a:hover {
|
| 102 |
+
color: #d946ef;
|
| 103 |
+
}
|
| 104 |
+
|
| 105 |
+
.nav-cta a {
|
| 106 |
+
background-color: #d946ef;
|
| 107 |
+
color: white;
|
| 108 |
+
font-weight: 500;
|
| 109 |
+
padding: 0.5rem 1.5rem;
|
| 110 |
+
border-radius: 9999px;
|
| 111 |
+
transition: background-color 0.2s;
|
| 112 |
+
margin-left: 1.5rem;
|
| 113 |
+
}
|
creation-sites.html
ADDED
|
@@ -0,0 +1,108 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="fr">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Création de Sites | PixelPulse</title>
|
| 7 |
+
<link rel="stylesheet" href="style.css">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 11 |
+
<script src="components/navbar.js"></script>
|
| 12 |
+
<script src="components/footer.js"></script>
|
| 13 |
+
</head>
|
| 14 |
+
<body class="bg-white min-h-screen flex flex-col">
|
| 15 |
+
<custom-navbar></custom-navbar>
|
| 16 |
+
|
| 17 |
+
<main class="flex-grow container mx-auto px-4 py-12">
|
| 18 |
+
<section class="max-w-4xl mx-auto">
|
| 19 |
+
<div class="mb-12">
|
| 20 |
+
<h1 class="text-4xl font-bold text-black mb-6">Création de sites <span class="text-fuchsia-500">web</span></h1>
|
| 21 |
+
<p class="text-lg text-gray-700 mb-8">
|
| 22 |
+
Nous concevons des sites web performants, esthétiques et optimisés pour convertir vos visiteurs en clients.
|
| 23 |
+
</p>
|
| 24 |
+
<div class="bg-sky-100 p-6 rounded-xl">
|
| 25 |
+
<h3 class="text-xl font-semibold mb-4 text-black">Pourquoi investir dans un site web professionnel ?</h3>
|
| 26 |
+
<ul class="space-y-3">
|
| 27 |
+
<li class="flex items-start">
|
| 28 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-1"></i>
|
| 29 |
+
<span class="text-gray-700">Votre vitrine digitale ouverte 24h/24</span>
|
| 30 |
+
</li>
|
| 31 |
+
<li class="flex items-start">
|
| 32 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-1"></i>
|
| 33 |
+
<span class="text-gray-700">Augmentation de votre crédibilité</span>
|
| 34 |
+
</li>
|
| 35 |
+
<li class="flex items-start">
|
| 36 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-1"></i>
|
| 37 |
+
<span class="text-gray-700">Génération de leads qualifiés</span>
|
| 38 |
+
</li>
|
| 39 |
+
<li class="flex items-start">
|
| 40 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-1"></i>
|
| 41 |
+
<span class="text-gray-700">Optimisation pour le référencement</span>
|
| 42 |
+
</li>
|
| 43 |
+
</ul>
|
| 44 |
+
</div>
|
| 45 |
+
</div>
|
| 46 |
+
|
| 47 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
|
| 48 |
+
<div class="bg-white p-6 rounded-xl border border-gray-200">
|
| 49 |
+
<div class="bg-sky-500 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
|
| 50 |
+
<i data-feather="monitor" class="text-white w-6 h-6"></i>
|
| 51 |
+
</div>
|
| 52 |
+
<h3 class="text-xl font-semibold mb-3 text-black">Site vitrine</h3>
|
| 53 |
+
<p class="text-gray-700 mb-4">Présentez votre activité de manière professionnelle avec un design sur-mesure.</p>
|
| 54 |
+
<ul class="space-y-2 text-sm text-gray-600">
|
| 55 |
+
<li class="flex items-start">
|
| 56 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-0.5 w-4 h-4"></i>
|
| 57 |
+
<span>Design responsive</span>
|
| 58 |
+
</li>
|
| 59 |
+
<li class="flex items-start">
|
| 60 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-0.5 w-4 h-4"></i>
|
| 61 |
+
<span>1 à 5 pages</span>
|
| 62 |
+
</li>
|
| 63 |
+
<li class="flex items-start">
|
| 64 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-0.5 w-4 h-4"></i>
|
| 65 |
+
<span>Optimisation SEO</span>
|
| 66 |
+
</li>
|
| 67 |
+
</ul>
|
| 68 |
+
</div>
|
| 69 |
+
|
| 70 |
+
<div class="bg-white p-6 rounded-xl border border-gray-200">
|
| 71 |
+
<div class="bg-fuchsia-500 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
|
| 72 |
+
<i data-feather="shopping-cart" class="text-white w-6 h-6"></i>
|
| 73 |
+
</div>
|
| 74 |
+
<h3 class="text-xl font-semibold mb-3 text-black">Boutique en ligne</h3>
|
| 75 |
+
<p class="text-gray-700 mb-4">Vendez vos produits en ligne avec une expérience utilisateur optimisée.</p>
|
| 76 |
+
<ul class="space-y-2 text-sm text-gray-600">
|
| 77 |
+
<li class="flex items-start">
|
| 78 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-0.5 w-4 h-4"></i>
|
| 79 |
+
<span>Paiement sécurisé</span>
|
| 80 |
+
</li>
|
| 81 |
+
<li class="flex items-start">
|
| 82 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-0.5 w-4 h-4"></i>
|
| 83 |
+
<span>Gestion des stocks</span>
|
| 84 |
+
</li>
|
| 85 |
+
<li class="flex items-start">
|
| 86 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-0.5 w-4 h-4"></i>
|
| 87 |
+
<span>Backoffice administrable</span>
|
| 88 |
+
</li>
|
| 89 |
+
</ul>
|
| 90 |
+
</div>
|
| 91 |
+
</div>
|
| 92 |
+
|
| 93 |
+
<div class="text-center">
|
| 94 |
+
<a href="#contact" class="bg-fuchsia-500 hover:bg-fuchsia-600 text-white font-medium py-3 px-8 rounded-full transition-all duration-300 inline-flex items-center">
|
| 95 |
+
Discuter de mon projet
|
| 96 |
+
<i data-feather="arrow-right" class="ml-2 w-5 h-5"></i>
|
| 97 |
+
</a>
|
| 98 |
+
</div>
|
| 99 |
+
</section>
|
| 100 |
+
</main>
|
| 101 |
+
|
| 102 |
+
<custom-footer></custom-footer>
|
| 103 |
+
|
| 104 |
+
<script>
|
| 105 |
+
feather.replace();
|
| 106 |
+
</script>
|
| 107 |
+
</body>
|
| 108 |
+
</html>
|
identite-visuelle.html
ADDED
|
@@ -0,0 +1,108 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="fr">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Identité Visuelle | PixelPulse</title>
|
| 7 |
+
<link rel="stylesheet" href="style.css">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 11 |
+
<script src="components/navbar.js"></script>
|
| 12 |
+
<script src="components/footer.js"></script>
|
| 13 |
+
</head>
|
| 14 |
+
<body class="bg-white min-h-screen flex flex-col">
|
| 15 |
+
<custom-navbar></custom-navbar>
|
| 16 |
+
|
| 17 |
+
<main class="flex-grow container mx-auto px-4 py-12">
|
| 18 |
+
<section class="max-w-4xl mx-auto">
|
| 19 |
+
<div class="mb-12">
|
| 20 |
+
<h1 class="text-4xl font-bold text-black mb-6">Identité <span class="text-sky-500">visuelle</span></h1>
|
| 21 |
+
<p class="text-lg text-gray-700 mb-8">
|
| 22 |
+
Nous concevons une identité visuelle forte et cohérente qui véhicule les valeurs de votre marque.
|
| 23 |
+
</p>
|
| 24 |
+
<div class="bg-sky-100 p-6 rounded-xl">
|
| 25 |
+
<h3 class="text-xl font-semibold mb-4 text-black">Pourquoi une identité visuelle impactante ?</h3>
|
| 26 |
+
<ul class="space-y-3">
|
| 27 |
+
<li class="flex items-start">
|
| 28 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-1"></i>
|
| 29 |
+
<span class="text-gray-700">Reconnaissance instantanée</span>
|
| 30 |
+
</li>
|
| 31 |
+
<li class="flex items-start">
|
| 32 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-1"></i>
|
| 33 |
+
<span class="text-gray-700">Différenciation de la concurrence</span>
|
| 34 |
+
</li>
|
| 35 |
+
<li class="flex items-start">
|
| 36 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-1"></i>
|
| 37 |
+
<span class="text-gray-700">Cohérence sur tous vos supports</span>
|
| 38 |
+
</li>
|
| 39 |
+
<li class="flex items-start">
|
| 40 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-1"></i>
|
| 41 |
+
<span class="text-gray-700">Transmission de vos valeurs</span>
|
| 42 |
+
</li>
|
| 43 |
+
</ul>
|
| 44 |
+
</div>
|
| 45 |
+
</div>
|
| 46 |
+
|
| 47 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
|
| 48 |
+
<div class="bg-white p-6 rounded-xl border border-gray-200">
|
| 49 |
+
<div class="bg-fuchsia-500 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
|
| 50 |
+
<i data-feather="pen-tool" class="text-white w-6 h-6"></i>
|
| 51 |
+
</div>
|
| 52 |
+
<h3 class="text-xl font-semibold mb-3 text-black">Logo & charte graphique</h3>
|
| 53 |
+
<p class="text-gray-700 mb-4">Création ou refonte de votre logo et définition d'une charte graphique complète.</p>
|
| 54 |
+
<ul class="space-y-2 text-sm text-gray-600">
|
| 55 |
+
<li class="flex items-start">
|
| 56 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-0.5 w-4 h-4"></i>
|
| 57 |
+
<span>Création de plusieurs propositions</span>
|
| 58 |
+
</li>
|
| 59 |
+
<li class="flex items-start">
|
| 60 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-0.5 w-4 h-4"></i>
|
| 61 |
+
<span>Définition des couleurs et typographies</span>
|
| 62 |
+
</li>
|
| 63 |
+
<li class="flex items-start">
|
| 64 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-0.5 w-4 h-4"></i>
|
| 65 |
+
<span>Guide d'utilisation complet</span>
|
| 66 |
+
</li>
|
| 67 |
+
</ul>
|
| 68 |
+
</div>
|
| 69 |
+
|
| 70 |
+
<div class="bg-white p-6 rounded-xl border border-gray-200">
|
| 71 |
+
<div class="bg-sky-500 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
|
| 72 |
+
<i data-feather="box" class="text-white w-6 h-6"></i>
|
| 73 |
+
</div>
|
| 74 |
+
<h3 class="text-xl font-semibold mb-3 text-black">Supports print & digital</h3>
|
| 75 |
+
<p class="text-gray-700 mb-4">Application de votre identité sur tous vos supports de communication.</p>
|
| 76 |
+
<ul class="space-y-2 text-sm text-gray-600">
|
| 77 |
+
<li class="flex items-start">
|
| 78 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-0.5 w-4 h-4"></i>
|
| 79 |
+
<span>Cartes de visite et papeterie</span>
|
| 80 |
+
</li>
|
| 81 |
+
<li class="flex items-start">
|
| 82 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-0.5 w-4 h-4"></i>
|
| 83 |
+
<span>Présentations et documents</span>
|
| 84 |
+
</li>
|
| 85 |
+
<li class="flex items-start">
|
| 86 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-0.5 w-4 h-4"></i>
|
| 87 |
+
<span>Bannières et réseaux sociaux</span>
|
| 88 |
+
</li>
|
| 89 |
+
</ul>
|
| 90 |
+
</div>
|
| 91 |
+
</div>
|
| 92 |
+
|
| 93 |
+
<div class="text-center">
|
| 94 |
+
<a href="#contact" class="bg-fuchsia-500 hover:bg-fuchsia-600 text-white font-medium py-3 px-8 rounded-full transition-all duration-300 inline-flex items-center">
|
| 95 |
+
Créer mon identité
|
| 96 |
+
<i data-feather="arrow-right" class="ml-2 w-5 h-5"></i>
|
| 97 |
+
</a>
|
| 98 |
+
</div>
|
| 99 |
+
</section>
|
| 100 |
+
</main>
|
| 101 |
+
|
| 102 |
+
<custom-footer></custom-footer>
|
| 103 |
+
|
| 104 |
+
<script>
|
| 105 |
+
feather.replace();
|
| 106 |
+
</script>
|
| 107 |
+
</body>
|
| 108 |
+
</html>
|
index.html
CHANGED
|
@@ -1,19 +1,113 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="fr">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>PixelPulse | Agence de Communication Moderne</title>
|
| 7 |
+
<link rel="stylesheet" href="style.css">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 11 |
+
<script src="components/navbar.js"></script>
|
| 12 |
+
<script src="components/footer.js"></script>
|
| 13 |
+
<script src="components/service-card.js"></script>
|
| 14 |
+
<script>
|
| 15 |
+
tailwind.config = {
|
| 16 |
+
theme: {
|
| 17 |
+
extend: {
|
| 18 |
+
colors: {
|
| 19 |
+
sky: {
|
| 20 |
+
100: '#e0f2fe',
|
| 21 |
+
500: '#0ea5e9',
|
| 22 |
+
},
|
| 23 |
+
fuchsia: {
|
| 24 |
+
500: '#d946ef',
|
| 25 |
+
}
|
| 26 |
+
}
|
| 27 |
+
}
|
| 28 |
+
}
|
| 29 |
+
}
|
| 30 |
+
</script>
|
| 31 |
+
</head>
|
| 32 |
+
<body class="bg-white min-h-screen flex flex-col">
|
| 33 |
+
<custom-navbar></custom-navbar>
|
| 34 |
+
|
| 35 |
+
<main class="flex-grow container mx-auto px-4 py-12">
|
| 36 |
+
<section class="max-w-4xl mx-auto text-center mb-16">
|
| 37 |
+
<h1 class="text-4xl md:text-5xl font-bold text-black mb-6">Communication qui <span class="text-fuchsia-500">pulse</span></h1>
|
| 38 |
+
<p class="text-lg text-gray-700 mb-8 max-w-2xl mx-auto">
|
| 39 |
+
Nous créons des stratégies digitales sur-mesure pour propulser votre marque vers de nouveaux horizons.
|
| 40 |
+
</p>
|
| 41 |
+
<a href="#contact" class="bg-fuchsia-500 hover:bg-fuchsia-600 text-white font-medium py-3 px-8 rounded-full transition-all duration-300 inline-flex items-center">
|
| 42 |
+
Discutons de votre projet
|
| 43 |
+
<i data-feather="arrow-right" class="ml-2 w-5 h-5"></i>
|
| 44 |
+
</a>
|
| 45 |
+
</section>
|
| 46 |
+
|
| 47 |
+
<section class="py-12">
|
| 48 |
+
<h2 class="text-3xl font-bold text-center mb-12 text-black">Nos <span class="text-sky-500">services</span></h2>
|
| 49 |
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
| 50 |
+
<custom-service-card
|
| 51 |
+
icon="globe"
|
| 52 |
+
title="Création de sites"
|
| 53 |
+
description="Sites vitrine et e-commerce sur-mesure, optimisés pour le référencement et les conversions."
|
| 54 |
+
link="creation-sites.html"
|
| 55 |
+
></custom-service-card>
|
| 56 |
+
|
| 57 |
+
<custom-service-card
|
| 58 |
+
icon="users"
|
| 59 |
+
title="Réseaux sociaux"
|
| 60 |
+
description="Stratégie, création de contenu et gestion complète de vos réseaux sociaux."
|
| 61 |
+
link="reseaux-sociaux.html"
|
| 62 |
+
></custom-service-card>
|
| 63 |
+
|
| 64 |
+
<custom-service-card
|
| 65 |
+
icon="message-square"
|
| 66 |
+
title="Communication globale"
|
| 67 |
+
description="Stratégie de communication 360° pour une image de marque cohérente."
|
| 68 |
+
link="communication-globale.html"
|
| 69 |
+
></custom-service-card>
|
| 70 |
+
|
| 71 |
+
<custom-service-card
|
| 72 |
+
icon="image"
|
| 73 |
+
title="Identité visuelle"
|
| 74 |
+
description="Création ou refonte de votre identité visuelle pour une marque mémorable."
|
| 75 |
+
link="identite-visuelle.html"
|
| 76 |
+
></custom-service-card>
|
| 77 |
+
</div>
|
| 78 |
+
</section>
|
| 79 |
+
|
| 80 |
+
<section id="contact" class="py-12 bg-sky-100 rounded-2xl px-6 my-12">
|
| 81 |
+
<div class="max-w-4xl mx-auto">
|
| 82 |
+
<h2 class="text-3xl font-bold text-center mb-8 text-black">Prêt à <span class="text-fuchsia-500">transformer</span> votre communication ?</h2>
|
| 83 |
+
<form class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
| 84 |
+
<div>
|
| 85 |
+
<label for="name" class="block mb-2 text-sm font-medium text-gray-700">Nom complet</label>
|
| 86 |
+
<input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-fuchsia-500 focus:border-transparent">
|
| 87 |
+
</div>
|
| 88 |
+
<div>
|
| 89 |
+
<label for="email" class="block mb-2 text-sm font-medium text-gray-700">Email</label>
|
| 90 |
+
<input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-fuchsia-500 focus:border-transparent">
|
| 91 |
+
</div>
|
| 92 |
+
<div class="md:col-span-2">
|
| 93 |
+
<label for="message" class="block mb-2 text-sm font-medium text-gray-700">Votre projet</label>
|
| 94 |
+
<textarea id="message" rows="4" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-fuchsia-500 focus:border-transparent"></textarea>
|
| 95 |
+
</div>
|
| 96 |
+
<div class="md:col-span-2 text-center">
|
| 97 |
+
<button type="submit" class="bg-fuchsia-500 hover:bg-fuchsia-600 text-white font-medium py-3 px-8 rounded-full transition-all duration-300">
|
| 98 |
+
Envoyer le message
|
| 99 |
+
</button>
|
| 100 |
+
</div>
|
| 101 |
+
</form>
|
| 102 |
+
</div>
|
| 103 |
+
</section>
|
| 104 |
+
</main>
|
| 105 |
+
|
| 106 |
+
<custom-footer></custom-footer>
|
| 107 |
+
|
| 108 |
+
<script>
|
| 109 |
+
feather.replace();
|
| 110 |
+
</script>
|
| 111 |
+
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
|
| 112 |
+
</body>
|
| 113 |
+
</html>
|
reseaux-sociaux.html
ADDED
|
@@ -0,0 +1,108 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="fr">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Réseaux Sociaux | PixelPulse</title>
|
| 7 |
+
<link rel="stylesheet" href="style.css">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 11 |
+
<script src="components/navbar.js"></script>
|
| 12 |
+
<script src="components/footer.js"></script>
|
| 13 |
+
</head>
|
| 14 |
+
<body class="bg-white min-h-screen flex flex-col">
|
| 15 |
+
<custom-navbar></custom-navbar>
|
| 16 |
+
|
| 17 |
+
<main class="flex-grow container mx-auto px-4 py-12">
|
| 18 |
+
<section class="max-w-4xl mx-auto">
|
| 19 |
+
<div class="mb-12">
|
| 20 |
+
<h1 class="text-4xl font-bold text-black mb-6">Gestion des <span class="text-sky-500">réseaux sociaux</span></h1>
|
| 21 |
+
<p class="text-lg text-gray-700 mb-8">
|
| 22 |
+
Nous développons votre présence sur les réseaux sociaux avec une stratégie sur-mesure pour engager votre audience.
|
| 23 |
+
</p>
|
| 24 |
+
<div class="bg-sky-100 p-6 rounded-xl">
|
| 25 |
+
<h3 class="text-xl font-semibold mb-4 text-black">Pourquoi être présent sur les réseaux sociaux ?</h3>
|
| 26 |
+
<ul class="space-y-3">
|
| 27 |
+
<li class="flex items-start">
|
| 28 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-1"></i>
|
| 29 |
+
<span class="text-gray-700">Augmentez votre visibilité</span>
|
| 30 |
+
</li>
|
| 31 |
+
<li class="flex items-start">
|
| 32 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-1"></i>
|
| 33 |
+
<span class="text-gray-700">Créez une communauté engagée</span>
|
| 34 |
+
</li>
|
| 35 |
+
<li class="flex items-start">
|
| 36 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-1"></i>
|
| 37 |
+
<span class="text-gray-700">Générez du trafic vers votre site</span>
|
| 38 |
+
</li>
|
| 39 |
+
<li class="flex items-start">
|
| 40 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-1"></i>
|
| 41 |
+
<span class="text-gray-700">Humanisez votre marque</span>
|
| 42 |
+
</li>
|
| 43 |
+
</ul>
|
| 44 |
+
</div>
|
| 45 |
+
</div>
|
| 46 |
+
|
| 47 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
|
| 48 |
+
<div class="bg-white p-6 rounded-xl border border-gray-200">
|
| 49 |
+
<div class="bg-fuchsia-500 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
|
| 50 |
+
<i data-feather="layers" class="text-white w-6 h-6"></i>
|
| 51 |
+
</div>
|
| 52 |
+
<h3 class="text-xl font-semibold mb-3 text-black">Stratégie de contenu</h3>
|
| 53 |
+
<p class="text-gray-700 mb-4">Un calendrier éditorial adapté à votre audience et à vos objectifs.</p>
|
| 54 |
+
<ul class="space-y-2 text-sm text-gray-600">
|
| 55 |
+
<li class="flex items-start">
|
| 56 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-0.5 w-4 h-4"></i>
|
| 57 |
+
<span>Analyse de votre audience</span>
|
| 58 |
+
</li>
|
| 59 |
+
<li class="flex items-start">
|
| 60 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-0.5 w-4 h-4"></i>
|
| 61 |
+
<span>Calendrier éditorial mensuel</span>
|
| 62 |
+
</li>
|
| 63 |
+
<li class="flex items-start">
|
| 64 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-0.5 w-4 h-4"></i>
|
| 65 |
+
<span>Thématiques adaptées</span>
|
| 66 |
+
</li>
|
| 67 |
+
</ul>
|
| 68 |
+
</div>
|
| 69 |
+
|
| 70 |
+
<div class="bg-white p-6 rounded-xl border border-gray-200">
|
| 71 |
+
<div class="bg-sky-500 w-12 h-12 rounded-lg flex items-center justify-center mb-4">
|
| 72 |
+
<i data-feather="camera" class="text-white w-6 h-6"></i>
|
| 73 |
+
</div>
|
| 74 |
+
<h3 class="text-xl font-semibold mb-3 text-black">Création visuelle</h3>
|
| 75 |
+
<p class="text-gray-700 mb-4">Des visuels impactants et cohérents avec votre identité de marque.</p>
|
| 76 |
+
<ul class="space-y-2 text-sm text-gray-600">
|
| 77 |
+
<li class="flex items-start">
|
| 78 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-0.5 w-4 h-4"></i>
|
| 79 |
+
<span>Posts statiques et stories</span>
|
| 80 |
+
</li>
|
| 81 |
+
<li class="flex items-start">
|
| 82 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-0.5 w-4 h-4"></i>
|
| 83 |
+
<span>Charte graphique respectée</span>
|
| 84 |
+
</li>
|
| 85 |
+
<li class="flex items-start">
|
| 86 |
+
<i data-feather="check" class="text-fuchsia-500 mr-2 mt-0.5 w-4 h-4"></i>
|
| 87 |
+
<span>Optimisation pour chaque réseau</span>
|
| 88 |
+
</li>
|
| 89 |
+
</ul>
|
| 90 |
+
</div>
|
| 91 |
+
</div>
|
| 92 |
+
|
| 93 |
+
<div class="text-center">
|
| 94 |
+
<a href="#contact" class="bg-fuchsia-500 hover:bg-fuchsia-600 text-white font-medium py-3 px-8 rounded-full transition-all duration-300 inline-flex items-center">
|
| 95 |
+
Booster mes réseaux
|
| 96 |
+
<i data-feather="arrow-right" class="ml-2 w-5 h-5"></i>
|
| 97 |
+
</a>
|
| 98 |
+
</div>
|
| 99 |
+
</section>
|
| 100 |
+
</main>
|
| 101 |
+
|
| 102 |
+
<custom-footer></custom-footer>
|
| 103 |
+
|
| 104 |
+
<script>
|
| 105 |
+
feather.replace();
|
| 106 |
+
</script>
|
| 107 |
+
</body>
|
| 108 |
+
</html>
|
style.css
CHANGED
|
@@ -1,28 +1,66 @@
|
|
|
|
|
|
|
|
| 1 |
body {
|
| 2 |
-
|
| 3 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 4 |
}
|
| 5 |
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
margin-top: 0;
|
| 9 |
}
|
| 10 |
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
font-size: 15px;
|
| 14 |
-
margin-bottom: 10px;
|
| 15 |
-
margin-top: 5px;
|
| 16 |
}
|
| 17 |
|
| 18 |
-
|
| 19 |
-
|
| 20 |
-
|
| 21 |
-
padding: 16px;
|
| 22 |
-
border: 1px solid lightgray;
|
| 23 |
-
border-radius: 16px;
|
| 24 |
}
|
| 25 |
|
| 26 |
-
.
|
| 27 |
-
|
| 28 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
| 2 |
+
|
| 3 |
body {
|
| 4 |
+
font-family: 'Inter', sans-serif;
|
| 5 |
+
color: #111827;
|
| 6 |
+
}
|
| 7 |
+
|
| 8 |
+
/* Smooth scroll behavior */
|
| 9 |
+
html {
|
| 10 |
+
scroll-behavior: smooth;
|
| 11 |
+
}
|
| 12 |
+
|
| 13 |
+
/* Custom animations */
|
| 14 |
+
@keyframes fadeIn {
|
| 15 |
+
from { opacity: 0; transform: translateY(20px); }
|
| 16 |
+
to { opacity: 1; transform: translateY(0); }
|
| 17 |
+
}
|
| 18 |
+
|
| 19 |
+
.animate-fade-in {
|
| 20 |
+
animation: fadeIn 0.6s ease-out forwards;
|
| 21 |
+
}
|
| 22 |
+
|
| 23 |
+
.delay-100 {
|
| 24 |
+
animation-delay: 0.1s;
|
| 25 |
}
|
| 26 |
|
| 27 |
+
.delay-200 {
|
| 28 |
+
animation-delay: 0.2s;
|
|
|
|
| 29 |
}
|
| 30 |
|
| 31 |
+
.delay-300 {
|
| 32 |
+
animation-delay: 0.3s;
|
|
|
|
|
|
|
|
|
|
| 33 |
}
|
| 34 |
|
| 35 |
+
/* Custom hover effects */
|
| 36 |
+
.hover-scale {
|
| 37 |
+
transition: transform 0.3s ease;
|
|
|
|
|
|
|
|
|
|
| 38 |
}
|
| 39 |
|
| 40 |
+
.hover-scale:hover {
|
| 41 |
+
transform: scale(1.02);
|
| 42 |
}
|
| 43 |
+
|
| 44 |
+
/* Custom focus styles */
|
| 45 |
+
input:focus, textarea:focus {
|
| 46 |
+
outline: none;
|
| 47 |
+
box-shadow: 0 0 0 3px rgba(217, 70, 239, 0.3);
|
| 48 |
+
}
|
| 49 |
+
|
| 50 |
+
/* Custom scrollbar */
|
| 51 |
+
::-webkit-scrollbar {
|
| 52 |
+
width: 8px;
|
| 53 |
+
}
|
| 54 |
+
|
| 55 |
+
::-webkit-scrollbar-track {
|
| 56 |
+
background: #f1f1f1;
|
| 57 |
+
}
|
| 58 |
+
|
| 59 |
+
::-webkit-scrollbar-thumb {
|
| 60 |
+
background: #d946ef;
|
| 61 |
+
border-radius: 4px;
|
| 62 |
+
}
|
| 63 |
+
|
| 64 |
+
::-webkit-scrollbar-thumb:hover {
|
| 65 |
+
background: #c026d3;
|
| 66 |
+
}
|