Добавлен: 16.02.2024
Просмотров: 62
Скачиваний: 0
А так же вы сможите заказать через сайт любую книгу, бесплатно.<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 {