diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..2008f994 Binary files /dev/null and b/.DS_Store differ diff --git a/images/.DS_Store b/images/.DS_Store new file mode 100644 index 00000000..536d3c3f Binary files /dev/null and b/images/.DS_Store differ diff --git a/images/164648-kot-kotenok-privlekatelnost-golova-glaz-3840x2160.jpg b/images/164648-kot-kotenok-privlekatelnost-golova-glaz-3840x2160.jpg new file mode 100644 index 00000000..413a7e8f Binary files /dev/null and b/images/164648-kot-kotenok-privlekatelnost-golova-glaz-3840x2160.jpg differ diff --git a/images/cd16121609a79d95dffbfa28a326331e.jpg b/images/cd16121609a79d95dffbfa28a326331e.jpg new file mode 100644 index 00000000..4aaefb6c Binary files /dev/null and b/images/cd16121609a79d95dffbfa28a326331e.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..70e39a98 --- /dev/null +++ b/index.html @@ -0,0 +1,60 @@ + + + + + + Лабораторная работа 1 — Вариант 8 + + + + +
+
+ JavaScript (аббр. JS) — мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. Является реализацией спецификации ECMAScript (стандарт ECMA-262). + JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам. +
+
+ +
+ Картинка 1 + Картинка 2 +
+ +
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/lab2/.DS_Store b/lab2/.DS_Store new file mode 100644 index 00000000..aa50bf7c Binary files /dev/null and b/lab2/.DS_Store differ diff --git a/lab2/index2.html b/lab2/index2.html new file mode 100644 index 00000000..e020e1cc --- /dev/null +++ b/lab2/index2.html @@ -0,0 +1,74 @@ + + + + + + Лабораторная работа по CSS (БЭМ) + + + + +
+

Популярные виды спорта:

+ +
+ +
+

Семьи (родители и дети):

+ +
+

Parent 1

+
child 1
+
child 2
+
child 3
+
child 4
+
+ +
+

Parent 3

+
child 1
+
child 2
+
+ +
+

Parent 2

+
child 1
+
child 2
+
+ +
+

Parent 3

+
child 1
+
child 2
+
child 2
+
+
+ +
+

Информация о языках программирования:

+

Языки программирования — это инструменты, с помощью которых разработчики создают программное обеспечение, веб-приложения, игры, алгоритмы и многое другое. Каждый язык имеет свои особенности, синтаксис и сферу применения. Ниже представлены некоторые из наиболее известных языков:

+ + + +

Это лишь малая часть из множества существующих языков, и выбор зависит от задач, которые нужно решить.

+
+ + + \ No newline at end of file diff --git a/lab2/styles2.css b/lab2/styles2.css new file mode 100644 index 00000000..cf0e04a4 --- /dev/null +++ b/lab2/styles2.css @@ -0,0 +1,122 @@ +body { + font-family: Arial, sans-serif; + line-height: 1.6; + padding: 20px; + background-color: #fafafa; + color: #333; +} + +h2 { + margin-top: 30px; + color: #2c3e50; +} + +.sports-list { + list-style: none; + padding-left: 0; +} + +.sports-list__item { + color: #333; + font-size: 18px; + padding: 10px 15px; + margin: 5px 0; + border-radius: 6px; + transition: color 0.4s ease-out, background-color 0.4s ease; + cursor: pointer; +} + +.sports-list__item:hover { + color: #3961e6; + background-color: #80a1e4; +} + + +.parent-1, +.parent-2, +.parent-3 { + margin: 20px 0; + padding: 10px; + border: 1px solid #ddd; + border-radius: 6px; +} + +.parent-1__title, +.parent-2__title, +.parent-3__title { + margin: 0 0 10px; + font-weight: bold; + font-size: 1.1em; +} + +.parent-1__child { + color: red; +} + +.parent-2 { + color: orange; +} +.parent-2__child { + color: #b4005a; + border: 1px dashed orange; + padding: 6px; + margin: 4px 0; + border-radius: 4px; +} + +.parent-2 ~ .parent-3 .parent-3__child { + color: green; +} + +.parent-2__child { + color: purple; + border: none; + background-color: transparent; +} + + +.lang-list { + list-style: none; + padding-left: 0; +} + +.lang-list__item { + margin-bottom: 10px; +} + +.lang-list__item-link { + font-weight: bold; + text-decoration: none; + color: inherit; + transition: color 0.2s; +} + +.lang-list__item-link:hover { + color: #2a7ae2; +} + +.lang-list__item-link::before { + content: "🌐 "; + font-weight: normal; + color: #666; + font-size: 0.9em; + margin-right: 6px; +} + +.lang-list::after { + content: ""; + display: block; + width: 200px; + height: 60px; + margin: 25px auto; + background-image: url("https://ssau.ru/i/logo/logo-white-ru.svg"); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + border: 1px solid #ccc; + border-radius: 6px; + padding: 12px; + background-color: #191919; + box-shadow: 0 2px 6px rgba(0,0,0,0.05); + opacity: 0.9; +} \ No newline at end of file diff --git a/lab3/2025-12-15 21.06.17.jpg b/lab3/2025-12-15 21.06.17.jpg new file mode 100644 index 00000000..585d65c3 Binary files /dev/null and b/lab3/2025-12-15 21.06.17.jpg differ diff --git a/lab3/index3.html b/lab3/index3.html new file mode 100644 index 00000000..5aaef280 --- /dev/null +++ b/lab3/index3.html @@ -0,0 +1,122 @@ + + + + + + Моё резюме + + + +
+
+ Фото студента +
Корнилов Никита Алексеевич
+
Студент института Информатики и кибернетики
+ +
+
+ 📧 + nik.kornilov96@gmail.com +
+
+ 📞 + +7 (777) 777-77-77 +
+
+ 🌐 + VK +
+
+ 📍 + Самара, Россия +
+
+
+ +
+
+

О себе

+

Студент Аэрокоса ИБАСа. Стремлюсь к постоянному развитию и применению новых знаний на практике. Умею работать в команде и быстро адаптироваться к новым задачам.

+
+ +
+

Дата рождения

+

17 марта 2006 года

+
+ +
+

Любимые увлечения

+
+
    +
  • + 💪 + Спортзал (жим 120) +
    • +
  • + 🥋 + Дзюдо МС +
    • +
  • + 🎮 + Игры на PC и консолях +
    • +
  • + 🎧 + Прослушивание музыки +
    • +
  • + ⚽ + Футбол +
    • +
  • + 👨‍🎨 + Написание портретов +
    • +
+
+
+ +
+

Hard- и Soft-скилы

+
+
+

Hard skills

+
+
HTML/CSS
+
C++
+
C
+
Python
+
Git/GitHub
+
+
+ +
+

Soft skills

+
+
Коммуникация
+
Работа в команде
+
Тайм-менеджмент
+
Аналитическое мышление
+
+
+
+
+ +
+

GitHub

+

Посмотрите мои проекты и код:

+ Kornelei13 +
+
+

Мои проекты

+ +
+
+
+ + \ No newline at end of file diff --git a/lab3/styles3.css b/lab3/styles3.css new file mode 100644 index 00000000..baffa09d --- /dev/null +++ b/lab3/styles3.css @@ -0,0 +1,220 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html, body { + height: 100%; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background: #f5f5f5; + color: #333; + line-height: 1.6; +} + +body { + display: flex; + min-height: 100vh; + overflow-x: hidden; +} + +.container { + display: flex; + width: 100%; + max-width: 100%; + height: 100vh; + box-shadow: none; + border-radius: 0; + overflow: hidden; +} + +.left-column { + width: 30%; + background: linear-gradient(135deg, #6e8efb, #a777e3); + color: white; + padding: 30px 20px; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + height: 100%; + overflow-y: auto; +} + +.photo { + width: 150px; + height: 150px; + object-fit: cover; + border: 4px solid white; + margin-bottom: 20px; + border-radius: 8px; +} + +.name { + font-size: 28px; + font-weight: bold; + margin-bottom: 5px; +} + +.position { + font-size: 16px; + opacity: 0.9; + margin-bottom: 20px; +} + +.contact-info { + width: 100%; + margin-top: 20px; +} + +.contact-item { + display: flex; + align-items: center; + margin-bottom: 15px; + padding: 10px; + background: rgba(255, 255, 255, 0.1); + border-radius: 8px; +} + +.contact-icon { + width: 24px; + margin-right: 10px; + text-align: center; +} + +.right-column { + width: 70%; + padding: 20px; + background: white; + overflow-y: auto; + height: 100%; +} + +.section { + background: white; + margin-bottom: 20px; + border-radius: 10px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); + padding: 20px; +} + +.section-title { + font-size: 20px; + font-weight: bold; + color: #555; + margin-bottom: 15px; + padding-bottom: 10px; + border-bottom: 2px solid #6e8efb; +} + + +.hobbies__list { + list-style: none; +} + +.hobbies__item { + display: flex; + align-items: center; + margin-bottom: 12px; + gap: 12px; +} + +.hobbies__icon { + font-size: 20px; +} + +.hobbies__text { + font-size: 16px; +} + + +.skills { + display: flex; + flex-direction: column; + gap: 20px; +} + +.skills__group { + background: #f9f9f9; + padding: 16px; + border-radius: 10px; + border-left: 4px solid #6e8efb; +} + +.skills__title { + font-size: 18px; + font-weight: bold; + margin-bottom: 12px; + color: #444; +} + +.skills__list { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); + gap: 12px; +} + +.skills__item { + background: #f0f4ff; + padding: 10px; + border-radius: 8px; + text-align: center; + font-size: 14px; + color: #333; + border: 1px solid #d0d8f8; +} + + +.github-link { + display: inline-block; + color: #007bff; + text-decoration: none; + font-weight: bold; + margin-top: 10px; +} + +.github-link:hover { + text-decoration: underline; +} + + +@media (max-width: 768px) { + .container { + flex-direction: column; + height: auto; + } + + .left-column, + .right-column { + width: 100%; + height: auto; + padding: 20px; + } + + .skills { + flex-direction: column; + } + + .skills__list { + grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); + } + .projects__list { + list-style: none; + padding-left: 0; + } +} +.projects__item { + margin-bottom: 12px; +} + +.projects__item a { + color: #007bff; + text-decoration: none; + font-weight: 600; + transition: color 0.2s; +} + +.projects__item a:hover { + text-decoration: underline; + color: #0056b3; +} diff --git a/lab4/index4.html b/lab4/index4.html new file mode 100644 index 00000000..cc197ddd --- /dev/null +++ b/lab4/index4.html @@ -0,0 +1,42 @@ + + + + + + Калькулятор — ЛР №4 + + + +
+

Калькулятор

+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+ +
+
+ + + + \ No newline at end of file diff --git a/lab4/javik4.js b/lab4/javik4.js new file mode 100644 index 00000000..0228e27c --- /dev/null +++ b/lab4/javik4.js @@ -0,0 +1,66 @@ +document.addEventListener('DOMContentLoaded', () => { + const calculateBtn = document.getElementById('calculateBtn'); + if (calculateBtn) { + calculateBtn.addEventListener('click', calculate); + } +}); + +function calculate() { + const num1Input = document.getElementById('num1'); + const num2Input = document.getElementById('num2'); + const operationSelect = document.getElementById('operation'); + const resultElement = document.getElementById('result'); + if (!num1Input || !num2Input || !operationSelect || !resultElement) { + console.error('Один из элементов не найден.'); + resultElement.innerHTML = ''; + return; + } + const num1 = parseFloat(num1Input.value); + const num2 = parseFloat(num2Input.value); + const operation = operationSelect.value; + + + resultElement.textContent = ''; + resultElement.className = 'calculator__result'; + + + if (isNaN(num1)) { + showError('Ошибка: первое число некорректно'); + return; + } + if (isNaN(num2)) { + showError('Ошибка: второе число некорректно'); + return; + } + if (operation === 'divide' && num2 === 0) { + showError('Ошибка: деление на ноль!'); + return; + } + + let result; + switch (operation) { + case 'add': + result = num1 + num2; + break; + case 'subtract': + result = num1 - num2; + break; + case 'multiply': + result = num1 * num2; + break; + case 'divide': + result = num1 / num2; + break; + default: + showError('Неизвестная операция'); + return; + } + + resultElement.textContent = `Результат: ${result}`; +} + +function showError(message) { + const resultElement = document.getElementById('result'); + resultElement.textContent = message; + resultElement.className = 'calculator__result calculator__result--error'; +} \ No newline at end of file diff --git a/lab4/styles4.css b/lab4/styles4.css new file mode 100644 index 00000000..7fed8b48 --- /dev/null +++ b/lab4/styles4.css @@ -0,0 +1,91 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background: linear-gradient(135deg, #6e8efb, #a777e3); + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + color: #333; +} + +.calculator { + background: white; + padding: 30px; + border-radius: 16px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); + width: 90%; + max-width: 400px; +} + +.calculator__title { + text-align: center; + margin-bottom: 24px; + color: #555; + font-size: 24px; + font-weight: 600; +} + +.calculator__form { + display: flex; + flex-direction: column; + gap: 16px; +} + +.calculator__input-group { + display: flex; + flex-direction: column; + gap: 6px; +} + +.calculator__label { + font-weight: 600; + color: #444; + font-size: 14px; +} + +.calculator__input, +.calculator__select { + width: 100%; + padding: 12px; + border: 1px solid #ccc; + border-radius: 8px; + font-size: 16px; +} + +.calculator__button { + background: #6e8efb; + color: white; + border: none; + border-radius: 8px; + padding: 12px; + font-size: 16px; + font-weight: bold; + cursor: pointer; + transition: background 0.3s; +} + +.calculator__button:hover { + background: #5a7bec; +} + +.calculator__result { + margin-top: 20px; + padding: 12px; + background: #f0f4ff; + border-radius: 8px; + text-align: center; + font-size: 18px; + font-weight: bold; + min-height: 24px; +} + +.calculator__result--error { + color: #d32f2f; + background: #ffebee; +} \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..89495ddf --- /dev/null +++ b/styles.css @@ -0,0 +1,128 @@ +body { + font-family: Arial, sans-serif; + background-color: #f9f9f9; + padding: 20px; + margin: 0; + + } + + .text-block { + padding: 20px; + margin: 20px auto; + border: 2px solid #8a1c85; + border-radius: 8px; + max-width: 700px; + box-sizing: border-box; + } + + .text-block--variant8 { + background-color: #A91FA3; + } + + .text-block__content { + text-align: center; + color: #ABC0B0; + font-size: 16px; + line-height: 1.5; + } + + + .image-stack { + position: relative; + width: 300px; + height: 300px; + margin: 50px auto; + overflow: hidden; + } + + .image-stack__image { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + max-width: 100%; + max-height: 100%; + object-fit: contain; + } + + .image-stack__image--bottom { + z-index: 1; + } + + .image-stack__image--top { + z-index: 2; + } + + + .traffic-light { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + margin: 30px auto; + width: 80px; + background: #222; + padding: 20px; + border-radius: 12px; + } + + .traffic-light__lamp { + width: 60px; + height: 60px; + border-radius: 50%; + } + + .traffic-light__lamp--red { + background-color: red; + } + + .traffic-light__lamp--yellow { + background-color: yellow; + } + + .traffic-light__lamp--green { + background-color: green; + } + +.maze { + display: grid; + grid-template-columns: repeat(6, 150px); + grid-template-rows: repeat(4, 150px); + gap: 0; + background: #0000003b; + padding: 10px; + width: fit-content; + margin: 50px auto; +} + +.maze__cell { + box-sizing: border-box; +} + +.maze__cell:nth-child(6n + 1), +.maze__cell:nth-child(6n + 3), +.maze__cell:nth-child(6n + 5) { + background: #818080; +} + +.maze__cell:nth-child(6n + 2), +.maze__cell:nth-child(6n + 4), +.maze__cell:nth-child(6n + 6) { + background: #ffffff; +} + +.border-top { + border-top: 2px solid #000; +} + +.border-right { + border-right: 2px solid #000; +} + +.border-bottom { + border-bottom: 2px solid #000; +} + +.border-left { + border-left: 2px solid #000; +} \ No newline at end of file