+
+
+
+
+
+
\ No newline at end of file
diff --git a/form.html b/form.html
new file mode 100644
index 0000000..1c547ed
--- /dev/null
+++ b/form.html
@@ -0,0 +1,70 @@
+
+
+
+
+
+
+ form
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..d395693
--- /dev/null
+++ b/index.html
@@ -0,0 +1,53 @@
+
+
+
+
+
+
+ port folio
+
+
+
+
+
+
Name: Vereshchagin Mikhail
+
Age:19
+
Place of birth: Petropavlovsk
+
Currently a student in Kozybaev University
+
+
+
+
Essay:::
+ hello i am mikhail i come from the far away land of petropavlovsk i do not have any special interests aprat from games of computer variety i am a second yera student at North Kazakhstan University i also help with the university as a volonteur currently trying to collect documents to actually enroll as a worker
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/scripts.js b/js/scripts.js
new file mode 100644
index 0000000..923be1c
--- /dev/null
+++ b/js/scripts.js
@@ -0,0 +1,100 @@
+
+document.getElementById("burger2").addEventListener("click",function(){
+ document.querySelector(".navbar").classList.toggle("open")
+})
+
+const plus = document.getElementById("butplus");
+const minus = document.getElementById("butminus");
+const mult = document.getElementById("butmult");
+const div = document.getElementById("butdiv");
+const sin = document.getElementById("butsin");
+const cos = document.getElementById("butcos");
+const tg = document.getElementById("buttg");
+const ctg = document.getElementById("butctg");
+
+let first = document.getElementById("first");
+let second = document.getElementById("second");
+let variable = document.getElementById("variable");
+
+const result = document.getElementById("result");
+const value = document.getElementById("value");
+
+let res = 0;
+let val = 0;
+let num = 0;
+function calculus(mark) {
+ const num1= parseFloat(first.value) || 0;
+ const num2= parseFloat(second.value) || 0;
+ const num3= parseFloat(variable.value) || 0;
+ num = (num3*Math.PI)/180;
+ switch(mark) {
+ case "+":
+ res = num1 + num2;
+ break;
+ case "-":
+ res = num1 - num2;
+ break;
+ case "*":
+ res = num1 * num2;
+ break;
+ case "/":
+ res = num2 !== 0? num1 /num2 :"error";
+ break;
+ case "sin":
+ val = Math.sin(num);
+ break;
+ case "cos":
+ val = Math.cos(num);
+ break;
+ case "tg":
+ val = num % Math.PI === Math.PI / 2 ? "error" : Math.tan(num);
+ break;
+ case "ctg":
+ val = num % Math.PI === 0 ? "error" : 1/(Math.tan(num));
+ break;
+ }
+
+ result.textContent = res;
+ typeof val === 'number' ? value.textContent= val.toFixed(2) : value.textContent="error";
+
+}
+
+plus.addEventListener("click", (event) => {
+ event.preventDefault();
+ calculus("+");
+});
+
+minus.addEventListener("click", (event) => {
+ event.preventDefault();
+ calculus("-");
+});
+
+mult.addEventListener("click", (event) => {
+ event.preventDefault();
+ calculus("*");
+});
+
+div.addEventListener("click", (event) => {
+ event.preventDefault();
+ calculus("/");
+});
+
+sin.addEventListener("click", (event) => {
+ event.preventDefault();
+ calculus("sin");
+});
+
+cos.addEventListener("click", (event) => {
+ event.preventDefault();
+ calculus("cos");
+});
+
+tg.addEventListener("click", (event) => {
+ event.preventDefault();
+ calculus("tg");
+});
+
+ctg.addEventListener("click", (event) => {
+ event.preventDefault();
+ calculus("ctg");
+});
\ No newline at end of file
diff --git a/math.html b/math.html
new file mode 100644
index 0000000..7704c50
--- /dev/null
+++ b/math.html
@@ -0,0 +1,83 @@
+
+
+
+
+
+
+ mafs
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..925ffb8
--- /dev/null
+++ b/package.json
@@ -0,0 +1,11 @@
+{
+ "name": "project",
+ "version": "1.0.0",
+ "description": "verno",
+ "main": "index.js",
+ "scripts": {
+ "test": "verno"
+ },
+ "author": "",
+ "license": "ISC"
+}
diff --git a/src/public/Card_1024890_artwork_apng.gif b/src/public/Card_1024890_artwork_apng.gif
new file mode 100644
index 0000000..061d5d0
Binary files /dev/null and b/src/public/Card_1024890_artwork_apng.gif differ
diff --git a/src/public/Card_1026820_artwork_apng.webp b/src/public/Card_1026820_artwork_apng.webp
new file mode 100644
index 0000000..f86a680
Binary files /dev/null and b/src/public/Card_1026820_artwork_apng.webp differ
diff --git a/src/public/Card_1029470_artwork_apng.webp b/src/public/Card_1029470_artwork_apng.webp
new file mode 100644
index 0000000..a1c1884
Binary files /dev/null and b/src/public/Card_1029470_artwork_apng.webp differ
diff --git a/src/public/GohanTeenStandbySkillBGM.mp3 b/src/public/GohanTeenStandbySkillBGM.mp3
new file mode 100644
index 0000000..5aa11d3
Binary files /dev/null and b/src/public/GohanTeenStandbySkillBGM.mp3 differ
diff --git a/src/public/LRAGLSSGoku&SSVegetaMoraleBoostBGM.mp3 b/src/public/LRAGLSSGoku&SSVegetaMoraleBoostBGM.mp3
new file mode 100644
index 0000000..c3bb308
Binary files /dev/null and b/src/public/LRAGLSSGoku&SSVegetaMoraleBoostBGM.mp3 differ
diff --git a/src/public/LRINTGokuActiveSkillBGM.mp3 b/src/public/LRINTGokuActiveSkillBGM.mp3
new file mode 100644
index 0000000..563df13
Binary files /dev/null and b/src/public/LRINTGokuActiveSkillBGM.mp3 differ
diff --git a/src/public/Monday Begins on Saturday (Arkady and Boris Strugatsky).pdf b/src/public/Monday Begins on Saturday (Arkady and Boris Strugatsky).pdf
new file mode 100644
index 0000000..6b1214e
Binary files /dev/null and b/src/public/Monday Begins on Saturday (Arkady and Boris Strugatsky).pdf differ
diff --git a/src/public/Youtube_logo.png b/src/public/Youtube_logo.png
new file mode 100644
index 0000000..a37389d
Binary files /dev/null and b/src/public/Youtube_logo.png differ
diff --git a/src/public/hq720.jpg b/src/public/hq720.jpg
new file mode 100644
index 0000000..8646915
Binary files /dev/null and b/src/public/hq720.jpg differ
diff --git a/src/public/monday_saturday.jpeg b/src/public/monday_saturday.jpeg
new file mode 100644
index 0000000..624c6ac
Binary files /dev/null and b/src/public/monday_saturday.jpeg differ
diff --git a/src/public/shlepa.jpg b/src/public/shlepa.jpg
new file mode 100644
index 0000000..ba24f01
Binary files /dev/null and b/src/public/shlepa.jpg differ
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 0000000..4a5e31b
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,510 @@
+header{
+ background-color: #2629c7; /* Устанавливает фоновый цвет для .navbar */
+}
+.navbar {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between; /* Распределяет дочерние элементы .navbar равномерно,
+ с максимальным пространством между ними */
+ color:white;
+}
+html{
+ min-height: 1100px;
+}
+body{
+ margin:0;
+}
+.navbar{
+ margin:auto
+}
+.navbar ul {
+ position: relative; /* Абсолютное позиционирование относительно ближайшего позиционированного предка, в нашем случае экрана. */
+ display: flex;
+ list-style: none;
+ /* Элементы списка будут выстраиваться вертикально (необходимо для флекс-контейнера) */
+}
+.burger{
+ display:none;
+}
+
+
+/* Стили для элементов списка внутри навигационного меню */
+.navbar ul li {
+ margin:auto 0;
+ width:90px;
+ height: 25px;
+
+}
+
+/* Стили для элемента списка при наведении */
+.navbar ul li:hover {
+ background-color: #a81212; /* Изменяет фоновый цвет элемента списка при наведении курсора */
+ transform: scale(1.07); /* Увеличение размера элемента на 7% при наведении */
+ transition: 0.4s ease; /* Плавный переход эффекта с продолжительностью 0.4 секунды */
+ border-radius: 20px;
+ color: white;
+}
+
+.navbar ul li a:hover {
+ color: white; /* Цвет текста ссылки становится белым при наведении */
+}
+
+.navbar ul li:hover {
+ background-color: #a81212; /* Изменяет фоновый цвет элемента списка при наведении курсора */
+ border-radius: 20px; /* Скругляет углы элемента списка при наведении курсора */
+}
+
+.navbar ul li a {
+ text-decoration: none;
+ color:rgb(216, 216, 216);
+ padding-left:25px;
+ padding-top: 3px;
+ text-decoration: none;
+
+}
+
+.entry:hover {
+ background-color: #a81212; /* Изменяет фоновый цвет div при наведении курсора */
+ border-radius: 20px; /* Скругляет углы div при наведении курсора */
+}
+.navbar ul .work {
+ position: relative; /* Set the position to relative to enable absolute positioning of its child elements */
+ display: flex; /* Use flexbox for layout */
+ z-index: 10; /* Set stacking order */
+}
+
+.navbar ul .work ul {
+ position: absolute; /* Position the dropdown menu absolutely relative to its nearest positioned ancestor */
+ flex-direction: column; /* Arrange children in a column */
+ left: 0%; /* Align the left edge of the dropdown with the parent */
+ top: 100%; /* Position the top of the dropdown just below the parent */
+ width: 100px; /* Set a fixed width for the dropdown */
+ display: none; /* Initially hide the dropdown */
+ padding: 0; /* Remove default padding */
+ z-index: 20; /* Set a higher stacking order for the dropdown */
+}
+
+.navbar ul .work ul li {
+ z-index: 20; /* Ensure list items have the same stacking order as the parent */
+ background-color: #050d7a; /* Set background color */
+ margin-bottom: 2px; /* Add space between items */
+}
+
+.navbar ul .work:hover ul {
+ display: block; /* Show the dropdown when hovering over the parent */
+}
+
+.navbar ul .work ul li:hover {
+ background-color: white; /* Change background color on hover */
+ border-radius: 0; /* Remove border radius */
+ color:#050d7a;
+
+}
+.navbar ul .work ul li a:hover {
+
+ color:#05687a;
+
+}
+.entry {
+ display: flex;
+ margin:auto 20px;
+ margin-right: 30px;
+ margin-top: 30px;
+ color: rgb(216, 216, 216);
+ text-decoration: none;
+}
+
+
+
+/* Контейнер с элементами, использующий Flexbox для адаптивного размещения */
+.container {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ padding-top: 30px;
+}
+.content1{
+ max-width:54%;
+ margin:auto 0;
+ & p {
+ text-align: justify; /* Выравнивание текста по ширине */
+ font-size: 1.2rem; /* Увеличенный размер шрифта */
+ font-weight: normal; /* Обычный вес шрифта */
+ margin-right: 20px;
+ margin-left: 10px; /* Отступы по бокам */
+ }
+}
+
+/* Стили для изображений внутри контейнера */
+.container img {
+ border-radius: 10%; /* Скругленные углы изображения */
+ box-shadow: 5px 5px 5px gray; /* Добавление тени с серым цветом */
+ min-width:30%; /* Ширина изображения составляет 50% от ширины родительского элемента */
+ max-width: 46%;
+ height: auto; /* Автоматическое подстраивание высоты для сохранения пропорций */
+ margin: auto 0;
+}
+
+/* Эффект при наведении на изображение */
+.container img:hover {
+ transform: scale(1.1); /* Увеличение изображения на 10% */
+ transition: 0.5s ease; /* Плавный переход за 0.5 секунды */
+ box-shadow: 10px 10px 5px #7cc6e5; /* Изменение цвета тени на синий */
+}
+
+/* Фон для всей страницы */
+body {
+ background-color: #f7f7fa; /* Светло-серый фон */
+}
+
+/* Фон для основного содержимого страницы */
+body {
+ background: linear-gradient(0deg, rgb(45, 231, 144) 0%, rgba(21, 15, 97, 0.72) 37%, rgb(1, 0, 78) 100%);
+}
+/* Стили для текста в параграфах */
+p {
+ text-align: justify; /* Выравнивание текста по ширине */
+ font-size: 1.2rem; /* Увеличенный размер шрифта */
+ font-weight: normal; /* Обычный вес шрифта */
+ margin-right: 20px;
+ margin-left: 10px; /* Отступы по бокам */
+ color:white;
+}
+
+.container section {
+ width: 100%; /* Секция занимает всю ширину контейнера */
+ margin: auto; /* Центрирование секции */
+}
+
+.container-video {
+ display: flex;
+ flex-direction: column; /* Контейнер для видео, элементы располагаются вертикально */
+}
+
+.video1, .video2, .video3 {
+ margin-bottom: 20px; /* Отступ снизу для каждого видео-блока */
+ flex-direction: column; /* Внутренние элементы располагаются вертикально */
+ display: flex; /* Применение Flexbox для управления содержимым */
+}
+
+.video1 iframe {
+ margin: auto; /* Центрирование видео по горизонтали */
+}
+
+.video2 iframe {
+ margin: auto; /* Центрирование iframe по горизонтали */
+}
+
+.video3 iframe {
+ margin: auto; /* Центрирование iframe по горизонтали */
+}
+
+.container-audio {
+ display: flex;
+ flex-direction: column; /* Контейнер для аудио, элементы располагаются вертикально */
+}
+
+.audio1{
+ display: flex;
+ flex-direction: column; /* Внутренние элементы располагаются вертикально */
+ margin-top: 20px; /* Отступ сверху для каждого аудио-блока */
+}
+.audio1 h3{
+ text-align: center;
+ color:white
+}
+
+.audio1 audio, .audio2 audio, .audio3 audio {
+ width: 60%; /* Аудиоплееры занимают 60% ширины контейнера */
+ margin: auto; /* Центрирование аудиоплееров по горизонтали */
+}
+audio{
+ padding-top:15px;
+}
+
+.audio1 img, .audio2 img, .audio3 img {
+ margin: auto; /* Центрирование изображений */
+ border-radius: 10%; /* Скругление углов изображений */
+ box-shadow: 5px 5px 5px #7cc6e5; /* Добавление синеватой тени к изображениям */
+}
+
+.container-book {
+ display: flex;
+ flex-direction: column; /* Контейнер для книг, элементы располагаются вертикально */
+}
+
+.book1, .book2, .book3 {
+ display: flex;
+ flex-direction: column; /* Внутренние элементы располагаются вертикально */
+ margin-top: 20px; /* Отступ сверху для каждого книжного блока */
+}
+
+.book1 img, .book2 img, .book3 img {
+ margin: auto; /* Центрирование изображений */
+ border-radius: 10%; /* Скругление углов изображений */
+ box-shadow: 5px 5px 5px #7cc6e5; /* Добавление синеватой тени к изображениям */
+ margin-bottom: 10px; /* Отступ снизу для изображений */
+}
+
+.book1 a, .book2 a, .book3 a {
+ margin: auto; /* Центрирование ссылок */
+ text-decoration: none; /* Убираем подчеркивание у ссылок */
+ color: black; /* Цвет текста ссылок черный */
+ font-size: 1.2rem; /* Увеличенный размер шрифта для ссылок */
+}
+
+.book1 img:hover, .book2 img:hover, .book3 img:hover {
+ box-shadow: 5px 5px 5px greenyellow; /* Изменение тени на зеленовато-желтую при наведении на изображение */
+}
+
+.book1 a:hover, .book2 a:hover, .book3 a:hover {
+ background-color: #7cc6e5; /* Изменение фона ссылки на синий при наведении */
+ transition: 0.7s ease; /* Плавный переход фона за 0.7 секунды */
+}
+
+footer {
+ display: flex;
+ flex-direction: row; /* Элементы внутри футера располагаются горизонтально */
+ justify-content: center; /* Центрирование содержимого футера */
+}
+
+footer a {
+ margin-right: 10px; /* Отступ справа у ссылок в футере */
+}
+.form {
+ flex-direction: column; /* Arrange the children of the .form container in a column layout */
+}
+
+.form form {
+ display: flex; /* Use flexbox for the form layout */
+ flex-direction: column; /* Arrange form elements in a column */
+}
+
+.form form fieldset {
+ display: flex; /* Use flexbox for the fieldset layout */
+ flex-direction: column; /* Arrange fieldset elements in a column */
+ width: 50%; /* Set the width of the fieldset to 50% of the container */
+ margin: auto; /* Center the fieldset horizontally */
+ margin-top: 30px; /* Add a margin of 30px to the top */
+ margin-bottom: 10px; /* Add a margin of 10px to the bottom */
+ border-radius: 20px;
+}
+
+.form form fieldset input {
+ margin-bottom: 10px; /* Add a margin of 10px to the bottom of each input element */
+ border-radius: 7px;
+}
+
+.form form fieldset legend {
+ text-align: center; /* Center the legend text */
+ font-size: 1.2rem; /* Set the font size of the legend text to 1.2rem */
+ font-weight: bold; /* Make the legend text bold */
+ color:white;
+}
+.form form fieldset label {
+ color:white
+}
+label{
+ color: white;
+}
+
+.form form button {
+ width: 200px; /* Set the width of the button to 200px */
+ font-size: 1.2rem; /* Set the font size of the button text to 1.2rem */
+ background-color: #24779b; /* Set the background color of the button */
+ color: white; /* Set the text color of the button to white */
+ margin: auto; /* Center the button horizontally */
+ margin-bottom: 20px; /* Add a margin of 20px to the bottom */
+}
+
+.form form button:hover {
+ font-size: 1.2rem; /* Maintain the font size of the button text on hover */
+ background-color: #91130c; /* Change the background color of the button on hover */
+ color: rgb(248, 243, 243); /* Change the text color of the button on hover */
+}
+
+
+
+@media (max-width: 700px) {
+
+
+ .container {
+ display: flex;
+ flex-direction: column; /* Переключение на вертикальный макет */
+ }
+ body{
+ overflow-x: hidden;
+ }
+
+ .person {
+ display: flex;
+ flex-direction: column; /* Внутренние элементы располагаются вертикально */
+ flex-wrap: wrap; /* Перенос элементов на новую строку при необходимости */
+ width: 100%; /* Элемент занимает всю ширину контейнера */
+ margin: 0; /* Убираем отступы */
+ }
+
+ .person p {
+ margin-top: 5px; /* Отступ сверху для параграфов */
+ margin-bottom: 10px; /* Отступ снизу для параграфов */
+ }
+
+ .container img {
+ margin-top: 20px; /* Отступ сверху для изображений */
+ border-radius: 10%; /* Скругление углов изображений */
+ box-shadow: 5px 5px 5px gray; /* Тень для изображений */
+ width: 95%; /* Изображение занимает 95% ширины контейнера */
+ height: auto; /* Высота автоматически подстраивается под ширину */
+ margin: auto; /* Центрирование изображения по горизонтали */
+ }
+
+ .container img:hover {
+ transform: scale(1.03); /* Легкое увеличение изображения при наведении */
+ transition: 0.5s ease; /* Плавный переход увеличения за 0.5 секунды */
+ box-shadow: 5px 5px 5px #7cc6e5; /* Изменение тени при наведении */
+ }
+
+ .interests {
+ display: flex;
+ flex-direction: column; /* Внутренние элементы располагаются вертикально */
+ flex-wrap: wrap; /* Перенос элементов на новую строку при необходимости */
+ width: 100%; /* Элемент занимает всю ширину контейнера */
+ margin: 0; /* Убираем отступы */
+ }
+
+ .interests p {
+ margin-top: 10px; /* Отступ сверху для параграфов */
+ margin-bottom: 0; /* Убираем отступ снизу */
+ }
+
+ h2 {
+ margin: 10px; /* Отступы вокруг заголовка */
+ text-align: center; /* Выравнивание заголовка по центру */
+ }
+
+ .video1 video {
+ margin-top: 20px; /* Отступ сверху для видео */
+ width: 95%; /* Видео занимает 95% ширины контейнера */
+ height: auto; /* Высота автоматически подстраивается под ширину */
+ }
+
+ .video2 iframe {
+ width: 95%; /* Iframe занимает 95% ширины контейнера */
+ height: 320px; /* Высота Iframe фиксирована */
+ }
+
+ .video3 iframe {
+ width: 95%; /* Iframe занимает 95% ширины контейнера */
+ height: 320px; /* Высота Iframe фиксирована */
+ }
+
+ .book1 img, .book2 img, .book3 img {
+ width: 95%; /* Изображения книг занимают 95% ширины контейнера */
+ height: auto; /* Высота автоматически подстраивается под ширину */
+ }
+ .burger {
+ display: block;
+ position: relative; /* Относительное позиционирование для внутренних элементов */
+ width: 50px; /* Ширина контейнера */
+ height: 40px; /* Высота контейнера */
+ margin:auto; /* Автоматические отступы по бокам для центрирования */
+ margin-top:20px;
+ margin-right: 10px; /* Отступ справа */
+ contain: layout;
+
+ }
+
+
+ .burger span {
+ position: absolute; /* Абсолютное позиционирование для расположения полосок внутри контейнера */
+ width: 30px; /* Ширина каждой полоски */
+ left: 5px; /* Отступ от левого края контейнера */
+ height: 3px; /* Высота полоски */
+ background-color: rgb(255, 255, 255); /* Цвет полоски */
+ bottom: 20px; /* Расположение полоски от нижнего края контейнера */
+ }
+ .burger span:nth-child(1) {
+ transform: translateY(-10px); /* Перемещение первой полоски вверх на 10px */
+ }
+ /* Стили для третьей полоски бургер-меню */
+ .burger span:nth-child(3) {
+ transform: translateY(10px); /* Перемещение третьей полоски вниз на 10px */
+ }
+ .navbar ul li:nth-child(1) {
+ margin-top: 20px; /* Увеличение отступа сверху для первого элемента списка */
+ }
+ .navbar ul {
+ position: absolute; /* Абсолютное позиционирование относительно ближайшего позиционированного предка, в нашем случае экрана. */
+ background: white;
+ flex-direction: column; /* Элементы списка будут выстраиваться вертикально (необходимо для флекс-контейнера) */
+ width: 30%; /* Ширина списка равна 30% от ширины родительского элемента */
+ height: auto; /* Высота автоматически подстраивается под содержимое */
+ top: 68px; /* Расположение списка на 68px ниже от верхнего края родительского элемента */
+ right: -40%; /* Расположение списка на 40% ширины родительского элемента слева (вне видимой области) */
+ z-index: 2; /* Уровень стека элемента, чтобы он перекрывал другие элементы с меньшим z-index */
+ }
+
+ /* Стили для ссылок внутри элементов списка */
+ .navbar ul li a {
+ margin-left: 0; /* Установка нулевого отступа слева для ссылок */
+ font-size: 1.1rem; /* Установка размера шрифта в 1.2rem */
+ }
+
+ /* Стили для навигационного меню при открытом состоянии */
+ .navbar.open ul {
+ transform: translateX(-100%); /* Перемещение меню на 100% ширины вправо (выдвигается за пределы видимой области) */
+ transition: 0.7s ease-in-out; /* Плавный переход эффекта с продолжительностью 0.7 секунды */
+ }
+
+ /* Стили для первой полоски бургер-меню при открытом состоянии */
+ .navbar.open .burger span:nth-child(1) {
+ transform: translateY(0) rotate(45deg); /* Поворачивает первую полоску на 45 градусов и возвращает в исходное положение по вертикали */
+ }
+
+ /* Стили для второй полоски бургер-меню при открытом состоянии */
+ .navbar.open .burger span:nth-child(2) {
+ opacity: 0; /* Делает вторую полоску полностью прозрачной (не видимой) */
+ }
+
+ /* Стили для третьей полоски бургер-меню при открытом состоянии */
+ .navbar.open .burger span:nth-child(3) {
+ transform: translateY(0) rotate(-45deg); /* Поворачивает третью полоску на -45 градусов и возвращает в исходное положение по вертикали */
+ }
+ .entry {
+ display: flex;
+ margin:auto 0;
+ color: rgb(216, 216, 216);
+ text-decoration: none;
+ }
+ .navbar ul .work ul {
+ position: absolute; /* Position the dropdown menu absolutely relative to its nearest positioned ancestor */
+ flex-direction: column; /* Arrange children in a column */
+ left: 100%; /* Align the left edge of the dropdown with the parent */
+ top: 100%; /* Position the top of the dropdown just below the parent */
+ width: 100px; /* Set a fixed width for the dropdown */
+ display: none; /* Initially hide the dropdown */
+ padding: 0; /* Remove default padding */
+ z-index: 20; /* Set a higher stacking order for the dropdown */
+ }
+ .form form fieldset{
+ width: 65%;
+ }
+
+}
+
+@media (min-width: 700px) and (max-width: 900px) {
+ /* При ширине экрана от 700px до 900px */
+
+ .container img {
+ margin-top: 20px; /* Отступ сверху для изображений */
+ border-radius: 10%; /* Скругление углов изображений */
+ box-shadow: 5px 5px 5px gray; /* Тень для изображений */
+ width: 320px; /* Ширина изображения фиксирована */
+ height: 200px; /* Высота изображения фиксирована */
+ margin: auto; /* Центрирование изображения по горизонтали */
+ }
+
+ .form form fieldset{
+ width: 80%;
+ }
+}
diff --git a/video.html b/video.html
new file mode 100644
index 0000000..3272aa7
--- /dev/null
+++ b/video.html
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+ video
+
+
+
+
+
+
+
+
A video describing how an Australian Youtuber barely survived a firebombing (spoiler: he wasn't there when the attack hit) and his potential rivals who might have caused it.