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

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Studio Max 5</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<table class="layout">
    <tr>
        <td colspan="2">
            <header>
                <h1>3D Studio Max® 5</h1>
            </header>
        </td>
    </tr>

    <tr>
        <td class="menu-cell">
            <nav>
                <ul>
                    <li><a href="#">Главная</a></li>
                    <li><a href="#">Учебник</a></li>
                    <li><a href="#">Помощь</a></li>
                    <li><a href="#">Форум</a></li>
                </ul>
            </nav>
        </td>

        <td class="content-cell">
            <main>

                <section>
                    <h2>О чем и для кого эта книга</h2>

                    <article>
                        <p>
                            В последнее время появилось очень много программ для моделирования,
                            анимации и визуализации трёхмерных сцен. Каждая из них по-своему
                            хороша, однако лучшее сочетание простоты управления и эффективности
                            показала программа 3D Studio Max.
                        </p>

                        <p>
                            Данная книга предназначена для начинающих пользователей и поможет
                            быстро освоить основные возможности программы.
                        </p>
                    </article>
                </section>

                <table class="books-table">
                    <tr>
                        <td class="main-part">
                            <section>
                                <h2>Разделы книги</h2>

                                <table class="section-table">
                                    <tr>
                                        <td>
                                            <article>
                                                <h3>Моделирование</h3>

                                                <img src="images/model.png"
                                                     alt="Моделирование">

                                                <p>
                                                    Раздел посвящён созданию, настройке и
                                                    редактированию объектов трёхмерных сцен.
                                                </p>
                                            </article>
                                        </td>

                                        <td>
                                            <article>
                                                <h3>Анимация</h3>

                                                <img src="images/animation.png"
                                                     alt="Анимация">

                                                <p>
                                                    Полезно для создания рекламных роликов,
                                                    игровых персонажей и визуальных эффектов.
                                                </p>
                                            </article>
                                        </td>
                                    </tr>
                                </table>
                            </section>

                            <section>
                                <h2 class="green-title">
                                    Дополнительные ссылки
                                </h2>

                                <p>
                                    Исходные материалы находятся на сайте издательства.
                                </p>
                            </section>
                        </td>

                        <td class="aside-part">
                            <aside>
                                <h2>Дополнительная литература</h2>

                                <ul>
                                    <li>Филип Миллер — Внутренний мир 3D Studio Max 3</li>
                                    <li>Тед Браун — Анимация и моделирование</li>
                                    <li>Геннадий Тевис — Эффективный самоучитель</li>
                                    <li>Кэл Ли — 3D Studio Max 4</li>
                                    <li>А.К. Кулик — Adobe Photoshop 7.0</li>
                                </ul>
                            </aside>
                        </td>
                    </tr>
                </table>

            </main>
        </td>
    </tr>

    <tr>
        <td colspan="2">
            <footer>
                Создание сайта Иванов И.В.
            </footer>
        </td>
    </tr>
</table>

</body>
</html>







*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, sans-serif;
}

body{
    background:#ffffff;
}

.layout{
    width:100%;
    border-collapse:collapse;
}

header{
    background:#9be59f;
    text-align:center;
    padding:20px;
}

header h1{
    color:#0033cc;
}

.menu-cell{
    width:180px;
    vertical-align:top;
    background:#a6efaf;
}

nav{
    padding:20px 10px;
}

nav ul{
    list-style:none;
}

nav li{
    margin-bottom:15px;
}

nav a{
    text-decoration:none;
    color:#000;
    font-weight:bold;
}

.content-cell{
    vertical-align:top;
    padding:20px;
}

section h2{
    text-align:center;
    margin-bottom:20px;
}

.books-table{
    width:100%;
    margin-top:20px;
    border-collapse:collapse;
}

.main-part{
    width:75%;
    vertical-align:top;
}

.aside-part{
    width:25%;
    vertical-align:top;
    padding-left:20px;
}

aside h2{
    text-align:center;
    margin-bottom:15px;
}

aside ul{
    padding-left:20px;
}

aside li{
    margin-bottom:10px;
}

.section-table{
    width:100%;
    border-collapse:collapse;
    margin-top:20px;
}

.section-table td{
    width:50%;
    padding:15px;
    vertical-align:top;
}

article{
    text-align:center;
}

article img{
    width:90px;
    margin:10px 0;
}

.green-title{
    color:green;
    margin-top:40px;
}

footer{
    background:#1d4ed8;
    color:white;
    text-align:center;
    padding:10px;
    margin-top:20px;
}