# Réponse finale obtenue du bot:
response = « Voici un exemple de code CSS qui peut être utilisé pour créer un design responsive et professionnel pour les techniciens et techniciennes d’énergie et de pétrochimie dans le cadre des syndicats de travailleurs :
« `css
/* Styles for desktop devices */
@media (min-width: 768px) {
/* Header */
header {
background-color: #3498db;
padding: 1rem;
text-align: center;
color: #fff;
}
/* Navigation menu */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
nav li {
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
transition: color 0.2s ease-out;
}
nav a:hover {
color: #333;
}
/* Hero section */
.hero {
background-image: url(‘image.jpg’);
background-size: cover;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
}
.hero h1 {
color: #fff;
font-weight: bold;
text-align: center;
}
/* About section */
.about {
background-color: #f7f7f7;
padding: 2rem;
}
.about h2 {
margin-top: 0;
}
/* Services section */
.services {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.service {
margin: 20px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
width: calc(33.33% – 20px);
}
.service h3 {
font-weight: bold;
}
/* Call to action section */
.call-to-action {
background-color: #3498db;
color: #fff;
padding: 1rem;
text-align: center;
font-size: 18px;
}
.call-to-action a {
text-decoration: none;
color: #fff;
}
/* Footer */
footer {
background-color: #3498db;
padding: 1rem;
text-align: center;
color: #fff;
}
}
/* Styles for mobile devices */
@media (max-width: 767px) {
/* Header */
header {
background-color: #3498db;
padding: 0.5rem;
text-align: center;
color: #fff;
}
/* Navigation menu */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: block;
}
nav li {
margin-bottom: 10px;
}
nav a {
font-size: 16px;
}
/* Hero section */
.hero {
background-image: url(‘image.jpg’);
background-size: cover;
height: auto;
padding: 20px;
}
.hero h1 {
font-size: 18px;
}
/* About section */
.about {
padding: 1rem;
}
/* Services section */
.services {
display: block;
}
.service {
margin-bottom: 20px;
}
}
/* Styles for smaller mobile devices */
@media (max-width: 479px) {
/* Header */
header {
font-size: 14px;
}
/* Hero section */
.hero h1 {
font-size: 16px;
}
}
« `
Ce code utilise les médias queries pour ajuster le design en fonction de la taille de l’écran. Il définit des styles pour les éléments tels que le header, la navigation, la section d’héro, la section « À propos », la section « Services » et la section du pied de page.
Il est possible de personnaliser ce code en fonction des besoins spécifiques du syndicat et des techniciens/techniciennes qu’il représente. »