diff --git a/index.html b/index.html index 846cf93..b6c18fa 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,56 @@ - - Практика позиционирования - + + Практика позиционирования + - +
+
+
+
+
+
+ +
+
+
B
+
B
+
C
+
+
+ +
+ + + \ No newline at end of file diff --git a/index.js b/index.js index dd50919..fbb70ed 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,20 @@ -/* - Изменить элементу цвет и ширину можно вот так: +function closeSt() { + console.log("hui"); + let o = document.querySelector('#overlay') + o.style.display = 'none'; + let modal = document.querySelector('#modal') + modal.style.display = 'none'; +} - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file +let progress = document.querySelector(".progress_inner"); +let dur = 3000; +let value = 0; +let progress_bar = setInterval(()=>{ + value += 1/3; + progress.style.width = String(value +"%"); + if (value > 100) { + clearInterval(progress_bar); + let pr = document.querySelector("#progress"); + pr.style.display = 'none'; + } +}, 10); diff --git a/styles.css b/styles.css index e69de29..e4bd6d4 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,176 @@ +.logo2_div{ + width: 100px; + height: 100px; + display: flex; + align-items: center; + justify-content: center; + border: dotted; +} + +.grid2{ + display: flex; + flex-wrap: wrap; + width: 100%; + height: 100%; + justify-content: center; + align-items: center; +} + +.rectangle{ + display: flex; + align-items: center; + justify-content: center; + text-align: center; + background-color: black; + color: white; + width: 27px; + height: 27px; + margin: 2px; /*Отступ между черными квадратами*/ +} + +.rectangle:nth-child(even) { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + background-color: black; + color: white; + width: 27px; + height: 27px; + margin: 2px; /*Отступ между черными квадратами*/ + display: flex; + justify-content: center; + align-items: center; + text-align: center; +} + +/*Дополнительный блок для выравнивания текста в четных квадратах*/ +.rectangle:nth-child(even) div { + display: flex; + justify-content: center; + align-items: center; + text-align: center; + width: 100%; + height: 100%; +} + +.modal { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 640px; + background-color: #fff; + padding: 20px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); + z-index: 100; +} + +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 99; +} + +.close-btn { + position: absolute; + top: 10px; + right: 10px; + font-size: 20px; + cursor: pointer; +} + +.accordion { + width: 640px; + margin: 0 auto; +} +.accordion label { + display: block; + padding: 10px; + font-weight: bold; + background-color: #eee; + cursor: pointer; +} +.accordion-content { + max-height: 0; + overflow: hidden; + transition: max-height 0.2s ease-out; +} +input:checked + label { + background-color: #ccc; +} +input:checked + label + .accordion-content { + max-height: 1000px; + transition: max-height 0.35s ease-in; +} + +.logo7_div { + position: relative; + width: 100px; + height: 100px; + border: dotted gray; +} + +.ellipse { + border-radius: 50%; + border:5px solid skyblue; + height: 40px; + width: 90px; +} + +.ellipse1 { + position: absolute; + top: 25px; +} + +.ellipse2 { + position: absolute; + transform: rotate(60deg); + top: 25px; +} + +.ellipse3 { + position: absolute; + transform: rotate(120deg); + top: 25px; +} + +.circle { + position: absolute; + top: 39px; + left: 39px; + width: 22px; + height: 22px; + border-radius: 50%; + background-color: skyblue; +} + +.progress_outer { + position: relative; + height: 50px; + background-color: lightgray; + margin: 0 auto 0 auto; +} + +.progress_inner { + position: absolute; + height: 100%; + width: 30%; + background-color: deeppink; +} + +.progress_text { + font-size: 45px; + width: 100%; + height: 100%; + text-align: center; + position: absolute; +} + +.white_text { + color: white; +}