diff --git a/lab1/image_cat1.jpg b/lab1/image_cat1.jpg new file mode 100644 index 00000000..413a7e8f Binary files /dev/null and b/lab1/image_cat1.jpg differ diff --git a/lab1/main.html b/lab1/main.html new file mode 100644 index 00000000..2e174213 --- /dev/null +++ b/lab1/main.html @@ -0,0 +1,44 @@ + + + + + + Лабораторная работа 1 — Вариант 28 + + + + + +
+ JavaScript (аббр. JS) — мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. Является реализацией спецификации ECMAScript (стандарт ECMA-262). + JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам. +
+ + +
+ Картинка 1 + Картинка 2 +
+ + +
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+ + + diff --git a/lab1/style.css b/lab1/style.css new file mode 100644 index 00000000..0873fb88 --- /dev/null +++ b/lab1/style.css @@ -0,0 +1,111 @@ +body { + width: 1000px; + margin: 0 auto; + padding: 0 20px 20px 20px; + border: 5px solid black; +} + +.text-block { + color:#AD5D3E; + background-color: #B7493A; + text-align: center; + padding: 20px; + border-radius: 15px; + max-width: 1000px; + line-height: 1.5; +} + +.image-container { + position: relative; + display: flex; + align-items: center; + justify-content: center; + height: 600px; + margin: 20px 0; +} + +.image-container__image { + position: absolute; + max-width: 400px; +} + +.image-container__image--background { + z-index: 1; +} + +.image-container__image--overlay { + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 2; +} + + +.traffic-lights { + display: flex; + flex-direction: column; + align-items: center; + background: #4c4c4c; + width: 110px; + padding: 20px; + border-radius: 10px; + margin: 0 auto; +} + +.traffic-light { + width: 60px; + height: 60px; + padding: 20px; + border-radius: 50px; + margin: 5px; +} + +.traffic-light--green { + background: #009900; +} + +.traffic-light--yellow { + background: #ffff00; +} + +.traffic-light--red { + background: #fa0000; +} + +.maze { + display: grid; + grid-template-columns: repeat(3, 80px); + grid-template-rows: repeat(3, 80px); + justify-content: center; + margin: 40px 0; +} + +.maze__cell { + width: 80px; + height: 80px; + display: flex; + align-items: center; + justify-content: center; + border: 2px solid black; + margin: -1px; +} + +.maze__row { + display: flex; +} + +.maze__cell--open-left { + border-left-color: transparent; +} + +.maze__cell--open-right { + border-right-color: transparent; +} + +.maze__cell--open-top { + border-top-color: transparent; +} + +.maze__cell--open-bottom { + border-bottom-color: transparent; +} diff --git a/lab1/very_cute_cat2.jpg b/lab1/very_cute_cat2.jpg new file mode 100644 index 00000000..4aaefb6c Binary files /dev/null and b/lab1/very_cute_cat2.jpg differ diff --git a/lab2/lab2.html b/lab2/lab2.html new file mode 100644 index 00000000..3e5a2d42 --- /dev/null +++ b/lab2/lab2.html @@ -0,0 +1,85 @@ + + + + + + Лабораторная работа 2, вариант 28 + + + + +
+

Лабораторная работа 2, вариант 28

+ +
+

Задание 1

+ +
+ +
+

Задание 2

+ +
+
+

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
+
+
+
+ +
+

Задание 3

+ +

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

+ + + +

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

+ +

+ нажми на меня +

+
+
+ + diff --git a/lab2/style.css b/lab2/style.css new file mode 100644 index 00000000..b3fa2225 --- /dev/null +++ b/lab2/style.css @@ -0,0 +1,155 @@ +body { + background: #fff0f6; + font-family: "Segoe UI", sans-serif; + margin: 0; + color: #4a0433; +} + +.page { + max-width: 1000px; + margin: 0 auto; + background: white; + padding: 30px; + border-radius: 15px; + box-shadow: 0 10px 50px rgba(255, 105, 180, 0.2); + border-left: 5px solid #ec4899; +} + +.page__title { + text-align: center; + color: #be185d; + margin-bottom: 30px; + padding-bottom: 15px; + border-bottom: 3px solid #f472b6; +} + +.task { + margin-bottom: 30px; + padding: 20px; + background: #fff5f9; + border-radius: 10px; +} + +.task__title { + border-left: 4px solid #f472b6; + padding-left: 15px; + background: #ffe4ec; + color: #a21caf; + margin: 0 0 14px; +} + +.list { + margin: 0 0 0 20px; + padding: 0; +} + +.list__item { + color: #500724; + transition: color 0.3s ease-in-out; + margin: 8px 0; + font-weight: 600; +} + +.list__item:hover { + color: #db2777; +} + +.parent-1__child { + color: red; +} + +.parent-2 { + color: orange; +} + +.parent-2__child { + color: #b4005a; + border: 2px dotted orange; + max-width: 180px; + margin: 6px 0; + padding: 6px; +} + +.parent-3__child { + color: inherit; +} + +.parent-2 ~ .parent-3, +.parent-2 ~ .parent-3 .parent-3__title, +.parent-2 ~ .parent-3 .parent-3__child { + color: green; +} + +.parent-3 .parent-2__child { + border: none !important; + color: purple !important; + margin: 0 !important; + padding: 0 !important; +} + +.languages { + margin: 0 0 0 20px; + padding: 0; + list-style: none; + position: relative; +} + +.languages::after { + content: ""; + display: block; + background: #0e4c92 url("https://ssau.ru/i/logo/logo-white-ru.svg ") center/100px no-repeat; + width: 140px; + height: 72px; + border-radius: 4px; + margin-top: 15px; +} + +.languages__item { + margin: 10px 0; + line-height: 1.45; + position: relative; + padding-left: 24px; +} + +.languages__item::before { + content: "🌐"; + position: absolute; + left: 0; + top: 0; + font-size: 1em; +} + +.item__link { + text-decoration: none; + color: #831843; + font-weight: bold; +} + +.item__link:hover { + color: #db2777; +} + +.task__note { + color: #9d174d; + margin-top: 12px; +} + +.task__cta { + margin-top: 14px; +} + +.cta__pinterest-link { + display: inline-block; + background: #ec4899; + color: #fff; + padding: 10px 14px; + border-radius: 6px; + text-decoration: none; + font-weight: 700; + transition: 0.3s; +} + +.cta__pinterest-link:hover { + opacity: 0.95; + background: #db2777; +} diff --git a/lab3/avatar.jpg b/lab3/avatar.jpg new file mode 100644 index 00000000..eb32225b Binary files /dev/null and b/lab3/avatar.jpg differ diff --git a/lab3/lab3.css b/lab3/lab3.css new file mode 100644 index 00000000..8eafe82e --- /dev/null +++ b/lab3/lab3.css @@ -0,0 +1,153 @@ +body { + margin: 0; + font-family: "Segoe UI", sans-serif; + background: #0f1a20; + color: #e8e8e8; +} + +.page { + max-width: 900px; + margin: 0 auto; + padding: 40px 20px; +} + +.resume { + display: flex; + align-items: center; + gap: 40px; + margin-bottom: 50px; + padding: 25px; + background: rgba(255,255,255,0.04); + border-radius: 20px; + backdrop-filter: blur(5px); + border: 1px solid rgba(255,255,255,0.08); +} + +.resume__photo--main { + width: 220px; + height: 220px; + overflow: hidden; + border-radius: 20px; + border: 3px solid #4a5d63; +} + +.resume__photo--main img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: 30% center; +} + +.resume__info { + display: flex; + flex-direction: column; + gap: 8px; +} + +.resume__name { + font-size: 32px; + font-weight: 600; +} + +.resume__birth { + font-size: 16px; + opacity: 0.85; +} + +.section { + margin-bottom: 40px; + padding: 25px; + background: rgba(255,255,255,0.03); + border-radius: 16px; + border: 1px solid rgba(255,255,255,0.05); + backdrop-filter: blur(3px); +} + +.section__title { + font-size: 22px; + margin-bottom: 15px; +} + +.skills-columns { + display: flex; + gap: 40px; + justify-content: space-between; +} + +.skills-columns__column { + width: 50%; +} + +.skills-columns__title { + font-size: 18px; + font-weight: 600; + margin-bottom: 10px; + font-style: italic; +} + +.skills-columns__list { + margin: 0; + padding-left: 20px; +} + +.skills-columns__item { + margin-bottom: 6px; + line-height: 1.4; +} + +.github__link a, +.fun-test a { + color: #9fd8ff; + text-decoration: none; + font-weight: 500; +} + +.github__link a:hover, +.fun-test a:hover { + text-decoration: underline; +} + +.cats__photo { + width: 100%; + display: flex; + justify-content: center; + padding-top: 10px; +} + +.cats__photo img { + width: 60%; + border-radius: 20px; + border: 2px solid rgba(255,255,255,0.1); +} + +.bg-wave { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: url("ocean.jpg") center/cover no-repeat; + opacity: 0.15; + z-index: -1; + filter: grayscale(70%); +} + +.projects__list { + margin: 0; + padding-left: 20px; +} + +.projects__item { + margin-bottom: 8px; + line-height: 1.4; +} + +.projects__item a { + color: #9fd8ff; + text-decoration: none; + font-weight: 500; +} + +.projects__item a:hover { + text-decoration: underline; +} diff --git a/lab3/lab3.html b/lab3/lab3.html new file mode 100644 index 00000000..2ff86b01 --- /dev/null +++ b/lab3/lab3.html @@ -0,0 +1,88 @@ + + + + + Резюме + + + + +
+ +
+ +
+
+ Фото +
+ +
+
Паршин Андрей Максимович
+
Дата рождения: 17.07.2006
+
+
+ +
+
Увлечения
+

Катаюсь на горных лыжах

+
+ +
+
+ +
+

Hard skills

+
    +
  • C++
    • +
  • Python
    • +
  • Английский язык
    • +
  • Немецкий язык
    • +
  • Итальянский язык
    • +
  • Испанский язык
    • +
+
+ +
+

Soft skills

+
    +
  • Эмоциональный интеллект
    • +
  • Легкая обучаемость
    • +
  • Умение находить компромисс
    • +
  • Отличные лидерские качества
    • +
+
+ +
+
+ +
+
GitHub
+

+ + https://github.com/aparsin340 + +

+
+ +
+
Мои проекты
+ +
+ +
+
О себе
+

+ Недавно перевелся на ИБАС не судите строго :( +

+
+ +
+ +