From e8c2ea8c8fa439918aa13d9f88162165eb5aa486 Mon Sep 17 00:00:00 2001 From: Ortem08 <72299038+Ortem08@users.noreply.github.com> Date: Tue, 2 Apr 2024 17:41:47 +0500 Subject: [PATCH 1/8] first bro --- index.html | 8 +++++++- styles.css | 11 +++++++++++ 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 846cf93..682c849 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,13 @@ - +
+ +
+ +
+ +
\ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..37cbe7f 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,11 @@ +.imgHolder{ + width: 100px; + height: 100px; + overflow: hidden; + position: relative; +} +.imgHolder img { + width: 100%; + height: auto; + position: absolute; +} \ No newline at end of file From 4ecb077e3bcfebf0ef56923a902b66de021f38b6 Mon Sep 17 00:00:00 2001 From: ITSigma Date: Tue, 2 Apr 2024 17:43:14 +0500 Subject: [PATCH 2/8] start modal window --- index.html | 5 +++++ styles.css | 14 ++++++++++++++ 2 files changed, 19 insertions(+) diff --git a/index.html b/index.html index 682c849..70be653 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,11 @@ + +
+

GDGDJDHS

+
+
diff --git a/styles.css b/styles.css index 37cbe7f..2888fe5 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,17 @@ + +.modal_window { + width: 640px; + position: fixed; + top: 50%; + left: 50%; + background-color: aliceblue; + text-align: center; +} + +.modal_window::before { + background-color: black; + /*opacity: 30%;*/ +} .imgHolder{ width: 100px; height: 100px; From 16d69da2ce0a5b30bbfa933e2df5de8ffdc01fa3 Mon Sep 17 00:00:00 2001 From: ITSigma Date: Tue, 2 Apr 2024 18:17:38 +0500 Subject: [PATCH 3/8] start modal window --- index.html | 5 ++++- index.js | 7 ++++++- styles.css | 28 ++++++++++++++++++++++------ 3 files changed, 32 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 70be653..df5677c 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,10 @@
-

GDGDJDHS

+
+ +

GDGDJDHS

+
diff --git a/index.js b/index.js index dd50919..a43d073 100644 --- a/index.js +++ b/index.js @@ -4,4 +4,9 @@ const element = document.querySelector('.myElement'); element.style.color = 'red'; element.style.width = '300px'; -*/ \ No newline at end of file +*/ + +document.querySelector('.modal_window_close').onclick = function () { + document.querySelector('.modal_window').style.display = 'none'; + document.querySelector('.modal_window').style.display = 'none'; +} \ No newline at end of file diff --git a/styles.css b/styles.css index 2888fe5..c18d2e2 100644 --- a/styles.css +++ b/styles.css @@ -1,17 +1,33 @@ .modal_window { - width: 640px; + /*width: 640px;*/ position: fixed; - top: 50%; - left: 50%; + z-index: 1000; + background-color: rgba(0, 0, 0, 0.5); + display: flex; + top: 0; + left: 0; + width: 100%; + height: 100%; + justify-content: center; + align-items: center; +} +.modal_window .modal_window_content { + position: relative; + width: 500px; + height: fit-content; + padding: 10px; background-color: aliceblue; text-align: center; } -.modal_window::before { - background-color: black; - /*opacity: 30%;*/ +.modal_window .modal_window_close { + position: absolute; + top: 5px; + right: 5px; } + + .imgHolder{ width: 100px; height: 100px; From 7eddf9031f4a7bb4131055f16c306f106872818a Mon Sep 17 00:00:00 2001 From: Ortem08 <72299038+Ortem08@users.noreply.github.com> Date: Tue, 2 Apr 2024 18:19:50 +0500 Subject: [PATCH 4/8] 3-4 bro --- index.html | 7 ++++++- index.js | 16 ++++++++++++++++ styles.css | 15 +++++++++++++++ 3 files changed, 37 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index df5677c..ef1b2ed 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ Практика позиционирования - +
@@ -21,6 +21,11 @@
+ +
+
+
+ \ No newline at end of file diff --git a/index.js b/index.js index a43d073..d75b9b6 100644 --- a/index.js +++ b/index.js @@ -6,6 +6,22 @@ element.style.width = '300px'; */ +function move() { + let elem = document.querySelector(".progress-bar"); + let width = 0; + let id = setInterval(frame, 33); + function frame() { + if (width >= 100) { + clearInterval(id); + } + else { + width++; + elem.style.width = width + "%"; + elem.innerHTML = "Loading..."; + } + } +} + document.querySelector('.modal_window_close').onclick = function () { document.querySelector('.modal_window').style.display = 'none'; document.querySelector('.modal_window').style.display = 'none'; diff --git a/styles.css b/styles.css index c18d2e2..7cd63a7 100644 --- a/styles.css +++ b/styles.css @@ -38,4 +38,19 @@ width: 100%; height: auto; position: absolute; +} + +.progress-container { + width: 100%; + background-color: #f1f1f1; +} + +.progress-bar { + width: 0; + height: 30px; + background-color: red; + color: white; + text-align: center; + line-height: 30px; + transition: width 0.3s ease; } \ No newline at end of file From ad300d1c679ea643eabc778a307945a3c33d81cf Mon Sep 17 00:00:00 2001 From: ITSigma Date: Tue, 2 Apr 2024 18:40:41 +0500 Subject: [PATCH 5/8] norm button --- index.html | 11 ++++++----- styles.css | 13 +++++++------ 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index ef1b2ed..669675c 100644 --- a/index.html +++ b/index.html @@ -9,8 +9,12 @@
- -

GDGDJDHS

+
+ +
+
+
+
@@ -22,9 +26,6 @@
-
-
-
diff --git a/styles.css b/styles.css index 7cd63a7..045d053 100644 --- a/styles.css +++ b/styles.css @@ -1,6 +1,5 @@ .modal_window { - /*width: 640px;*/ position: fixed; z-index: 1000; background-color: rgba(0, 0, 0, 0.5); @@ -12,19 +11,21 @@ justify-content: center; align-items: center; } + .modal_window .modal_window_content { + display: flex; + flex-wrap: wrap; position: relative; width: 500px; height: fit-content; padding: 10px; background-color: aliceblue; - text-align: center; + justify-content: flex-end; + align-items: center; + gap: 10px; } +.modal_window_close_container{ -.modal_window .modal_window_close { - position: absolute; - top: 5px; - right: 5px; } From b3f003883817a35ffa020c9c1b5e55ba4c16da71 Mon Sep 17 00:00:00 2001 From: ITSigma Date: Tue, 2 Apr 2024 18:42:36 +0500 Subject: [PATCH 6/8] bolee norm button --- styles.css | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/styles.css b/styles.css index 045d053..9dd499f 100644 --- a/styles.css +++ b/styles.css @@ -13,18 +13,23 @@ } .modal_window .modal_window_content { + position: relative; display: flex; flex-wrap: wrap; - position: relative; width: 500px; height: fit-content; padding: 10px; background-color: aliceblue; - justify-content: flex-end; align-items: center; + justify-content: center; gap: 10px; } + .modal_window_close_container{ + display: flex; + flex-wrap: wrap; + width: 100%; + justify-content: flex-end; } From 2d9e4882650107b46c8085f2c8626ed09aa928a0 Mon Sep 17 00:00:00 2001 From: Ortem08 <72299038+Ortem08@users.noreply.github.com> Date: Tue, 2 Apr 2024 19:00:49 +0500 Subject: [PATCH 7/8] 3-4 bro --- index.html | 6 +++--- index.js | 1 - styles.css | 16 +++++++++++++--- 3 files changed, 16 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 669675c..e5c6e27 100644 --- a/index.html +++ b/index.html @@ -13,20 +13,20 @@
+

LOADING

- + БОЛЬШОЙ ЧЕРНЫЙ ПЕТУХ
- + ЯПОНИЯ
- \ No newline at end of file diff --git a/index.js b/index.js index d75b9b6..daed263 100644 --- a/index.js +++ b/index.js @@ -17,7 +17,6 @@ function move() { else { width++; elem.style.width = width + "%"; - elem.innerHTML = "Loading..."; } } } diff --git a/styles.css b/styles.css index 9dd499f..afef724 100644 --- a/styles.css +++ b/styles.css @@ -48,7 +48,9 @@ .progress-container { width: 100%; - background-color: #f1f1f1; + background-color: gray; + color: black; + position: relative; } .progress-bar { @@ -56,7 +58,15 @@ height: 30px; background-color: red; color: white; - text-align: center; + position: relative; + align-items: center; line-height: 30px; - transition: width 0.3s ease; +} + +.progress-bar-text { + width: 100%; + position: absolute; + top: -10px; + z-index: 3; + text-align: center; } \ No newline at end of file From 9857f510ceb88c75cd2bcd9b16b405e07c3db305 Mon Sep 17 00:00:00 2001 From: ITSigma Date: Tue, 2 Apr 2024 19:50:02 +0500 Subject: [PATCH 8/8] final --- index.html | 8 +++++--- index.js | 3 ++- styles.css | 26 ++++++++++++++++++++++---- 3 files changed, 29 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index e5c6e27..692696b 100644 --- a/index.html +++ b/index.html @@ -12,9 +12,11 @@
-
-

LOADING

-
+
+

LOADING

+
+

LOADING

+
diff --git a/index.js b/index.js index daed263..1ff7d86 100644 --- a/index.js +++ b/index.js @@ -7,7 +7,7 @@ */ function move() { - let elem = document.querySelector(".progress-bar"); + let elem = document.querySelector(".progress-bar1"); let width = 0; let id = setInterval(frame, 33); function frame() { @@ -18,6 +18,7 @@ function move() { width++; elem.style.width = width + "%"; } + elem.style['clipPath'] = `inset(0 ${100-width}% 0 0` } } diff --git a/styles.css b/styles.css index afef724..f050e1e 100644 --- a/styles.css +++ b/styles.css @@ -53,7 +53,16 @@ position: relative; } -.progress-bar { +.progress-bar1 { + height: 30px; + background-color: purple; + color: white; + position: relative; + align-items: center; + line-height: 30px; +} + +.progress-bar2 { width: 0; height: 30px; background-color: red; @@ -63,10 +72,19 @@ line-height: 30px; } -.progress-bar-text { +.progress-bar-text1 { + width: 500px; + position: absolute; + top: -15px; + /*z-index: 3;*/ + text-align: center; +} + +.progress-bar-text2 { width: 100%; + color: blue; position: absolute; - top: -10px; - z-index: 3; + top: -9px; + /*z-index: 3;*/ text-align: center; } \ No newline at end of file