-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
58 lines (47 loc) · 2.02 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="ru">
<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>Modals js</title>
<link rel="stylesheet" href="./css/style.css">
<script src="./js/script.js" defer></script>
</head>
<body>
<header class="header">
<nav class="navigation">
<a href="#first">Первый блок</a>
<a href="#second">Второй блок</a>
</nav>
</header>
<section class="section" id="first">
<h1 class="section__title">Модальное окно</h1>
<button class="section__button section__button1">Открыть</button>
</section>
<section class="section" id="second">
<h1 class="section__title">Модальное окно</h1>
<button class="section__button section__button2">Открыть 2</button>
</section>
<div class="modal modal1">
<div class="modal__main">
<h2 class="modal__title">Модальное окно</h2>
<div class="modal__container">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum doloremque unde perferendis.</p>
</div>
<button class="modal__btn">Кнопка</button>
<button class="modal__close">✖</button>
</div>
</div>
<div class="modal modal2">
<div class="modal__main">
<h2 class="modal__title">Модальное окно 2</h2>
<div class="modal__container">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum doloremque unde perferendis.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea accusantium aperiam, quis commodi incidunt amet quidem vero ut possimus sed veniam aliquam eum, in porro consequuntur impedit deserunt sequi velit quisquam quod suscipit. Consequuntur, facere earum, iusto sit odit aperiam ipsam illo architecto autem esse eos eius maiores quam magnam?</p>
</div>
<button class="modal__close">✖</button>
</div>
</div>
</body>
</html>