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

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>3D Studio Max 5 (Табличная верстка)</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<table class="main-table" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="3" class="header-cell">
            <h1>3D Studio Max<sup>®</sup> 5</h1>
        </td>
    </tr>

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

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

            <h3 class="sections-title">Разделы книги:</h3>
            
            <table class="sections-table" cellpadding="0" cellspacing="0">
                <tr>
                    <td>
                        <table cellpadding="0" cellspacing="0">
                            <tr>
                                <td class="icon-cell">
                                    <img src="flag.jpg"; alt="Иконка"class="icon-box">
                                </td>
                                <td>
                                    <b>Моделирование</b><br>
                                    Раздел посвящен созданию и редактированию объектов сцен.
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td>
                        <table cellpadding="0" cellspacing="0">
                            <tr>
                                <td class="icon-cell">
                                    <img src="vv.jpg" width: 30px; alt="Иконка" class="icon-box2">
                                </td>
                                <td>
                                    <b>Анимация</b><br>
                                    Существует для придания реализма и оживления миров.
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>

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

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

<table class="marquee-table black-theme">
  <tr>

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


<br></br>
<br></br>




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

</body>
</html>
//////////////////////////////////////////////




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

.main-table {
    width: 850px;
    margin: 0 auto;
    background-color: #66ff00;
    border: 0px solid #000;
    border-collapse: collapse;
}


.header-cell {
    text-align: center;
    border-bottom: 0px solid #000;
    padding: 15px;
}


.left-menu {
    width: 100px;
    vertical-align: top;
    background-color: #66ff00;
    color: black;
    padding: 15px;
}

.left-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.left-menu li {
    margin-bottom: 15px;
    font-weight: bold;
}


.content {
    vertical-align: top;
    padding: 20px;
    background: white;
    text-align: justify;
}

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

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


.sections-table {
    width: 100%;
    margin-top: 25px;
    border-collapse: collapse;
}

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

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

.icon-box {
    width: 35px;
    height: 35px;
    background: #333;
    color: white;
    text-align: right;
    line-height: 30px;
    font-size: 10px;
}

.icon-box2 {
    width: 35px;
    height: 35px;
    background: #333;
    color: white;
    text-align: right;
    line-height: 45px;
    font-size: 10px;
    margin: right;
}


.right-menu {
    width: 200px;
    vertical-align: top;
    padding: 15px;
    font-size: 12px;
    border-left: 0px solid #999;
    background: white;
    color: red;
}

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


.footer-cell {
    border-top: 1px solid #000;
    padding: 15px;
    text-align: center;
    font-size: 12px;
    background: white;
    width: 300px; 
    heigth: 100px;
    margin-left: auto;
}


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

.bottom-copyright {
    text-align: center; 
    font-size: 11px; 
    margin-top: 15px;
}


.marquee-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background-color: #000000; 
}


.marquee-table.black-theme .marquee-td {
  width: 100%; 
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  height: 24px; 
  

}


.marquee-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center; 
}


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


.marquee-table.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);
  }
}