From e774461f478cea7ab582823585c1d3d63bea8871 Mon Sep 17 00:00:00 2001 From: YaroslavBonzo Date: Mon, 15 Dec 2025 14:11:32 +0400 Subject: [PATCH 1/2] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=D1=8B=20=D1=84=D0=B0=D0=B9=D0=BB=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lab4.html | 55 ++++++++ script.js | 145 +++++++++++++++++++ style4.css | 402 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 602 insertions(+) create mode 100644 lab4.html create mode 100644 script.js create mode 100644 style4.css diff --git a/lab4.html b/lab4.html new file mode 100644 index 00000000..760811f2 --- /dev/null +++ b/lab4.html @@ -0,0 +1,55 @@ + + + + + + калькулятор + + + + +
+

calculator

+ +
+ + +
+
+ +
+ + +
+
+ +
+ + +
+ + + +
+
Result:
+
—
+
+ +
+
Operation history:
+
+
+ +
+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 00000000..e6f93a2e --- /dev/null +++ b/script.js @@ -0,0 +1,145 @@ +document.addEventListener('DOMContentLoaded', function() { + const number1Input = document.getElementById('number1'); + const number2Input = document.getElementById('number2'); + const operationSelect = document.getElementById('operation'); + const calculateButton = document.getElementById('calculate'); + const resultElement = document.getElementById('result'); + const error1Element = document.getElementById('error1'); + const error2Element = document.getElementById('error2'); + const historyList = document.getElementById('history-list'); + + let operationsHistory = []; + + function updateHistory() { + historyList.innerHTML = ''; + + if (operationsHistory.length === 0) { + historyList.innerHTML = '
Transaction history is empty
'; + return; + } + + const recentHistory = operationsHistory.slice(-5).reverse(); + + recentHistory.forEach(item => { + const historyItem = document.createElement('div'); + historyItem.className = 'history-item'; + historyItem.textContent = item; + historyList.appendChild(historyItem); + }); + } + + function addToHistory(num1, num2, operation, result) { + let operationSymbol; + switch(operation) { + case 'add': operationSymbol = '+'; break; + case 'subtract': operationSymbol = '-'; break; + case 'multiply': operationSymbol = '×'; break; + case 'divide': operationSymbol = '÷'; break; + default: operationSymbol = '?'; + } + + const historyEntry = `${num1} ${operationSymbol} ${num2} = ${result}`; + operationsHistory.push(historyEntry); + updateHistory(); + } + + function validateInput() { + let isValid = true; + + error1Element.textContent = ''; + error2Element.textContent = ''; + + if (number1Input.value === '') { + error1Element.textContent = 'Please enter the first number'; + isValid = false; + } else if (isNaN(parseFloat(number1Input.value))) { + error1Element.textContent = 'Please enter a valid number'; + isValid = false; + } + + if (number2Input.value === '') { + error2Element.textContent = 'Please enter the second number'; + isValid = false; + } else if (isNaN(parseFloat(number2Input.value))) { + error2Element.textContent = 'Please enter a valid number'; + isValid = false; + } + + if (operationSelect.value === 'divide' && parseFloat(number2Input.value) === 0) { + error2Element.textContent = 'Division by zero is impossible'; + isValid = false; + } + + return isValid; + } + + function calculate() { + if (!validateInput()) { + resultElement.textContent = '—'; + resultElement.style.color = '#ff0000ff'; + return; + } + + const num1 = parseFloat(number1Input.value); + const num2 = parseFloat(number2Input.value); + const operation = operationSelect.value; + + 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: + result = NaN; + } + + if (isNaN(result)) { + resultElement.textContent = 'Calculation error'; + resultElement.style.color = '#e74c3c'; + } else if (!isFinite(result)) { + resultElement.textContent = 'Infinity'; + resultElement.style.color = '#e74c3c'; + } else { + const formattedResult = Math.abs(result) > 1e10 || (Math.abs(result) < 1e-10 && result !== 0) + ? result.toExponential(5) + : parseFloat(result.toFixed(10)).toString(); + + resultElement.textContent = formattedResult; + resultElement.style.color = '#ff0000ff'; + + addToHistory(num1, num2, operation, formattedResult); + } + } + + calculateButton.addEventListener('click', calculate); + + number1Input.addEventListener('keypress', function(e) { + if (e.key === 'Enter') calculate(); + }); + + number2Input.addEventListener('keypress', function(e) { + if (e.key === 'Enter') calculate(); + }); + + operationSelect.addEventListener('change', function() { + if (this.value === 'divide' && parseFloat(number2Input.value) === 0) { + error2Element.textContent = 'Деление на ноль невозможно'; + } else { + error2Element.textContent = ''; + } + }); + + updateHistory(); + + number1Input.focus(); +}); \ No newline at end of file diff --git a/style4.css b/style4.css new file mode 100644 index 00000000..b84fe2b8 --- /dev/null +++ b/style4.css @@ -0,0 +1,402 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%); + font-family: 'BBH Sans Bartle', 'Segoe UI', sans-serif; + padding: 20px; + color: #333; + line-height: 1.5; +} + +.calculator-container { + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + border-radius: 24px; + box-shadow: + 0 20px 40px rgba(0, 0, 0, 0.15), + 0 0 0 1px rgba(255, 255, 255, 0.1); + padding: 40px 35px; + width: 100%; + max-width: 480px; + transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1); + border: 1px solid rgba(255, 255, 255, 0.2); +} + +.calculator-container:hover { + transform: translateY(-8px); + box-shadow: + 0 30px 60px rgba(0, 0, 0, 0.2), + 0 0 0 1px rgba(255, 255, 255, 0.2); +} + +h1 { + text-align: center; + color: #2d3436; + margin-bottom: 35px; + font-weight: 700; + font-size: 2.0rem; + position: relative; + padding-bottom: 15px; + letter-spacing: -0.5px; + line-height: 1.2; +} + +h1::after { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 80px; + height: 4px; + background: linear-gradient(90deg, #ff6b6b, #4ecdc4); + border-radius: 2px; +} + +.input-group { + margin-bottom: 28px; +} + +label { + display: block; + margin-bottom: 10px; + font-weight: 600; + color: #2d3436; + font-size: 1.1rem; + letter-spacing: 0.3px; + line-height: 1.4; +} + +input, select { + width: 100%; + padding: 16px 20px; + border: 2px solid #e0e6ed; + border-radius: 12px; + font-size: 1.05rem; + transition: all 0.3s ease; + background: white; + color: #2d3436; + font-family: inherit; + line-height: 1.5; +} + +input::placeholder { + color: #a0aec0; + opacity: 0.7; +} + +input:hover, select:hover { + border-color: #a0aec0; +} + +input:focus, select:focus { + outline: none; + border-color: #4ecdc4; + box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.1); + transform: translateY(-1px); +} + +.operation-selector { + margin-bottom: 35px; +} + +select { + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232d3436' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 20px center; + background-size: 16px; + padding-right: 50px; + cursor: pointer; +} + +.calculate-btn { + background: linear-gradient(135deg, #2d3436 0%, #4a5568 100%); + color: white; + border: none; + padding: 18px; + width: 100%; + border-radius: 12px; + font-size: 1.2rem; + font-weight: 700; + cursor: pointer; + transition: all 0.3s ease; + margin-bottom: 30px; + letter-spacing: 0.5px; + position: relative; + overflow: hidden; + line-height: 1.5; +} + +.calculate-btn::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); + transition: left 0.7s; +} + +.calculate-btn:hover { + background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%); + transform: translateY(-3px); + box-shadow: 0 10px 25px rgba(255, 107, 107, 0.3); +} + +.calculate-btn:hover::before { + left: 100%; +} + +.calculate-btn:active { + transform: translateY(0); + box-shadow: 0 5px 15px rgba(255, 107, 107, 0.2); +} + +.result-container { + background: #f8fafc; + border-radius: 16px; + padding: 25px; + text-align: center; + border: 2px dashed #e2e8f0; + min-height: 100px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + transition: border-color 0.3s ease; + margin-bottom: 30px; +} + +.result-container:hover { + border-color: #4ecdc4; +} + +.result-label { + font-size: 0.95rem; + color: #718096; + margin-bottom: 8px; + text-transform: uppercase; + letter-spacing: 1px; + font-weight: 600; + line-height: 1.4; +} + +.result-value { + font-size: 2.4rem; + font-weight: 700; + color: #2d3436; + word-break: break-all; + line-height: 1.2; + min-height: 45px; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + padding: 0 10px; +} + +.error-message { + color: #e53e3e; + font-weight: 600; + margin-top: 8px; + font-size: 0.9rem; + min-height: 20px; + padding-left: 5px; + display: flex; + align-items: center; + gap: 6px; + line-height: 1.4; +} + +.error-message::before { + content: '⚠'; + font-size: 1rem; +} + +.operations-history { + margin-top: 35px; + padding-top: 25px; + border-top: 2px solid #edf2f7; +} + +.history-title { + font-size: 1.1rem; + color: #2d3436; + margin-bottom: 15px; + font-weight: 700; + display: flex; + align-items: center; + gap: 10px; + line-height: 1.4; +} + +.history-title::before { + content: '📋'; + font-size: 1.2rem; +} + +.history-item { + background: white; + padding: 14px 18px; + margin-bottom: 10px; + border-radius: 10px; + font-size: 1rem; + color: #2d3436; + border-left: 4px solid #4ecdc4; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03); + transition: all 0.3s ease; + display: flex; + justify-content: space-between; + align-items: center; + line-height: 1.5; +} + +.history-item:hover { + transform: translateX(5px); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08); +} + +.history-item::after { + content: '→'; + color: #a0aec0; + font-weight: bold; + font-size: 1.2rem; +} + +.history-empty { + color: #a0aec0; + font-style: italic; + text-align: center; + padding: 30px 20px; + background: #f7fafc; + border-radius: 10px; + border: 2px dashed #e2e8f0; + font-size: 1rem; + line-height: 1.5; +} + +/* Анимация для нового элемента истории */ +@keyframes slideIn { + from { + opacity: 0; + transform: translateX(-20px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +.history-item { + animation: slideIn 0.4s ease-out; +} + +/* Улучшения для выравнивания текста внутри контейнеров */ +.input-group, +.operation-selector, +.result-container, +.operations-history { + text-align: left; +} + +/* Фиксы для центрирования текста */ +.calculate-btn, +.result-label { + text-align: center; +} + +/* Фикс для длинных текстов */ +input, select, button, .history-item, .result-value { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.result-value { + white-space: normal; + word-wrap: break-word; + overflow-wrap: break-word; +} + +/* Адаптивность */ +@media (max-width: 600px) { + .calculator-container { + padding: 30px 25px; + border-radius: 20px; + } + + h1 { + font-size: 2rem; + margin-bottom: 25px; + padding-bottom: 12px; + } + + input, select { + padding: 14px 18px; + font-size: 1rem; + } + + .calculate-btn { + padding: 16px; + font-size: 1.1rem; + } + + .result-value { + font-size: 2rem; + padding: 0 5px; + } + + body { + padding: 15px; + } + + label { + font-size: 1rem; + } +} + +@media (max-width: 400px) { + .calculator-container { + padding: 25px 20px; + } + + h1 { + font-size: 1.8rem; + } + + .result-value { + font-size: 1.8rem; + } + + .history-item { + padding: 12px 15px; + font-size: 0.95rem; + } +} + +/* Фиксы для вертикального выравнивания */ +input, select, button { + vertical-align: middle; +} + +/* Единый отступ для всех элементов формы */ +.input-group, +.operation-selector, +.calculate-btn, +.result-container, +.operations-history { + margin-left: 0; + margin-right: 0; + padding-left: 0; + padding-right: 0; +} \ No newline at end of file From bff8174edfaa5af5e918bfda29963e1afa013838 Mon Sep 17 00:00:00 2001 From: YaroslavBonzo Date: Sat, 20 Dec 2025 01:59:16 +0400 Subject: [PATCH 2/2] =?UTF-8?q?=D1=82=D0=B0=D0=BA=20=D0=B4=D0=BE=D0=B1?= =?UTF-8?q?=D0=B0=D0=B2=D0=B8=D0=BB=203=20=D0=BB=D0=B0=D0=B1=D1=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Ура? --- labweb3/index.html | 137 +++++++++++ labweb3/style/images.jpg | Bin 0 -> 10745 bytes labweb3/style/style.css | 488 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 625 insertions(+) create mode 100644 labweb3/index.html create mode 100644 labweb3/style/images.jpg create mode 100644 labweb3/style/style.css diff --git a/labweb3/index.html b/labweb3/index.html new file mode 100644 index 00000000..b542ba50 --- /dev/null +++ b/labweb3/index.html @@ -0,0 +1,137 @@ + + + + + + Резюме + + + +
+
+
+ Фото +
+
+

Щукин Ярослав Владимирович

+

Студент Самарского Университета

+
+
+ +
+

Основная информация

+
+
+ Дата рождения: + 23.01.2007 +
+
+ Направление: + Информационная безопасность автоматизированных систем +
+
+
+ +
+

Увлечения

+
    +
  • Суета
    • +
  • СММ
    • +
  • Дизайн
    • +
  • Суета
    • +
  • Футбол
    • +
  • Суета
    • +
+
+ +
+

+ + Hard Skills +

+
+ Пушка Роналду + Высшая математика + Штрафные месси + Обход утильсбор +
+
+ +
+

+ + Soft Skills +

+
+ Роналду + Хорошая память + Трэп + Лихач + месси + Хорошая память +
+
+ +
+

GitHub

+
+ + + YaroslavBonzo + +
+
+ +
+

О себе

+
+

Студент направления ИБАС

+

Работайте братья!

+
+
+ +
+

Email: te9nic@gmail.com

+
+
+ + + +
+

+ + Мои проекты +

+
+ +
+
🔐
+
+

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

+

Основы web-base

+ https://github.com/itsecd/web-base/pull/33 +
+
+ + +
+
📱
+
+

Лабораторная работа 4

+

Калькулятор

+ https://github.com/itsecd/web-base/pull/391 +
+
+ +
+
\ No newline at end of file diff --git a/labweb3/style/images.jpg b/labweb3/style/images.jpg new file mode 100644 index 0000000000000000000000000000000000000000..36af53bca6176d78949974f85140b9d3d418a694 GIT binary patch literal 10745 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 G%l`vP1|k;# literal 0 HcmV?d00001 diff --git a/labweb3/style/style.css b/labweb3/style/style.css new file mode 100644 index 00000000..d816d1b1 --- /dev/null +++ b/labweb3/style/style.css @@ -0,0 +1,488 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* Сброс отступов и включение границ в размер элемента */ +body { + font-family: "Inter", sans-serif; + line-height: 1.6; + background: linear-gradient(135deg, #f0f4ff 0%, #e6e9ff 100%); + min-height: 100vh; + padding: 20px; + color: #1e1b4b; +} + +/* Основной контейнер резюме */ +.resume { + max-width: 800px; + margin: 0 auto; + background: rgba(255, 255, 255, 0.95); + border-radius: 24px; + box-shadow: 0 20px 40px rgba(99, 102, 241, 0.15); + overflow: hidden; + backdrop-filter: blur(10px); + border: 1px solid rgba(99, 102, 241, 0.2); +} + +/* Шапка с градиентом и декором */ +.resume__header { + background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); + color: white; + padding: 50px 40px; + text-align: center; + position: relative; + overflow: hidden; +} + +/* Точки-узор на фоне шапки */ +.resume__header::before { + content: ""; + position: absolute; + top: -50%; + right: -50%; + width: 100%; + height: 200%; + background: radial-gradient( + circle, + rgba(255, 255, 255, 0.2) 1%, + transparent 1% + ); + background-size: 25px 25px; + transform: rotate(25deg); +} + +/* Контейнер для фото с анимированной рамкой */ +.resume__photo-container { + position: relative; + display: inline-block; + margin-bottom: 25px; +} + +/* Само фото - круглое с белой рамкой */ +.resume__photo { + width: 180px; + height: 180px; + border-radius: 50%; + border: 6px solid rgba(255, 255, 255, 0.9); + object-fit: cover; + box-shadow: 0 15px 35px rgba(79, 70, 229, 0.4); + position: relative; + z-index: 2; + transition: all 0.3s ease; +} + +/* Эффект при наведении на фото */ +.resume__photo:hover { + transform: scale(1.05); + box-shadow: 0 20px 45px rgba(79, 70, 229, 0.6); +} + +/* Вращающаяся градиентная рамка вокруг фото */ +.resume__photo-container::after { + content: ""; + position: absolute; + top: -10px; + left: -10px; + right: -10px; + bottom: -10px; + border-radius: 50%; + background: conic-gradient(from 0deg, #4f46e5, #7c3aed, #4f46e5); + animation: rotate 3s linear infinite; + z-index: 1; + opacity: 0.7; +} + +/* Анимация вращения рамки */ +@keyframes rotate { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +/* Главный заголовок имени */ +.resume__title { + font-family: "Playfair Display", serif; + font-size: 2.8em; + font-weight: 700; + margin-bottom: 12px; + color: white; + text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); +} + +/* Подзаголовок профессии */ +.resume__subtitle { + font-size: 1.3em; + opacity: 0.9; + color: white; + font-weight: 400; + letter-spacing: 0.5px; +} + +/* Карточка секции (каждый блок информации) */ +.resume__section { + padding: 35px 40px; + position: relative; + background: white; + margin: 15px; + border-radius: 16px; + box-shadow: 0 5px 20px rgba(99, 102, 241, 0.08); + transition: all 0.3s ease; +} + +/* Эффект поднятия секции при наведении */ +.resume__section:hover { + transform: translateY(-3px); + box-shadow: 0 8px 25px rgba(99, 102, 241, 0.12); +} + +/* Заголовок секции с цветной полоской слева */ +.resume__section-title { + color: #4f46e5; + margin-bottom: 25px; + font-size: 1.6em; + font-weight: 700; + display: flex; + align-items: center; + gap: 12px; + font-family: "Playfair Display", serif; + position: relative; +} + +/* Цветная полоска слева от заголовка */ +.resume__section-title::before { + content: ""; + width: 4px; + height: 25px; + background: linear-gradient(135deg, #4f46e5, #7c3aed); + border-radius: 2px; + display: inline-block; +} + +/* Сетка для основной информации (дата рождения, направление) */ + +.info-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 20px; +} + +.info-grid__item { + display: flex; + align-items: flex-start; /* Изменено с center на flex-start */ + gap: 15px; + padding: 16px 20px; + background: #e0e7ff; + border-radius: 12px; + transition: all 0.3s ease; + border-left: 4px solid #4f46e5; +} + +@media (max-width: 768px) { + .info-grid { + grid-template-columns: 1fr; + gap: 15px; + } + + .info-grid__item { + flex-direction: column; + align-items: flex-start; + gap: 8px; + padding: 20px; + } + + .info-grid__label { + min-width: auto; + font-size: 0.95em; + color: #4f46e5; + font-weight: 600; + } + + .info-grid__value { + font-size: 1em; + line-height: 1.4; + word-wrap: break-word; + overflow-wrap: break-word; + width: 100%; + } +} + +/* Дополнительно для очень маленьких экранов */ +@media (max-width: 480px) { + .info-grid__item { + padding: 18px 16px; + } + + .info-grid__value { + font-size: 0.95em; + text-align: left; + } +} + +/* Сетка для увлечений */ +.hobbies-list { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 15px; + list-style: none; +} + +/* Карточка увлечения */ +.hobbies-list__item { + padding: 18px 20px; + background: #e0e7ff; + border-radius: 12px; + transition: all 0.3s ease; + text-align: center; + font-weight: 500; + color: #3730a3; + border: 2px solid transparent; +} + +/* Эффект при наведении на увлечение */ +.hobbies-list__item:hover { + background: #4f46e5; + color: white; + transform: translateY(-3px); + box-shadow: 0 8px 20px rgba(79, 70, 229, 0.3); + border-color: #7c3aed; +} + +.skills { + display: flex; + flex-wrap: wrap; + gap: 12px; + justify-content: center; +} + +.skills__item { + background: linear-gradient(135deg, #4f46e5, #7c3aed); + color: white; + padding: 10px 20px; + border-radius: 25px; + font-size: 0.95em; + font-weight: 600; + box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3); + transition: all 0.3s ease; + border: 2px solid rgba(255, 255, 255, 0.3); + position: relative; + overflow: hidden; +} + +.skills__item::before { + content: ""; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient( + 90deg, + transparent, + rgba(255, 255, 255, 0.2), + transparent + ); + transition: left 0.5s ease; +} + +.skills__item:hover::before { + left: 100%; +} + +.skills__item:hover { + transform: translateY(-3px) scale(1.05); + box-shadow: 0 8px 25px rgba(79, 70, 229, 0.4); +} + +/* Ссылка на GitHub */ +.github__link { + display: inline-flex; + align-items: center; + gap: 15px; + text-decoration: none; + color: #3730a3; + font-size: 1.2em; + padding: 18px 30px; + border: 2px solid #4f46e5; + border-radius: 16px; + transition: all 0.3s ease; + background: rgba(224, 231, 255, 0.7); + box-shadow: 0 6px 20px rgba(79, 70, 229, 0.15); + font-weight: 600; +} + +/* Эффект при наведении на GitHub */ +.github__link:hover { + background: #4f46e5; + color: white; + transform: translateY(-3px) scale(1.02); + box-shadow: 0 12px 30px rgba(79, 70, 229, 0.3); +} + +/* Логотип GitHub */ +.github__logo { + width: 32px; + height: 32px; + filter: brightness(0.8); + transition: all 0.3s ease; +} + +.github__link:hover .github__logo { + filter: brightness(1); +} + +/* Текст в разделе "О себе" */ +.about__text { + margin-bottom: 20px; + font-size: 1.1em; + line-height: 1.8; + color: #3730a3; + text-align: justify; + padding: 0 10px; +} + +/* Футер с контактной информацией */ +.resume__footer { + background: linear-gradient(135deg, #4f46e5, #7c3aed); + color: white; + padding: 30px 40px; + text-align: center; + margin-top: 20px; +} + +/* Контактная информация в футере */ +.resume__contact { + margin: 8px 0; + font-weight: 500; + font-size: 1.1em; + letter-spacing: 0.5px; +} + +/* Стили для блока проектов */ +.projects { + display: flex; + flex-direction: column; + gap: 20px; +} + +.project__link { + text-decoration: none; + color: inherit; + display: block; +} + +.project__card { + background: rgba(224, 231, 255, 0.5); + border: 2px solid rgba(79, 70, 229, 0.2); + border-radius: 16px; + padding: 25px; + display: flex; + align-items: flex-start; + gap: 20px; + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +.project__card::before { + content: ''; + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 4px; + background: linear-gradient(180deg, #4f46e5, #7c3aed); + transform: scaleY(0); + transition: transform 0.3s ease; +} + +.project__card:hover { + background: rgba(224, 231, 255, 0.8); + border-color: #4f46e5; + transform: translateX(10px); + box-shadow: 0 10px 30px rgba(79, 70, 229, 0.15); +} + +.project__card:hover::before { + transform: scaleY(1); +} + +.project__icon { + font-size: 2.5em; + background: linear-gradient(135deg, #4f46e5, #7c3aed); + color: white; + width: 60px; + height: 60px; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3); +} + +.project__content { + flex: 1; +} + +.project__title { + color: #4f46e5; + font-size: 1.3em; + margin-bottom: 8px; + font-weight: 600; + font-family: 'Playfair Display', serif; +} + +.project__description { + color: #3730a3; + line-height: 1.6; + margin-bottom: 12px; + font-size: 0.95em; +} + +.project__tech { + display: inline-block; + background: rgba(79, 70, 229, 0.1); + color: #4f46e5; + padding: 6px 12px; + border-radius: 20px; + font-size: 0.85em; + font-weight: 500; +} + +/* Адаптивность для проектов */ +@media (max-width: 768px) { + .project__card { + flex-direction: column; + padding: 20px; + gap: 15px; + } + + .project__icon { + width: 50px; + height: 50px; + font-size: 2em; + } + + .project__title { + font-size: 1.2em; + } + + .project__description { + font-size: 0.9em; + } +} + +@media (max-width: 480px) { + .project__card { + padding: 18px 16px; + } + + .project__card:hover { + transform: translateX(5px); + } +} \ No newline at end of file