kontur-web-courses · Daemetry · Apr 2, 2024 · Apr 2, 2024 · Apr 2, 2024 · Apr 2, 2024
diff --git a/index.html b/index.html
@@ -6,7 +6,55 @@
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-    <!--Верстать тут-->
-    <script src="index.js"></script>
+<!--Верстать тут-->
+
+    <div class="logo-container">
+        <img src="designs/logo1.png" alt="Logo 1">
+    </div>
+    <div class="logo-container">
+        <img src="designs/logo2.png" alt="Logo 2">
+
+
+    <button id="openModal">Open Modal</button>
+
+    <div class="modal-overlay" style="display: none;"></div>
+    <div class="modal" style="display: none;">
+        <button class="close-btn">&times;</button>
+        <div class="modal-content">
+            <div class="progress-wrapper">
+                <div class="progress-bg-bg">
+                    <div class="progress-bg-black"></div>
+                    <div class="progress-bg">
+                        <div class="progress-text"></div>
+                    </div>    
+                </div>
+
+            </div>
+
+
+            <div class="accordion">
+                <input type="checkbox" style="display: none;" id="acc-1">
+                <label for="acc-1" class="accordion-label">Section 1</label>
+                <div class="accordion-content">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                </div>
+
+                <input type="checkbox" id="acc-2">
+                <label for="acc-2" class="accordion-label">Section 2</label>
+                <div class="accordion-content">
+                    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                </div>
+
+                <input type="checkbox" id="acc-3">
+                <label for="acc-3" class="accordion-label">Section 3</label>
+                <div class="accordion-content">
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
+                </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 element = document.querySelector('.myElement');
+// element.style.color = 'red';
+// element.style.width = '300px';
+
+const modal = document.querySelector('.modal');
+const overlay = document.querySelector('.modal-overlay');
+const closeButton = document.querySelector('.close-btn');
+
+const openModalButton = document.getElementById('openModal');
+// const progressModal = document.getElementById('modal');
+
+// const progressBar = document.getElementById('progress-bar')
+
+// const progressBar = document.querySelector('.progress-bar')
+
+closeButton.addEventListener('click', () => {
+    modal.style.display = 'none';
+    overlay.style.display = 'none';
+});
+
+openModalButton.addEventListener('click', () => {
+    modal.style.display = 'block';
+    overlay.style.display = 'block';
+});
diff --git a/index1.html b/index1.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Практика позиционирования</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="logo-container">
+        <img src="designs/logo1.png" alt="Logo 1">
+    </div>
+    <div class="logo-container hidden">
+        <img src="designs/logo2.png" alt="Logo 2">
+    </div>
+
+    <div class="modal-overlay"></div>
+    <div class="modal">
+        <button class="close-btn">&times;</button>
+        <div class="modal-content">
+            Hello
+        </div>
+    </div>
+
+    <script src="index.js"></script>
+</body>
+</html>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,146 @@
+.logo-container {
+    width: 100px;
+    height: 100px;
+    margin: 10px;
+    overflow: hidden;
+}
+
+.logo-container img {
+    width: 100%;
+    height: auto;
+}
+
+.progress-container {
+    display: flex;
+    /*position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);*/
+    width: 200px;
+    background-color: #ccc;
+    border-radius: 10px;
+    padding: 10px;
+}
+
+.progress-container .progress-bar {
+    position: relative;
+    width: 0;
+    height: 20px;
+    background-color: red;
+}
+
+.progress-container .progress-text {
+    position: absolute;
+    text-align: center;
+}
+
+
+.accordion-content {
+    display: none;
+}
+
+.accordion-content + input {
+    display: none;
+}
+
+.accordion-content {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s;
+}
+
+input[type="checkbox"]:checked + .accordion-label + .accordion-content {
+    display: block;
+    max-height: 100px;
+}
+
+.accordion-label {
+    display: block;
+    margin: 5px 0;
+    cursor: pointer;
+}
+
+.accordion-label:hover {
+    text-decoration: underline;
+}
+
+
+.modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 640px;
+    padding-top: 22px;
+    background-color: #fff;
+    z-index: 1000;
+}
+
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+}
+
+.modal-content {
+    padding: 10px;
+}
+
+.close-btn {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    background: none;
+    border: none;
+    font-size: 20px;
+    cursor: pointer;
+}
+
+@keyframes loading {
+    0% {
+        width: 0;
+    }
+    100% {
+        width: 100%;
+    }
+}
+
+.modal .progress-bg-bg {
+    background-color: lightgray;
+}
+
+.modal .progress-bg {
+    background-color: red;
+    animation: loading 3s linear;
+}
+
+.modal .progress-bg-black {
+    display: none;
+    background-color: black;
+    animation: loading 3s linear;
+}
+
+
+.modal .progress-text {
+    color: black;
+    width: 620px;
+    text-align: center;
+
+    &:after {
+        padding-left: 20px;
+        content: "Loading...";
+        display: block;
+        text-align: center;
+        animation: percentage 3s linear ;
+    }
+}
+
+.modal .progress-text:after {
+    color: white;
+    mix-blend-mode: difference;
+
+}