diff --git a/Assets/style.css b/Assets/style.css new file mode 100644 index 0000000..805da79 --- /dev/null +++ b/Assets/style.css @@ -0,0 +1,93 @@ +/* --- RESET SIMPLE --- */ +body { + margin: 0; + font-family: Arial, sans-serif; + background: #f8f8f8; + color: #333; +} + +/* --- HEADER --- */ +header { + display: flex; + justify-content: space-between; + align-items: center; + background: #ffcc66; + padding: 10px 20px; +} + + +header .menu a { + text-decoration: none; + color: #333; + font-weight: bold; +} + +header .burger { + font-size: 1.5em; + cursor: pointer; +} + +/* --- SECTION PRINCIPALE --- */ +main { + padding: 20px; +} + +.content { + display: flex; + gap: 20px; +} + +.recette-du-jour { + flex: 2; + background: white; + padding: 10px; + border-radius: 8px; +} + +.recette-du-jour img { + width: 100%; + border-radius: 5px; +} + +.autres-recettes { + flex: 1; + display: flex; + flex-direction: column; + gap: 15px; +} + +.autres-recettes .mini-recette { + background: white; + padding: 10px; + border-radius: 8px; +} + +.autres-recettes img { + width: 100%; + border-radius: 5px; +} + +/* --- RESPONSIVE --- */ +@media (max-width: 768px) { + .content { + flex-direction: column; + } + .autres-recettes { + flex-direction: row; + flex-wrap: wrap; + gap: 10px; + } + .autres-recettes .mini-recette { + flex: 1 1 45%; + } +} + +@media (max-width: 480px) { + header { + flex-direction: column; + align-items: flex-start; + } + .burger { + align-self: flex-end; + } +}