css
/* Styles généraux pour la newsletter /
body {
font-family: 'Arial', sans-serif; / Utilisation d'une police de caractères claire /
margin: 0;
padding: 0;
background-color: #f4f4f4; / Couleur de fond douce */
}
/* Conteneur principal de la newsletter /
.newsletter-container {
max-width: 600px; / Largeur maximale pour un affichage agréable /
margin: 20px auto; / Centrage horizontal /
padding: 20px;
background-color: #ffffff; / Fond blanc pour le contenu /
border-radius: 8px; / Coins arrondis pour un aspect moderne /
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); / Ombre douce */
}
/* Header de la newsletter */
.newsletter-header {
text-align: center;
padding-bottom: 20px;
}
.newsletter-header h1 {
font-size: 24px; /* Taille de la police pour le titre /
color: #333; / Couleur du texte */
}
/* Section des articles ou des actualités /
.newsletter-content {
margin-bottom: 20px; / Espacement entre les sections */
}
.newsletter-content h2 {
font-size: 20px; /* Taille de police pour les sous-titres /
color: #555; / Couleur du sous-titre /
margin-top: 20px; / Espacement au-dessus des sous-titres */
}
.newsletter-content p {
font-size: 16px; /* Taille de police du corps de texte /
line-height: 1.5; / Hauteur de la ligne pour une meilleure lisibilité /
color: #666; / Couleur du texte */
}
/* Bouton d'action /
.button {
display: block; / Affichage en bloc pour le centrage /
width: 100%; / Largeur complète pour le bouton /
max-width: 200px; / Largeur maximale du bouton /
margin: 20px auto; / Centrage horizontal /
padding: 10px;
background-color: #007BFF; / Couleur de fond du bouton /
color: white; / Couleur du texte /
text-align: center; / Centrage du texte /
text-decoration: none; / Suppression du soulignement /
border-radius: 5px; / Coins arrondis pour le bouton /
transition: background-color 0.3s ease; / Effet de transition */
}
.button:hover {
background-color: #0056b3; /* Couleur du bouton au survol */
}
/* Responsive design /
@media (max-width: 600px) {
.newsletter-container {
padding: 10px; / Réduction de la marge intérieure sur petits écrans */
}
.newsletter-header h1 {
font-size: 20px; /* Diminution de la taille du titre */
}
.newsletter-content h2 {
font-size: 18px; /* Diminution de la taille des sous-titres */
}
.newsletter-content p {
font-size: 14px; /* Diminution de la taille du texte */
}
}