Help! CSS/HTML
Я только в самом начале путь по изучению CSS и HTML, столкнулась с заданием, которое не получается сделать уже несколько дней. Может сможет кто-то помочь с объяснением Необходимо сделать :hover.
При наведении на текст "404", должен появляться "Lorem".
Исходный код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>404 Page</title>
<link href="./styles.css" rel="stylesheet">
</head>
<body>
<div class="container">
<img class="image" src="empty-boxes.svg" alt="boxs-and-cat">
<div class="text">
<h1 class="text-code">404</h1>
<p class="text-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
</div>
<footer class="footer">
<p class="footer2">Go back to <a class="link" href="https://tlgrm.eu/stickers/Kus_cat">Kotik</a></p>
</footer>
</body>
</html>
.body, h1, p, footer, a {
margin: 0;
font-size: 100%;
font-weight: normal;
color: #467ee5;
font-family: Avenir, Helvetica, Arial, sans-serif;
}
.body {
display: flex;
height: 100vh;
}
.footer {
position: absolute;
bottom: 30px;
width: 100%;
display: flex;
margin-bottom: 30px;
}
.footer2{
margin: auto;
font-size: 16px;
}
.container {
width: 520px;
margin: auto;
margin-top: 110px;
}
.image {
width: 100%;
}
.text {
width:400px;
margin: 0 auto;
cursor: pointer;
}
.text-code {
text-align: center;
font-size: 120px;
font-weight: 400;
margin-top: 10px;
}
.text-info{
text-align: center;
font-size: 20px;
font-weight: 400;
opacity: 0;
transition: opacity .4s ease-in-out;
}
.link {
color: #2f80ed;
}
Простой
