diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..ab1f416 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,10 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Ignored default folder with query files +/queries/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml +# Editor-based HTTP Client requests +/httpRequests/ 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..c956989 --- /dev/null +++ b/.idea/positioning.iml @@ -0,0 +1,8 @@ + + + + + + + + \ 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..f343e61 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,30 @@ - +
+ + +
+ +
+
+ × +

Это модальное окно!

+
+
Loading...
+
+
Loading...
+
+
\ No newline at end of file diff --git a/index.js b/index.js index dd50919..49815b1 100644 --- a/index.js +++ b/index.js @@ -4,4 +4,31 @@ const element = document.querySelector('.myElement'); element.style.color = 'red'; element.style.width = '300px'; -*/ \ No newline at end of file +*/ + +const modal = document.querySelector('.modal'); +const openButton = document.querySelector('.open-button'); +const closeButton = document.querySelector('.close-icon'); + +openButton.onclick = () => { + modal.style.display = 'flex'; +} + +closeButton.onclick = () => { + modal.style.display = 'none'; +} + +const fill = document.querySelector('.layer-fill'); +const duration = 3000; +const frames = 100; +const step = duration / frames; +let currentWidth = 0; + +const timer = setInterval(() => { + currentWidth++; + fill.style.width = currentWidth + '%'; + + if (currentWidth >= 100) { + clearInterval(timer); + } +}, step); \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..a4eadb1 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,128 @@ +.logos { + display: flex; + gap: 50px; + margin-bottom: 30px; +} + +.logo { + width: 100px; + height: 100px; +} + +.microsoft { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; +} + +.red { background: #f25022; } +.green { background: #7fba00; } +.blue { background: #00a4ef; } +.yellow { background: #ffb900; } + +.target { + position: relative; + display: block; +} + +.target div { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 50%; +} + +.circle1 { + width: 100px; + height: 100px; + background-color: #e80012; + z-index: 1; +} + +.circle2 { + width: 66px; + height: 66px; + background-color: #ffffff; + z-index: 2; +} + +.circle3 { + width: 33px; + height: 33px; + background-color: #e80012; + z-index: 3; +} + +.modal { + display: none; + position: fixed; + z-index: 1000; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.4); + justify-content: center; + align-items: center; +} + +.modal-content { + position: relative; + padding: 20px; + width: 640px; + border: 1px solid #888888; + background-color: #fefefe; +} + +.close-icon { + position: absolute; + top: 10px; + right: 15px; + font-size: 28px; + font-weight: bold; + cursor: pointer; + color: #888888; +} + +.close-icon:hover, .close-icon:focus { + color: black; + text-decoration: none; + cursor: pointer; +} + +.progress-bar { + position: relative; + width: 400px; + height: 40px; + font-family: sans-serif; + font-size: 15px; + line-height: 40px; + text-align: center; +} + +.layer { + position: absolute; + top: 0; + left: 0; + height: 100%; + white-space: nowrap; +} + +.layer-bg { + width: 100%; + background: #c0c0c0; + color: #000000; +} + +.layer-fill { + background: #e80012; + overflow: hidden; + z-index: 1; +} + +.fill-text { + width: 400px; + color: #ffffff; +} +