Файл: Разработка сайта библиотеки.pdf

А так же вы сможите заказать через сайт любую книгу, бесплатно.<br />

Многие посетители любят читать книги под музыку, и вы тоже сможите это делать специальным аудизаписями на нашем сайте.<br />

Все любят смотреть фильмы во время чтения книги, то вы тоже сможите это делать через наш сайт.<br />

Мы предусмотрели самые веселые по разным стилям фильмы и вы всегда сможите их посмотреть.<br />

<button class="content__button">Читать далее</button></div>

<div class="content__item3"><h3>Информация</h3>

Мы не простая библиотека, а с секретом...<br />

Вы еще сможите через наш специальный форум по бессодовать в талатливыми и юными авторомами, которые делают первые шаги.<br />

А еще вы сможите все подробное узнать, что вас ожидается на сайте.<br />

<button class="content__button">Читать далее</button>

</div>

</body>

</html>

Приложения № 2

Исходный код - Style.css

.wrapper{

width: 60%;

margin:0 auto;

display: grid;

grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;

grid-template-rows: 150px 100px 300px 1fr;

grid-template-areas:"header__item1 header__item1 header__item2 header__item2 header__item3 header__item3"

"menu menu menu menu menu menu"

"main-image main-image main-image main-image main-image main-image"

"content__item1 content__item1 content__item2 content__item2 content__item3 content__item3";

}

.header__item1 {

background:#00CED1;

grid-area: header__item1;

}

.header__item2 {

background:#00CED1;

text-align: center;

grid-area: header__item2;

}

.header__item3 {

background:#00CED1;

color:#fff;

text-align:right;

grid-area: header__item3;

}

.menu {

height: 90px;

background: #fff;

display: flex;

justify-content: space-around;

align-items: center;

grid-area: menu;

}

.menu__item {

text-decoration: none;

display: block;

width: 110px;

color:#000;

font-family:'Times New Roman';

font-size:18px;

font-weight:600;

pedding:1em;

text-align:center;

}

.menu__item:hover {

color:#ff6a00;

}

.main-image {

text-align: center;

margin:0 auto;

grid-area: main-image;

}

.content__item1 {

grid-area:content__item1;

wight: 200px;

text-align:center;

}

.content__item2 {