diff --git a/Работы/web/lab1/css/style.css b/Работы/web/lab1/css/style.css new file mode 100644 index 0000000..e4ba202 --- /dev/null +++ b/Работы/web/lab1/css/style.css @@ -0,0 +1,106 @@ +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial, sans-serif; + line-height: 1.5; + color: #1f2933; + background: #f5f7fa; +} + +.container { + max-width: 900px; + margin: 0 auto; + padding: 0 16px; +} + +header { + background: #2b6a8a; + color: #fff; + padding: 16px 0; +} + +main { + padding: 20px 0; +} + +section, +.article-block { + background: #fff; + border: 1px solid #d6dee6; + border-radius: 8px; + padding: 14px; + margin-bottom: 14px; +} + +h1, +h2 { + margin: 0 0 10px; +} + +.nav-list { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-wrap: wrap; + gap: 8px; +} + +.nav-list a, +a.inline-link { + color: #0b5f8a; + text-decoration: none; +} + +.nav-list a:hover, +a.inline-link:hover { + text-decoration: underline; +} + +.city-image { + width: 100%; + max-width: 460px; + display: block; + margin: 10px 0; + border: 1px solid #ccd6e0; +} + +table { + width: 100%; + border-collapse: collapse; + margin-top: 8px; +} + +th, +td { + border: 1px solid #c9d3de; + padding: 8px; + text-align: left; +} + +th { + background: #eaf1f7; +} + +.positive { + color: #0d7a3a; + font-weight: 700; +} + +.negative { + color: #b02a2a; + font-weight: 700; +} + +footer { + padding: 12px 0 20px; +} + +@media (max-width: 640px) { + .nav-list { + flex-direction: column; + } +} diff --git a/Работы/web/lab1/img/murmansk.png b/Работы/web/lab1/img/murmansk.png new file mode 100644 index 0000000..537ae88 Binary files /dev/null and b/Работы/web/lab1/img/murmansk.png differ diff --git a/Работы/web/lab1/img/murmansk2.png b/Работы/web/lab1/img/murmansk2.png new file mode 100644 index 0000000..3e563aa Binary files /dev/null and b/Работы/web/lab1/img/murmansk2.png differ diff --git a/Работы/web/lab1/index.html b/Работы/web/lab1/index.html new file mode 100644 index 0000000..82e2b5e --- /dev/null +++ b/Работы/web/lab1/index.html @@ -0,0 +1,84 @@ + + + + + + + Мурманск - главная + + + + +
+
+

Мурманск

+

Простой учебный сайт об одном городе

+
+
+ +
+
+

Навигация

+ +
+ +
+

Кратко о городе

+

Мурманск основан в 1916 году. Это крупнейший город мира за Полярным кругом и важный незамерзающий порт + России.

+ Мурманск, порт и северный город + Мурманск, северное сияние +
+ +
+

Список характеристик

+ +
+ +
+

Основные сведения

+ + + + + + + + + + + + + + + + + + + + + + +
Факты о Мурманске
ПараметрЗначение
Год основания1916
РегионМурманская область
Население (2024)266 900 человек
+
+
+ + + + + diff --git a/Работы/web/lab1/pages/page1.html b/Работы/web/lab1/pages/page1.html new file mode 100644 index 0000000..7bf535c --- /dev/null +++ b/Работы/web/lab1/pages/page1.html @@ -0,0 +1,47 @@ + + + + + + + Мурманск - история + + + + +
+
+

Мурманск: история

+
+
+ +
+
+

Навигация

+ +
+ +
+

История города

+

Мурманск основан в 1916 году как порт Романов-на-Мурмане. В 1917 году получил современное название.

+

Город быстро вырос благодаря незамерзающему порту. В годы Великой Отечественной войны Мурманск стал + важным центром приема северных конвоев.

+ Мурманск, морской порт +
+
+ + + + + diff --git a/Работы/web/lab1/pages/page2.html b/Работы/web/lab1/pages/page2.html new file mode 100644 index 0000000..8b057f0 --- /dev/null +++ b/Работы/web/lab1/pages/page2.html @@ -0,0 +1,65 @@ + + + + + + Мурманск - климат + + + +
+
+

Мурманск: климат

+
+
+ +
+
+

Навигация

+ +
+ +
+

Климат города

+

Климат Мурманска субарктический морской: зима долгая, лето короткое и прохладное.

+ Мурманск и северное сияние + + + + + + + + + + + + + + + + + + + + + + +
Средняя температура по месяцам, °C
МесяцТемпература
Январь-10
Февраль-10
Март-6
Апрель-1
Май4
Июнь10
Июль13
Август12
Сентябрь8
Октябрь3
Ноябрь-3
Декабрь-7
+
+
+ + + + diff --git a/Работы/web/lab1/pages/page3.html b/Работы/web/lab1/pages/page3.html new file mode 100644 index 0000000..b38e0e2 --- /dev/null +++ b/Работы/web/lab1/pages/page3.html @@ -0,0 +1,151 @@ + + + + + + + Мурманск - население + + + + +
+
+

Мурманск: население

+
+
+ +
+
+

Навигация

+ +
+ +
+

Динамика населения по актуальным данным

+

По данным из таблицы видно общее снижение численности населения с отдельными годами роста.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Население Мурманска: 2006-2025
ГодКоличество жителейИзменение
2006321 000-
2007317 500уменьшилось
2008314 800уменьшилось
2009311 209уменьшилось
2010307 257уменьшилось
2011307 310выросло
2012305 034уменьшилось
2013302 468уменьшилось
2014299 148уменьшилось
2015305 236выросло
2016301 572уменьшилось
2017298 096уменьшилось
2018295 374уменьшилось
2019292 465уменьшилось
2020287 847уменьшилось
2021270 384уменьшилось
2023267 422уменьшилось
2024266 681уменьшилось
2025264 339уменьшилось
+
+
+ + + + + diff --git a/Работы/web/sem/css/main.css b/Работы/web/sem/css/main.css new file mode 100644 index 0000000..1a43c5d --- /dev/null +++ b/Работы/web/sem/css/main.css @@ -0,0 +1,389 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + + + +body { + /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */ + font-family: 'Roboto', 'Arimo', sans-serif; + line-height: 1.6; + color: #333; + background-color: #f4f4f4; +} + +/* Навигация */ +.navbar { + background-color: #2c3e50; + color: white; + padding: 1rem 2rem; + display: flex; + justify-content: space-between; + align-items: center; + position: sticky; + top: 0; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +.logo { + font-size: 1.5rem; + font-weight: bold; +} + +.nav-links { + list-style: none; + display: flex; + gap: 2rem; +} + +.nav-links a { + color: white; + text-decoration: none; + transition: color 0.3s; +} + +.nav-links a:hover { + color: #3498db; +} + +/* Главная секция */ +.hero { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + padding: 5rem 2rem; + text-align: center; +} + +.hero-content h1 { + font-size: 3rem; + margin-bottom: 1rem; +} + +.hero-content p { + font-size: 1.2rem; + margin-bottom: 2rem; +} + +/* Кнопки */ +.btn { + padding: 0.75rem 1.5rem; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 1rem; + transition: all 0.3s; + font-weight: bold; +} + +.btn-primary { + background-color: #3498db; + color: white; +} + +.btn-primary:hover { + background-color: #2980b9; + transform: translateY(-2px); +} + +.btn-secondary { + background-color: #95a5a6; + color: white; +} + +.btn-secondary:hover { + background-color: #7f8c8d; +} + +.btn-success { + background-color: #27ae60; + color: white; +} + +.btn-success:hover { + background-color: #229954; +} + +/* О нас */ +.about { + background-color: white; + padding: 4rem 2rem; + text-align: center; +} + +.about h2 { + font-size: 2.5rem; + margin-bottom: 3rem; + color: #2c3e50; +} + +.about-content { + display: flex; + gap: 2rem; + justify-content: center; + flex-wrap: wrap; + max-width: 1200px; + margin: 0 auto; +} + +.about-card { + background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); + padding: 2rem; + border-radius: 8px; + flex: 0 1 300px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + transition: transform 0.3s; +} + +.about-card:hover { + transform: translateY(-5px); +} + +.about-card h3 { + font-size: 1.5rem; + margin-bottom: 1rem; + color: #2c3e50; +} + +/* Возможности */ +.features { + background-color: #ecf0f1; + padding: 4rem 2rem; +} + +.features h2 { + font-size: 2.5rem; + text-align: center; + margin-bottom: 3rem; + color: #2c3e50; +} + +.features h3 { + font-size: 1.8rem; + margin: 2rem 0 1rem 0; + color: #2c3e50; +} + +/* Списки */ +.list-container { + display: flex; + gap: 2rem; + margin-bottom: 2rem; + justify-content: center; + flex-wrap: wrap; +} + +.list-column { + background: white; + padding: 1.5rem; + border-radius: 5px; + flex: 0 1 250px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.list-column h4 { + margin-bottom: 1rem; + color: #2c3e50; +} + +.list-column ul, +.list-column ol { + margin-left: 1.5rem; +} + +.list-column li { + margin-bottom: 0.5rem; +} + +/* Таблица */ +.data-table { + width: 100%; + max-width: 600px; + margin: 1.5rem auto; + border-collapse: collapse; + background: white; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + border-radius: 5px; + overflow: hidden; +} + +.data-table thead { + background-color: #3498db; + color: white; +} + +.data-table th, +.data-table td { + padding: 1rem; + text-align: left; + border-bottom: 1px solid #ddd; +} + +.data-table tbody tr:nth-child(even) { + background-color: #f9f9f9; +} + +.data-table tbody tr:hover { + background-color: #ecf0f1; +} + +/* Цветовая палитра */ +.color-palette { + display: flex; + gap: 1rem; + justify-content: center; + flex-wrap: wrap; + margin: 2rem 0; +} + +.color-box { + width: 100px; + height: 100px; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + transition: transform 0.3s; +} + +.color-box:hover { + transform: scale(1.1); +} + +.color-box.primary { + background-color: #3498db; +} + +.color-box.secondary { + background-color: #2c3e50; +} + +.color-box.success { + background-color: #27ae60; +} + +.color-box.warning { + background-color: #f39c12; +} + +.color-box.danger { + background-color: #e74c3c; +} + +/* Форма */ +.contact { + background-color: white; + padding: 4rem 2rem; +} + +.contact h2 { + font-size: 2.5rem; + text-align: center; + margin-bottom: 2rem; + color: #2c3e50; +} + +.form { + max-width: 500px; + margin: 0 auto; + background-color: #f9f9f9; + padding: 2rem; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.form-group { + margin-bottom: 1.5rem; + display: flex; + flex-direction: column; +} + +.form-group label { + margin-bottom: 0.5rem; + font-weight: bold; + color: #2c3e50; +} + +.form-group input[type="text"], +.form-group input[type="email"], +.form-group textarea, +.form-group select { + padding: 0.75rem; + border: 1px solid #ddd; + border-radius: 5px; + font-size: 1rem; + font-family: inherit; + transition: border-color 0.3s; +} + +.form-group input[type="text"]:focus, +.form-group input[type="email"]:focus, +.form-group textarea:focus, +.form-group select:focus { + outline: none; + border-color: #3498db; + box-shadow: 0 0 5px rgba(52, 152, 219, 0.3); +} + +.form-group.checkbox { + flex-direction: row; + align-items: center; + gap: 0.5rem; +} + +.form-group.checkbox input[type="checkbox"] { + width: 20px; + height: 20px; + cursor: pointer; +} + +.form-group.checkbox label { + margin-bottom: 0; +} + +.form .btn { + margin-right: 1rem; +} + +/* Подвал */ +.footer { + background-color: #2c3e50; + color: white; + text-align: center; + padding: 2rem; +} + +/* Адаптивность */ +@media (max-width: 768px) { + .navbar { + flex-direction: column; + gap: 1rem; + } + + .nav-links { + flex-direction: column; + gap: 1rem; + } + + .hero-content h1 { + font-size: 2rem; + } + + .about-content { + flex-direction: column; + } + + .list-container { + flex-direction: column; + } + + .color-palette { + gap: 0.5rem; + } + + .color-box { + width: 80px; + height: 80px; + } +} diff --git a/Работы/web/sem/index.html b/Работы/web/sem/index.html new file mode 100644 index 0000000..5e5dec2 --- /dev/null +++ b/Работы/web/sem/index.html @@ -0,0 +1,166 @@ + + + + + + + Демонстрация HTML и CSS + + + + + + + + + +
+
+

Добро пожаловать!

+

Это демонстрация различных HTML элементов и CSS свойств

+ +
+
+ + +
+

О сайте

+
+
+

📝 Текст

+

Это обычный параграф демонстрирует стиль текста с использованием CSS свойств как color, font-size и + line-height.

+
+
+

🎨 Дизайн

+

Рассказывает о использовании цветов, отступов, границ и других стилей для создания интересного + визуального оформления.

+
+
+

📦 Макет

+

Демонстрирует Flexbox layout для создания гибкого и адаптивного дизайна страницы на различных + экранах.

+
+
+
+ + +
+

Возможности

+ +

Типы списков

+
+
+

Неупорядоченный список:

+
    +
  • Первый элемент
    • +
  • Второй элемент
    • +
  • Третий элемент
    • +
+
+
+

Упорядоченный список:

+
    +
  1. Шаг первый
    2. +
  2. Шаг второй
    3. +
  3. Шаг третий
    4. +
+
+
+ + +

Таблица данных

+ + + + + + + + + + + + + + + + + + + + + + + + + +
ИмяВозрастГород
Иван25Москва
Мария30Санкт-Петербург
Петр28Казань
+ + +

Цветовая палитра

+
+
+
+
+
+
+
+
+ + +
+

Контактная форма

+
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + + +
+
+ + + + + + diff --git a/Работы/ЭА/ЛР1_ЭА.xlsx b/Работы/ЭА/ЛР1_ЭА.xlsx index a30f58e..4181737 100644 Binary files a/Работы/ЭА/ЛР1_ЭА.xlsx and b/Работы/ЭА/ЛР1_ЭА.xlsx differ