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

<!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="style.css">
</head>

<body>

<div class="wrapper">

<header class="header">
3D Studio Max® 5
</header>

<div class="main">

<!-- LEFT MENU -->

<aside class="sidebar">

<nav class="menu">

<a href="index.html">Главная</a>
<a href="tutorial.html">Учебник</a>
<a href="help.html">Помощь</a>
<a href="forum.html">Форум</a>

</nav>

</aside>

<!-- CONTENT -->

<main class="content">

<h1 class="title">
О чем и для кого эта книга
</h1>

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

<p class="text">
Действительно, став самой распространенной
и мощной программой, 3D Studio Max обратил
на себя внимание не только новичков,
но и профессионалов.
</p>

<p class="text">
Из названия книги следует, что данный курс
создан для освоения начального уровня работы
с основными возможностями 3D Studio Max.
</p>

<h2 class="sections-title">
Разделы книги:
</h2>

<div class="sections">

<div class="section-block">

<h3 class="section-name">
Моделирование
</h3>

<div class="section-content">

<img src="https://cdn-icons-png.flaticon.com/128/1829/1829586.png" width="70" alt="">

<p class="text-small">
Раздел «Моделирование»
посвящён созданию,
настройке и редактированию
объектов трёхмерных сцен.
</p>

</div>

</div>

<div class="section-block">

<h3 class="section-name">
Анимация
</h3>

<div class="section-content">

<p class="text-small">
Именно для реализации
сложных эффектов
и анимации трёхмерных сцен
существует Animation MAX.
</p>

<img src="https://cdn-icons-png.flaticon.com/128/2991/2991148.png" width="70" alt="">

</div>

</div>

</div>

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

<p class="text">
Краткое практическое задание содержится
в проектах Max на
<a href="https://www.diasoft.ru" target="_blank">
сайте издательства «Диасофт»
</a>.
</p>

<p class="text">
Все желающие могут обращаться с вопросами,
советами и замечаниями по e-mail:
books@3dsmax.ru
</p>

</main>

<!-- RIGHT SIDEBAR -->

<aside class="rightbar">

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

<div class="book">
Филип Миллер<br>
«Трёхмерный мир 3D Studio Max 3»<br>
ISBN 000-7333-14-8
</div>

<div class="book">
Тед Бродман<br>
«Внутренний мир 3D Studio Max 3»<br>
ISBN 000-7333-37-2
</div>

<div class="book">
Геннадий Тевин<br>
«3D Studio Max. Эффективный самоучитель»<br>
ISBN 000-7333-37-2
</div>

<div class="book">
Кол Ли<br>
«3D Studio Max V4»<br>
ISBN 000-7333-31-1
</div>

<div class="book">
А.К. Кушик<br>
«Adobe Photoshop 7.0»<br>
ISBN 000-7992-15-2
</div>

</aside>

</div>

</div>

<footer class="footer">
Добро пожаловать на сайт по 3D Studio Max!
</footer>

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

</body>
</html>




body{
margin:0;
background:#ffffff;
font-family:Arial,sans-serif;
}

.wrapper{
width:1200px;
margin:20px auto 0 auto;
background:#c8f5c9;
border-top:8px solid #2f58c9;
border-left:8px solid #2f58c9;
border-right:8px solid #2f58c9;
}

.header{
text-align:center;
font-size:42px;
font-weight:bold;
color:#003399;
padding:30px 0;
}

.main{
display:flex;
}

.sidebar{
width:180px;
padding-top:50px;
padding-left:20px;
background:#d9f7d9;
}

.menu{
display:flex;
flex-direction:column;
gap:35px;
}

.menu a{
text-decoration:none;
color:#003399;
font-size:28px;
font-weight:bold;
transition:0.3s;
}

.menu a:hover{
color:#ff0000;
text-decoration:underline;
}

.content{
background:#ffffff;
padding:35px;
flex:1;
}

.title{
text-align:center;
font-size:42px;
font-weight:bold;
padding-bottom:30px;
color:#111111;
}

.text{
font-size:24px;
line-height:1.6;
text-align:justify;
padding-bottom:20px;
}

.text a{
color:#003399;
font-weight:bold;
text-decoration:underline;
}

.text a:hover{
color:red;
}

.sections-title{
text-align:center;
font-size:40px;
font-weight:bold;
padding:40px 0;
}

.sections{
display:flex;
gap:20px;
}

.section-block{
width:50%;
padding:20px;
border:1px solid #cccccc;
}

.section-name{
text-align:center;
font-size:34px;
font-weight:bold;
padding-bottom:20px;
}

.section-content{
display:flex;
gap:15px;
align-items:flex-start;
}

.text-small{
font-size:22px;
line-height:1.5;
text-align:justify;
}

.links-title{
color:green;
font-size:38px;
font-weight:bold;
padding:40px 0 20px;
}

.rightbar{
width:300px;
background:#d9f7d9;
padding:35px 20px;
}

.books-title{
text-align:center;
font-size:36px;
font-weight:bold;
padding-bottom:30px;
}

.book{
font-size:24px;
line-height:1.5;
padding-bottom:35px;
}

.footer{
width:100%;
height:80px;
background:#123fb8;
color:#ffffff;
font-size:28px;
font-weight:bold;
text-align:center;
line-height:80px;
}

.after-footer{
text-align:center;
font-size:22px;
font-weight:bold;
color:#333333;
padding:20px 0;
}