W2P2 done
This commit is contained in:
parent
7908f6eb2e
commit
12bd25c553
2 changed files with 163 additions and 0 deletions
121
w2/p2/index.html
Normal file
121
w2/p2/index.html
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
|
||||
<style>
|
||||
#mainpart {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
#actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.menu-type-two {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.highlighted {
|
||||
background-color: yellow !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="actions">
|
||||
<button id="btn-copy-menu">Скопировать меню в конец абзаца</button>
|
||||
<button id="btn-change-css">Поменять цвета .menu-type-two на случайный цвет</button>
|
||||
<input id="search-bar" type="text" placeholder="Текст для поиска">
|
||||
</div>
|
||||
<br><br><br><br><br>
|
||||
<div id="mainpart">
|
||||
<div style="flex: 10%">
|
||||
<h3>Меню:</h3>
|
||||
<ul id="menu">
|
||||
<li class="menu-type-one">Пользователи</li>
|
||||
<li class="menu-type-two">Статус аккаунта</li>
|
||||
<li class="menu-type-two">Личный кабинет</li>
|
||||
<li class="menu-type-one">Обзорная панель</li>
|
||||
<li class="menu-type-two">Календарь событий</li>
|
||||
<li class="menu-type-one">Личные файлы</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p id="paragraph" style="flex: 90%">
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
|
||||
Repellat illo qui unde labore magnam earum aspernatur,
|
||||
impedit temporibus ex eius architecto corrupti. Facere
|
||||
aliquid iure temporibus velit quod, sit minima suscipit
|
||||
nihil, debitis labore quas animi. Laudantium repellat
|
||||
reiciendis recusandae? Saepe reprehenderit repudiandae
|
||||
neque quasi recusandae nihil, dolorum voluptate labore?
|
||||
Quis, iusto pariatur! Quas necessitatibus voluptatibus
|
||||
perferendis dicta ipsam eius cumque sapiente atque
|
||||
laudantium, autem delectus culpa, labore itaque quod
|
||||
omnis tenetur ratione beatae. Quo sunt quidem incidunt
|
||||
accusamus aliquam inventore maxime et qui similique minus
|
||||
laudantium sapiente, minima quas modi vel error quasi
|
||||
consequatur odit magnam non cum? Et nesciunt quaerat
|
||||
maxime delectus sit doloremque. A deserunt aliquam ullam
|
||||
tempora rem libero. Quidem voluptatum commodi ab aut earum
|
||||
exercitationem praesentium recusandae architecto! Ipsum
|
||||
officia, repellendus mollitia ea eum nemo soluta debitis quo
|
||||
ad esse incidunt dolores labore dignissimos laudantium
|
||||
similique laborum tenetur corrupti, quaerat qui ut iste
|
||||
delectus. Hic dolorum dolor dolore nemo excepturi error iuto,
|
||||
autem impedit quam modi quae corrupti necessitatibus iste,
|
||||
earum, quas aliquid distinctio consectetur aut. Eum vitae
|
||||
voluptatum repellat facilis dicta. Omnis veniam repellat
|
||||
earum, libero eveniet fugit, doloribus nihil perferendis
|
||||
maiores necessitatibus vitae repellendus odit impedit dolores
|
||||
fugiat similique accusantium explicabo voluptatem obcaecati
|
||||
nam tenetur temporibus unde quibusdam. Non facere, tempore
|
||||
soluta sunt molestias recusandae quasi a necessitatibus,
|
||||
illum dolore temporibus! Voluptatum aspernatur ipsum iste
|
||||
impedit! Nemo, alias esse architecto aliquid iusto beatae
|
||||
dolores dolore deserunt consequatur facere omnis consectetur
|
||||
eaque voluptatibus nam nihil quo ratione commodi laborum!
|
||||
Voluptas quasi, quas alias ratione harum excepturi quis,
|
||||
voluptates ipsa repellendus perspiciatis vel aliquid maiores
|
||||
id saepe repellat sunt omnis eos? Atque quod dolore debitis
|
||||
facilis laudantium enim illum ex, ut quasi quo id tempore
|
||||
eveniet omnis nemo obcaecati officia quis, provident
|
||||
voluptate, dolores molestias hic corrupti laborum magni
|
||||
voluptates! Deserunt sequi tempora nemo corrupti commodi
|
||||
quibusdam temporibus nam dicta. Odit suscipit minus ipsum
|
||||
recusandae dolorum alias est ratione in deserunt reiciendis ex
|
||||
=esse id accusantium rem ullam amet excepturi facilis,
|
||||
laboriosam eius! Accusamus, repellendus illum excepturi
|
||||
voluptates impedit hic aliquam similique laborum suscipit amet,
|
||||
expedita ad, unde vel reiciendis alias perferendis! Dolor
|
||||
deserunt at minus ab voluptatem provident? Labore ex, neque
|
||||
necessitatibus optio vitae maiores nam cum expedita nihil
|
||||
exercitationem cupiditate id officiis rerum voluptatum velit.
|
||||
Nihil soluta provident similique illo totam, numquam
|
||||
reprehenderit fugiat aut labore perferendis ipsa neque corrupti
|
||||
laudantium quos explicabo sit placeat omnis ducimus ipsam est cum.
|
||||
Ut beatae reprehenderit nobis culpa voluptatum, aliquid mollitia
|
||||
delectus voluptatem eum. Omnis odio ducimus dolorem quisquam illo
|
||||
est ab atque expedita, quibusdam quo consequuntur fugiat
|
||||
exercitationem commodi quae. Voluptas voluptatem fugit velit
|
||||
tempore quia similique tenetur perferendis earum repellat dolor
|
||||
esse placeat nam dolore, itaque voluptates facilis iste ea modi
|
||||
beatae dignissimos et cumque dicta sapiente? Fugit saepe dolores
|
||||
deleniti! Alias accusamus, corrupti magnam facilis libero blanditiis,
|
||||
ut dignissimos illum eaque officia saepe sit totam fugiat architecto
|
||||
aperiam exercitationem labore ipsum vero temporibus animi nihil.
|
||||
Molestias in nostrum ratione tempora eaque eius quasi voluptate
|
||||
ducimus labore, odio rem. Deleniti accusantium tempora officiis
|
||||
perferendis.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<script src="./app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue