diff --git a/index.html b/index.html index 846cf93..4b92e52 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,84 @@ - - +
+ logo1 +
+ +
+ logo2 +
+ + + +
+
+ +

Махакамская заливайка

+

Чтобы заливайку махакамскую приготовить, нужно следующее: если летом, то лисичек, если осенью — зеленушек насобирай. Если зимой аль весной ранней, возьми хорошую жменю грибов сушеных. В кастрюльку налей воды, на ночь замочи. Утром посоли, брось пол-луковицы, повари. Отцеди, но отвар не выливай. Слей его в миску, да гляди, чтобы не попал песок, который завсегда на дне кастрюльки оседает. Картошки свари, кубиками порежь. Возьми бекона жирного большой кусок, порежь, поджарь. Нарежь полтарелки лука, брось его в растопленный бекон и жарь, пока пригорать не начнет. Возьми большой горшок, всё это положи в него, и о грибах нарезанных не забудь. +

Залей грибным отваром, добавь воды, сколько надо. Долей по вкусу заквашенный жур — как его заквасить, в другом месте рецепт есть. Закипяти, посоли, приправь перцем и майораном по вкусу и желанию. Топленым салом приправь. Сметаной забелить — дело вкуса, но учти, что это супротив нашей краснолюдской традиции, это людская привычка — заливайку сметаной забеливать.

+ + +
+
+
+ +
+ + + + + +
+
+
+ \ No newline at end of file diff --git a/index.js b/index.js index dd50919..20b6e15 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,34 @@ -/* - Изменить элементу цвет и ширину можно вот так: +document.querySelectorAll('.progressbar').forEach(progressbar => { + let progress = 0 - const element = document.querySelector('.myElement'); - element.style.color = 'red'; - element.style.width = '300px'; -*/ \ No newline at end of file + const intervalId = setInterval(() => { + if (progress < 100) { + progress++ + let progressLine = progressbar.firstElementChild + progressLine.style.width = `${progress}%` + } else { + clearInterval(intervalId) + } + }, 30) +}) + +document.querySelectorAll('.modal__close').forEach(closeButton => { + closeButton.addEventListener('click', () => closeModal()) +}) + + +document.querySelectorAll('.modal__button').forEach(closeButton => { + closeButton.addEventListener('click', () => closeModal()) +}) + +document.querySelectorAll('.open_modal__button').forEach(openButton => { + openButton.addEventListener('click', () => openModal()) +}) + +function closeModal() { + document.querySelectorAll('.modal__container').forEach(overlay => overlay.style.display = 'none') +} + +function openModal() { + document.querySelectorAll('.modal__container').forEach(overlay => overlay.style.display = 'block') +} \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..4552a91 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,133 @@ + +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +.container { + width: 100px; + height: 100px; + border: 1px solid #E1E1E1; + margin: 50px; + display: flex; + justify-content: center; + align-items: center; +} + +.logo1 img { + width: 100px; +} + +.logo2 img { + width: 100px; +} + +.modal__container { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 99999; + background: rgba(0,0,0,.3); +} + +.modal__frame { + width: 640px; + background: white; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + padding: 30px 20px; + box-shadow: 0 0 20px rgba(0, 0, 0, .2); + overflow-y: auto; + max-height: 100vh; +} + +.button { + background: seagreen; + border: none; + color: white; + padding: 10px 20px; + cursor: pointer; +} + +.modal__button { + margin-top: 10px; +} + +.open_modal__button { + margin: 50px; +} + +.modal__close { + position: absolute; + background: none; + border: none; + top: 40px; + right: 15px; + font-size: 20px; + color: #686868; + cursor: pointer; +} + +.progressbar { + background: rgb(202, 202, 202); + margin-top: 20px; + position: relative; + width: 640px; + height: 30px; +} + +.progressbar::before, .progressbar__progress::before { + content: 'Loading...'; + position: absolute; + left: 320px; + top: 15px; + transform: translate(-50%, -50%); +} + +.progressbar__progress { + position: absolute; + background: red; + left: 0; + width: 0%; + height: 100%; + overflow: hidden; + z-index: 4; +} + +.progressbar__progress::before { + color: white; +} + +.accordeon { + margin: 60px 0; +} + +.accordeon__item { + cursor: pointer; +} + +.accordeon__item h3 { + border: 1px solid #686868; + border-radius: 5px; + padding: 5px; +} + +.accordeon__item:hover h3 { + background: rgb(228, 228, 228); + +} + +.accordeon__text { + display: none; +} + +.accordeon__toggle:checked + .accordeon__text { + display: block; +} + +.accordeon__toggle { + display: none; +} \ No newline at end of file