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


body {
    font-family: Arial, sans-serif;
    background-color: white;
    margin: 0;
    padding: 20px;
}

/* Общий главный контейнер, заменяющий table.main-table */
.main-container {
    width: 850px;
    margin: 0 auto;
    background-color: #66ff00;
    display: flex;
    flex-direction: column;
}

/* Шапка */
.header-cell {
    text-align: center;
    padding: 15px;
}

.header-cell h1 {
    margin: 0;
}

/* Контейнер для трех колонок (левая, центр, правая) */
.main-body {
    display: flex;
    flex-direction: row;
    align-items: stretch; /* Чтобы все колонки были одинаковой высоты */
}

/* Левое меню */
.left-menu {
    width: 100px;
    background-color: #66ff00;
    color: black;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Заменяет <br><br> */
}

.left-menu a {
    text-decoration: none;
    color: black;
    font-weight: bold;
}

/* Центральный контент */
.content {
    flex: 1; /* Занимает все оставшееся пространство */
    padding: 20px;
    background: white;
    text-align: justify;
}

.content-title {
    text-align: center; 
    margin-top: 0;
}

.sections-title {
    text-align: center; 
    margin-top: 30px;
}

/* Сетка разделов вместо внутренней таблицы */
.sections-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Две равные колонки */
    gap: 20px;
    margin-top: 25px;
}

.section-item {
    display: flex;
    align-items: flex-start;
}

.icon-cell {
    padding-right: 10px;
}

.icon-box, .icon-box2 {
    width: 35px;
    height: 35px;
    background: #333;
    object-fit: cover; /* Чтобы картинки не искажались */
}

/* Правое меню */
.right-menu {
    width: 200px;
    padding: 15px;
    font-size: 12px;
    background: white;
    color: red;
}

.right-menu-title {
    text-align: center; 
    margin-top: 0;
}

.book-item p {
    margin: 0 0 15px 0;
}

/* Подвал */
.footer-cell {
    border-top: 1px solid #000;
    padding: 15px;
    text-align: center;
    font-size: 12px;
    background: white;
}

.footer-link {
    margin: 5px 0;
}

/* Копирайт в самом низу */
.bottom-copyright {
    text-align: center; 
    font-size: 11px; 
    margin-top: 35px; /* Объединил с br br из старого кода */
}

/* Бегущая строка через блоки */
.marquee-block {
    width: 100%;
    background-color: #000000;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    height: 24px;
    margin-top: 20px;
}

.marquee-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center; 
}

.marquee-inner {
    display: inline-block;
    white-space: nowrap;
    animation: scroll-left 15s linear infinite;
}

.marquee-block.black-theme .marquee-inner span {
    display: inline-block;
    padding-right: 30px; 
    color: #ffffff;
    background-color: #000000; 
    font-family: sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.marquee-inner:hover {
    animation-play-state: paused;
}

@keyframes scroll-left {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}
///////////////
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>3D Studio Max 5 (Блочная верстка)</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="main-container">
    
    <header class="header-cell">
        <h1>3D Studio Max<sup>®</sup> 5</h1>
    </header>

    <div class="main-body">
        
        <nav class="left-menu">
            <a href="https://google.com">Главная</a>
            <a href="https://google.com">Учебник</a>
            <a href="https://google.com">Помощь</a>
            <a href="https://google.com">Форум</a>
        </nav>

        <main class="content">
            <h2 class="content-title">О чем и для кого эта книга</h2>
            <p>В последнее время появилось очень много программ для моделирования анимации и визуализации трёхмерных миров. Каждая из них по-своему хороша, однако лучшее сочетание простоты управления и эффективности конечного результата удалось создать разработчикам из Discreet, Inc (ранее Kinetix)...</p>
            <p>Из названия этой книги следует, что главный упор сделан на ознакомлении начинающего художника с основными возможностями 3D Studio Max и методами быстрой и эффективной работы.</p>

            <h3 class="sections-title">Разделы книги:</h3>
            
            <div class="sections-grid">
                <div class="section-item">
                    <div class="icon-cell">
                        <img src="flag.jpg" alt="Иконка" class="icon-box">
                    </div>
                    <div class="section-text">
                        <b>Моделирование</b><br>
                        Раздел посвящен созданию и редактированию объектов сцен.
                    </div>
                </div>
                
                <div class="section-item">
                    <div class="icon-cell">
                        <img src="vv.jpg" alt="Иконка" class="icon-box2">
                    </div>
                    <div class="section-text">
                        <b>Анимация</b><br>
                        Существует для придания реализма и оживления миров.
                    </div>
                </div>
            </div>
        </main>

        <aside class="right-menu">
            <h3 class="right-menu-title">Дополнительная литература</h3>
            <div class="book-item">
                <p><b>Филипп МИЛЛЕР и др.</b><br>«Внутренний мир 3D Studio Max 3»<br>ISBN 985-7393-49-8</p>
            </div>
            <div class="book-item">
                <p><b>Тед БРОДМЭН</b><br>«Внутренний мир 3D Studio Max 3: Моделирование»<br>ISBN 985-7393-37-2</p>
            </div>
            <div class="book-item">
                <p><b>Геннадий ТЕМИН</b><br>«3D Studio Max 3: Самоучитель»<br>ISBN 985-7393-37-2</p>
            </div>
        </aside>

    </div>

    <footer class="footer-cell">
        <b>Дополнительные ссылки:</b>
        <p class="footer-link">Проекты к книге доступны на сайте: www.dialoft.ru</p>
        <p class="footer-link">Вопросы и замечания присылайте на e-mail: books@dialoft.ru</p>
    </footer>

</div>

<div class="marquee-block black-theme">
    <div class="marquee-wrapper">
        <div class="marquee-inner">
            <span>АНТОНЮК БОГДАНОВ АБДУЛЛАЕВ</span>
            <span>АНТОНЮК БОГДАНОВ АБДУЛЛАЕВ</span>
        </div>
    </div>
</div>

<div class="bottom-copyright">
    Создание сайта Москва цена
</div>

</body>
</html>