Загрузка данных

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Компания АТЛАНТ - Главная</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<table class="main-table">
    <tr>
        <td colspan="2" class="header">Компания АТЛАНТ</td>
    </tr>
    <tr>
        <td class="sidebar">
            <a href="index.html" class="menu-link">Главная страница</a>
            <a href="#" class="menu-link">О компании</a>
            <a href="#" class="menu-link">Услуги</a>
            <a href="#" class="menu-link">Контакты</a>
            <a href="catalog.html" class="menu-link">Компьютеры и комплектующие</a>
            <a href="catalog.html" class="menu-link">Программное обеспечение</a>
            <a href="#" class="menu-link">Регистрация</a>
            <a href="#" class="menu-link">Гостевая книга</a>
            <a href="#" class="menu-link">Полезные ссылки</a>
        </td>
        <td class="content">
            <div class="logo-frame">
                <img src="https://via.placeholder.com/200x120" alt="Логотип" class="user-pic">
                <div class="logo-text">ATLANT</div>
            </div>
            <div class="slogan">
                Компания АТЛАНТ обеспечит вас компьютерами и программными продуктами на любой вкус
            </div>
        </td>
    </tr>
    <tr>
        <td colspan="2" class="footer-ad">Свободное поле для рекламы</td>
    </tr>
</table>

</body>
</html>


/* Обнуляем отступы браузера */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden; /* Чтобы не было лишней прокрутки */
    font-family: "Times New Roman", Times, serif;
}

/* Таблица на весь экран */
.main-table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    background-image: url('https://www.transparenttextures.com/patterns/pavement.png'); /* Текстура камня */
    background-color: #b0b0b0;
    border: 5px solid #333;
}

/* Верхняя черная плашка */
.header {
    background-color: #222;
    color: #ffffff;
    height: 60px;
    padding-left: 20px;
    font-size: 32px;
    font-weight: bold;
    border-bottom: 3px solid #000;
}

/* Боковая панель (Меню) */
.sidebar {
    width: 250px;
    vertical-align: top;
    border-right: 2px solid #444;
    background: rgba(0, 0, 0, 0.1);
}

.menu-link {
    display: block;
    padding: 15px;
    color: #000;
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px solid #666;
    background: rgba(255, 255, 255, 0.1);
}

.menu-link:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* Центральный контент */
.content {
    text-align: center;
    vertical-align: middle;
    padding: 50px;
}

/* Белое поле логотипа */
.logo-frame {
    background: #fff;
    padding: 25px;
    border: 1px solid #000;
    display: inline-block;
    box-shadow: 10px 10px 0px rgba(0,0,0,0.2);
}

.logo-text {
    font-size: 45px;
    font-style: italic;
    margin-top: 10px;
    letter-spacing: 3px;
}

/* Стили для картинки (как на фото) */
.user-pic {
    max-width: 250px;
    filter: grayscale(100%) contrast(150%); /* Делает фото черно-белым и резким */
}

.slogan {
    margin-top: 30px;
    font-size: 26px;
    font-style: italic;
    font-weight: bold;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Рекламное поле внизу */
.footer-ad {
    height: 80px;
    background-color: #999;
    border-top: 3px solid #333;
    text-align: center;
    color: #222;
    font-style: italic;
}