https://pastein.ru/t/4UA
Загрузка данных
<!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">
<h1>3D Studio Max 5</h1>
</header>
<div class="main">
<aside class="sidebar">
<nav class="menu" aria-label="Основное меню">
<a href="#">Главная</a>
<a href="#">Учебник</a>
<a href="#">Помощь</a>
<a href="#">Форум</a>
</nav>
</aside>
<main class="content">
<section class="intro">
<h2 class="title">
О чем и для кого эта книга
</h2>
<article>
<p class="text">
В последние времена появилось очень много программ
для моделирования анимации и визуализации
трехмерных сцен. Каждая из них по-своему хороша,
однако лучшее сочетание простоты управления
и эффективности можно встретить лишь у одной
из них. Речь идет о 3D Studio Max.
</p>
<p class="text">
Действительно, став самой распространенной
и мощной программой, 3D Studio Max обратил
на себя внимание не только новичков,
но и профессионалов.
</p>
<p class="text">
Из названия книги следует, что данный курс
создан для освоения начального уровня работы
с основными возможностями 3D Studio Max.
</p>
</article>
</section>
<section class="book-sections">
<h2 class="sections-title">
Разделы книги:
</h2>
<div class="sections">
<article class="section-block">
<h3 class="section-name">
Моделирование
</h3>
<div class="section-content">
<figure>
<img src="gaga.jpg"
width="70"
alt="Иконка моделирования">
<figcaption class="text-small">
Раздел <a href="#">"Моделирование"</a>
посвящён созданию,
настройке и редактированию
объектов трёхмерных сцен.
</figcaption>
</figure>
</article>
<article class="section-block">
<h3 class="section-name">
Анимация
</h3>
</div>
<div class="section-content">
<figure>
<figcaption class="text-small">
Именно для реализации
сложных эффектов
и <a href="#">анимации </a> трёхмерных сцен
существует Animation MAX.
</figcaption>
<img src="images.jpg"
width="70"
alt="Иконка анимации">
</figure>
</div>
</article>
</div>
</section>
<section class="links-section">
<h2 class="links-title">
Дополнительные ссылки:
</h2>
<p class="text">
Краткое практическое задание содержится
в проектах Max на
<a href="#">сайте </a>
издательства по адресу <a href="#">www.diasoft.kiev.ua </a>.
</p>
<address class="text">
Все желающие могут обращаться с вопросами,
советами и замечаниями по e-mail:books@diasoft.kiev.ua-Издательство
<a href="">
"Диасофт"
</a>
</address>
</section>
</main>
<aside class="rightbar">
<section>
<h2 class="books-title">
Дополнительная литература
</h2>
<ul class="books-list">
<li class="book">
<article>
<h3>Филип Миллер</h3>
<p>«Трёхмерный мир 3D Studio Max 3»</p>
<p>ISBN 000-7333-14-8</p>
</article>
</li>
<li class="book">
<article>
<h3>Тед Бродман</h3>
<p>«Внутренний мир 3D Studio Max 3»</p>
<p>ISBN 000-7333-37-2</p>
</article>
</li>
<li class="book">
<article>
<h3>Геннадий Тевин</h3>
<p>«3D Studio Max. Эффективный самоучитель»</p>
<p>ISBN 000-7333-37-2</p>
</article>
</li>
<li class="book">
<article>
<h3>Кол Ли</h3>
<p>«3D Studio Max V4»</p>
<p>ISBN 000-7333-31-1</p>
</article>
</li>
<li class="book">
<article>
<h3>А.К. Кушик</h3>
<p>«Adobe Photoshop 7.0»</p>
<p>ISBN 000-7992-15-2</p>
</article>
</li>
</ul>
</section>
</aside>
</div>
</div>
<footer class="footer">
<marquee>www.modern-computer</marquee>
</footer>
<div class="after-footer">
<small>Создание сайта Москва цена</small>
</div>
</body>
</html>
body{
margin:0;
background:#ffffff;
font-family:Arial,sans-serif;
}
.wrapper{
width:1200px;
margin:20px auto 0;
background:#c8f5c9;
}
.header{
text-align:center;
padding:30px 0;
}
.header h1{
margin:0;
font-size:42px;
font-weight:bold;
color:#003399;
}
.main{
display:flex;
align-items:stretch;
}
.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{
flex:1;
background:#ffffff;
padding:35px;
}
.intro{
margin-bottom:20px;
}
.title{
text-align:center;
font-size:42px;
font-weight:bold;
padding-bottom:30px;
color:#111111;
margin:0;
}
.text{
font-size:24px;
line-height:1.6;
text-align:justify;
padding-bottom:20px;
margin:0;
}
.text a{
color:#003399;
font-weight:bold;
text-decoration:underline;
}
.text a:hover{
color:red;
}
.book-sections{
margin-top:20px;
}
.sections-title{
text-align:center;
font-size:40px;
font-weight:bold;
padding:40px 0;
margin:0;
}
.sections{
display:flex;
gap:20px;
}
.section-block{
width:50%;
padding:20px;
border:1px solid #cccccc;
background:#fafafa;
}
.section-name{
text-align:center;
font-size:34px;
font-weight:bold;
padding-bottom:20px;
margin:0;
}
.section-content{
display:flex;
align-items:flex-start;
gap:15px;
}
.section-content figure{
margin:0;
display:flex;
gap:15px;
align-items:flex-start;
}
.section-content img{
display:block;
}
.text-small{
font-size:22px;
line-height:1.5;
text-align:justify;
margin:0;
}
/* LINKS SECTION */
.links-section{
margin-top:20px;
}
.links-title{
color:green;
font-size:38px;
font-weight:bold;
padding:40px 0 20px;
margin:0;
}
address{
font-style:normal;
}
.rightbar{
width:300px;
background:#d9f7d9;
padding:35px 20px;
}
.books-title{
text-align:center;
font-size:36px;
font-weight:bold;
padding-bottom:30px;
margin:0;
}
.books-list{
list-style:none;
padding:0;
margin:0;
}
.book{
font-size:24px;
line-height:1.5;
padding-bottom:35px;
}
.book article{
border-bottom:1px solid #bbbbbb;
padding-bottom:20px;
}
.book:last-child article{
border-bottom:none;
}
.book h3{
margin:0 0 10px;
font-size:26px;
color:#003399;
}
.book p{
margin:5px 0;
}
.footer{
width:100%;
height:80px;
background:#123fb8;
color:#ffffff;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
}
.footer p{
margin:0;
font-size:28px;
font-weight:bold;
}
.after-footer{
text-align:center;
padding:20px 0;
}
.after-footer small{
font-size:22px;
font-weight:bold;
color:#333333;
}