<!DOCTYPE html>
<html>
<head>
<meta charset="UFT-8"/>
<title>Компьютер как универсальное средство обработки информации</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<tr>
<td>
<table
style="background: rgba(255, 255, 255, 0.5);"
border="1"
align="center"
style="width:60%;"
bgcolor="#BCFFEC"
cellpadding="10">
<tr>
<th>
<h1>Компьютер как универсальное средство обработки информации</h1>
</th>
</tr>
</table>
<div class="container">
<figure>
<figcaption>
<h2>Демо</h2>
<a href="https://google.com">Показать</a>
</figcaption>
</figure>
</div>
<div class="container">
<figure>
<figcaption>
<h2>Компьютерная память</h2>
<a href="https://google.com">Показать</a>
</figcaption>
</figure>
</div>
<div class="container">
<figure>
<figcaption>
<h2>Как устроен персональный компьютер</h2>
<a href="https://google.com">Показать</a>
</figcaption>
</figure>
</div>
<a href="https://google.com">Показать</a>
</body>
</html>
*, *:before, *:after {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
figure {
width: 1070px;
height: 250px;
background-color: rgba(67,230,253, 0.6);
color: #000000;
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
border-radius: 20px;
}
figure h2 {
transition: 0.2s;
transform: translateY(20px);
}
figure a {
transition: 0.2s;
transform: translateY(-20px);
opacity: 0;
visibility: hidden;
}
figure:before {
content: '';
position: absolute;
top: 5%;
right: 0.9%;
bottom: 5%;
left: 0.9%;
border-top: solid 2px;
border-bottom: solid 2px;
transition: 0.2s;
transform: scaleX(0);
}
figure:after {
content: '';
position: absolute;
top: 5%;
right: 0.9%;
bottom: 5%;
left: 0.9%;
border-left: solid 2px;
border-right: solid 2px;
transition: 0.2s;
transform: scaleY(0);
}
figure:hover:before,
figure:hover:after {
transform: scale(1);
}
figure:hover h2,
figure:hover a {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
body {
background: url('micro.bmp');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
background-size: cover;
}
.container {
max-width: 1154px;
margin: 0 auto;
}
