diff --git a/style.css b/style.css index 251d7e1..69107a6 100644 --- a/style.css +++ b/style.css @@ -1,48 +1,38 @@ body { - margin: 0; - padding: 0; font-family: Arial, sans-serif; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - min-height: 100vh; + text-align: center; background-color: #f0f0f0; + margin: 0; + padding: 20px; } h1 { - text-align: center; margin-bottom: 20px; } .row { display: flex; - justify-content: center; - margin-bottom: 20px; + justify-content: center; /* Центрирование карт в ряду */ + margin-bottom: 20px; /* Отступ между рядами */ } .card { - border: 2px solid #000; + width: 100px; + height: 150px; + background-color: white; + border: 2px solid black; border-radius: 10px; - width: 80px; - height: 120px; display: flex; align-items: center; justify-content: center; - margin: 0 10px; - background-color: #fff; -} - -@media (min-width: 768px) { - .card { - width: 100px; - height: 150px; - } + font-size: 16px; + margin: 0 10px; /* Отступ между картами */ + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + cursor: pointer; } -@media (min-width: 1024px) { - .card { - width: 120px; - height: 180px; - } +.card:hover { + transform: translateY(-5px); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); + transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; }