diff --git a/lab3/.gitkeep b/lab3/.gitkeep new file mode 100644 index 00000000..8b137891 --- /dev/null +++ b/lab3/.gitkeep @@ -0,0 +1 @@ + diff --git a/lab3/main.html b/lab3/main.html new file mode 100644 index 00000000..42011b79 --- /dev/null +++ b/lab3/main.html @@ -0,0 +1,55 @@ + + + + Визитка + + + + + +
+

Визитка

+

Данная визитка создана студентом Самарского Университета гр. 6211-100503D

+
+
+

Вводная информация:

+
+ Мое фото +

Тягун Андрей Романович +
Дата рождения: 30.07.2006 +
Любимые увлечения: автомобили, программирование +
Ссылка на github: +
github +

+
+
+
+

О себе

+

Меня зовут Андрей, я являюсь студентом группы 6211 прекрасного направления ИБАС +
В данной лабораторной работе я реализовал большую часть навыков, полученных в результате изучения +
предмета "Web" +

+
+
+

Скиллы

+
+

Hard-скиллы

+ +
+
+

Soft-скиллы

+ +
+
+ + \ No newline at end of file diff --git a/lab3/mypic.jpg b/lab3/mypic.jpg new file mode 100644 index 00000000..b45d65a6 Binary files /dev/null and b/lab3/mypic.jpg differ diff --git a/lab3/styles.css b/lab3/styles.css new file mode 100644 index 00000000..d32926a5 --- /dev/null +++ b/lab3/styles.css @@ -0,0 +1,149 @@ +html { + box-sizing: border-box; + font-size: 16px; +} + +*, *::before, *::after { + box-sizing: inherit; +} + +body { + background-color: #943e4d; + background-attachment: fixed; + max-width: 1200px; + width: 100%; + margin: 0 auto; + padding: 0 16px 32px; + min-height: 100vh; + font-family: 'Courier New', monospace; + overflow-y: auto; + overflow-x: hidden; +} + +h1, +h2 { + text-align: center; + color: #b6ae7f; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); + letter-spacing: 1px; + margin: 0 0 1rem 0; +} + +h3 { + color: #b6ae7f; + text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); + font-size: 1.1rem; + margin: 0.5rem 0; + padding: 0 1.25rem; +} +.name, +.block { + background: #8a0017; + border-radius: 14px; + width: 100%; + margin: 28px 0; + padding: 1rem; + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); + transition: transform 0.3s ease, box-shadow 0.3s ease; + border: 1px solid rgba(255,255,255,0.03); +} + +.block:hover { + transform: translateY(-5px); + box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4); +} + +p { + color: #b6ae7f; + font-size: clamp(1rem, 1.2vw + 0.8rem, 1.6rem); + padding: 1.25rem; + margin: 0; + line-height: 1.6; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); +} + +ul { + color: #b6ae7f; + font-size: clamp(0.95rem, 1.1vw + 0.75rem, 1.5rem); + padding: 0 1.25rem 1.25rem 2.75rem; + margin: 0; + line-height: 1.8; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); + list-style: disc; +} + +ul li { + margin-bottom: 0.4rem; +} + +.skills-section { + margin-bottom: 1.5rem; +} + +.content { + display: flex; + align-items: center; + gap: 28px; + padding: 1.25rem; + flex-wrap: wrap; +} + +@media (max-width: 768px) { + .content { + flex-direction: column; + gap: 20px; + } +} + +.content img { + width: 280px; + height: 280px; + border-radius: 12px; + object-fit: cover; + flex-shrink: 0; + box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45); + border: 2px solid #b6ae7f; + transition: transform 0.3s ease; +} + +.content img:hover { + transform: scale(1.02); +} + +.content p { + padding: 0; + margin: 0; + flex: 1; + min-width: 250px; +} + +.button { + background: linear-gradient(135deg, #5a000f 0%, #6a0015 100%); + padding: 12px 28px; + margin: 12px auto; + border-radius: 14px; + color: #b6ae7f; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); + border: 1px solid rgba(182, 174, 127, 0.15); + cursor: pointer; + font-family: 'Courier New', monospace; + font-size: 1.75rem; + font-weight: bold; + transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); + display: block; + text-decoration: none; + text-align: center; +} + +.button:hover { + transform: translateY(-3px); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.45); + background: linear-gradient(135deg, #6a0015 0%, #7a001b 100%); +} + +.button:active { + transform: translateY(-1px); + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); +} +