Зворотній зв'язок
Створіть блок з фіксованою позицією, який не буде змінювати своє положення при прокручуванні сторінки. Початково блок практично повністю прихований (рис. 1), але при наведенні на нього курсора він плавно виїжджає вправо (рис. 2). Якщо курсор відведено, то блок плавно повертається в початкове положення.
Блок має фіксовані розміри і повинен коректно відображатися в сучасних браузерах.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Зворотній зв'язок</title>
<style>
body {
margin: 0;
}
.feedback {
border-radius: 0 10px 10px 0;
width: 300px;
background: #333; /* Колір фону */
color: #fff; /* Колір тексту */
position: fixed; /* Фіксуємо на одному місці */
min-height: 100px; /* Мінімальна висота */
top: 100px; left: -320px;
border-right: 20px solid #fc0; /* Помаранчева межа зправа */
padding: 10px;
transition: left 1s; /* Анімація */
}
.feedback img {
float: left;
margin: 0 10px 0 0;
}
.feedback::after {
content: 'Зворотній зв'язок'; /* Виводимо текст */
color: #000; /* Колір напису */
position: absolute; /* Абсолютне позиціонування */
right: -60px; bottom: 50px;
transform: rotate(-90deg); /* Повертаємо текст */
-webkit-transform: rotate(-90deg);
}
.feedback:hover {
left: 0; /* При наведенні зсуваємо вправо */
}
</style>
</head>
<body>
<div class="feedback">
<img src="images/feedback.jpg" alt="" width="100" height="100">
Якщо у вас виникли питання за цим кодом, телефонуйте мені за номером:
555-3298. Дзвінок платний.
</div>
</body>
</html>