diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..13566b8 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..67fa43d --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/positioning.iml b/.idea/positioning.iml new file mode 100644 index 0000000..24643cc --- /dev/null +++ b/.idea/positioning.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..35eb1dd --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 846cf93..026d480 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,53 @@ - - + +
+
+
+
+
+
+ +
+
+
+ +
+
+ +

Привет!

+

+ Абоба! +

+
+
+
+
+
+ +
+ + +
+

Контент1

+
+ + + +
+

Контент2

+
+ + + +
+

Контент3

+
+
+ + + + \ No newline at end of file diff --git a/index.js b/index.js index dd50919..79eccd6 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,37 @@ -/* - Изменить элементу цвет и ширину можно вот так: +function animateProgressBar() { + const progressBar = document.querySelector('.progress'); + let progress = 0; - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file + const interval = setInterval(() => { + if (progress < 100) { + progress++; + progressBar.style.width = `${progress}%`; + } else { + clearInterval(interval); + } + }, 30); + + setTimeout(() => { + clearInterval(interval); + }, 3000); +} + +function setupLightboxClose() { + const closeButton = document.querySelector('.closeButton'); + const overlay = document.querySelector('.overlay'); + + closeButton.addEventListener('click', () => { + overlay.style.display = 'none'; + }); + + overlay.addEventListener('click', (e) => { + if (e.target === overlay) { + overlay.style.display = 'none'; + } + }); +} + +document.addEventListener('DOMContentLoaded', () => { + animateProgressBar(); + setupLightboxClose(); +}); \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..572bfbb 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,151 @@ +.windows { + display: flex; + flex-wrap: wrap; + width: 100px; + height: 100px; + border: 5px black solid; + margin: 5px; +} + +.windows .square { + width: calc(50% - 4px); + height: calc(50% - 4px); + margin: 2px; +} + +.windows .square1 { + background: rgb(241, 81, 27); +} + +.windows .square2 { + background: rgb(128, 204, 40); +} + +.windows .square3 { + background: rgb(0, 173, 239); +} + +.windows .square4 { + background: rgb(251, 188, 9); +} + +.flag { + margin: 5px; + width: 100px; + height: 100px; + background-color: white; + border: 5px solid black; + position: relative; +} + +.flag::after { + content: ''; + position: absolute; + top: 25%; + left: 25%; + width: 50px; + height: 50px; + border-radius: 50%; + background-color: #BF0C22FF; +} + +.overlay { + position: absolute; + left: 0; + top: 0; + background-color: rgba(85, 84, 84, 0.8); + width: 100%; + height: 100%; +} + +.lightbox { + box-sizing: border-box; + background-color: white; + border: 1px solid black; + position: fixed; + top: 40%; + left: calc(50% - 320px); + width: 640px; + padding: 20px; +} + +.lightbox .closeButton { + display: flex; + justify-content: center; + align-items: center; + width: 50px; + height: 50px; + position: absolute; + top: 0; + left: 92.1%; + z-index: 1; +} + +.lightbox .closeButton:hover { + background-color: red; + color: aliceblue; + cursor: pointer; +} + +.bar { + background-color: gray; + width: 600px; + height: 30px; + position: relative; + margin: 20px auto; +} + +.bar::before, .progress::before { + content: "Loading..."; + color: white; + position: absolute; + left: 300px; + top: 15px; + transform: translate(-50%, -50%); +} + +.progress { + position: absolute; + background-color: red; + height: 100%; + z-index: 1; + overflow: hidden; +} + +.bar::before { + color: black; +} + + +.accordeon{ + display: flex; + flex-direction: column; +} + +label{ + background-color: gray; + margin-bottom: 10px; + padding: 20px 10px; + color: white; + font-size: 48px; +} + +.acc-hidden { + display: none; +} + +.acc-content { + display: none; +} + +.acc-content p { + margin: 10px 0; + background-color: rgba(66, 66, 66, 0.8); + padding: 20px 10px; + color: white; + font-size: 24px; +} + +.acc-hidden:checked + label + .acc-content { + display: block; +} \ No newline at end of file