diff --git a/image1.png b/image1.png new file mode 100644 index 00000000..413a7e8f Binary files /dev/null and b/image1.png differ diff --git a/image2.png b/image2.png new file mode 100644 index 00000000..4aaefb6c Binary files /dev/null and b/image2.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..5d2a1674 --- /dev/null +++ b/index.html @@ -0,0 +1,51 @@ + + + + + + Лабораторная работа 1 — вариант 25 + + + + +
+

Лабораторная работа №1

+

РАБОТУ ВЫПОЛНИЛ
ТУДАКОВ РОДИОН
ГРУППА 6212-10.05.03D

+
+ +

Задание 1

+
+ JavaScript (сокр. JS) — мультипарадигмальный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. Является реализацией спецификации ECMAScript (стандарт ECMA-262).

+ JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение он находит в браузерах как язык сценариев для придания веб-страницам интерактивности. +
+ +

Задание 2

+
+ Картинка 1 + Картинка 2 +
+ +

Задание 3

+
+
+
+
+
+ +

Задание 4

+
+
+
+
+ +
+
+
+ +
+
+
+
+ + + diff --git a/style.css b/style.css new file mode 100644 index 00000000..46d30ca6 --- /dev/null +++ b/style.css @@ -0,0 +1,116 @@ +body { + font-family: Arial, Helvetica, sans-serif; + background-color: #f4f4f4; + padding: 20px; + line-height: 1.6; +} + +.header { + text-align: center; + margin-bottom: 40px; +} + +.header h1 { + margin-bottom: 10px; + color: #333; +} + +.header p { + font-size: 1.4em; + font-weight: bold; + color: #222; + margin: 8px 0; +} + +h2 { + text-align: center; + color: #444; + padding: 20px 0 50px; +} + +.text-container { + max-width: 800px; + margin: 40px auto; + padding: 30px; + background-color: #6F4700; + color: #3D5D93; + text-align: left; + border-radius: 10px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); +} + +.image-overlay { + position: relative; + width: 300px; + height: 400px; + margin: 50px auto; + border: 3px solid #333; +} + +.image-overlay__img { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 250px; + height: auto; +} + +.image-overlay__img--front { + z-index: 10; +} + +.traffic-light { + width: 120px; + height: 300px; + background-color: #222; + margin: 60px auto; + padding: 15px; + border-radius: 20px; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; +} + +.traffic-light__light { + width: 90px; + height: 90px; + border-radius: 50%; +} + +.traffic-light__light--red { background-color: #c0392b; } +.traffic-light__light--yellow { background-color: #f1c40f; } +.traffic-light__light--green { background-color: #27ae60; } + +.maze { + display: grid; + grid-template-columns: repeat(3, 120px); + grid-template-rows: repeat(3, 120px); + gap: 0; + margin: 60px auto; + width: fit-content; + background-color: #ffffff; + padding: 15px; + border: 5px solid #000; + border-radius: 10px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); +} + +.maze__cell { + box-sizing: border-box; + background-color: #f8f8f8; +} + +.maze__cell--wall-top { border-top: 5px solid #000; } +.maze__cell--wall-right { border-right: 5px solid #000; } +.maze__cell--wall-bottom { border-bottom: 5px solid #000; } +.maze__cell--wall-left { border-left: 5px solid #000; } + +.maze__cell--start, +.maze__cell--end { + background-color: #d0f0d0; +} + background-color: #dff0d8; + +}