From 8072c3e1914bacffb63ccdd387a4c39fb19082ee Mon Sep 17 00:00:00 2001 From: vbolgarskay Date: Tue, 8 Apr 2025 16:14:30 +0500 Subject: [PATCH 1/4] feat: 1 task 'logo' --- index.html | 3 ++- styles.css | 8 ++++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 846cf93..6e4afdc 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,8 @@ - + + \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..5e68205 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,8 @@ +.square_logo { + border: 1px solid #222; + overflow: hidden; + width: 100px; + height: 100px; + margin: 10px; + } + \ No newline at end of file From 821ddd03967356a9e4adc4dbe5e5c6d6c35385ff Mon Sep 17 00:00:00 2001 From: vbolgarskay Date: Tue, 8 Apr 2025 17:02:48 +0500 Subject: [PATCH 2/4] feat: 2 task 'ligthbox' --- index.html | 16 ++++++++++-- index.js | 27 +++++++++++++++++++- styles.css | 75 ++++++++++++++++++++++++++++++++++++++++++++++++------ 3 files changed, 107 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 6e4afdc..e209663 100644 --- a/index.html +++ b/index.html @@ -6,8 +6,20 @@ - - + + + + + + + +
+ \ No newline at end of file diff --git a/index.js b/index.js index dd50919..f4421cb 100644 --- a/index.js +++ b/index.js @@ -4,4 +4,29 @@ const element = document.querySelector('.myElement'); element.style.color = 'red'; element.style.width = '300px'; -*/ \ No newline at end of file +*/ + +document.addEventListener('DOMContentLoaded', function() { + const modal = document.getElementById('modal'); + const overlay = document.getElementById('overlay'); + const openModalBtn = document.getElementById('openModalBtn'); + const closeModalBtn = document.getElementById('closeModalBtn'); + + openModalBtn.addEventListener('click', function() { + modal.style.display = 'block'; + overlay.style.display = 'block'; + document.body.style.overflow = 'hidden'; + }); + + closeModalBtn.addEventListener('click', function() { + modal.style.display = 'none'; + overlay.style.display = 'none'; + document.body.style.overflow = ''; + }); + + overlay.addEventListener('click', function() { + modal.style.display = 'none'; + overlay.style.display = 'none'; + document.body.style.overflow = ''; + }); +}); \ No newline at end of file diff --git a/styles.css b/styles.css index 5e68205..2417125 100644 --- a/styles.css +++ b/styles.css @@ -1,8 +1,67 @@ -.square_logo { - border: 1px solid #222; - overflow: hidden; - width: 100px; - height: 100px; - margin: 10px; - } - \ No newline at end of file +.square-logo { + border: 1px solid #222; + overflow: hidden; + width: 100px; + height: 100px; + margin: 10px; +} + +.overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.7); + z-index: 1000; + display: none; +} + +.modal { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 640px; + max-width: 90%; + background: white; + border-radius: 8px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); + z-index: 1001; + display: none; +} + +.modal-content { + padding: 30px; +} + +.close-btn { + position: absolute; + top: 15px; + right: 15px; + background: none; + border: none; + font-size: 24px; + cursor: pointer; + color: #777; + padding: 5px; + line-height: 1; +} + +.close-btn:hover { + color: #333; +} + +.btn { + background: #4CAF50; + color: white; + border: none; + padding: 10px 20px; + cursor: pointer; + border-radius: 4px; + font-size: 16px; +} + +.btn:hover { + background: #45a049; +} From 377734482c5b968430146717a01599abc7681d55 Mon Sep 17 00:00:00 2001 From: vbolgarskay Date: Tue, 8 Apr 2025 17:54:08 +0500 Subject: [PATCH 3/4] feat: 3 and 4 task 'progress bar' --- index.html | 29 +++++++++------ index.js | 106 +++++++++++++++++++++++++++++++++++++---------------- styles.css | 60 ++++++++++++++++++++++++++---- 3 files changed, 143 insertions(+), 52 deletions(-) diff --git a/index.html b/index.html index e209663..4322ff9 100644 --- a/index.html +++ b/index.html @@ -1,25 +1,30 @@ - - + + Практика позиционирования - - - - - + + + + + +
+
+ + +
+

+ HTML (HyperText Markup Language) - это стандартный язык разметки + для создания веб-страниц. Он определяет структуру и содержание + веб-страницы, используя различные элементы и теги. +

+
+
+ +
+ + +
+

+ CSS (Cascading Style Sheets) - это язык стилей, который + определяет внешний вид HTML-документов. Основные принципы + включают каскадирование, наследование и специфичность + селекторов. +

+
+
+ +
+ + +
+

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

+
+
+
diff --git a/styles.css b/styles.css index 2e6be30..61add0b 100644 --- a/styles.css +++ b/styles.css @@ -109,3 +109,64 @@ .white-text { color: #fff; } + +.accordion { + width: 100%; + margin-bottom: 20px; +} + +.accordion-item { + margin-bottom: 8px; + border: 1px solid #ddd; + border-radius: 4px; + overflow: hidden; +} + +.accordion-input { + display: none; +} + +.accordion-label { + display: block; + padding: 12px 20px; + background-color: #f5f5f5; + color: #333; + cursor: pointer; + font-weight: bold; + transition: background-color 0.3s; + position: relative; +} + +.accordion-label:hover { + background-color: #e9e9e9; +} + +.accordion-label::after { + content: '+'; + position: absolute; + right: 20px; + font-size: 18px; + transition: transform 0.3s; +} + +.accordion-input:checked ~ .accordion-label::after { + content: '-'; +} + +.accordion-content { + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease-out; + padding: 0 20px; + background-color: #fff; +} + +.accordion-input:checked ~ .accordion-content { + max-height: 300px; + padding: 15px 20px; +} + +.accordion-content p { + margin: 0; + padding: 5px 0; +}