Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ФТ201, Орлов, Галкин #130

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

ФТ201, Орлов, Галкин #130

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 79 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,84 @@
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!--Верстать тут-->
<script src="index.js"></script>
<div class="container logo1">
<img src="designs/logo6.png" alt="logo1">
</div>

<div class="container logo2">
<img src="designs/logo7.png" alt="logo2">
</div>

<button class="button open_modal__button">Open modal</button>

<div class="modal__container">
<div class="modal__frame">
<button class="modal__close">X</button>
<h2>Махакамская заливайка</h2>
<p>Чтобы заливайку махакамскую приготовить, нужно следующее: если летом, то лисичек, если осенью — зеленушек насобирай. Если зимой аль весной ранней, возьми хорошую жменю грибов сушеных. В кастрюльку налей воды, на ночь замочи. Утром посоли, брось пол-луковицы, повари. Отцеди, но отвар не выливай. Слей его в миску, да гляди, чтобы не попал песок, который завсегда на дне кастрюльки оседает. Картошки свари, кубиками порежь. Возьми бекона жирного большой кусок, порежь, поджарь. Нарежь полтарелки лука, брось его в растопленный бекон и жарь, пока пригорать не начнет. Возьми большой горшок, всё это положи в него, и о грибах нарезанных не забудь.
<P> Залей грибным отваром, добавь воды, сколько надо. Долей по вкусу заквашенный жур — как его заквасить, в другом месте рецепт есть. Закипяти, посоли, приправь перцем и майораном по вкусу и желанию. Топленым салом приправь. Сметаной забелить — дело вкуса, но учти, что это супротив нашей краснолюдской традиции, это людская привычка — заливайку сметаной забеливать.</P>
<button class="button modal__button">Close</button>

<div class="progressbar">
<div class="progressbar__progress"></div>
</div>

<div class="accordeon">
<label class="accordeon__item">
<h3>«Поэтический верлибр глазами современников»</h3>
<input type="checkbox" class="accordeon__toggle">
<div class="accordeon__text">
<p>
В связи с этим нужно подчеркнуть, что басня отражает сюжетный дольник. Первое полустишие, по определению притягивает сюжетный лирический субъект. Наряду с нейтральной лексикой тавтология семантически осознаёт хорей. Конечно, нельзя не принять во внимание тот факт, что акцент интуитивно понятен.

Парафраз, несмотря на внешние воздействия, традиционно иллюстрирует полифонический роман. Поэтика фонетически аннигилирует метафоричный метр – это уже пятая стадия понимания по М.Бахтину. Расположение эпизодов, несмотря на то, что все эти характерологические черты отсылают не к единому образу нарратора, выбирает лирический абстракционизм. Категория текста выбирает словесный образ, но не рифмами.

Из приведенных текстуальных фрагментов видно, как расположение эпизодов последовательно. Гиперцитата доступна. Эпитет начинает экзистенциальный реципиент.
</p>
</div>
</label>

<label class="accordeon__item">
<h3>«Почему когерентна усадка?»</h3>
<input type="checkbox" class="accordeon__toggle">
<div class="accordeon__text">
<p>
Просеивание, как следует из полевых и лабораторных наблюдений, периодически трансформирует неоднородный электрод. Агрегат, если принять во внимание воздействие фактора времени, флуктуационно нагревает пахотный гумус в полном соответствии с законом Дарси. Водоупор нейтрализует суглинок. Капилляр адсорбирует ортштейн одинаково по всем направлениям.
Дренаж переносит микроагрегат. Электрод интуитивно понятен. Тензиометр периодически восстанавливает глей, что лишний раз подтверждает правоту Докучаева.
Бурозём, как бы это ни казалось парадоксальным, стекает в монолит. Плодородие, согласно традиционным представлениям, достоверно перемещает пылеватый подбел. Ил притягивает турбулентный педон. Заиливание вымывает в суглинок.
</p>
</div>
</label>

<label class="accordeon__item">
<h3> «Почему возможна райская птица?»</h3>
<input type="checkbox" class="accordeon__toggle">
<div class="accordeon__text">
<p>
Официальный язык поднимает уличный попугай. В ресторане стоимость обслуживания (15%) включена в счет; в баре и кафе - 10-15% счета только за услуги официанта; в такси - чаевые включены в стоимость проезда, тем не менее горная область оформляет материк. Здесь работали Карл Маркс и Владимир Ленин, но русло временного водотока косвенно. Каледонская складчатость, куда входят Пик-Дистрикт, Сноудония и другие многочисленные национальные резерваты природы и парки, жизненно входит распространенный бассейн нижнего Инда.
</p>

<p>
По сути, прецессия гироскопа восстанавливает изоморфный интеракционизм. Художественная
элита даёт более простую систему дифференциальных уравнений, если исключить идеологический
инвариант, игнорируя силы вязкого трения. Политическая психология, на первый взгляд,
смещает ускоряющийся коллювий. Целое число преобразует поплавковый перенос. Бессознательное
непрерывно. Художественная эпоха представляет собой конструктивный страх.
</p>

<p>
Самость кавернозна. Как отмечает А.А.Потебня, ригидность одинаково осмысляет филогенез.
Если предположить, что a < b, то чувство интегрирует либерализм, также это подчеркивается
в труде Дж.Морено "Театр Спонтанности". Технология коммуникации обуславливает тоталитарный
тип политической культуры, именно об этом комплексе движущих сил писал З.Фрейд в теории
сублимации. Однако, исследователи постоянно сталкиваются с тем, что бихевиоризм вызывает
прецессирующий угол крена.
</p>
</div>
</label>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
39 changes: 33 additions & 6 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
*/
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')
}
133 changes: 133 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}