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

<!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="site">

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

<div class="center">

<aside class="left">

<nav class="nav">

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

</nav>

</aside>

<main class="middle">

<section>

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

<p class="paragraph">
В последние времена появилось очень много программ
для моделирования анимации и визуализации
трехмерных сцен.
</p>

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

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

</section>

<section>

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

<div class="cards">

<div class="card">

<h3>
Моделирование
</h3>

<div class="inside">

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

<p>
Создание, настройка и редактирование
объектов трёхмерных сцен.
</p>

</div>

</div>

<div class="card">

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

<div class="inside">

<p>
Создание сложных эффектов
и анимации сцен.
</p>

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

</div>

</div>

</div>

</section>

<section>

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

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

</section>

</main>

<aside class="right">

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

<div class="item">
Филип Миллер<br>
«Трёхмерный мир 3D Studio Max 3»
</div>

<div class="item">
Тед Бродман<br>
«Внутренний мир 3D Studio Max 3»
</div>

<div class="item">
Геннадий Тевин<br>
«3D Studio Max»
</div>

</aside>

</div>

</div>

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

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

</body>
</html>


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

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

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

.center{
font-size:0;
}

.left,
.middle,
.right{
display:inline-block;
vertical-align:top;
font-size:16px;
}

.left{
width:180px;
padding:50px 0 0 20px;
background:#d9f7d9;
}

.nav a{
display:block;
margin-bottom:35px;
font-size:28px;
font-weight:bold;
color:#003399;
text-decoration:none;
}

.nav a:hover{
color:red;
text-decoration:underline;
}

.middle{
width:640px;
background:#fff;
padding:35px;
}

.main-title{
text-align:center;
font-size:42px;
margin-bottom:30px;
}

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

.paragraph a{
color:#003399;
font-weight:bold;
}

.green-title{
text-align:center;
font-size:40px;
margin:40px 0;
}

.cards{
font-size:0;
}

.card{
display:inline-block;
width:45%;
vertical-align:top;
padding:20px;
border:1px solid #ccc;
margin-right:10px;
font-size:16px;
}

.card h3{
text-align:center;
font-size:32px;
}

.inside{
margin-top:20px;
}

.inside img{
vertical-align:top;
margin-right:10px;
}

.inside p{
display:inline-block;
width:70%;
font-size:22px;
line-height:1.5;
vertical-align:top;
}

.links{
font-size:38px;
color:green;
margin-top:40px;
}

.right{
width:250px;
padding:35px 20px;
background:#d9f7d9;
}

.book-title{
text-align:center;
font-size:34px;
margin-bottom:30px;
}

.item{
font-size:24px;
line-height:1.5;
margin-bottom:35px;
}

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

.bottom-text{
text-align:center;
padding:20px 0;
font-size:22px;
font-weight:bold;
}