kontur-web-courses · Roman-A113 · Apr 7, 2026 · Apr 7, 2026 · Apr 7, 2026 · Apr 7, 2026
diff --git a/index.html b/index.html
@@ -1,12 +1,93 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <title>Практика позиционирования</title>
     <link rel="stylesheet" href="styles.css">
 </head>
+
 <body>
-    <!--Верстать тут-->
+    <div class="logo-container">
+        <div class="circle1">
+            <div class="circle2">
+                <div class="circle3"></div>
+            </div>
+        </div>
+    </div>
+    <div class="logo-container">
+        <div class="letter-container">B</div>
+        <div class="letter-container">B</div>
+        <div class="letter-container">C</div>
+    </div>
+    <div class="progress-bar-container">
+        <div class="progress-bar-external">
+            <div class="loading text-black">Loading...</div>
+
+            <div class="progress-bar-inner">
+                <div class="loading text-white">Loading...</div>
+            </div>
+        </div>
+    </div>
+    <button class="open-box" type="button" id="openBtn">Открыть модальное окно</button>
+    <div class="lightbox-overlay hidden" id="overlay">
+        <div class="lightbox">
+            <button class="close-button" type="button" id="closeBtn" aria-label="Закрыть">
+                &times;
+            </button>
+
+            <h1>Это модальное окно</h1>
+
+            <div class="accordion">
+                <div class="accordion-item">
+                    <input type="checkbox" id="acc1" class="accordion-toggle">
+                    <label for="acc1" class="accordion-title">Section 1</label>
+                    <div class="accordion-content">
+                        <p>
+                            Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты.
+                            Снова коварных текста языкового составитель дорогу агентство.
+                        </p>
+                        <ul>
+                            <li>Первый пункт</li>
+                            <li>Второй пункт</li>
+                            <li>Третий пункт</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="accordion-item">
+                    <input type="checkbox" id="acc2" class="accordion-toggle">
+                    <label for="acc2" class="accordion-title">Section 2</label>
+                    <div class="accordion-content">
+                        <p>
+                            Равным образом реализация намеченных плановых заданий позволяет оценить значение
+                            соответствующих условий активизации.
+                        </p>
+                        <p>
+                            Не следует, однако, забывать, что рамки и место обучения кадров играет важную роль.
+                        </p>
+                    </div>
+                </div>
+
+                <div class="accordion-item">
+                    <input type="checkbox" id="acc3" class="accordion-toggle">
+                    <label for="acc3" class="accordion-title">Section 3</label>
+                    <div class="accordion-content">
+                        <p>
+                            Значимость этих проблем настолько очевидна, что новая модель организационной деятельности
+                            способствует подготовке и реализации новых предложений.
+                        </p>
+                        <ul>
+                            <li>List item one</li>
+                            <li>List item two</li>
+                            <li>List item three</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
     <script src="index.js"></script>
 </body>
+
 </html>
diff --git a/index.js b/index.js
@@ -1,7 +1,26 @@
-/*
-    Изменить элементу цвет и ширину можно вот так:
 
-    const element = document.querySelector('.myElement');
-    element.style.color = 'red';
-    element.style.width = '300px';
-*/
+const openBtn = document.getElementById('openBtn');
+const closeBtn = document.getElementById('closeBtn');
+const overlay = document.getElementById('overlay');
+
+openBtn.addEventListener('click', () => {
+    overlay.classList.remove('hidden');
+});
+
+closeBtn.addEventListener('click', () => {
+    overlay.classList.add('hidden');
+});
+
+
+
+progress_bar = document.querySelector('.progress-bar-inner');
+const offset = 5;
+setInterval(() => animateProgressBar(), 3000 / (progress_bar.parentElement.offsetWidth / offset));
+
+function animateProgressBar() {
+    const currentWidth = parseFloat(getComputedStyle(progress_bar).width);
+    const parentWidth = parseFloat(getComputedStyle(progress_bar.parentElement).width);
+    const newWidth = Math.min(currentWidth + offset, parentWidth);
+    progress_bar.style.width = newWidth + 'px';
+}
+
diff --git a/lightbox.html b/lightbox.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,202 @@
+.logo-container {
+    width: 100px;
+    height: 100px;
+    border: 1px solid black;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+}
+
+.circle1 {
+    width: 100px;
+    height: 100px;
+    background: red;
+    border-radius: 50%;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+body {
+    font-family: Arial, sans-serif;
+}
+
+.open-box {
+    margin: 40px;
+    padding: 12px 20px;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+.lightbox-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+
+.hidden {
+    display: none;
+}
+
+.circle2 {
+    width: 60px;
+    height: 60px;
+    background: white;
+    border-radius: 50%;
+    position: absolute;
+    top: 20px;
+    left: 20px;
+}
+
+.circle3 {
+    width: 30px;
+    height: 30px;
+    background: red;
+    border-radius: 50%;
+    position: absolute;
+    top: 15px;
+    left: 15px;
+}
+
+.letter-container {
+    width: 30%;
+    height: 30%;
+    background-color: black;
+    color: grey;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 25px;
+}
+
+.progress-bar-container {
+    display: flex;
+    align-items: center;
+    width: 300px;
+    height: 150px;
+}
+
+.progress-bar-external {
+    position: relative;
+    width: 100%;
+    height: 30px;
+    background-color: #eee;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    font-family: Arial, sans-serif;
+    overflow: hidden;
+}
+
+.loading {
+    position: absolute;
+    width: 300px;
+    text-align: center;
+    user-select: none;
+}
+
+.text-black {
+    color: black;
+    z-index: 1;
+}
+
+.progress-bar-inner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 0%;
+    background-color: red;
+    z-index: 2;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+}
+
+.text-white {
+    color: white;
+    flex-shrink: 0;
+}
+
+.lightbox {
+    width: 640px;
+    box-sizing: border-box;
+    max-width: 90%;
+    background: #fff;
+    border-radius: 16px;
+    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.2);
+    padding: 32px 24px 24px;
+    position: relative;
+}
+
+.close-button {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    border: none;
+    background: transparent;
+    font-size: 28px;
+    line-height: 1;
+    cursor: pointer;
+}
+
+.accordion {
+    margin-top: 20px;
+}
+
+.accordion-item {
+    border: 1px solid #bdbdbd;
+    border-radius: 8px;
+    margin-bottom: 12px;
+    overflow: hidden;
+    background: #f3f3f3;
+}
+
+.accordion-toggle {
+    display: none;
+}
+
+.accordion-title {
+    display: block;
+    position: relative;
+    padding: 16px 20px 16px 44px;
+    font-size: 28px;
+    cursor: pointer;
+    background: #dcdcdc;
+    user-select: none;
+}
+
+.accordion-title::before {
+    content: "▶";
+    position: absolute;
+    left: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 16px;
+
+}
+
+.accordion-content {
+    max-height: 0;
+    overflow: hidden;
+    background: #fff;
+    padding: 0 20px;
+
+}
+
+.accordion-toggle:checked + .accordion-title + .accordion-content {
+    max-height: 500px;
+    padding: 20px;
+}
+
+.accordion-toggle:checked + .accordion-title::before {
+    content: "▼";
+}