diff --git a/lab1/imgs/cat1.jpg b/lab1/imgs/cat1.jpg new file mode 100644 index 00000000..413a7e8f Binary files /dev/null and b/lab1/imgs/cat1.jpg differ diff --git a/lab1/imgs/cat2.jpg b/lab1/imgs/cat2.jpg new file mode 100644 index 00000000..4aaefb6c Binary files /dev/null and b/lab1/imgs/cat2.jpg differ diff --git a/lab1/lab1.css b/lab1/lab1.css new file mode 100644 index 00000000..e4950686 --- /dev/null +++ b/lab1/lab1.css @@ -0,0 +1,84 @@ +.border-top { + border-top: 3px solid #000000; +} + +.border-right { + border-right: 3px solid #000000; +} + +.border-bottom { + border-bottom: 3px solid #000000; +} + +.border-left { + border-left: 3px solid #000000; +} + +.traffic-light__circles { + height: 100px; + width: 100px; + border-radius: 100%; +} + +.js-des { + background-color: #D490C1; +} + +.js-des p { + color: #60E41D; + text-align: center; +} + +.imgs { + position: relative; + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 20px; +} + +.imgs__big-cat { + max-width: 100%; +} + +.imgs__small-img { + position: absolute; +} + +.traffic-light { + display: flex; + flex-direction: column; + justify-content: space-between; + gap: 10px; + align-items: center; + background-color: #000000; + width: 150px; + padding: 10px 0 10px 0; + margin-bottom: 20px; +} + +.traffic-light__light--red { + background-color: #ff0000; +} + +.traffic-light__light--yellow { + background-color: #eeff00; +} + +.traffic-light__light--green { + background-color: #3cff00; +} + +.maze { + display: grid; + grid-template-columns: repeat(3, 150px); + grid-template-rows: repeat(3, 150px); + gap: 10px; + background: #0000003b; + padding: 10px; + width: fit-content; +} + +.maze__cell { + background: #ffffff; +} \ No newline at end of file diff --git a/lab1/lab1.html b/lab1/lab1.html new file mode 100644 index 00000000..b62f5858 --- /dev/null +++ b/lab1/lab1.html @@ -0,0 +1,40 @@ + + + + + + + Lab1 + + +
+

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

+
+ +
+ +
+ +
+
+ +
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/lab2/imgs/logo.png b/lab2/imgs/logo.png new file mode 100644 index 00000000..f4572d3b Binary files /dev/null and b/lab2/imgs/logo.png differ diff --git a/lab2/lab2.css b/lab2/lab2.css new file mode 100644 index 00000000..ec557f7e --- /dev/null +++ b/lab2/lab2.css @@ -0,0 +1,61 @@ +.sport-list__item { + transition: all 2s; + cursor: pointer; + list-style: none; + line-height: 1.5; +} + +.sport-list__item:hover { + color: rgb(255, 238, 0); +} + +.parent > div { + padding: 15px; +} + +.parent-1 > div { + color: red; +} + +.parent-1 + .parent-3 > h1, .parent-1 + .parent-3 > div { + color: black; +} + +.parent-2 > h1 { + color: orange; +} + +.parent-2__child > span { + color: #b4005a; + border: 5px orange dotted; + padding: 5px; +} + +.parent-3 > div, .parent-3 > h1 { + color: green; +} + +.parent-3 > .parent-2__child > span { + border: none; + color: purple; + padding: 0; +} + +.progr-langs__list::after { + display: block; + content: ""; + background-image: url(./imgs/logo.png); + background-size: cover; + width: 200px; + height: 100px; +} + +.progr-langs__list__item > a { + text-decoration: none; + color: #000; + font-weight: bold; +} + +.progr-langs__list__item > a::before { + content: "🌐"; +} \ No newline at end of file diff --git a/lab2/lab2.html b/lab2/lab2.html new file mode 100644 index 00000000..1937bd84 --- /dev/null +++ b/lab2/lab2.html @@ -0,0 +1,59 @@ + + + + + + + Lab2 + + + + +
+

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

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

+ +

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

+
+ + \ No newline at end of file diff --git a/lab3/imgs/avatar.png b/lab3/imgs/avatar.png new file mode 100644 index 00000000..edc8d0a8 Binary files /dev/null and b/lab3/imgs/avatar.png differ diff --git a/lab3/imgs/github-mark.png b/lab3/imgs/github-mark.png new file mode 100644 index 00000000..c39dde1c Binary files /dev/null and b/lab3/imgs/github-mark.png differ diff --git a/lab3/lab3.css b/lab3/lab3.css new file mode 100644 index 00000000..7981d3f5 --- /dev/null +++ b/lab3/lab3.css @@ -0,0 +1,123 @@ +body { + margin: 0 auto; + color: #ffffff; +} + +.section { + display: flex; + align-items: center; + flex-direction: column; + width: 100%; + min-height: 100%; + padding: 30px 0 30px 0; + background: linear-gradient(to bottom, #2e3c57, #0d1529); +} + +.section__avatar { + height: 250px; + width: 250px; + border-radius: 50%; + content: url(./imgs/avatar.png); + object-fit: cover; + background: #ffffff; + box-shadow: 0px 13px 19px 12px rgba(0, 0, 0, 0.2); + margin-bottom: 20px; +} + +.section__name { + font-size: 50px; + font-weight: 900; + margin-bottom: 5px; +} + +.section__date { + color: #d8d8d8; + font-size: 40px; + font-weight: 500; + margin-bottom: 30px; +} + +.section__about-title { + color: #ffffff; + font-size: 50px; + font-weight: 900; +} + +.section__about-text { + color: #d8d8d8; + font-size: 40px; + font-weight: 500; + margin-bottom: 30px; +} + +.section__socials-title { + color: #ffffff; + font-size: 50px; + font-weight: 900; + margin-bottom: 30px; +} + +.section__socials-objs { + display: flex; + background: #ffffff; + height: 150px; + width: 150px; + margin-bottom: 50px; + border-radius: 50%; + justify-content: center; + align-items: center; + box-shadow: 0px 13px 19px 12px rgba(0, 0, 0, 0.2); +} + +.section__socials-objs img { + height: 80px; +} + +.section__hobies { + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: column; +} + +.section__hobbies__title { + color: #eef5ff; + font-size: 40px; + font-weight: 900; + margin-bottom: 30px; + padding-top: 20px; +} + +.section__hobbies__objs { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); + row-gap: 20px; + column-gap: 100px; + width: 100%; + justify-items: center; +} + +.section__hobbies__objs__el { + display: flex; + align-items: center; + flex-direction: column; + gap: 5px; + height: 140px; + width: 270px; + border-radius: 30px; + box-shadow: 0px 13px 19px 12px rgba(0, 0, 0, 0.2); + background: #fff; + padding-top: 10px; +} + +.section__hobbies__objs__el img { + height: 100px; + width: 100px; +} + +.section__hobbies__objs__el span { + color: #000000; + font-size: 20px; + font-weight: 900; +} \ No newline at end of file diff --git a/lab3/lab3.html b/lab3/lab3.html new file mode 100644 index 00000000..d31bfaa0 --- /dev/null +++ b/lab3/lab3.html @@ -0,0 +1,62 @@ + + + + + + Lab3 + + + +
+
+ Шапилов Николай Михайлович + 01.02.2007 + Обо мне: + Учеба, баскетбол, живу в Самарской области + GitHub: + +
+ +
+ Увлечения: +
+
+ + Баскетбол +
+
+ + Фотография +
+
+ + Игры +
+
+ + Программировние +
+
+ Soft/hard скилы: +
+
+ + Работа в команде +
+
+ + Ответственность +
+
+ + Монтаж видео +
+
+ + Web-верстка +
+
+
+
+ + \ No newline at end of file diff --git a/lab4/calc.css b/lab4/calc.css new file mode 100644 index 00000000..fffd9db9 --- /dev/null +++ b/lab4/calc.css @@ -0,0 +1,292 @@ +/* Сброс стилей и базовые настройки */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + background: linear-gradient(135deg, #2c3e50 0%, #1a1a2e 100%); + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + padding: 20px; + color: #333; + line-height: 1.6; +} + +/* Контейнер калькулятора */ +.calculator-container { + width: 100%; + max-width: 480px; +} + +/* Стеклянный эффект для калькулятора */ +.calculator-glass { + background: rgba(30, 30, 46, 0.9); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border-radius: 24px; + box-shadow: + 0 20px 60px rgba(0, 0, 0, 0.3), + 0 0 0 1px rgba(255, 255, 255, 0.1), + inset 0 0 0 1px rgba(255, 255, 255, 0.05); + overflow: hidden; + transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); + border: 1px solid rgba(255, 255, 255, 0.1); +} + +/* Заголовок */ +.calculator-header { + padding: 32px 32px 20px; + text-align: center; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +.calculator-title h1 { + font-size: 28px; + font-weight: 700; + color: #ffffff; + margin-bottom: 8px; + letter-spacing: -0.5px; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); +} + +.calculator-title p { + font-size: 15px; + color: #a0aec0; + font-weight: 400; +} + +/* Основная часть калькулятора */ +.calculator-body { + padding: 32px; +} + +/* Секция ввода */ +.input-section { + display: flex; + flex-direction: column; + gap: 24px; + margin-bottom: 32px; +} + +.input-group { + display: flex; + flex-direction: column; + gap: 10px; +} + +.input-group label { + font-size: 14px; + font-weight: 600; + color: #cbd5e0; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.input-wrapper { + position: relative; +} + +.number-input { + width: 100%; + padding: 18px 20px; + font-size: 20px; + font-weight: 500; + color: #ffffff; + background: rgba(255, 255, 255, 0.08); + border: 2px solid rgba(255, 255, 255, 0.15); + border-radius: 16px; + transition: all 0.3s ease; + text-align: center; + outline: none; + font-family: 'Inter', monospace; +} + +.number-input:focus { + border-color: #00b4d8; + box-shadow: 0 0 0 4px rgba(0, 180, 216, 0.15); + background: rgba(255, 255, 255, 0.12); +} + +.number-input::placeholder { + color: rgba(255, 255, 255, 0.3); + font-weight: 400; +} + +/* Выбор операции */ +.operation-selector { + display: flex; + flex-direction: column; + gap: 10px; +} + +.operation-selector label { + font-size: 14px; + font-weight: 600; + color: #cbd5e0; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.select-wrapper { + position: relative; +} + +.operation-select { + width: 100%; + padding: 18px 50px 18px 20px; + font-size: 18px; + font-weight: 500; + color: #ffffff; + background: rgba(255, 255, 255, 0.08); + border: 2px solid rgba(255, 255, 255, 0.15); + border-radius: 16px; + appearance: none; + outline: none; + cursor: pointer; + transition: all 0.3s ease; +} + +.operation-select:focus { + border-color: #00b4d8; + box-shadow: 0 0 0 4px rgba(0, 180, 216, 0.15); + background: rgba(255, 255, 255, 0.12); +} + +.operation-select option { + background: #1e1e2e; + color: #ffffff; + padding: 10px; +} + +.select-arrow { + position: absolute; + right: 20px; + top: 50%; + transform: translateY(-50%); + width: 12px; + height: 12px; + border-right: 3px solid #00b4d8; + border-bottom: 3px solid #00b4d8; + transform: translateY(-50%) rotate(45deg); + pointer-events: none; + transition: transform 0.3s ease; +} + +.operation-select:focus + .select-arrow { + transform: translateY(-50%) rotate(225deg); +} + +/* Кнопка вычисления */ +.calculate-section { + margin-bottom: 32px; +} + +.calculate-button { + width: 100%; + padding: 20px; + background: linear-gradient(135deg, #00b4d8 0%, #0077b6 100%); + color: white; + border: none; + border-radius: 16px; + font-size: 18px; + font-weight: 600; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + gap: 12px; + transition: all 0.3s ease; + position: relative; + overflow: hidden; + letter-spacing: 0.5px; +} + +.calculate-button:hover { + transform: translateY(-4px); + box-shadow: 0 12px 30px rgba(0, 180, 216, 0.4); +} + +.calculate-button:active { + transform: translateY(-1px); + box-shadow: 0 6px 20px rgba(0, 180, 216, 0.3); +} + +.button-text { + z-index: 1; +} + +.button-icon { + font-size: 20px; + font-weight: 300; + z-index: 1; + transition: transform 0.3s ease; +} + +.calculate-button:hover .button-icon { + transform: translateX(4px); +} + +/* Секция результата */ +.result-section { + background: rgba(255, 255, 255, 0.05); + border-radius: 16px; + padding: 24px; + border: 2px solid rgba(255, 255, 255, 0.1); + transition: all 0.3s ease; +} + +.result-section:hover { + border-color: rgba(255, 255, 255, 0.2); + background: rgba(255, 255, 255, 0.08); +} + +.result-label { + font-size: 14px; + font-weight: 600; + color: #a0aec0; + text-transform: uppercase; + letter-spacing: 0.5px; + margin-bottom: 12px; +} + +.result-value { + min-height: 60px; + display: flex; + align-items: center; + justify-content: center; +} + +.result-placeholder { + font-size: 32px; + font-weight: 700; + color: rgba(255, 255, 255, 0.3); + letter-spacing: -0.5px; +} + +.result-text { + font-size: 48px; + font-weight: 700; + color: #ffffff; + text-align: center; + word-break: break-all; + overflow-wrap: break-word; + max-width: 100%; + line-height: 1.2; + transition: all 0.3s ease; + font-family: 'Inter', monospace; +} + +.result-text.success { + color: #4cc9f0; +} + +.result-text.error { + color: #ff6b6b; + font-size: 24px; + font-weight: 600; +} \ No newline at end of file diff --git a/lab4/calc.html b/lab4/calc.html new file mode 100644 index 00000000..1bb234e5 --- /dev/null +++ b/lab4/calc.html @@ -0,0 +1,69 @@ + + + + + + Простой калькулятор + + + + +
+
+
+
+

Простой калькулятор

+

Выполните операцию над двумя числами

+
+
+ +
+
+
+ +
+ +
+
+ +
+ +
+ +
+
+
+ +
+ +
+ +
+
+
+ +
+ +
+ +
+
Результат:
+
+
—
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/lab4/calc.js b/lab4/calc.js new file mode 100644 index 00000000..896bb4e1 --- /dev/null +++ b/lab4/calc.js @@ -0,0 +1,172 @@ +document.addEventListener('DOMContentLoaded', function() { + const num1Input = document.getElementById('num1'); + const num2Input = document.getElementById('num2'); + const operationSelect = document.getElementById('operation-select'); + const calculateButton = document.getElementById('calculate'); + const resultValue = document.getElementById('result-value'); + const resultPlaceholder = document.querySelector('.result-placeholder'); + + let resultElement = document.createElement('div'); + resultElement.className = 'result-text'; + + resultPlaceholder.remove(); + resultValue.appendChild(resultElement); + + updateResult('—', 'placeholder'); + + calculateButton.addEventListener('click', calculate); + + num1Input.addEventListener('keyup', function(event) { + if (event.key === 'Enter') calculate(); + }); + + num2Input.addEventListener('keyup', function(event) { + if (event.key === 'Enter') calculate(); + }); + + operationSelect.addEventListener('keyup', function(event) { + if (event.key === 'Enter') calculate(); + }); + + function calculate() { + const num1Str = num1Input.value.trim(); + const num2Str = num2Input.value.trim(); + + if (num1Str === '' || num2Str === '') { + updateResult('Введите оба числа', 'error'); + shakeInputs(); + return; + } + + const num1 = parseFloat(num1Str.replace(',', '.')); + const num2 = parseFloat(num2Str.replace(',', '.')); + + if (isNaN(num1) || isNaN(num2)) { + updateResult('Некорректные числа', 'error'); + shakeInputs(); + return; + } + + const operation = operationSelect.value; + let result; + + try { + switch (operation) { + case 'add': + result = num1 + num2; + break; + case 'subtract': + result = num1 - num2; + break; + case 'multiply': + result = num1 * num2; + break; + case 'divide': + if (num2 === 0) { + throw new Error('Деление на ноль'); + } + result = num1 / num2; + break; + default: + throw new Error('Неизвестная операция'); + } + + if (!isFinite(result)) { + throw new Error('Слишком большое число'); + } + + const formattedResult = formatResult(result); + + updateResult(formattedResult, 'success'); + + animateSuccess(); + + } catch (error) { + if (error.message === 'Деление на ноль') { + updateResult('Деление на ноль невозможно', 'error'); + } else if (error.message === 'Слишком большое число') { + updateResult('Слишком большое число', 'error'); + } else { + updateResult(`Ошибка: ${error.message}`, 'error'); + } + shakeInputs(); + } + } + + function formatResult(value) { + if (Number.isInteger(value)) { + return value.toString(); + } + + const rounded = Math.round(value * 1000000) / 1000000; + + let resultStr = rounded.toString(); + + if (resultStr.length > 12) { + return rounded.toExponential(6); + } + + return resultStr; + } + + function updateResult(value, type = 'placeholder') { + resultElement.textContent = value; + resultElement.className = 'result-text'; + + if (type === 'success') { + resultElement.classList.add('success'); + } else if (type === 'error') { + resultElement.classList.add('error'); + } + + resultElement.style.opacity = '0'; + resultElement.style.transform = 'translateY(10px)'; + + setTimeout(() => { + resultElement.style.transition = 'all 0.3s ease'; + resultElement.style.opacity = '1'; + resultElement.style.transform = 'translateY(0)'; + }, 50); + } + + function shakeInputs() { + const inputs = [num1Input, num2Input]; + + inputs.forEach(input => { + input.style.transition = 'none'; + input.style.transform = 'translateX(0)'; + + setTimeout(() => { + input.style.transition = 'transform 0.1s ease'; + input.style.transform = 'translateX(-5px)'; + + setTimeout(() => { + input.style.transform = 'translateX(5px)'; + + setTimeout(() => { + input.style.transform = 'translateX(-5px)'; + + setTimeout(() => { + input.style.transform = 'translateX(5px)'; + + setTimeout(() => { + input.style.transform = 'translateX(0)'; + }, 50); + }, 50); + }, 50); + }, 50); + }, 10); + }); + } + + function animateSuccess() { + resultElement.style.transform = 'scale(1.05)'; + setTimeout(() => { + resultElement.style.transform = 'scale(1)'; + }, 200); + } + + setTimeout(() => { + num1Input.focus(); + }, 500); +}); \ No newline at end of file diff --git a/lab4/imgs/adapt.png b/lab4/imgs/adapt.png new file mode 100644 index 00000000..4e057f1b Binary files /dev/null and b/lab4/imgs/adapt.png differ diff --git a/lab4/imgs/avatar.png b/lab4/imgs/avatar.png new file mode 100644 index 00000000..edc8d0a8 Binary files /dev/null and b/lab4/imgs/avatar.png differ diff --git a/lab4/imgs/basketball.jpg b/lab4/imgs/basketball.jpg new file mode 100644 index 00000000..3dc26904 Binary files /dev/null and b/lab4/imgs/basketball.jpg differ diff --git a/lab4/imgs/game.jpg b/lab4/imgs/game.jpg new file mode 100644 index 00000000..d54041f5 Binary files /dev/null and b/lab4/imgs/game.jpg differ diff --git a/lab4/imgs/github-mark.png b/lab4/imgs/github-mark.png new file mode 100644 index 00000000..c39dde1c Binary files /dev/null and b/lab4/imgs/github-mark.png differ diff --git a/lab4/imgs/manage.jpg b/lab4/imgs/manage.jpg new file mode 100644 index 00000000..60391503 Binary files /dev/null and b/lab4/imgs/manage.jpg differ diff --git a/lab4/imgs/prog.jpg b/lab4/imgs/prog.jpg new file mode 100644 index 00000000..7d81640f Binary files /dev/null and b/lab4/imgs/prog.jpg differ diff --git a/lab4/imgs/site.jpg b/lab4/imgs/site.jpg new file mode 100644 index 00000000..89b8f871 Binary files /dev/null and b/lab4/imgs/site.jpg differ diff --git a/lab4/lab4.css b/lab4/lab4.css new file mode 100644 index 00000000..63603ef3 --- /dev/null +++ b/lab4/lab4.css @@ -0,0 +1,188 @@ +body { + margin: 0 auto; + color: #ffffff; +} + +.section { + display: flex; + align-items: center; + flex-direction: column; + width: 100%; + min-height: 100%; + padding: 30px 0 30px 0; + background: linear-gradient(to bottom, #2e3c57, #0d1529); +} + +.section__avatar { + height: 250px; + width: 250px; + border-radius: 50%; + content: url(./imgs/avatar.png); + object-fit: cover; + background: #ffffff; + box-shadow: 0px 13px 19px 12px rgba(0, 0, 0, 0.2); + margin-bottom: 20px; +} + +.section__name { + font-size: 50px; + font-weight: 900; + margin-bottom: 5px; +} + +.section__date { + color: #d8d8d8; + font-size: 40px; + font-weight: 500; + margin-bottom: 30px; +} + +.section__about-title { + color: #ffffff; + font-size: 50px; + font-weight: 900; +} + +.section__about-text { + color: #d8d8d8; + font-size: 40px; + font-weight: 500; + margin-bottom: 30px; +} + +.section__socials-title { + color: #ffffff; + font-size: 50px; + font-weight: 900; + margin-bottom: 30px; +} + +.section__socials-objs { + display: flex; + background: #ffffff; + height: 150px; + width: 150px; + margin-bottom: 50px; + border-radius: 50%; + justify-content: center; + align-items: center; + box-shadow: 0px 13px 19px 12px rgba(0, 0, 0, 0.2); +} + +.section__socials-objs img { + height: 80px; +} + +.section__hobies { + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: column; + margin-bottom: 50px; +} + +.section__hobbies__title { + color: #eef5ff; + font-size: 40px; + font-weight: 900; + margin-bottom: 30px; + padding-top: 20px; +} + +.section__hobbies__objs { + width: 100%; + display: flex; + justify-content: space-between; + gap: 30px; +} + +.section__hobbies__objs__el { + display: flex; + justify-content: end; + align-items: center; + flex-direction: column; + height: 140px; + width: 270px; + border-radius: 30px; + box-shadow: 0px 13px 19px 12px rgba(0, 0, 0, 0.2); + background: #fff; + padding-bottom: 10px; +} + +.basketball { + background-image: url(./imgs/basketball.jpg); + background-size: cover; +} + +.game { + background-image: url(./imgs/game.jpg); + background-size: cover; +} + +.prog { + background-image: url(./imgs/prog.jpg); + background-size: cover; +} + +.plan { + background-image: url(./imgs/manage.jpg); + background-size: cover; +} + +.adapt { + background-image: url(./imgs/adapt.png); + background-size: cover; +} + +.sites { + background-image: url(./imgs/site.jpg); + background-size: cover; +} + +.section__hobbies__objs__el img { + height: 100px; + width: 100px; +} + +.section__hobbies__objs__el span { + color: #000000; + font-size: 20px; + font-weight: 900; + background: #fff; + padding: 5px 10px; + border-radius: 10px; +} + +.section__projects { + width: 100%; + display: flex; + justify-content: space-between; + flex-direction: column; + align-items: center; + gap: 30px; +} + +.section__projects__title { + color: #eef5ff; + font-size: 40px; + font-weight: 900; + margin-bottom: 30px; + padding-top: 20px; +} + +.section__projects__links { + display: flex; + justify-content: space-around; + width: 100%; +} + +.section__projects__links__el { + text-decoration: none; + color: #000000; + font-size: 28px; + font-weight: 900; + background: #ffffff; + padding: 50px; + border-radius: 40px; + box-shadow: 0px 13px 19px 12px rgba(0, 0, 0, 0.2); +} \ No newline at end of file diff --git a/lab4/lab4.html b/lab4/lab4.html new file mode 100644 index 00000000..311d8701 --- /dev/null +++ b/lab4/lab4.html @@ -0,0 +1,65 @@ + + + + + + Lab4 + + + +
+
+ Шапилов Николай Михайлович + 01.02.2007 + Обо мне: + Учеба, баскетбол, живу в Самарской области + GitHub: + +
+ +
+ Увлечения: +
+
+ Баскетбол +
+
+ Игры +
+
+ Программировние +
+
+ Soft/hard скилы: +
+
+ Умение планировать +
+
+ Адаптивность +
+
+ Разработка сайтов +
+
+
+
+ Проекты: +
+ + Лабораторная №1 + + + Лабораторная №2 + + + Лабораторная №3 + + + Лабораторная №4 + +
+
+
+ + \ No newline at end of file