This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:
Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)
…or something like this:
The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.
As a new WordPress user, you should go to your dashboard to delete this page and create new pages for your content. Have fun!
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CYD-Solutions | Boulogne-sur-Mer</title>
<meta name="description" content="CYD-Solutions, entreprise basée à Boulogne-sur-Mer, vous accompagne avec des solutions professionnelles adaptées à vos besoins." />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background: #f5f7fb;
color: #1f2937;
line-height: 1.6;
}
header {
background: #0f172a;
color: white;
padding: 18px 30px;
position: sticky;
top: 0;
z-index: 10;
}
.container {
max-width: 1100px;
margin: auto;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
letter-spacing: 0.5px;
}
nav ul {
display: flex;
list-style: none;
gap: 22px;
flex-wrap: wrap;
}
nav a {
color: white;
text-decoration: none;
font-weight: 600;
}
.hero {
background: linear-gradient(135deg, #1d4ed8, #0f172a);
color: white;
padding: 90px 20px;
text-align: center;
}
.hero h1 {
font-size: 2.8rem;
margin-bottom: 20px;
}
.hero p {
max-width: 760px;
margin: 0 auto 30px;
font-size: 1.1rem;
}
.btn {
display: inline-block;
background: white;
color: #0f172a;
text-decoration: none;
padding: 12px 22px;
border-radius: 8px;
font-weight: bold;
transition: 0.2s ease;
}
.btn:hover {
transform: translateY(-2px);
}
section {
padding: 70px 20px;
}
section h2 {
text-align: center;
font-size: 2rem;
margin-bottom: 18px;
color: #0f172a;
}
section .intro {
text-align: center;
max-width: 780px;
margin: 0 auto 35px;
color: #4b5563;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 22px;
}
.card {
background: white;
padding: 25px;
border-radius: 14px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}
.card h3 {
margin-bottom: 12px;
color: #111827;
}
.about-box,
.contact-box {
background: white;
max-width: 850px;
margin: auto;
padding: 30px;
border-radius: 14px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}
.about-box p,
.contact-box p {
margin-bottom: 12px;
}
.contact-box strong {
color: #111827;
}
footer {
background: #0f172a;
color: white;
text-align: center;
padding: 25px 20px;
}
@media (max-width: 768px) {
nav {
flex-direction: column;
}
.hero h1 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<nav>
<div class="logo">CYD-Solutions</div>
<ul>
<li><a href="#accueil">Accueil</a></li>
<li><a href="#apropos">À propos</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section class="hero" id="accueil">
<div class="container">
<h1>CYD-Solutions</h1>
<p>
Basée à Boulogne-sur-Mer, CYD-Solutions accompagne les professionnels
et les particuliers avec des solutions fiables, modernes et adaptées à leurs besoins.
</p>
<a href="#contact" class="btn">Demander des informations</a>
</div>
</section>
<section id="apropos">
<div class="container">
<h2>À propos</h2>
<p class="intro">
CYD-Solutions met son savoir-faire au service de ses clients avec une approche
sérieuse, réactive et orientée résultats.
</p>
<div class="about-box">
<p>
Installée à <strong>Boulogne-sur-Mer</strong>, <strong>CYD-Solutions</strong> propose
un accompagnement professionnel pour répondre aux besoins de ses clients avec efficacité.
</p>
<p>
Notre objectif est de proposer des prestations de qualité, un suivi personnalisé
et des solutions adaptées à chaque situation.
</p>
<p>
Nous accordons une importance particulière à la proximité, à la confiance
et à la satisfaction de nos clients.
</p>
</div>
</div>
</section>
<section id="services">
<div class="container">
<h2>Nos services</h2>
<p class="intro">
Voici des exemples de services que vous pouvez présenter sur votre site.
Vous pourrez les modifier selon votre activité exacte.
</p>
<div class="grid">
<div class="card">
<h3>Conseil & accompagnement</h3>
<p>
Nous vous aidons à identifier vos besoins et à mettre en place
les solutions les plus adaptées à votre projet.
</p>
</div>
<div class="card">
<h3>Solutions sur mesure</h3>
<p>
Nous proposons des prestations personnalisées pour répondre
précisément aux attentes de chaque client.
</p>
</div>
<div class="card">
<h3>Suivi & assistance</h3>
<p>
Nous assurons un accompagnement sérieux, réactif et professionnel
afin de garantir la qualité de nos interventions.
</p>
</div>
</div>
</div>
</section>
<section id="valeurs">
<div class="container">
<h2>Pourquoi choisir CYD-Solutions</h2>
<p class="intro">
Une entreprise locale, proche de ses clients, avec une volonté constante
d’offrir un service fiable et de qualité.
</p>
<div class="grid">
<div class="card">
<h3>Proximité</h3>
<p>
Une présence locale à Boulogne-sur-Mer pour un contact simple et direct.
</p>
</div>
<div class="card">
<h3>Réactivité</h3>
<p>
Des échanges rapides et un accompagnement attentif à chaque étape.
</p>
</div>
<div class="card">
<h3>Professionnalisme</h3>
<p>
Une approche sérieuse, claire et orientée satisfaction client.
</p>
</div>
</div>
</div>
</section>
<section id="contact">
<div class="container">
<h2>Contact</h2>
<p class="intro">
Vous souhaitez en savoir plus sur nos prestations ou demander un devis ?
Contactez-nous.
</p>
<div class="contact-box">
<p><strong>Entreprise :</strong> CYD-Solutions</p>
<p><strong>Ville :</strong> Boulogne-sur-Mer</p>
<p><strong>Téléphone :</strong> À compléter</p>
<p><strong>Email :</strong> À compléter</p>
<p><strong>Adresse :</strong> À compléter</p>
</div>
</div>
</section>
</main>
<footer>
<p>© 2026 CYD-Solutions - Tous droits réservés</p>
</footer>
</body>
</html>