From 45ea67e1caafe5f5909cc3cf298e71fc49976cb9 Mon Sep 17 00:00:00 2001 From: Anastasia Svalova Date: Tue, 7 Apr 2026 18:54:51 +0500 Subject: [PATCH 1/8] add logo microsoft --- .idea/.gitignore | 10 ++++++++++ index.html | 9 ++++++++- styles.css | 20 ++++++++++++++++++++ 3 files changed, 38 insertions(+), 1 deletion(-) create mode 100644 .idea/.gitignore diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..ab1f416 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,10 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Ignored default folder with query files +/queries/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/index.html b/index.html index 846cf93..2d48dea 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,14 @@ - +
+ +
\ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..6e12189 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,20 @@ +.logos { + display: flex; + gap: 50px; +} + +.logo { + width: 100px; + height: 100px; +} + +.microsoft { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; +} + +.red { background: #f25022; } +.green { background: #7fba00; } +.blue { background: #00a4ef; } +.yellow { background: #ffb900; } \ No newline at end of file From 635fb31e9a370ae40826e4e38cb0630a2602604f Mon Sep 17 00:00:00 2001 From: Felesia302 Date: Tue, 7 Apr 2026 19:08:37 +0500 Subject: [PATCH 2/8] target --- index.html | 5 +++++ styles.css | 36 +++++++++++++++++++++++++++++++++++- 2 files changed, 40 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 2d48dea..05a2177 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,11 @@
+ diff --git a/styles.css b/styles.css index 6e12189..d249e0f 100644 --- a/styles.css +++ b/styles.css @@ -17,4 +17,38 @@ .red { background: #f25022; } .green { background: #7fba00; } .blue { background: #00a4ef; } -.yellow { background: #ffb900; } \ No newline at end of file +.yellow { background: #ffb900; } + +.target { + position: relative; + display: block; +} + +.target div { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 50%; +} + +.circle1 { + width: 100px; + height: 100px; + background-color: #e80012; + z-index: 1; +} + +.circle2 { + width: 66px; + height: 66px; + background-color: #ffffff; + z-index: 2; +} + +.circle3 { + width: 33px; + height: 33px; + background-color: #e80012; + z-index: 3; +} \ No newline at end of file From e6138f7fd4cc207fd1dad5277eb6ebc4a9021170 Mon Sep 17 00:00:00 2001 From: Anastasia Svalova Date: Tue, 7 Apr 2026 19:09:35 +0500 Subject: [PATCH 3/8] add modal html --- index.html | 5 +++++ styles.css | 3 ++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 2d48dea..1e02eb7 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,11 @@
+ +
+ × +

Это модальное окно!

+
\ No newline at end of file diff --git a/styles.css b/styles.css index 6e12189..aa1413c 100644 --- a/styles.css +++ b/styles.css @@ -17,4 +17,5 @@ .red { background: #f25022; } .green { background: #7fba00; } .blue { background: #00a4ef; } -.yellow { background: #ffb900; } \ No newline at end of file +.yellow { background: #ffb900; } + From 882c2d82272a97ce33881f11e91e8a0b00533c58 Mon Sep 17 00:00:00 2001 From: Anastasia Svalova Date: Tue, 7 Apr 2026 19:41:18 +0500 Subject: [PATCH 4/8] add modal window --- .idea/modules.xml | 8 ++++++++ .idea/positioning.iml | 8 ++++++++ .idea/vcs.xml | 6 ++++++ index.html | 6 ++++-- index.js | 14 +++++++++++++- styles.css | 34 ++++++++++++++++++++++++++++++++++ 6 files changed, 73 insertions(+), 3 deletions(-) create mode 100644 .idea/modules.xml create mode 100644 .idea/positioning.iml create mode 100644 .idea/vcs.xml diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..67fa43d --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/positioning.iml b/.idea/positioning.iml new file mode 100644 index 0000000..c956989 --- /dev/null +++ b/.idea/positioning.iml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..35eb1dd --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 6b04588..a87e239 100644 --- a/index.html +++ b/index.html @@ -21,8 +21,10 @@
- × -

Это модальное окно!

+
+ × +

Это модальное окно!

+
diff --git a/index.js b/index.js index dd50919..9842958 100644 --- a/index.js +++ b/index.js @@ -4,4 +4,16 @@ const element = document.querySelector('.myElement'); element.style.color = 'red'; element.style.width = '300px'; -*/ \ No newline at end of file +*/ + +const modal = document.querySelector('.modal'); +const openButton = document.querySelector('.open-button'); +const closeButton = document.querySelector('.close-icon'); + +openButton.onclick = () => { + modal.style.display = 'flex'; +} + +closeButton.onclick = () => { + modal.style.display = 'none'; +} \ No newline at end of file diff --git a/styles.css b/styles.css index 931d61d..be837e3 100644 --- a/styles.css +++ b/styles.css @@ -1,6 +1,7 @@ .logos { display: flex; gap: 50px; + margin-bottom: 30px; } .logo { @@ -51,4 +52,37 @@ height: 33px; background-color: #e80012; z-index: 3; +} + +.modal { + display: none; + position: fixed; + z-index: 1000; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0, 0, 0, 0.4); +} + +.modal-content { + background-color: #fefefe; + padding: 20px; + margin: auto; + width: 640px; + border: 1px solid #888888; +} + +.close-icon { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; +} + +.close-icon:hover, .close-icon:focus { + color: black; + text-decoration: none; + cursor: pointer; } \ No newline at end of file From 87cc0349e609139a4af5e2dd82f493d598fb1db8 Mon Sep 17 00:00:00 2001 From: Anastasia Svalova Date: Tue, 7 Apr 2026 19:50:42 +0500 Subject: [PATCH 5/8] fix css modal --- styles.css | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/styles.css b/styles.css index be837e3..c6a7f29 100644 --- a/styles.css +++ b/styles.css @@ -62,23 +62,28 @@ top: 0; width: 100%; height: 100%; - overflow: auto; background-color: rgba(0, 0, 0, 0.4); + justify-content: center; + align-items: center; } .modal-content { - background-color: #fefefe; + position: relative; padding: 20px; - margin: auto; width: 640px; border: 1px solid #888888; + background-color: #fefefe; } .close-icon { - color: #aaa; - float: right; + position: absolute; + top: 10px; + right: 15px; + font-size: 28px; font-weight: bold; + cursor: pointer; + color: #aaaaaa; } .close-icon:hover, .close-icon:focus { From e88d137e961b40770d7bea8f77e55c8b3407a19b Mon Sep 17 00:00:00 2001 From: Felesia302 Date: Tue, 7 Apr 2026 20:01:27 +0500 Subject: [PATCH 6/8] 3 and 4 --- styles.css | 38 +++++++++++++++++++++++++++++++++++++- 1 file changed, 37 insertions(+), 1 deletion(-) diff --git a/styles.css b/styles.css index c6a7f29..6660304 100644 --- a/styles.css +++ b/styles.css @@ -90,4 +90,40 @@ color: black; text-decoration: none; cursor: pointer; -} \ No newline at end of file +} + +.progress-bar { + position: relative; + width: 400px; + height: 40px; + font-family: sans-serif; + font-size: 15px; + line-height: 40px; + text-align: center; +} + +.layer { + position: absolute; + top: 0; + left: 0; + height: 100%; + white-space: nowrap; +} + +.layer-bg { + width: 100%; + background: #c0c0c0; + color: #000000; +} + +.layer-fill { + background: #ff0000; + overflow: hidden; + z-index: 1; +} + +.fill-text { + width: 400px; + color: #ffffff; +} + From 649fbb9f767374125cf48d1733054183084163cd Mon Sep 17 00:00:00 2001 From: Felesia302 Date: Tue, 7 Apr 2026 20:02:42 +0500 Subject: [PATCH 7/8] 3,4 --- index.html | 4 ++++ index.js | 17 ++++++++++++++++- styles.css | 1 - 3 files changed, 20 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index a87e239..f343e61 100644 --- a/index.html +++ b/index.html @@ -24,6 +24,10 @@
×

Это модальное окно!

+
+
Loading...
+
+
Loading...
diff --git a/index.js b/index.js index 9842958..49815b1 100644 --- a/index.js +++ b/index.js @@ -16,4 +16,19 @@ openButton.onclick = () => { closeButton.onclick = () => { modal.style.display = 'none'; -} \ No newline at end of file +} + +const fill = document.querySelector('.layer-fill'); +const duration = 3000; +const frames = 100; +const step = duration / frames; +let currentWidth = 0; + +const timer = setInterval(() => { + currentWidth++; + fill.style.width = currentWidth + '%'; + + if (currentWidth >= 100) { + clearInterval(timer); + } +}, step); \ No newline at end of file diff --git a/styles.css b/styles.css index 6660304..633a58e 100644 --- a/styles.css +++ b/styles.css @@ -79,7 +79,6 @@ position: absolute; top: 10px; right: 15px; - font-size: 28px; font-weight: bold; cursor: pointer; From b1959730fe7e860208969c308af1a74c20b759a8 Mon Sep 17 00:00:00 2001 From: Anastasia Svalova Date: Tue, 7 Apr 2026 20:08:42 +0500 Subject: [PATCH 8/8] fix --- styles.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/styles.css b/styles.css index 633a58e..a4eadb1 100644 --- a/styles.css +++ b/styles.css @@ -82,7 +82,7 @@ font-size: 28px; font-weight: bold; cursor: pointer; - color: #aaaaaa; + color: #888888; } .close-icon:hover, .close-icon:focus { @@ -116,7 +116,7 @@ } .layer-fill { - background: #ff0000; + background: #e80012; overflow: hidden; z-index: 1; }