diff --git a/index.html b/index.html index 846cf93..54fdf4e 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,56 @@ - - + +
+
+
+ +
+ + +
+ +
+
+

Ave Maria!

+

Deus Vult!

+ +
+
+
Loading...
+
Loading...
+
+ + +
+ + +
+

Служба Яндекс.Рефераты предназначена для студентов и школьников, дизайнеров и журналистов, создателей научных заявок и отчетов — для всех, кто относится к тексту, как к количеству знаков. + Нажав на кнопку «Написать реферат», вы лично создаете уникальный текст, причем именно от вашего нажатия на кнопку зависит, какой именно текст получится — таким образом, авторские права на реферат принадлежат только вам. + Теперь никто не сможет обвинить вас в плагиате, ибо каждый текст Яндекс.Рефератов неповторим. + Текстами рефератов можно пользоваться совершенно бесплатно, однако при транслировании и предоставлении текстов в массовое пользование ссылка на Яндекс.Рефераты обязательна.

+
+ + + +
+

В.

+
+ + + +
+

Третий блок!

+
+
+ + + +
+
+ + - \ No newline at end of file + diff --git a/index.js b/index.js index dd50919..2cf1cf1 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,26 @@ -/* - Изменить элементу цвет и ширину можно вот так: +const progress = document.querySelector('.progress-fill'); +const progress_text = document.querySelector('.progress-text-fill'); +let width = 0; - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file +const interval = setInterval(() => { + width += 1; + progress.style.width = width + '%'; + if (width >= 100) { + clearInterval(interval); + } +}, 30); + +function modifyModalWindow(visibility){ + const window = document.querySelector(".lightbox"); + window.style.visibility = visibility; + const overlay = document.querySelector(".lightbox-overlay"); + overlay.style.visibility = visibility; +} + +function closeModalWindow(){ + modifyModalWindow("hidden"); +} + +function openModalWindow(){ + modifyModalWindow("visible"); +} diff --git a/styles.css b/styles.css index e69de29..1d02b5f 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,131 @@ +body { + margin: 0; + padding: 0; +} + +.circle-container { + padding: 30px; + display: inline-block; +} + +.circle { + height: 40px; + width: 40px; + border-radius: 50%; + background: red; +} + +.logo-container { + display: flex; + gap: 10px; + margin: 20px; +} + +.logo { + width: 100px; + height: 100px; + object-fit: contain; +} + +.lightbox-overlay { + position: fixed; + top: 0; + height: 100%; + width: 100%; + background: rgba(217, 217, 217, 0.5); +} + +.lightbox { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: 30px; + width: 640px; + background: #d9d9d9; +} + +.lightbox-close { + position: absolute; + top: 15px; + right: 15px; + background: none; + border: none; + font-size: 18px; + cursor: pointer; +} + +.lightbox-button { + margin-top: 20px; + padding: 10px 20px; + background: red; + border: none; +} + +.progress-bar { + position: relative; + width: 100%; + height: 30px; + background-color: white; + border-radius: 5px; + margin: 20px 0; + overflow: hidden; +} + +.progress-fill { + height: 100%; + width: 0; + background-color: red; + position: absolute; + top: 0; + left: 0; + transition: width 1s linear; + z-index: 1; +} + +.progress-text, +.progress-text-fill { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + font-weight: bold; + display: flex; + align-items: center; + justify-content: center; + mix-blend-mode: difference; +} + +.progress-text { + color: black; +} + +.progress-text-fill { + color: white; + z-index: 2; +} + +.accordion input { + display: none; +} + +.accordion label { + display: block; + padding: 10px; + background: #aaa; + border-top: 1px solid #888; +} + +.accordion-content { + max-height: 0; + overflow: scroll; + transition: max-height 0.3s ease; + background: #eee; + padding: 0 10px; +} + +.accordion input:checked + label + .accordion-content { + max-height: 100px; + padding: 10px; +}