- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Маска при наведении, шаг 1</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="shape techmart">
<div class="details">
<header>Техномарт</header>
<p>Сайт интернет-магазина строительных материалов и инструментов для ремонта: фиксированная вёрстка, спрайты, HTML5, CSS3.</p>
<a class="button" href="#">Посмотреть</a>
</div>
</section>
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
background-color: #161616;
text-align: center;
font-size: 14px;
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
section {
display: inline-block;
margin-top: 20px;
}
.shape {
position: relative;
overflow: hidden;
width: 300px;
height: 300px;
background-color: #ffffff;
}
/*
.shape .details {
padding-top: 60px;
width: 310px;
height: 310px;
color: #ffffff;
}
/*
.details header {
padding-bottom: 10px;
border-bottom: 1px solid #cccccc;
text-transform: uppercase;
font-size: 26px;
}
/*
.details p {
margin: 10px auto;
width: 70%;
line-height: 1.4;
}
/*
.button {
position: relative;
z-index: 2;
display: inline-block;
margin-top: 15px;
padding: 5px 15px;
border-radius: 20px;
background-color: #2f3644;
color: #ffffff;
text-decoration: none;
}
.button:hover {
background-color: #ffffff;
color: #2f3644;
}
*/
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
ЗадачиВыполнено
0
- Раскомментируйте правило
.shape .details. - Задайте блоку
.shape .detailsфоновый цветrgba(75, 90, 120, 0.9). - Раскомментируйте правила
.details headerи.details p. - А затем правила
.buttonи.button:hover.