From f2d39bd6e60b4b4b8dc3027f7b841f971a2166db Mon Sep 17 00:00:00 2001 From: VladaKhazova Date: Tue, 8 Apr 2025 16:04:21 +0500 Subject: [PATCH 1/8] add anime --- index.html | 4 +++- styles.css | 23 +++++++++++++++++++++++ 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 846cf93..31fdc70 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,9 @@ - +
+
+
\ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..11c3acb 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,23 @@ +body { + background-color: #fff; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.japan { + width: 100px; + height: 100px; + display: flex; + justify-content: center; + align-items: center; +} + +.circle { + width: 100px; + height: 100px; + background-color: #BC002C; + border-radius: 50%; +} From f437a31f58b5c8fd53907b95aa2160d184fed6d8 Mon Sep 17 00:00:00 2001 From: kitekatya Date: Tue, 8 Apr 2025 16:04:58 +0500 Subject: [PATCH 2/8] =?UTF-8?q?add=20=F0=9F=A4=A9=F0=9F=A4=A9=F0=9F=A4=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .idea/.gitignore | 8 ++++++++ .idea/modules.xml | 8 ++++++++ .idea/positioning.iml | 12 ++++++++++++ .idea/vcs.xml | 6 ++++++ index.html | 6 +++++- styles.css | 36 ++++++++++++++++++++++++++++++++++++ 6 files changed, 75 insertions(+), 1 deletion(-) create mode 100644 .idea/.gitignore create mode 100644 .idea/modules.xml create mode 100644 .idea/positioning.iml create mode 100644 .idea/vcs.xml diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..13566b8 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.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..24643cc --- /dev/null +++ b/.idea/positioning.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ 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 846cf93..f92f86d 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,11 @@ - +
+
+
+
+
\ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..383d9ea 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,36 @@ +.log1 { + position: relative; + width: 100px; + height: 100px; + top: 10px; + left: 10px; + border-radius: 50%; +} + +.log1 div { + position: absolute; + width: 25px; + height: 50px; + background: black; + clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); + transform: rotate(0deg); +} + +.log1 div.block1 { + top: 0; + left: 25%; + transform: translate(15%, 25%) rotate(0deg); +} + +.log1 div.block2 { + bottom: 0; + left: 0; + transform: translateX(25%) rotate(60deg); +} + +.log1 div.block3 { + bottom: 0; + right: 0; + transform: translateX(-90%) rotate(300deg); +} + From ef40fa12ff37bffb1925f681c8b5dca3c94877b0 Mon Sep 17 00:00:00 2001 From: VladaKhazova Date: Tue, 8 Apr 2025 16:32:43 +0500 Subject: [PATCH 3/8] add progress bar geo --- index.html | 30 ++++++++++++++++++++++-------- index.js | 21 ++++++++++++++------- styles.css | 39 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 75 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index d73b6ca..84acfa0 100644 --- a/index.html +++ b/index.html @@ -6,14 +6,28 @@ -
-
-
-
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/index.js b/index.js index dd50919..eefe7eb 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,14 @@ -/* - Изменить элементу цвет и ширину можно вот так: - - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file +const element = document.querySelector('.progress'); +let current = 0; +const totalFrames = 180; +const duration = 3000; +const intervalTime = duration / totalFrames; +const step = 100 / totalFrames; +const interval = setInterval(() => { + current += step; + if (current >= 100) { + current = 100; + clearInterval(interval); + } + element.style.width = current + '%'; +}, intervalTime); \ No newline at end of file diff --git a/styles.css b/styles.css index 1434061..f2c743e 100644 --- a/styles.css +++ b/styles.css @@ -57,3 +57,42 @@ body { transform: translateX(-90%) rotate(300deg); } +.progress-bar { + position: relative; + width: 300px; + height: 40px; + background-color: #ccc; + overflow: hidden; + margin: 20px auto; + font-weight: bold; + font-size: 18px; + display: flex; + justify-content: center; + align-items: center; +} + +.progress-text.back { + color: black; + z-index: 1; +} + +.progress { + position: absolute; + top: 0; + left: 0; + width: 0; + height: 100%; + background-color: red; + z-index: 2; + overflow: hidden; +} + +.progress-text.front { + color: white; + text-align: center; + line-height: 40px; + z-index: 3; + position: absolute; + width: 300px; + left: 0; +} From fa92cef92768f1348d69a6cc7341273cd762bd7b Mon Sep 17 00:00:00 2001 From: kitekatya Date: Tue, 8 Apr 2025 16:33:44 +0500 Subject: [PATCH 4/8] add windiws (and mac) --- index.html | 27 +++++++++++---- styles.css | 96 +++++++++++++++++++++++++++++++++++++++++++++++------- 2 files changed, 105 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index d73b6ca..8901c4f 100644 --- a/index.html +++ b/index.html @@ -6,14 +6,29 @@ -
-
-
-
+
+
+
+
+
+
+
+
+
-
-
+ + + \ No newline at end of file diff --git a/styles.css b/styles.css index 1434061..5be91ad 100644 --- a/styles.css +++ b/styles.css @@ -1,18 +1,18 @@ body { - background-color: #fff; + margin: 10px; +} + +.container { display: flex; - justify-content: center; - align-items: center; - height: 100vh; - margin: 0; + gap: 10px; } .japan { width: 100px; height: 100px; - display: flex; justify-content: center; align-items: center; + border: 1px solid black; } .circle { @@ -21,13 +21,12 @@ body { background-color: #BC002C; border-radius: 50%; } + .log1 { position: relative; width: 100px; height: 100px; - top: 10px; - left: 10px; - border-radius: 50%; + border: 1px solid black; } .log1 div { @@ -42,18 +41,91 @@ body { .log1 div.block1 { top: 0; left: 25%; - transform: translate(15%, 25%) rotate(0deg); + transform: translate(50%, 25%) rotate(0deg); } .log1 div.block2 { bottom: 0; left: 0; - transform: translateX(25%) rotate(60deg); + transform: translateX(60%) rotate(60deg); } .log1 div.block3 { bottom: 0; right: 0; - transform: translateX(-90%) rotate(300deg); + transform: translateX(-60%) rotate(300deg); +} + +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; + z-index: 999; +} + +.modal { + background: #fff; + width: 640px; + max-width: 90%; + border-radius: 8px; + padding: 20px 30px; + position: relative; + box-shadow: 0 10px 30px rgba(0,0,0,0.3); +} + +.close-btn { + position: absolute; + top: 15px; + right: 20px; + font-size: 22px; + font-weight: bold; + color: #999; + cursor: pointer; + border: none; + background: none; +} + +.close-btn:hover { + color: #000; +} + +.modal h2 { + margin-top: 0; +} + +.modal p { + line-height: 1.5; +} + +.modal a { + color: #007bff; + text-decoration: none; +} + +.modal a:hover { + text-decoration: underline; +} + +.modal .footer-button { + margin-top: 20px; +} + +.footer-button button { + padding: 10px 20px; + background: #5cae69; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; +} + +.footer-button button:hover { + background: #4b9c5b; } From 4fdad0cee9aa9bc19592c44cc4c40b50dd34ee5f Mon Sep 17 00:00:00 2001 From: VladaKhazova Date: Tue, 8 Apr 2025 16:50:03 +0500 Subject: [PATCH 5/8] add accordeonisso fronteniso --- index.html | 23 +++++++++++++++++++++++ styles.css | 38 +++++++++++++++++++++++++++++++++++++- 2 files changed, 60 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 50ce866..e051a09 100644 --- a/index.html +++ b/index.html @@ -29,6 +29,29 @@

That's all, folks

Loading...
+
+
+ + +
+ Медиа — это каналы передачи информации: телевидение, радио, интернет, печатные издания и многое другое. +
+
+
+ + +
+ Интернет возник как исследовательский проект ARPANET в США и стал основой глобальной информационной среды. +
+
+
+ + +
+ Социальные сети изменили способы общения, сделав возможным мгновенное взаимодействие между людьми по всему миру. +
+
+
diff --git a/styles.css b/styles.css index 7dae589..3ed3dc3 100644 --- a/styles.css +++ b/styles.css @@ -136,7 +136,6 @@ body { background-color: #ccc; overflow: hidden; margin: 20px auto; - font-weight: bold; font-size: 18px; display: flex; justify-content: center; @@ -168,3 +167,40 @@ body { width: 300px; left: 0; } +.accordion { + margin-top: 30px; +} + +.accordion-item { + border: 1px solid #ccc; + margin-bottom: 10px; + border-radius: 4px; + overflow: hidden; +} + +.accordion-title { + display: block; + padding: 15px; + background-color: #f2f2f2; + cursor: pointer; + font-weight: bold; + transition: background-color 0.3s; +} + +.accordion-title:hover { + background-color: #e0e0e0; +} + +.accordion-content { + max-height: 0; + overflow: hidden; + transition: max-height 0.5s ease, padding 0.3s ease; + padding: 0 15px; + background: #fafafa; +} + +input[type="checkbox"]:checked ~ .accordion-content { + max-height: 200px; + padding: 15px; +} + From 951c38ffe73feba931d5602531c0ed84ea37918a Mon Sep 17 00:00:00 2001 From: kitekatya Date: Tue, 8 Apr 2025 17:01:56 +0500 Subject: [PATCH 6/8] =?UTF-8?q?add=20=D0=BD=D0=B5=20=D0=BA=D1=80=D0=B8?= =?UTF-8?q?=D0=BD=D0=B6=20=D0=B0=20=D0=BF=D1=80=D0=B8=D0=BA=D0=BE=D0=BB=20?= =?UTF-8?q?=D0=BD=D0=B0=D0=B4=D0=BF=D0=B8=D1=81=D0=B8=20=D0=B4=D0=BB=D1=8F?= =?UTF-8?q?=20=D0=BC=D0=B5=D0=BD=D1=8F=20(=D0=BD=D0=B0=D1=81)=20(=D0=B2?= =?UTF-8?q?=D0=B0=D1=81)=20(=D0=B0=D1=81)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 16 ++++++++-------- styles.css | 2 +- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index e051a09..962a767 100644 --- a/index.html +++ b/index.html @@ -20,9 +20,9 @@