СОЗДАЕМ СТРАНИЦУ КОНТАКТОВ
частичная таблица

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="maho">
<meta name="keywords" content="maho">
<meta name="author" content="maho">
<title>Все контакты МАЧО для связи</title>
<link href="/favicon.ico" rel="icon">
<link href="/style.css" rel="stylesheet">
</head>
<body>
<div class="window">
<div class="window_header">
<div class="window_title">мои страницы соц.сетей для связи</div>
<div class="window_close_button"></div>
<div class="window_maximize_button"></div>
<div class="window_minimize_button"></div>
</div>
<center><div class = 'logo_avatar'></div></center>
<div class="window_content"><center>Иванов Иван Иваныч</center><br>
--------------------------------------<br>
<table class="maho">
<tbody>
<tr>
<td>Odnoklassniki: </td>
<td><a href="https://ok.ru/maho">написать</a></td>
</tr>
<tr>
<td>Soundcloud:</td>
<td><a href="https://soundcloud.com/maho">написать</a></td>
</tr>
<tr>
<td>Vkontakte:</td>
<td><a href="https://vk.com/maho">написать</a></td>
</tr>
<tr>
<td>Instagram:</td>
<td><a href="https://instagram.com/maho">написать</a></td>
</tr>
<tr>
<td>Telegram:</td>
<td><a href="https://teleg.run/maho">написать</a></td>
</tr>
<tr>
<td>Facebook:</td>
<td><a href="https://fb.com/maho">написать</a></td>
</tr>
<tr>
<td>Twitter:</td>
<td><a href="https://twitter.com/maho">написать</a></td>
</tr>
<tr>
<td>Github:</td>
<td><a href="https://github.com/maho">написать</a></td>
</tr>
<tr>
<td>Ask:</td>
<td><a href="https://aska.ru">написать</a></td>
</tr>
</tbody>
</table>
--------------------------------------<br>
E-mail: <a href="mailto:info@maho">info@maho</a><br>
Site: <a href="https://maho.ru">maho.ru</a><br>
--------------------------------------<br>
Done.<br>
под любую доп. информацию <span class="blink">_это мигающий текст_</span><br>
</div>
</div>
</body>
</html>
<style>
{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body
{
font-family: "Courier New", Courier, monospace;
font-size: 14px;
color: #ccc;
line-height: 1.5em;
background: #333;
margin: auto;
padding-top: 10px;
}
a
{
color: #ccc;
}
a:hover
{
text-decoration: none;
}
.window
{
background: #444;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
border-radius: 5px;
border: 2px solid #333;
width: 480px;
margin: auto;
position:absolute;
left:50%;
top:50%;
margin-left: -240px;
margin-top: -200px;
overflow: hidden;
}
.window_header
{
background: #333;
color: #ccc;
padding: 7px;
}
.window_title
{
display: inline-block;
}
.window_minimize_button, .window_maximize_button, .window_close_button
{
border-radius: 7px;
width: 12px;
height: 12px;
display: inline-block;
float: right;
margin-left: 4px;
margin-top: 3px;
}
.window_minimize_button
{
background: #2cc640;
border: 1px solid #51a75c;
}
.window_maximize_button
{
background: #fdbf2e;
border: 1px solid #d6a839;
}
.window_close_button
{
background: #fe6256;
border: 1px solid #ca5f59;
}
.window_content
{
padding: 7px;
}
.blink
{
animation: blinking 1s infinite;
}
@keyframes blinking
{
0% { clear: both; }
50%{ color: transparent; }
}
@media screen and (max-width: 800px)
{
.window
{
width: 95%;
position: relative;
left: 0;
top: 0;
margin: auto;
}
}
/* Стили таблицы (maho) */
table.maho{text-decoration: none;border-collapse:collapse;width:90%;text-align:center;}
table.maho th{font-weight:normal;font-size:20px; color:#ffffff;background-color:#000000;}
table.maho td{font-size:20px;color:#000000;}
table.maho td,table.maho th{white-space:pre-wrap;padding:10px 5px;line-height:13px;vertical-align: middle;border: 2px solid #000000;}
table.maho tr:hover{background-color:#f9fafb}
table.maho tr:hover td{color:#000000;cursor:default;}
.logo_avatar {
background-color: transparent; /*цвет*/
background-image: url(https://forumstatic.ru/files/001b/8c/9a/74042.png); /*картинка*/
background-position: top center; /*позиционирование картинки*/
height: 240px; /*высота ава*/
width: 240px; /*ширина ава*/
margin-right: 0px;
}
</style>
- Подпись автора
...













