СОЗДАЕМ СТРАНИЦУ КОНТАКТОВ
частичная таблица
<!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>
- Подпись автора
...