diff --git a/index.html b/index.html index 846cf93..bada205 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,72 @@ - +
+
+ +
+
+ +
+
+
+ + +
\ No newline at end of file diff --git a/index.js b/index.js index dd50919..537fd09 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,22 @@ -/* - Изменить элементу цвет и ширину можно вот так: +const closeButton = document.getElementById('close-lightbox'); +closeButton.addEventListener('click', () => { + const otherPage = document.getElementById('other-page'); + otherPage.style.display = "none"; +}) - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file + +const strip = document.getElementById('strip'); +let perc = 0; + +function timePass() { + setTimeout(() => { + perc++; + strip.style.clipPath = `inset(0 ${100 - perc}% 0 0)`; + if (perc < 100) { + timePass(); + } + }, 10) +} + + +timePass(); \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..f98876b 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,124 @@ +.logo-container { + display: flex; + justify-content: space-around; +} + +.logo-wrapper { + display: flex; + align-items: center; + width: 100px; + height: 100px; + background-color: #e1e1e1; + overflow: hidden; +} + +.logo-wrapper img { + max-width: 100%; +} + +#other-page { + background-color: #9e9e9e7a; + position: fixed; + width: 100%; + height: 100%; + top:0; +} + +.lightbox { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 640px; + min-height: 100px; + height: auto; + display: flex; + justify-content: center; + align-items: center; + background-color: #fff; + align-items: start; +} + +.lightbox p { + margin: 50px; +} + +.close-lightbox { + width: 10px; + height: 10px; + position: relative; +} + +.progress { + position: relative; + background-color: #3d3d3d; + width: calc(100% - 45px); + left: 45px; + text-align: center; + +} + +.progress p { + position: relative; + color: black; +} + +.strip { + position: absolute; + background-color: #cd1818; + width: calc(100% - 70px); + top: 156px; + left: 45px; + text-align: center; + /* clip-path: inset(0 50% 0 0); */ +} + + +.strip p{ + position: relative; + color: rgb(255, 255, 255); + margin: 0; + padding: 0; + left: 213px; + color: rgb(255, 255, 255); + width: 50%; + height: 19px; + text-align: center; +} + +.acordeon { + width: 600px; + margin-left: 20px; +} + +.section { + border: 1px solid #ccc; + margin-bottom: 5px; +} + +.section-header { + display: block; + padding: 10px; + background-color: #f1f1f1; + cursor: pointer; + margin: 0; +} + +.section-header:hover { + background-color: #e1e1e1; +} + +.accordion-toggle { + display: none; +} + +.section-content { + max-height: 0; + overflow: hidden; + padding: 0 10px; +} + +.accordion-toggle:checked ~ .section-content { + max-height: 500px; + padding: 10px; +} \ No newline at end of file