diff --git a/index.html b/index.html index 846cf93..ac89ac0 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,50 @@ - +
+
+
+ +
+
+
+
+
+
+
+
+

Loading...

+
+
+

Loading...

+
+
+
+ + +
+

После долгих зим всегда приходит лето (Е) + Я знаю: где ты, с кем ты; но мне пофиг, где ты, с кем ты

+
+
+
+ + +
+

Двести двадцать третий, Трэвис давит на педаль кареты

+
+
+
+ + +
+

Мешаю ветер с дымом с окон AMG-пакета (Воу, воу, воу, воу-воу, ушёл) +

+
+
+
+
+
\ No newline at end of file diff --git a/index.js b/index.js index dd50919..2e42211 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,16 @@ -/* - Изменить элементу цвет и ширину можно вот так: +const bar = document.getElementById('bar'); +var width = 0; +incrementWidth(); - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file +function incrementWidth() { + width++; + bar.style.width = width + '%'; + if (width < 100) { + setTimeout(incrementWidth, 50); + } +} + +const cross = document.getElementById('cross-icon-container'); +cross.addEventListener('click', function() { + document.getElementById('overlay').style.display = 'none'; +}); diff --git a/styles.css b/styles.css index e69de29..9e9b222 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,130 @@ +p { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.1); + display: flex; + justify-content: center; + align-items: center; +} + +.lightbox { + position: relative; + display: flex; + flex-direction: column; + padding: 24px; + border-radius: 20px; + gap: 16px; + width: 640px; + background-color: white; + align-items: center; + justify-content: center; +} + +#logo-container { + display: flex; + justify-content: center; + align-items: center; + gap: 16px; +} + +.logo100 { + width: 100px; + height: 100px; + object-fit: contain; + overflow: hidden; +} + +#logo3 { + transform: scale(1.15); +} + +.icon-container { + display: flex; + padding: 4px; + border-radius: 20px; + background-color: #f0f0f0; +} + +#cross-icon-container { + position: absolute; + top: 4px; + right: 4px; +} + +.progress-bar-background { + position: relative; + display: flex; + justify-content: center; + height: 20px; + width: 350px; + background-color: #f0f0f0; + border-radius: 10px; + overflow: hidden; +} + +.progress-bar-text { + margin: 0; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-size: 13px; +} + +.progress-bar-top-text { + margin: 0; + color: white; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-size: 13px; +} + +.progress-bar-container { + position: absolute; + top: 0px; + left: 0px; + width: 0%; + height: 100%; + overflow: hidden; +} + +.progress-bar { + display: flex; + justify-content: center; + position: absolute; + top: 0px; + left: 0px; + background-color: red; + width: 350px; + height: 100%; +} + +.accordion input { + display: none; +} + +.accordion label { + display: block; + background-color: #eee; + padding: 10px; + margin-top: 8px; + cursor: pointer; + border-radius: 4px; +} + +.accordion .panel { + max-height: 0; + overflow: hidden; + transition: max-height 0.2s ease-out; + background-color: #f9f9f9; + padding: 0 10px; + border-radius: 4px; +} + +.accordion input:checked ~ .panel { + max-height: 200px; + padding: 10px; +} \ No newline at end of file diff --git a/x.svg b/x.svg new file mode 100644 index 0000000..3e0da86 --- /dev/null +++ b/x.svg @@ -0,0 +1 @@ + \ No newline at end of file