/
RoditelevVV
/
web-static-labs
Обзор
Документация
Войти
/
RoditelevVV
/
web-static-labs
Код
Запросы
0
Задачи
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
html/lab3/task5/styles.css
101 строка
2 KB
karpov
finish lab3, lab4
12 мар 2026, 08:19
12 мар 2026, 08:19
74cd197
Код
Авторство
О чём код?
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #f5f7fa; padding: 20px; min-height: 100vh; } .container { max-width: 1200px; margin: 0 auto; } h1 { text-align: center; margin-bottom: 30px; color: #2d3748; } .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; } .card { background-color: white; border-radius: 10px; padding: 25px 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; min-height: 150px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .card:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15); } .card-number { font-size: 18px; font-weight: 600; color: #2d6ef0; margin-bottom: 10px; } .card-title { font-size: 16px; color: #4a5568; } .instructions { margin-top: 40px; padding: 20px; background-color: white; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .instructions h2 { color: #2d3748; margin-bottom: 15px; } .instructions p { color: #4a5568; line-height: 1.6; margin-bottom: 10px; } @media (max-width: 768px) { .gallery { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 15px; } .card { padding: 20px 15px; min-height: 130px; } } @media (max-width: 480px) { body { padding: 15px; } .gallery { grid-template-columns: 1fr; } }