From 0f8b7bbffa4535b1e052272436b3883a47a99253 Mon Sep 17 00:00:00 2001 From: Matvey Lipilin Date: Mon, 3 Apr 2023 18:30:35 +0500 Subject: [PATCH] =?UTF-8?q?=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D0=B0=D0=B5?= =?UTF-8?q?=D0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 86 ++++++++++++++++++++++++++- index.js | 17 ++++-- styles.css | 167 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 262 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 846cf93..e18644e 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,89 @@ - - + + +
+
+
x
+
+ + +
+

+ Amogus is a popular character from the online multiplayer game "Among Us". The character is known + for its cute and cartoonish appearance, as well as its mischievous and sometimes deceitful behavior. +

+
+
+
+ + +
+

+ Штирлиц получил задание узнать, кто из сотрудников шпионской организации является двойным агентом. + Он решил провести тест на лояльность, раздав всем сотрудникам по бутылке водки с ярлыками + "Отравлено" и "Не отравлено". +

+ На следующий день Штирлиц увидел, что все сотрудники пришли на работу, кроме одного - того, кто + получил бутылку с ярлыком "Отравлено". Удивленный Штирлиц спросил у оставшихся сотрудников, как им + удалось определить, какая бутылка была отравлена. +

+ "Очень просто," - ответили сотрудники. "Мы все решили выпить из бутылок с ярлыками 'Не отравлено' - + это было самое безопасное решение". +

+ Штирлиц был поражен настолько, что решил подать в отставку. +

+
+
+
+ + +
+

+ ░█████╗░██████╗░███████╗██╗░░██╗ + ██╔══██╗██╔══██╗██╔════╝██║░░██║ + ██║░░██║██████╔╝█████╗░░███████║ + ██║░░██║██╔═══╝░██╔══╝░░██╔══██║ + ╚█████╔╝██║░░░░░███████╗██║░░██║ + ░╚════╝░╚═╝░░░░░╚══════╝╚═╝░░╚═╝ +

+
+
+ +

Анекдот про CSS

+

Как-то раз CSS и HTML встретились в баре. HTML был очень счастлив, так как был наполнен контентом и имел + ясную структуру. CSS, с другой стороны, был ужасно расстроен, так как никак не мог решить, как ему + стилизовать HTML, чтобы он выглядел привлекательным и красивым. +

+ HTML, чтобы подбодрить своего друга, предложил ему выпить еще один CSS-файл. Однако, поскольку CSS был уже + достаточно пьян, он не мог справиться с этой задачей, и вместо того, чтобы стилизовать HTML, он случайно + попал в JavaScript и стилизовал его вместо того, чтобы изменить внешний вид HTML. +

+ Когда CSS осознал свою ошибку, он извинился перед HTML и JavaScript, но они были уже слишком пьяны, чтобы + заботиться о таких мелочах. И, хотя CSS на следующий день почувствовал себя ужасно, он решил, что никогда + больше не будет пить столько, чтобы случайно изменить внешний вид JavaScript.

+
+
+
+

Loading...

+
+

Loading...

+
+
+ + + \ No newline at end of file diff --git a/index.js b/index.js index dd50919..4214ef9 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,12 @@ -/* - Изменить элементу цвет и ширину можно вот так: +const pbar = document.querySelector('.progress-bar .bg'); +pbar.style.width = '100%'; +const iterations = 100; +const interval = 3000 / iterations; +let i = 0; - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file +setInterval(() => { + pbar.style.width = `${++i}%`; + if (i === iterations) { + i = 0; + } +}, interval); \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..16a4567 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,167 @@ +.microsoft-logo { + width: 100px; + height: 100px; + position: relative; + display: inline-block; +} + +.microsoft-logo .top-left, .microsoft-logo .top-right, .microsoft-logo .bottom-left, .microsoft-logo .bottom-right { + position: absolute; + width: 48%; + height: 48%; +} + +.microsoft-logo .top-left { + top: 0; + left: 0; + background-color: #F65314; +} + +.microsoft-logo .top-right { + top: 0; + right: 0; + background-color: #7CBB00; +} + +.microsoft-logo .bottom-left { + bottom: 0; + left: 0; + background-color: #00A1F1; +} + +.microsoft-logo .bottom-right { + bottom: 0; + right: 0; + background-color: #FBBC09; +} + +.japan-logo { + width: 100px; + height: 100px; + position: relative; + border-radius: 50%; + background-color: #BC002D; + display: inline-block; +} + +.modal-screen { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(45, 45, 45, 0.5); +} + +.modal-window { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 640px; + background-color: white; + border-radius: 15px; + padding: 20px; +} + +.modal-exit { + position: absolute; + top: 0; + right: 0; + width: 30px; + height: 30px; + color: black; + text-align: center; + font-size: x-large; + line-height: 30px; + cursor: pointer; +} + +.progress-bar { + width: 460px; + height: 20px; + background-color: grey; + position: relative; +} + +.progress-bar .progress { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 50%; + background-color: red; +} + +.progress-bar { + background-color: grey; +} + +.progress-bar .bg { + position: relative; + margin: 0; + padding: 0; + height: 100%; + width: 0; + background-color: red; + overflow: hidden; +} + +.progress-bar .text-after, .progress-bar .text-before { + margin: 0; + padding: 0; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; +} + +.progress-bar .text-after { + color: white; + position: absolute; + left: 190px; +} + +.progress-bar .text-before { + color: black; + text-align: center; +} + +.accordion .button { + background: linear-gradient(to bottom, #ccc, #666);; + cursor: pointer; + font-size: 16pt; + padding: 16px; + width: 500px; + box-sizing: border-box; +} + +.accordion .button:hover { + opacity: 0.7; +} + +.accordion .content { + width: 500px; + overflow: hidden; + max-height: 0; + transition: all 0.3s ease-in-out; + box-sizing: border-box; + border: 1px solid black; +} + +.accordion #state1:checked ~ .content { + max-height: 150px; +} + +.accordion #state2:checked ~ .content { + max-height: 400px; +} + +.accordion #state3:checked ~ .content { + max-height: 200px; +} + +.accordion .inner { + margin: 16px; +} \ No newline at end of file