ajout première SAE WEB 1ere année 17/20
This commit is contained in:
EmmanuelTiamzon
106
SAE_WEB1/css/style_contact.css
Normal file
106
SAE_WEB1/css/style_contact.css
Normal file
@@ -0,0 +1,106 @@
|
||||
|
||||
/* Formulaire de contact */
|
||||
.contact-form {
|
||||
max-width: 600px;
|
||||
margin: 30px auto 0; /* Ajout d'un espace de 20px en haut */
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.contact-form h2 {
|
||||
color: #a6aa7f;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.contact-form label {
|
||||
display: block;
|
||||
margin: 10px 0 5px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.contact-form input,
|
||||
.contact-form textarea {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.contact-form button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color: #ffcc00;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.contact-form button:hover {
|
||||
background-color: #e6b800;
|
||||
}
|
||||
|
||||
/* Responsivité */
|
||||
@media (max-width: 768px) {
|
||||
.burger-menu {
|
||||
display: flex; /* Affiche le menu burger */
|
||||
}
|
||||
|
||||
nav {
|
||||
display: none; /* Cache le menu par défaut sur petits écrans */
|
||||
}
|
||||
|
||||
nav.open {
|
||||
display: block; /* Affiche le menu lors de l'ouverture */
|
||||
}
|
||||
|
||||
nav ul {
|
||||
display: flex;
|
||||
flex-direction: column; /* Les liens deviennent verticaux */
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Boutons globaux */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
background-color: #fefae0;
|
||||
color: #333;
|
||||
padding: 10px 20px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: #e6b800;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* Pied de page sticky */
|
||||
footer {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
margin-top: auto; /* Assure que le pied de page reste en bas */
|
||||
}
|
||||
|
||||
footer p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
footer span {
|
||||
color: #ffd700;
|
||||
}
|
||||
|
||||
.cv-atik {
|
||||
display:block
|
||||
}
|
||||
80
SAE_WEB1/css/style_cv_manu.css
Normal file
80
SAE_WEB1/css/style_cv_manu.css
Normal file
@@ -0,0 +1,80 @@
|
||||
/* Styles généraux */
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column; /* Orientation en colonne */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: Georgia, 'Times New Roman', Times, serif, sans-serif;
|
||||
background-color: #f5f5f5; /* Couleur de fond générale */
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.cote_gauche, div.myname, div.formation, div.exp_pro, div.projets-info {
|
||||
width: 90%; /* Occupe 90% de la largeur de la page */
|
||||
max-width: 800px; /* Largeur maximale pour éviter que ce soit trop étiré */
|
||||
margin: 20px auto; /* Centre les sections horizontalement */
|
||||
padding: 20px;
|
||||
background-color: #fff; /* Fond blanc */
|
||||
border-radius: 8px; /* Coins arrondis */
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre élégante */
|
||||
}
|
||||
|
||||
/* Ajustement spécifique pour la section gauche */
|
||||
.cote_gauche {
|
||||
background-color: #94c4e2; /* Fond bleu clair */
|
||||
color: #333; /* Texte sombre */
|
||||
}
|
||||
|
||||
.photo_me {
|
||||
display: block;
|
||||
margin: 0 auto 20px;
|
||||
border-radius: 8px; /* Ajout d'arrondi */
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Ombre discrète */
|
||||
}
|
||||
|
||||
h3, h2 {
|
||||
margin: 15px 0;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.2em;
|
||||
text-align: left; /* Alignement gauche pour les titres secondaires */
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 20px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 10px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #0066cc;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Titres principaux */
|
||||
.for-titre, .exp-titre, .proj-titre {
|
||||
font-size: 1.5em;
|
||||
color: #2c3e50;
|
||||
border-bottom: 2px solid #94c4e2; /* Ligne décorative */
|
||||
padding-bottom: 5px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.cote_gauche, div.myname, div.formation, div.exp_pro, div.projets-info {
|
||||
width: 100%; /* Utilisation de toute la largeur disponible */
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
158
SAE_WEB1/css/style_cv_wael.css
Normal file
158
SAE_WEB1/css/style_cv_wael.css
Normal file
@@ -0,0 +1,158 @@
|
||||
/* Style général du corps */
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: white;
|
||||
color: black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Conteneur principal */
|
||||
.cv-container {
|
||||
display: flex;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
flex-wrap: wrap; /* Permet aux éléments de se replier sur plusieurs lignes */
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
background-color: #163853;
|
||||
color: white;
|
||||
width: 20%;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
height: auto;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.sidebar img {
|
||||
border-radius: 50%;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
object-fit: cover;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sidebar h2 {
|
||||
margin: 10px 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
margin: 5px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.sidebar ul {
|
||||
list-style-type: disc;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
/* Contenu principal */
|
||||
.main-content {
|
||||
width: 80%;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
margin-left: 20%;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section h3 {
|
||||
border-bottom: 2px solid #163853;
|
||||
padding-bottom: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.section p, .section ul {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.sidebar img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 0 auto 10px;
|
||||
}
|
||||
|
||||
.sidebar h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* Contenu principal */
|
||||
.main-content {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* Ajustement des sections */
|
||||
.section {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* Compétences */
|
||||
.skills-container {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.skills-list {
|
||||
width: 100%;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
/* Text alignement */
|
||||
.title-container, .description {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Pour les très petits écrans (comme les téléphones) */
|
||||
@media (max-width: 480px) {
|
||||
/* Réduire la taille des éléments pour mieux s'adapter */
|
||||
.sidebar img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.sidebar h2 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.section h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.section p, .section ul {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
195
SAE_WEB1/css/style_disponibilite.css
Normal file
195
SAE_WEB1/css/style_disponibilite.css
Normal file
@@ -0,0 +1,195 @@
|
||||
/* Styles généraux pour la page */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 100px;
|
||||
width: auto;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
/* Mise en surbrillance pour la date sélectionnée */
|
||||
.selected {
|
||||
background-color: rgb(255, 208, 122);
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Arial', sans-serif;
|
||||
background-color: #f4f4f9;
|
||||
color: #333;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Conteneur principal du calendrier et du formulaire */
|
||||
main {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin-top: 50px; /* Espacement ajusté après l'en-tête */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Conteneur du calendrier */
|
||||
.calendar-container {
|
||||
background-color: white;
|
||||
padding: 30px;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
margin-bottom: 40px;
|
||||
border: 2px solid #333;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Calendrier */
|
||||
#calendar {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.calendar-navigation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 10px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
cursor: pointer;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border: 2px solid black;
|
||||
border-collapse: collapse;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Style des cellules du tableau */
|
||||
th, td {
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
border: 1px solid black;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
height: 100px; /* Hauteur fixe de la cellule */
|
||||
}
|
||||
|
||||
/* Style pour l'en-tête */
|
||||
th {
|
||||
background-color: #F9A03F;
|
||||
color: white;
|
||||
}
|
||||
|
||||
td:hover {
|
||||
background-color: #ffcc00;
|
||||
}
|
||||
|
||||
/* Modification pour les réservations (midi et soir) */
|
||||
td .midi.reserved, td .soir.reserved {
|
||||
background-color: red;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
/* Les divs pour midi et soir prennent chacune la moitié de la cellule */
|
||||
td .midi, td .soir {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
td .midi {
|
||||
height: 50%; /* Limite la hauteur à 50% de la cellule */
|
||||
}
|
||||
|
||||
td .soir {
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
/* Formulaire de réservation */
|
||||
.reservation-form {
|
||||
background-color: #F9F9F9;
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
margin: 20px auto; /* Centrer et espacer */
|
||||
display: none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Champ de texte */
|
||||
input[type="text"], input[type="email"], select {
|
||||
padding: 12px;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 15px 30px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
background-color: #F9A03F;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #ff8c42;
|
||||
}
|
||||
|
||||
#reservation-tab {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #F9A03F;
|
||||
margin-bottom: 20px;
|
||||
text-transform: uppercase;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Pied de page */
|
||||
footer {
|
||||
background-color: #333;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
footer p {
|
||||
margin: 0;
|
||||
}
|
||||
594
SAE_WEB1/css/style_global.css
Normal file
594
SAE_WEB1/css/style_global.css
Normal file
File diff suppressed because it is too large
Load Diff
176
SAE_WEB1/css/style_recettes-global.css
Normal file
176
SAE_WEB1/css/style_recettes-global.css
Normal file
@@ -0,0 +1,176 @@
|
||||
/* Menu burger */
|
||||
.burger-menu {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
cursor: pointer;
|
||||
padding: 15px;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
z-index: 15; /* Toujours au-dessus du contenu */
|
||||
background: none; /* Pas de fond */
|
||||
border: none; /* Pas de bordure */
|
||||
}
|
||||
/* Les lignes du burger */
|
||||
.burger-menu span {
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: 3px;
|
||||
background-color: #fff;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* Responsivité - Menu burger visible seulement sur petit écran */
|
||||
@media (max-width: 768px) {
|
||||
header nav {
|
||||
display: none; /* Cache la navigation classique sur petit écran */
|
||||
}
|
||||
|
||||
.burger-menu {
|
||||
display: flex; /* Affiche le menu burger */
|
||||
}
|
||||
|
||||
header nav.open {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 140px; /* Ajoute un espace pour le logo */
|
||||
left: 0;
|
||||
background-color: #F9A03F;
|
||||
width: 100%; /* Prend toute la largeur */
|
||||
padding: 10px 0; /* Ajuste la hauteur du menu */
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
header nav ul {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
z-index: 12; /* Toujours visible */
|
||||
}
|
||||
|
||||
.burger-menu {
|
||||
position: fixed; /* Fixe le bouton burger */
|
||||
z-index: 15;
|
||||
}
|
||||
}
|
||||
|
||||
.recette {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
margin: 20px auto;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||
width: 80%;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.recette img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.recette h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 10px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.recette p {
|
||||
font-size: 1rem;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.recette ul li {
|
||||
color:#333;
|
||||
display: inline;
|
||||
font-size: 20px;
|
||||
margin:15px;
|
||||
}
|
||||
|
||||
|
||||
/* Section des étapes de la recette */
|
||||
.etapes-recette {
|
||||
max-width: 800px;
|
||||
margin: 20px auto;
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.etapes-recette h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 10px;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.etapes-recette ol {
|
||||
padding-left: 40px;
|
||||
font-size: 1rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.etapes-recette ol li {
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
|
||||
.contact-form {
|
||||
max-width: 600px;
|
||||
margin: 30px auto;
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.contact-form h2 {
|
||||
color: #a6aa7f;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.contact-form label {
|
||||
display: block;
|
||||
margin: 10px 0 5px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.contact-form input,
|
||||
.contact-form textarea {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.contact-form button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color: #ffcc00;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.contact-form button:hover {
|
||||
background-color: #e6b800;
|
||||
}
|
||||
122
SAE_WEB1/css/style_recettes.css
Normal file
122
SAE_WEB1/css/style_recettes.css
Normal file
@@ -0,0 +1,122 @@
|
||||
/* Mise en page générale */
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #333;
|
||||
background-color: #fefae0; /* Couleur de fond légère */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.titre {
|
||||
margin: auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Section des chefs */
|
||||
.chefs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
background-color: #fefae0;
|
||||
}
|
||||
|
||||
.chef {
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 10px; /* Coins arrondis */
|
||||
width: 250px;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre légère */
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.chef:hover {
|
||||
transform: translateY(-5px); /* Légère élévation */
|
||||
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Ombre plus marquée */
|
||||
}
|
||||
|
||||
.chef h3 {
|
||||
color: #a6aa7f; /* Couleur accentuée pour le nom */
|
||||
font-size: 1.5rem;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.chef p,
|
||||
.chef ul li {
|
||||
color: #555; /* Couleur de texte discrète */
|
||||
font-size: 1rem;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.chefs .chef a {
|
||||
text-decoration: none; /* Supprime le soulignement */
|
||||
color: inherit; /* Utilise la couleur du parent */
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.chefs .chef a:hover {
|
||||
text-decoration: none; /* Ajoute un soulignement au survol */
|
||||
color: #F9A03F; /* Couleur d'accentuation */
|
||||
}
|
||||
|
||||
/* Section des recettes */
|
||||
.recettes {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
background-color: #fefae0;
|
||||
}
|
||||
|
||||
.recette {
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 10px; /* Coins arrondis */
|
||||
width: 400px;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre légère */
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.recette:hover {
|
||||
transform: translateY(-2px); /* Légère élévation */
|
||||
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Ombre plus marquée */
|
||||
}
|
||||
|
||||
.recette h4 {
|
||||
color: #a6aa7f; /* Couleur accentuée pour le titre */
|
||||
font-size: 1.35rem;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.recette img {
|
||||
width: 300px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.recette p {
|
||||
color: #555; /* Couleur de texte discrète */
|
||||
font-size: 0.9rem;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.recettes .recette a {
|
||||
text-decoration: none; /* Supprime le soulignement */
|
||||
color: inherit; /* Conserve la couleur parent */
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.recettes .recette a:hover {
|
||||
text-decoration: none;
|
||||
color: #F9A03F; /* Couleur d'accentuation */
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user