From 3c6f94ae3886f6d63965cac878d9e7473782bc3a Mon Sep 17 00:00:00 2001 From: POLINA Date: Tue, 7 Apr 2026 19:00:09 +0500 Subject: [PATCH 1/4] 1 --- index.html | 7 ++++++- styles.css | 13 +++++++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 846cf93..a1995b0 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,12 @@ - +
+ +
+
+ +
\ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..fd209e1 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,13 @@ +.block1 { + width: 100px; + height: 100px; + overflow: hidden; +} + +.img1 { + width: 100%; + height: 100%; + object-fit: contain; +} + + From 1744928d8762533c916712a4363aa28616386cc1 Mon Sep 17 00:00:00 2001 From: egorvts Date: Tue, 7 Apr 2026 19:16:42 +0500 Subject: [PATCH 2/4] 2 --- index.html | 43 +++++++++++++++++++++++++++---------------- index.js | 18 +++++++++++++++++- styles.css | 38 ++++++++++++++++++++++++++++++++++++++ 3 files changed, 82 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index a1995b0..e53d072 100644 --- a/index.html +++ b/index.html @@ -1,17 +1,28 @@ - + - - - Практика позиционирования - - - -
- -
-
- -
- - - \ No newline at end of file + + + Практика позиционирования + + + +
+ +
+
+ +
+ + + +
+

Модальное окно

+ +

Текст модального окна

+
+ +
+ + + + diff --git a/index.js b/index.js index dd50919..37997f7 100644 --- a/index.js +++ b/index.js @@ -4,4 +4,20 @@ const element = document.querySelector('.myElement'); element.style.color = 'red'; element.style.width = '300px'; -*/ \ No newline at end of file +*/ + +document.querySelector(".close-button").addEventListener("click", (event) => { + const element = document.querySelector(".lightbox"); + element.style.display = "none"; + + const element1 = document.querySelector(".overlay"); + element1.style.display = "none"; +}); + +document.querySelector(".open-button").addEventListener("click", (event) => { + const element = document.querySelector(".lightbox"); + element.style.display = "flex"; + + const element1 = document.querySelector(".overlay"); + element1.style.display = "block"; +}); diff --git a/styles.css b/styles.css index fd209e1..fb60eba 100644 --- a/styles.css +++ b/styles.css @@ -10,4 +10,42 @@ object-fit: contain; } +.lightbox { + width: 640px; + display: none; + flex-direction: column; + background-color: ghostwhite; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: 24px; + z-index: 1000; +} + +.x-button { + width: 32px; + height: 32px; + background-color: transparent; + border: none; + font-size: 24px; + position: absolute; + top: 16px; + right: 16px; + cursor: pointer; +} + +.h2 { + padding: 0; +} +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.7); + z-index: 999; + display: none; +} \ No newline at end of file From 36734629df91ae40e57a1bfc307c67ccc25e8111 Mon Sep 17 00:00:00 2001 From: POLINA Date: Tue, 7 Apr 2026 19:43:27 +0500 Subject: [PATCH 3/4] 3 --- index.html | 11 +++++++++++ styles.css | 19 ++++++++++++++++++- 2 files changed, 29 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index e53d072..f94fe99 100644 --- a/index.html +++ b/index.html @@ -19,9 +19,20 @@

Модальное окно

Текст модального окна

+
+

+ Loading... +

+
+

+ Loading... +

+
+
+ diff --git a/styles.css b/styles.css index fb60eba..9ff1eea 100644 --- a/styles.css +++ b/styles.css @@ -48,4 +48,21 @@ background-color: rgba(0, 0, 0, 0.7); z-index: 999; display: none; -} \ No newline at end of file +} + +.progress { + width: 512px; + position: relative; + background: gray; + overflow: hidden; +} + +.red-line { + position: absolute; + top: 0; + left: 0; + width: 50%; + height: 100%; + background: red; + z-index: 1001; +} From 9bf0d109e470517163fc6c93195c87a8bbe22608 Mon Sep 17 00:00:00 2001 From: egorvts Date: Tue, 7 Apr 2026 19:54:13 +0500 Subject: [PATCH 4/4] 4 --- index.html | 23 ++++++++++++++--------- index.js | 17 +++++++++++++++++ 2 files changed, 31 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index f94fe99..9608c58 100644 --- a/index.html +++ b/index.html @@ -20,19 +20,24 @@

Модальное окно

Текст модального окна

-

- Loading... -

-
-

- Loading... -

+

Loading...

+
+

+ Loading... +

+
-
- diff --git a/index.js b/index.js index 37997f7..55ea7d6 100644 --- a/index.js +++ b/index.js @@ -20,4 +20,21 @@ document.querySelector(".open-button").addEventListener("click", (event) => { const element1 = document.querySelector(".overlay"); element1.style.display = "block"; + + const redLine = document.querySelector(".red-line"); + const totalSteps = 128; + const totalDuration = 3000; + const maxWidth = 512; + let step = 0; + + redLine.style.width = "0px"; + + const timer = setInterval(() => { + step += 1; + redLine.style.width = (step * maxWidth) / totalSteps + "px"; + + if (step >= totalSteps) { + clearInterval(timer); + } + }, totalDuration / totalSteps); });