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 Липилин Матвей feat. он сам #117

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

ФТ201 Липилин Матвей feat. он сам #117

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
86 changes: 84 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,89 @@
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!--Верстать тут-->
<script src="index.js"></script>
<div class="microsoft-logo">
<div class="top-left"></div>
<div class="top-right"></div>
<div class="bottom-left"></div>
<div class="bottom-right"></div>
</div>
<div class="japan-logo"></div>
<div class="modal-screen">
<div class="modal-window">
<div class="modal-exit">x</div>
<div class="accordion">
<label for="state1">
<div class="button">Amogus</div>
</label>
<input type="checkbox" id="state1" hidden>
<div class="content">
<p class="inner">
Amogus is a popular character from the online multiplayer game "Among Us". The character is known
for its cute and cartoonish appearance, as well as its mischievous and sometimes deceitful behavior.
</p>
</div>
</div>
<div class="accordion">
<label for="state2">
<div class="button">Привет</div>
</label>
<input type="checkbox" id="state2" hidden>
<div class="content">
<p class="inner">
Штирлиц получил задание узнать, кто из сотрудников шпионской организации является двойным агентом.
Он решил провести тест на лояльность, раздав всем сотрудникам по бутылке водки с ярлыками
"Отравлено" и "Не отравлено".
<br><br>
На следующий день Штирлиц увидел, что все сотрудники пришли на работу, кроме одного - того, кто
получил бутылку с ярлыком "Отравлено". Удивленный Штирлиц спросил у оставшихся сотрудников, как им
удалось определить, какая бутылка была отравлена.
<br><br>
"Очень просто," - ответили сотрудники. "Мы все решили выпить из бутылок с ярлыками 'Не отравлено' -
это было самое безопасное решение".
<br><br>
Штирлиц был поражен настолько, что решил подать в отставку.
</p>
</div>
</div>
<div class="accordion">
<label for="state3">
<div class="button">Блок номер три(3)</div>
</label>
<input type="checkbox" id="state3" hidden>
<div class="content">
<p class="inner">
░█████╗░██████╗░███████╗██╗░░██╗
██╔══██╗██╔══██╗██╔════╝██║░░██║
██║░░██║██████╔╝█████╗░░███████║
██║░░██║██╔═══╝░██╔══╝░░██╔══██║
╚█████╔╝██║░░░░░███████╗██║░░██║
░╚════╝░╚═╝░░░░░╚══════╝╚═╝░░╚═╝
</p>
</div>
</div>

<h2>Анекдот про CSS</h2>
<p>Как-то раз CSS и HTML встретились в баре. HTML был очень счастлив, так как был наполнен контентом и имел
ясную структуру. CSS, с другой стороны, был ужасно расстроен, так как никак не мог решить, как ему
стилизовать HTML, чтобы он выглядел привлекательным и красивым.
<br><br>
HTML, чтобы подбодрить своего друга, предложил ему выпить еще один CSS-файл. Однако, поскольку CSS был уже
достаточно пьян, он не мог справиться с этой задачей, и вместо того, чтобы стилизовать HTML, он случайно
попал в JavaScript и стилизовал его вместо того, чтобы изменить внешний вид HTML.
<br><br>
Когда CSS осознал свою ошибку, он извинился перед HTML и JavaScript, но они были уже слишком пьяны, чтобы
заботиться о таких мелочах. И, хотя CSS на следующий день почувствовал себя ужасно, он решил, что никогда
больше не будет пить столько, чтобы случайно изменить внешний вид JavaScript.</p>
</div>
</div>
<div class="progress-bar">
<p class="text-before">Loading...</p>
<div class="bg">
<p class="text-after">Loading...</p>
</div>
</div>


<script src="index.js"></script>
</body>
</html>
17 changes: 11 additions & 6 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
/*
Изменить элементу цвет и ширину можно вот так:
const pbar = document.querySelector('.progress-bar .bg');
pbar.style.width = '100%';
const iterations = 100;
const interval = 3000 / iterations;
let i = 0;

const element = document.querySelector('.myElement');
element.style.color = 'red';
element.style.width = '300px';
*/
setInterval(() => {
pbar.style.width = `${++i}%`;
if (i === iterations) {
i = 0;
}
}, interval);
167 changes: 167 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@
.microsoft-logo {
width: 100px;
height: 100px;
position: relative;
display: inline-block;
}

.microsoft-logo .top-left, .microsoft-logo .top-right, .microsoft-logo .bottom-left, .microsoft-logo .bottom-right {
position: absolute;
width: 48%;
height: 48%;
}

.microsoft-logo .top-left {
top: 0;
left: 0;
background-color: #F65314;
}

.microsoft-logo .top-right {
top: 0;
right: 0;
background-color: #7CBB00;
}

.microsoft-logo .bottom-left {
bottom: 0;
left: 0;
background-color: #00A1F1;
}

.microsoft-logo .bottom-right {
bottom: 0;
right: 0;
background-color: #FBBC09;
}

.japan-logo {
width: 100px;
height: 100px;
position: relative;
border-radius: 50%;
background-color: #BC002D;
display: inline-block;
}

.modal-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(45, 45, 45, 0.5);
}

.modal-window {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 640px;
background-color: white;
border-radius: 15px;
padding: 20px;
}

.modal-exit {
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 30px;
color: black;
text-align: center;
font-size: x-large;
line-height: 30px;
cursor: pointer;
}

.progress-bar {
width: 460px;
height: 20px;
background-color: grey;
position: relative;
}

.progress-bar .progress {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 50%;
background-color: red;
}

.progress-bar {
background-color: grey;
}

.progress-bar .bg {
position: relative;
margin: 0;
padding: 0;
height: 100%;
width: 0;
background-color: red;
overflow: hidden;
}

.progress-bar .text-after, .progress-bar .text-before {
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}

.progress-bar .text-after {
color: white;
position: absolute;
left: 190px;
}

.progress-bar .text-before {
color: black;
text-align: center;
}

.accordion .button {
background: linear-gradient(to bottom, #ccc, #666);;
cursor: pointer;
font-size: 16pt;
padding: 16px;
width: 500px;
box-sizing: border-box;
}

.accordion .button:hover {
opacity: 0.7;
}

.accordion .content {
width: 500px;
overflow: hidden;
max-height: 0;
transition: all 0.3s ease-in-out;
box-sizing: border-box;
border: 1px solid black;
}

.accordion #state1:checked ~ .content {
max-height: 150px;
}

.accordion #state2:checked ~ .content {
max-height: 400px;
}

.accordion #state3:checked ~ .content {
max-height: 200px;
}

.accordion .inner {
margin: 16px;
}