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..2ab039e0 --- /dev/null +++ b/index.html @@ -0,0 +1,89 @@ + + + + + + Лабораторная работа 2 – Вариант 25 + + + + +
+

РАБОТУ ВЫПОЛНИЛ ТУДАКОВ РОДИОН

+

ГРУППА 6212-10.05.03D

+
+ +
+

Задание 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
+
+
child 1
+
child 2
+
+
+
+ +
+ +
+

Задание 3. Текст со ссылками и логотипом

+
+

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

+ + + +

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

+
+
+ + + \ No newline at end of file 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; + +} diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..305b3b38 --- /dev/null +++ b/styles.css @@ -0,0 +1,81 @@ +body { + font-family: Arial, sans-serif; + padding: 30px; + background: #f5f5f5; + color: #333; + line-height: 1.6; +} + +header { + text-align: center; + margin-bottom: 40px; + padding: 20px; + background: #2c3e50; + color: white; + border-radius: 10px; +} + +header h1 { + margin: 0; + font-size: 28px; +} + +header p { + margin: 10px 0 0; + font-size: 20px; +} + +h2 { + color: #2c3e50; + border-bottom: 2px solid #3498db; + padding-bottom: 10px; +} + +section { + margin-bottom: 50px; +} + +.lang-list { + list-style: none; + padding: 0; + max-width: 350px; +} + +.lang-list li { + padding: 14px 20px; + margin: 12px 0; + background: white; + border-radius: 8px; + box-shadow: 0 3px 10px rgba(0,0,0,0.1); + font-size: 18px; + transition: color 0.4s ease; /* только цвет */ +} + +.lang-list li:hover { + color: #e74c3c; /* плавно меняется только цвет */ +} + +.parent-1 .child { color: red; } + +.parent-2 { color: orange; } +.parent-2 .child { + color: #b4005a; + border: 2px dashed orange; + padding: 8px 14px; + display: inline-block; + margin: 6px 4px; +} + +.parent-2 ~ .parent-3, +.parent-2 ~ .parent-3 .child { + color: green !important; +} + +.parent-3 .parent-2 .child { + color: purple !important; + border: none !important; +} + +.parent-1, .parent-2, .parent-3 { + margin: 35px 0; + padding \ No newline at end of file