Voici un exemple de code CSS pour un site web ou une application qui concerne les ouvriers de scierie dans une équipe de sécurité. Ce style CSS se concentre sur un design professionnel et clair avec des éléments qui peuvent représenter la robustesse et la sécurité.
« `css
/* Reset CSS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body styling */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
line-height: 1.6;
}
/* Header styling */
header {
background: #333;
color: #fff;
padding: 1rem 0;
text-align: center;
border-bottom: 4px solid #4CAF50;
}
header h1 {
font-size: 2.5rem;
margin: 0;
}
header p {
font-size: 1.2rem;
margin: 0.5rem 0;
}
/* Navigation styling */
nav {
background: #444;
color: #fff;
display: flex;
justify-content: center;
padding: 0.5rem 0;
}
nav a {
color: #fff;
text-decoration: none;
padding: 0.5rem 1rem;
transition: background 0.3s;
}
nav a:hover {
background: #555;
}
/* Main section styling */
main {
padding: 2rem;
}
main h2 {
font-size: 2rem;
margin-bottom: 1rem;
}
main p {
margin-bottom: 1rem;
font-size: 1.1rem;
}
/* Button styling */
button {
background: #4CAF50;
color: #fff;
border: none;
padding: 0.5rem 1rem;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background: #45a049;
}
/* Footer styling */
footer {
background: #333;
color: #fff;
text-align: center;
padding: 1rem 0;
border-top: 4px solid #4CAF50;
}
footer p {
margin: 0;
}
/* Table styling */
table {
width: 100%;
border-collapse: collapse;
margin: 2rem 0;
}
table th, table td {
padding: 1rem;
text-align: left;
border-bottom: 1px solid #ddd;
}
table th {
background: #4CAF50;
color: #fff;
}
table tr:nth-child(even) {
background: #f2f2f2;
}
table tr:hover {
background: #ddd;
}
/* Form styling */
form {
margin: 2rem 0;
}
form label {
display: block;
margin-bottom: 0.5rem;
font-weight: bold;
}
form input[type= »text »],
form input[type= »email »],
form input[type= »password »],
form select,
form textarea {
width: 100%;
padding: 0.5rem;
margin-bottom: 1rem;
border: 1px solid #ccc;
border-radius: 4px;
}
form input[type= »submit »] {
background: #4CAF50;
color: #fff;
border: none;
padding: 0.5rem 1rem;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s;
}
form input[type= »submit »]:hover {
background: #45a049;
}
« `
Ce code CSS couvre les bases pour styliser un site web dédié aux ouvriers de scierie travaillant dans une équipe de sécurité. Vous pouvez ajuster les couleurs et les styles selon les besoins spécifiques de votre projet.