diff --git a/.gitignore b/.gitignore
new file mode 100644
index 00000000..ed2b1e5f
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.vs
\ No newline at end of file
diff --git a/lab2/lab2.css b/lab2/lab2.css
new file mode 100644
index 00000000..c9f7d067
--- /dev/null
+++ b/lab2/lab2.css
@@ -0,0 +1,374 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Arial Rounded MT Bold', 'Arial', sans-serif;
+    background-color: #ffe6f2;
+    color: #333;
+    line-height: 1.6;
+    padding: 20px;
+    max-width: 800px;
+    margin: 0 auto;
+    background-image: radial-gradient(#ffb6e1 1px, transparent 1px), radial-gradient(#ffb6e1 1px, transparent 1px);
+    background-size: 20px 20px;
+    background-position: 0 0, 10px 10px;
+}
+
+.letter-container {
+    background-color: #fff;
+    border: 2px solid #ffb6e1;
+    border-radius: 15px;
+    box-shadow: 0 8px 25px rgba(255, 105, 180, 0.3);
+    padding: 40px 30px;
+    position: relative;
+    min-height: 100vh;
+}
+
+.letter-header {
+    text-align: center;
+    margin-bottom: 40px;
+    padding: 30px 20px;
+    background: linear-gradient(135deg, #fff 0%, #fff 50%, #fff0f5 100%);
+    border: 2px dashed #ffb6e1;
+    border-radius: 20px;
+    position: relative;
+}
+
+    .letter-header::before,
+    .letter-header::after {
+        content: '✻';
+        position: absolute;
+        color: #ff69b4;
+        font-size: 1.5rem;
+    }
+
+    .letter-header::before {
+        top: 10px;
+        left: 10px;
+    }
+
+    .letter-header::after {
+        top: 10px;
+        right: 10px;
+    }
+
+    .letter-header h1 {
+        color: #ff1493;
+        font-size: 2.5rem;
+        margin-bottom: 15px;
+        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+        font-family: 'Georgia', serif;
+    }
+
+.subtitle {
+    color: #ff69b4;
+    font-size: 1.2rem;
+    font-weight: bold;
+    font-style: italic;
+}
+
+.games {
+    margin-bottom: 40px;
+    padding: 25px;
+    background: linear-gradient(135deg, #fff 0%, #f8f0ff 100%);
+    border: 2px solid #e6b8ff;
+    border-radius: 15px;
+    box-shadow: 0 4px 15px rgba(200, 120, 255, 0.2);
+}
+
+.games__title {
+    color: #9d4edd;
+    margin-bottom: 20px;
+    font-size: 1.8rem;
+    border-bottom: 2px dotted #e6b8ff;
+    padding-bottom: 8px;
+}
+
+.games__list {
+    list-style-type: none;
+}
+
+.games__item {
+    padding: 12px 20px;
+    margin: 8px 0;
+    background-color: #fff;
+    border-radius: 8px;
+    border-left: 4px solid #9d4edd;
+    font-size: 1.1rem;
+    font-weight: bold;
+    color: #7b2cbf;
+    transition: all 0.4s ease;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+    .games__item:hover {
+        color: #ff6bd6;
+        transform: translateX(10px);
+        background-color: #faf0ff;
+        box-shadow: 0 4px 12px rgba(157, 78, 221, 0.3);
+    }
+
+.parents {
+    display: flex;
+    flex-direction: column;
+    gap: 25px;
+    margin-bottom: 40px;
+}
+
+.parent {
+    padding: 20px;
+    border-radius: 12px;
+    background-color: #fff;
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+    border: 1px solid #ffe6f2;
+}
+
+.parent__title {
+    margin-bottom: 12px;
+    font-size: 1.4rem;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #ffe6f2;
+}
+
+.parent__list {
+    list-style-type: none;
+}
+
+.parent__child {
+    padding: 10px 15px;
+    margin: 6px 0;
+    border-radius: 8px;
+    transition: all 0.3s ease;
+    cursor: pointer;
+    border-left: 3px solid transparent;
+}
+
+    .parent__child:hover {
+        transform: translateX(8px);
+        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
+    }
+
+.parent_1 {
+    border-left: 5px solid #ff1493;
+    background: linear-gradient(135deg, #fff 0%, #fff5f5 100%);
+}
+
+    .parent_1 .parent__child_origin_1 {
+        color: red;
+        border-left-color: red;
+    }
+
+        .parent_1 .parent__child_origin_1:hover {
+            background-color: rgba(255, 0, 0, 0.08);
+            color: darkred;
+        }
+
+.parent_2 {
+    border-left: 5px solid orange;
+    background: linear-gradient(135deg, #fff 0%, #fff8f0 100%);
+}
+
+    .parent_2 .parent__title {
+        color: orange;
+    }
+
+    .parent_2 .parent__child_origin_2 {
+        color: #b4005a;
+        border: 2px dashed orange;
+        padding: 8px 12px;
+        border-left: 3px solid #b4005a;
+    }
+
+        .parent_2 .parent__child_origin_2:hover {
+            background-color: rgba(255, 165, 0, 0.08);
+            color: #8a0045;
+        }
+
+.parent_3 {
+    border-left: 5px solid green;
+    background: linear-gradient(135deg, #fff 0%, #f0fff0 100%);
+}
+
+    .parent_3 .parent__title {
+        color: green;
+    }
+
+    .parent_3 .parent__child_origin_3 {
+        color: green;
+        border-left-color: green;
+    }
+
+        .parent_3 .parent__child_origin_3:hover {
+            background-color: rgba(0, 128, 0, 0.08);
+            color: darkgreen;
+        }
+
+
+.parent_1 ~ .parent_3 {
+    border-left: 5px solid #333;
+    background: linear-gradient(135deg, #fff 0%, #f5f5f5 100%);
+}
+
+    .parent_1 ~ .parent_3 .parent__title {
+        color: #333;
+    }
+
+    .parent_1 ~ .parent_3 .parent__child_origin_3 {
+        color: #333;
+        border-left-color: #333;
+    }
+
+        .parent_1 ~ .parent_3 .parent__child_origin_3:hover {
+            background-color: rgba(0, 0, 0, 0.08);
+            color: #000;
+        }
+
+.parent_2 ~ .parent_3 {
+    border-left: 5px solid green;
+    background: linear-gradient(135deg, #fff 0%, #f0fff0 100%);
+}
+
+    .parent_2 ~ .parent_3 .parent__title {
+        color: green;
+    }
+
+    .parent_2 ~ .parent_3 .parent__child_origin_3:first-child,
+    .parent_2 ~ .parent_3 .parent__child_origin_3:nth-child(2) {
+        color: green;
+        border-left-color: green;
+    }
+
+        .parent_2 ~ .parent_3 .parent__child_origin_3:first-child:hover,
+        .parent_2 ~ .parent_3 .parent__child_origin_3:nth-child(2):hover {
+            background-color: rgba(0, 128, 0, 0.08);
+            color: darkgreen;
+        }
+
+    .parent_2 ~ .parent_3 .parent__child_origin_3:last-child {
+        color: purple;
+        border: none;
+        border-left: 3px solid purple;
+    }
+
+        .parent_2 ~ .parent_3 .parent__child_origin_3:last-child:hover {
+            background-color: rgba(128, 0, 128, 0.08);
+            color: darkviolet;
+        }
+
+.programming-languages {
+    background: linear-gradient(135deg, #fff 0%, #fff0f8 100%);
+    padding: 30px;
+    border-radius: 15px;
+    border: 2px solid #ffb6e1;
+    margin-bottom: 40px;
+    position: relative;
+}
+
+    .programming-languages::before {
+        content: '';
+        position: absolute;
+        top: -2px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 100px;
+        height: 15px;
+        background: #ffe6f2;
+        border: 2px solid #ffb6e1;
+        border-bottom: none;
+        border-radius: 10px 10px 0 0;
+    }
+
+.programming-languages__title {
+    color: #ff69b4;
+    margin: 25px 0 20px;
+    font-size: 1.8rem;
+    border-bottom: 2px dotted #ffb6e1;
+    padding-bottom: 8px;
+}
+
+.programming-languages__text {
+    margin-bottom: 18px;
+    font-size: 1.1rem;
+    text-align: justify;
+}
+
+.programming-languages__list {
+    list-style-type: none;
+    margin: 25px 0;
+}
+
+.programming-languages__item {
+    margin-bottom: 18px;
+    padding-left: 35px;
+    position: relative;
+    text-align: justify;
+}
+
+    .programming-languages__item::before {
+        content: "💖";
+        position: absolute;
+        left: 0;
+        top: 2px;
+        font-size: 1.2rem;
+    }
+
+.programming-languages__link {
+    font-weight: bold;
+    color: #ff1493;
+    text-decoration: none;
+    position: relative;
+    transition: color 0.3s ease;
+    border-bottom: 1px dotted #ff69b4;
+}
+
+    .programming-languages__link:hover {
+        color: #ff69b4;
+        text-decoration: none;
+        border-bottom: 1px solid #ff69b4;
+    }
+
+    .programming-languages__link::after {
+        content: " 🌸";
+        font-size: 0.8em;
+    }
+
+.programming-languages::after {
+    content: "СамГУ";
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 120px;
+    height: 120px;
+    margin: 30px auto 0;
+    background: radial-gradient(circle at center, transparent 30%, #ff69b4 31%, #ff69b4 40%, transparent 41%), radial-gradient(circle at center, #ff1493 50%, transparent 51%);
+    background-size: 100% 100%, 80% 80%;
+    background-repeat: no-repeat;
+    background-position: center;
+    border: 8px double #ff1493;
+    border-radius: 50%;
+    position: relative;
+    box-shadow: 0 4px 15px rgba(255, 105, 180, 0.4);
+    color: white;
+    font-weight: bold;
+    font-size: 14px;
+    font-family: 'Times New Roman', serif;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.footer {
+    text-align: center;
+    margin-top: 40px;
+    padding: 20px;
+    background: linear-gradient(135deg, #ffb6d9 0%, #ff8ec6 100%);
+    border-radius: 12px;
+    color: #fff;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.footer__text {
+    margin: 0;
+}
diff --git a/lab2/lab2.html b/lab2/lab2.html
new file mode 100644
index 00000000..5288fdc9
--- /dev/null
+++ b/lab2/lab2.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Языки программирования</title>
+    <link rel="stylesheet" href="lab2.css">
+</head>
+<body>
+    <div class="letter-container">
+        <header class="letter-header">
+            <h1>Лабораторная работа 2</h1>
+            <p class="subtitle">Вариант 9!</p>
+        </header>
+
+        <section class="games">
+            <h2 class="games__title">Популярные видеоигры</h2>
+            <ul class="games__list">
+                <li class="games__item">Minecraft</li>
+                <li class="games__item">Fortnite</li>
+                <li class="games__item">GTA V</li>
+                <li class="games__item">Call of Duty</li>
+                <li class="games__item">Among Us</li>
+            </ul>
+        </section>
+
+        <section class="parents">
+            <div class="parent parent_1">
+                <h3 class="parent__title">Первый родитель</h3>
+                <ul class="parent__list">
+                    <li class="parent__child parent__child_origin_1">Ребенок 1</li>
+                    <li class="parent__child parent__child_origin_1">Ребенок 2</li>
+                    <li class="parent__child parent__child_origin_1">Ребенок 3</li>
+                </ul>
+            </div>
+
+            <div class="parent parent_3">
+                <h3 class="parent__title">Третий родитель</h3>
+                <ul class="parent__list">
+                    <li class="parent__child parent__child_origin_3">Ребенок 1</li>
+                    <li class="parent__child parent__child_origin_3">Ребенок 2</li>
+                    <li class="parent__child parent__child_origin_3">Ребенок 3</li>
+                </ul>
+            </div>
+
+            <div class="parent parent_2">
+                <h3 class="parent__title">Второй родитель</h3>
+                <ul class="parent__list">
+                    <li class="parent__child parent__child_origin_2">Ребенок 1</li>
+                    <li class="parent__child parent__child_origin_2">Ребенок 2</li>
+                    <li class="parent__child parent__child_origin_2">Ребенок 3</li>
+                </ul>
+            </div>
+
+            <div class="parent parent_3">
+                <h3 class="parent__title">Третий родитель</h3>
+                <ul class="parent__list">
+                    <li class="parent__child parent__child_origin_3">Ребенок 1</li>
+                    <li class="parent__child parent__child_origin_3">Ребенок 2</li>
+                    <li class="parent__child parent__child_origin_3">Ребенок 3</li>
+                </ul>
+            </div>
+        </section>
+
+        <section class="programming-languages">
+            <h2 class="programming-languages__title">О языках программирования</h2>
+            <p class="programming-languages__text">Языки программирования — это инструменты, с помощью которых разработчики создают программное обеспечение, веб-приложения, игры, алгоритмы и многое другое. Каждый язык имеет свои особенности, синтаксис и сферу применения. Ниже представлены некоторые из наиболее известных языков:</p>
+
+            <ul class="programming-languages__list">
+                <li class="programming-languages__item"><a href="#" class="programming-languages__link">Python</a> – высокоуровневый язык с простым синтаксисом, популярный в Data Science, веб-разработке и автоматизации.</li>
+                <li class="programming-languages__item"><a href="#" class="programming-languages__link">JavaScript</a> – основной язык для фронтенд-разработки, работает в браузерах и на сервере (Node.js).</li>
+                <li class="programming-languages__item"><a href="#" class="programming-languages__link">Java</a> – объектно-ориентированный язык, широко используется в корпоративных приложениях и Android-разработке.</li>
+                <li class="programming-languages__item"><a href="#" class="programming-languages__link">C++</a> – мощный язык для системного программирования, игр и высокопроизводительных приложений.</li>
+                <li class="programming-languages__item"><a href="#" class="programming-languages__link">C#</a> – язык от Microsoft, применяется в разработке под Windows, играх (Unity) и веб-приложениях.</li>
+                <li class="programming-languages__item"><a href="#" class="programming-languages__link">Go (Golang)</a> – созданный Google, язык для высоконагруженных сетевых сервисов и облачных технологий.</li>
+                <li class="programming-languages__item"><a href="#" class="programming-languages__link">Ruby</a> – известен благодаря фреймворку Ruby on Rails для веб-разработки.</li>
+                <li class="programming-languages__item"><a href="#" class="programming-languages__link">Swift</a> – язык Apple для разработки под iOS и macOS.</li>
+                <li class="programming-languages__item"><a href="#" class="programming-languages__link">Kotlin</a> – современный язык, официально поддерживаемый для Android-разработки.</li>
+                <li class="programming-languages__item"><a href="#" class="programming-languages__link">Rust</a> – язык системного программирования с акцентом на безопасность и производительность.</li>
+            </ul>
+
+            <p class="programming-languages__text">Это лишь малая часть из множества существующих языков, и выбор зависит от задач, которые нужно решить.</p>
+        </section>
+
+        <footer class="footer">
+            <p class="footer__text">© 2025 мяу</p>
+        </footer>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/lab3/cat.JPG b/lab3/cat.JPG
new file mode 100644
index 00000000..9a8f6f4a
Binary files /dev/null and b/lab3/cat.JPG differ
diff --git a/lab3/lab3.css b/lab3/lab3.css
new file mode 100644
index 00000000..ca4f47de
--- /dev/null
+++ b/lab3/lab3.css
@@ -0,0 +1,278 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: "Arial", sans-serif;
+    line-height: 1.6;
+    color: #5a4a4a;
+    background: linear-gradient(135deg,#ffe4ec, #fff0f5);
+    min-height: 100vh;
+}
+
+.resume {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.layout {
+    display: grid;
+    grid-template-columns: 1fr 350px;
+    background: white;
+    border: 2px solid #ffc2d6;
+    min-height: 80vh;
+    box-shadow: 0 8px 25px rgba(255, 182, 193, 0.15);
+    border-radius: 20px;
+    overflow: hidden;
+}
+
+.sidebar {
+    background: linear-gradient(135deg, #ffd1dc, #ffb7c5);
+}
+
+.main-content {
+    padding: 40px;
+    background: white;
+}
+
+.resume__title {
+    font-family: "Georgia", serif;
+    font-size: 4em;
+    color: #ff85a2;
+    text-align: center;
+    margin-bottom: 40px;
+    font-weight: normal;
+    letter-spacing: 3px;
+    text-transform: uppercase;
+    border-bottom: 3px solid #ffc2d6;
+    padding-bottom: 15px;
+}
+
+.profile-card {
+    text-align: center;
+    color: #5a4a4a;
+}
+
+.resume__photo {
+    width: 100%;
+    object-fit: cover;
+    border-bottom: 4px solid #ffc2d6;
+    margin-bottom: 30px;
+}
+
+.profile-card__name {
+    font-size: 1.4em;
+    margin-bottom: 15px;
+    font-weight: bold;
+    padding: 0 20px;
+    color: #ff6b9d;
+}
+
+.resume__birthdate {
+    font-size: 1.1em;
+    margin-bottom: 20px;
+    opacity: 0.9;
+    color: #7a6a6a;
+}
+
+.contact-section {
+    padding: 0 20px 20px;
+}
+
+.github__link {
+    display: block;
+    background: #ffc2d6;
+    color: #5a4a4a;
+    padding: 12px;
+    text-decoration: none;
+    font-weight: bold;
+    border: 2px solid #ffa8c2;
+    border-radius: 12px;
+    transition: 0.3s;
+    text-align: center;
+}
+
+    .github__link:hover {
+        background: #ffa8c2;
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(255, 105, 180, 0.2);
+    }
+
+.qr-code {
+    text-align: center;
+    margin-top: 20px;
+    padding: 15px;
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 12px;
+}
+
+.qr-code__image {
+    width: 150px;
+    height: auto;
+    border: 2px solid #ffc2d6;
+    border-radius: 8px;
+    background: white;
+    padding: 8px;
+}
+
+.about-section {
+    padding: 20px;
+    text-align: left;
+}
+
+.sidebar .resume__section-title {
+    font-size: 1.3em;
+    color: #ff6b9d;
+    margin-bottom: 15px;
+    border-bottom: 2px solid #ffc2d6;
+    padding-bottom: 8px;
+    font-family: "Arial", sans-serif;
+}
+
+.about__text {
+    font-size: 0.95em;
+    opacity: 0.9;
+    line-height: 1.7;
+}
+
+.main-content .resume__section-title {
+    color: #ff6b9d;
+    font-size: 1.5em;
+    margin-bottom: 20px;
+    border-bottom: 2px solid #ffc2d6;
+    padding-bottom: 8px;
+    font-family: "Georgia", serif;
+}
+
+.skills-section__container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 25px;
+    margin-bottom: 35px;
+}
+
+.skills-section__column {
+    width: 100%;
+}
+
+.skills-section__subtitle {
+    font-size: 1.2em;
+    margin-bottom: 12px;
+    font-family: "Georgia", serif;
+    color: #ff85a2;
+}
+
+.skills {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 10px;
+}
+
+.skill {
+    display: block;
+    width: 100%;
+    padding: 12px 15px;
+    background: #fff0f5;
+    border: 2px solid #ffc2d6;
+    border-radius: 12px;
+    font-weight: bold;
+    transition: 0.3s;
+    color: #5a4a4a;
+}
+
+    .skill:hover {
+        border-color: #ff6b9d;
+        transform: translateX(5px);
+        box-shadow: 0 4px 8px rgba(255, 107, 157, 0.1);
+    }
+
+.skill--hard:hover {
+    background: #ffd1dc;
+}
+
+.skill--soft:hover {
+    background: #ffe4ec;
+}
+
+.hobbies-list {
+    list-style: none;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 12px;
+    padding: 0;
+    margin-bottom: 35px;
+}
+
+.hobbies-list__item {
+    padding: 12px 15px;
+    background: #fff0f5;
+    border: 2px solid #ffc2d6;
+    border-radius: 12px;
+    margin-bottom: 4px;
+    font-weight: bold;
+    transition: 0.3s;
+    text-align: center;
+}
+
+    .hobbies-list__item:hover {
+        background: #ffe4ec;
+        transform: translateY(-4px);
+        border-color: #ff6b9d;
+        box-shadow: 0 6px 12px rgba(255, 107, 157, 0.15);
+    }
+
+.info-grid {
+    display: grid;
+    gap: 12px;
+}
+
+.info-grid__item {
+    padding: 15px 18px;
+    background: #ffe4ec;
+    border: 2px solid #ffc2d6;
+    border-radius: 12px;
+    color: #5a4a4a;
+    line-height: 1.7;
+}
+
+@media (max-width: 968px) {
+    .layout {
+        grid-template-columns: 300px 1fr;
+    }
+
+    .skills-section__container {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 768px) {
+    .layout {
+        grid-template-columns: 1fr;
+    }
+
+    .resume__title {
+        font-size: 3em;
+    }
+
+    .hobbies-list {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 480px) {
+    .main-content {
+        padding: 20px;
+    }
+
+    .resume__title {
+        font-size: 2.5em;
+    }
+
+    .skill {
+        padding: 10px 12px;
+        font-size: 0.95em;
+    }
+}
diff --git a/lab3/lab3.html b/lab3/lab3.html
new file mode 100644
index 00000000..eda9acb5
--- /dev/null
+++ b/lab3/lab3.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Резюме. Лабораторная работа 3</title>
+    <link rel="stylesheet" href="lab3.css" />
+</head>
+<body>
+    <div class="resume">
+        <div class="layout">
+            <div class="main-content">
+                <h1 class="resume__title">RESUME</h1>
+
+                <section class="resume__section">
+                    <h2 class="resume__section-title">Навыки</h2>
+                    <div class="skills-section__container">
+                        <div class="skills-section__column">
+                            <h3 class="skills-section__subtitle">Hard-Skills</h3>
+                            <div class="skills">
+                                <span class="skill skill--hard">Linux and git</span>
+                                <span class="skill skill--hard">TCP/IP, OSI</span>
+                                <span class="skill skill--hard">Wireshark, MaxPatrol</span>
+                                <span class="skill skill--hard">C, C++, Python</span>
+                            </div>
+                        </div>
+                        <div class="skills-section__column">
+                            <h3 class="skills-section__subtitle">Soft-Skills</h3>
+                            <div class="skills">
+                                <span class="skill skill--soft">Тайм-менеджмент</span>
+                                <span class="skill skill--soft">Стрессоустойчивость</span>
+                                <span class="skill skill--soft">Усердство</span>
+                                <span class="skill skill--soft">Работа в команде</span>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <section class="resume__section">
+                    <h2 class="resume__section-title">Увлечения</h2>
+                    <ul class="hobbies-list">
+                        <li class="hobbies-list__item">
+                            Программирование и веб-разработка
+                        </li>
+                        <li class="hobbies-list__item">Capture The Flag формата Jeopardy</li>
+                        <li class="hobbies-list__item">Социальная инженерия</li>
+                        <li class="hobbies-list__item">Разработка компьютерных игр</li>
+                    </ul>
+                </section>
+
+                <section class="resume__section">
+                    <h2 class="resume__section-title">Дополнительная информация</h2>
+                    <div class="info-grid">
+                        <div class="info-grid__item">
+                            <strong>Образование:</strong> Студентка Самарского национального
+                            исследовательского университета имени академика С.П. Королева по
+                            направлению информационная безопасность автоматизированных
+                            систем
+                        </div>
+                    </div>
+                </section>
+            </div>
+            <div class="sidebar">
+                <section class="profile-card">
+                    <img src="cat.jpg"
+                         alt="Фото (Дмитриева Алина)"
+                         class="resume__photo" />
+                    <h1 class="profile-card__name">
+                        Дмитриева Алина Александровна
+                    </h1>
+                    <p class="resume__birthdate">29.12.2006</p>
+
+                    <div class="about-section">
+                        <h2 class="resume__section-title">О себе</h2>
+                        <p class="about__text">
+                            Начинающий специалист в сфере IT.
+                            Уверена, что сочетание технических навыков и творческого подхода
+                            позволяет создавать качественные цифровые продукты.
+                            Готова к сложным задачам и командной работе.
+                        </p>
+                    </div>
+
+                    <div class="contact-section">
+                        <a href="https://github.com/shydoke"
+                           class="github__link"
+                           target="_blank">GitHub профиль</a>
+                        <div class="qr-code">
+                            <img src="qr-code.png"
+                                 alt="QR-код для GitHub профиля"
+                                 class="qr-code__image" />
+                        </div>
+                    </div>
+                </section>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/lab3/qr-code.png b/lab3/qr-code.png
new file mode 100644
index 00000000..ad09c4be
Binary files /dev/null and b/lab3/qr-code.png differ
diff --git a/lab4/labs/images/cat.JPG b/lab4/labs/images/cat.JPG
new file mode 100644
index 00000000..9a8f6f4a
Binary files /dev/null and b/lab4/labs/images/cat.JPG differ
diff --git a/lab4/labs/images/cat1.jpg b/lab4/labs/images/cat1.jpg
new file mode 100644
index 00000000..413a7e8f
Binary files /dev/null and b/lab4/labs/images/cat1.jpg differ
diff --git a/lab4/labs/images/cat2.jpg b/lab4/labs/images/cat2.jpg
new file mode 100644
index 00000000..4aaefb6c
Binary files /dev/null and b/lab4/labs/images/cat2.jpg differ
diff --git a/lab4/labs/images/qr-code.png b/lab4/labs/images/qr-code.png
new file mode 100644
index 00000000..ad09c4be
Binary files /dev/null and b/lab4/labs/images/qr-code.png differ
diff --git a/lab4/labs/lab1.html b/lab4/labs/lab1.html
new file mode 100644
index 00000000..2f167478
--- /dev/null
+++ b/lab4/labs/lab1.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <title>не люблю светофоры</title>
+    <link rel="stylesheet" href="styles/lab1.css">
+</head>
+
+<body>
+    <div class="text-block">
+        <p>
+            JavaScript (аббр. JS) — мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. Является реализацией спецификации ECMAScript (стандарт ECMA-262).
+            JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.
+        </p>
+    </div>
+
+    <br />
+    <br />
+
+    <div class="image-container">
+        <img src="images/cat2.jpg" class="image-main">
+        <img src="images/cat1.jpg" class="image-overlay">
+    </div>
+
+    <br />
+    <br />
+
+    <div class="traffic-light">
+        <div class="traffic-light__lamp traffic-light__lamp_red"></div>
+        <div class="traffic-light__lamp traffic-light__lamp_yellow"></div>
+        <div class="traffic-light__lamp traffic-light__lamp_green"></div>
+    </div>
+
+    <br />
+    <br />
+    <br />
+
+    <div class="maze">
+        <div class="maze__row">
+            <div class="maze__cell maze__cell_no-top maze__cell_no-bottom"></div>
+            <div class="maze__cell maze__cell_no-left maze__cell_no-right"></div>
+            <div class="maze__cell maze__cell_no-left maze__cell_no-bottom"></div>
+        </div>
+        <div class="maze__row">
+            <div class="maze__cell maze__cell_no-top maze__cell_no-right"></div>
+            <div class="maze__cell maze__cell_no-top maze__cell_no-left maze__cell_no-bottom"></div>
+            <div class="maze__cell maze__cell_no-border"></div>
+
+        </div>
+        <div class="maze__row">
+            <div class="maze__cell maze__cell_no-top maze__cell_no-right"></div>
+            <div class="maze__cell maze__cell_no-top maze__cell_no-right maze__cell_no-left"></div>
+            <div class="maze__cell maze__cell_no-top maze__cell_no-left"></div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/lab4/labs/lab2.html b/lab4/labs/lab2.html
new file mode 100644
index 00000000..377bbc43
--- /dev/null
+++ b/lab4/labs/lab2.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Языки программирования</title>
+    <link rel="stylesheet" href="styles/lab2.css">
+</head>
+<body>
+    <div class="letter-container">
+        <header class="letter-header">
+            <h1>Лабораторная работа 2</h1>
+            <p class="subtitle">Вариант 9!</p>
+        </header>
+
+        <section class="games">
+            <h2 class="games__title">Популярные видеоигры</h2>
+            <ul class="games__list">
+                <li class="games__item">Minecraft</li>
+                <li class="games__item">Fortnite</li>
+                <li class="games__item">GTA V</li>
+                <li class="games__item">Call of Duty</li>
+                <li class="games__item">Among Us</li>
+            </ul>
+        </section>
+
+        <section class="parents">
+            <div class="parent parent_1">
+                <h3 class="parent__title">Первый родитель</h3>
+                <ul class="parent__list">
+                    <li class="parent__child parent__child_origin_1">Ребенок 1</li>
+                    <li class="parent__child parent__child_origin_1">Ребенок 2</li>
+                    <li class="parent__child parent__child_origin_1">Ребенок 3</li>
+                </ul>
+            </div>
+
+            <div class="parent parent_3">
+                <h3 class="parent__title">Третий родитель</h3>
+                <ul class="parent__list">
+                    <li class="parent__child parent__child_origin_3">Ребенок 1</li>
+                    <li class="parent__child parent__child_origin_3">Ребенок 2</li>
+                    <li class="parent__child parent__child_origin_3">Ребенок 3</li>
+                </ul>
+            </div>
+
+            <div class="parent parent_2">
+                <h3 class="parent__title">Второй родитель</h3>
+                <ul class="parent__list">
+                    <li class="parent__child parent__child_origin_2">Ребенок 1</li>
+                    <li class="parent__child parent__child_origin_2">Ребенок 2</li>
+                    <li class="parent__child parent__child_origin_2">Ребенок 3</li>
+                </ul>
+            </div>
+
+            <div class="parent parent_3">
+                <h3 class="parent__title">Третий родитель</h3>
+                <ul class="parent__list">
+                    <li class="parent__child parent__child_origin_3">Ребенок 1</li>
+                    <li class="parent__child parent__child_origin_3">Ребенок 2</li>
+                    <li class="parent__child parent__child_origin_3">Ребенок 3</li>
+                </ul>
+            </div>
+        </section>
+
+        <section class="programming-languages">
+            <h2 class="programming-languages__title">О языках программирования</h2>
+            <p class="programming-languages__text">Языки программирования — это инструменты, с помощью которых разработчики создают программное обеспечение, веб-приложения, игры, алгоритмы и многое другое. Каждый язык имеет свои особенности, синтаксис и сферу применения. Ниже представлены некоторые из наиболее известных языков:</p>
+
+            <ul class="programming-languages__list">
+                <li class="programming-languages__item"><a href="#" class="programming-languages__link">Python</a> – высокоуровневый язык с простым синтаксисом, популярный в Data Science, веб-разработке и автоматизации.</li>
+                <li class="programming-languages__item"><a href="#" class="programming-languages__link">JavaScript</a> – основной язык для фронтенд-разработки, работает в браузерах и на сервере (Node.js).</li>
+                <li class="programming-languages__item"><a href="#" class="programming-languages__link">Java</a> – объектно-ориентированный язык, широко используется в корпоративных приложениях и Android-разработке.</li>
+                <li class="programming-languages__item"><a href="#" class="programming-languages__link">C++</a> – мощный язык для системного программирования, игр и высокопроизводительных приложений.</li>
+                <li class="programming-languages__item"><a href="#" class="programming-languages__link">C#</a> – язык от Microsoft, применяется в разработке под Windows, играх (Unity) и веб-приложениях.</li>
+                <li class="programming-languages__item"><a href="#" class="programming-languages__link">Go (Golang)</a> – созданный Google, язык для высоконагруженных сетевых сервисов и облачных технологий.</li>
+                <li class="programming-languages__item"><a href="#" class="programming-languages__link">Ruby</a> – известен благодаря фреймворку Ruby on Rails для веб-разработки.</li>
+                <li class="programming-languages__item"><a href="#" class="programming-languages__link">Swift</a> – язык Apple для разработки под iOS и macOS.</li>
+                <li class="programming-languages__item"><a href="#" class="programming-languages__link">Kotlin</a> – современный язык, официально поддерживаемый для Android-разработки.</li>
+                <li class="programming-languages__item"><a href="#" class="programming-languages__link">Rust</a> – язык системного программирования с акцентом на безопасность и производительность.</li>
+            </ul>
+
+            <p class="programming-languages__text">Это лишь малая часть из множества существующих языков, и выбор зависит от задач, которые нужно решить.</p>
+        </section>
+
+        <footer class="footer">
+            <p class="footer__text">© 2025 мяу</p>
+        </footer>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/lab4/labs/lab3.html b/lab4/labs/lab3.html
new file mode 100644
index 00000000..5e990ebb
--- /dev/null
+++ b/lab4/labs/lab3.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Резюме. Лабораторная работа 3</title>
+    <link rel="stylesheet" href="styles/lab3.css" />
+</head>
+<body>
+    <div class="resume">
+        <div class="layout">
+            <div class="main-content">
+                <h1 class="resume__title">RESUME</h1>
+
+                <section class="resume__section">
+                    <h2 class="resume__section-title">Навыки</h2>
+                    <div class="skills-section__container">
+                        <div class="skills-section__column">
+                            <h3 class="skills-section__subtitle">Hard-Skills</h3>
+                            <div class="skills">
+                                <span class="skill skill--hard">Linux and git</span>
+                                <span class="skill skill--hard">TCP/IP, OSI</span>
+                                <span class="skill skill--hard">Wireshark, MaxPatrol</span>
+                                <span class="skill skill--hard">C, C++, Python</span>
+                            </div>
+                        </div>
+                        <div class="skills-section__column">
+                            <h3 class="skills-section__subtitle">Soft-Skills</h3>
+                            <div class="skills">
+                                <span class="skill skill--soft">Тайм-менеджмент</span>
+                                <span class="skill skill--soft">Стрессоустойчивость</span>
+                                <span class="skill skill--soft">Усердство</span>
+                                <span class="skill skill--soft">Работа в команде</span>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <section class="resume__section">
+                    <h2 class="resume__section-title">Увлечения</h2>
+                    <ul class="hobbies-list">
+                        <li class="hobbies-list__item">
+                            Программирование и веб-разработка
+                        </li>
+                        <li class="hobbies-list__item">Capture The Flag формата Jeopardy</li>
+                        <li class="hobbies-list__item">Социальная инженерия</li>
+                        <li class="hobbies-list__item">Разработка компьютерных игр</li>
+                    </ul>
+                </section>
+
+                <section class="resume__section">
+                    <h2 class="resume__section-title">Мои проекты</h2>
+                    <div class="projects-section">
+                        <div class="projects-grid">
+                            <a href="lab1.html" class="project-card" target="_blank">
+                                <h3 class="project-card__title">Лабораторная работа 1</h3>
+                                <p class="project-card__description">Начало знакомства с версткой</p>
+                                <span class="project-card__link">Перейти →</span>
+                            </a>
+                            <a href="lab2.html" class="project-card" target="_blank">
+                                <h3 class="project-card__title">Лабораторная работа 2</h3>
+                                <p class="project-card__description">Более сложные ситуации при верстке</p>
+                                <span class="project-card__link">Перейти →</span>
+                            </a>
+                            <a href="lab3.html" class="project-card" target="_blank">
+                                <h3 class="project-card__title">Лабораторная работа 3</h3>
+                                <p class="project-card__description">Пора заявить о себе</p>
+                                <span class="project-card__link">Текущая страница</span>
+                            </a>
+                            <a href="lab4.html" class="project-card" target="_blank">
+                                <h3 class="project-card__title">Лабораторная работа 4</h3>
+                                <p class="project-card__description">Добавим JavaScript-а</p>
+                                <span class="project-card__link">Перейти →</span>
+                            </a>
+                        </div>
+                    </div>
+                </section>
+            </div>
+            <div class="sidebar">
+                <section class="profile-card">
+                    <img src="images/cat.jpg"
+                         alt="Фото (Дмитриева Алина)"
+                         class="resume__photo" />
+                    <h1 class="profile-card__name">
+                        Дмитриева Алина Александровна
+                    </h1>
+                    <p class="resume__birthdate">29.12.2006</p>
+
+                    <div class="about-section">
+                        <h2 class="resume__section-title">О себе</h2>
+                        <p class="about__text">
+                            Начинающий специалист в сфере IT.
+                            Уверена, что сочетание технических навыков и творческого подхода
+                            позволяет создавать качественные цифровые продукты.
+                            Готова к сложным задачам и командной работе.
+                        </p>
+                    </div>
+
+                    <div class="contact-section">
+                        <a href="https://github.com/shydoke"
+                           class="github__link"
+                           target="_blank">GitHub профиль</a>
+                        <div class="qr-code">
+                            <img src="images/qr-code.png"
+                                 alt="QR-код для GitHub профиля"
+                                 class="qr-code__image" />
+                        </div>
+                    </div>
+                </section>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/lab4/labs/lab4.html b/lab4/labs/lab4.html
new file mode 100644
index 00000000..257389a4
--- /dev/null
+++ b/lab4/labs/lab4.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Милый калькулятор</title>
+    <link rel="stylesheet" href="styles/lab4.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap" rel="stylesheet">
+</head>
+<body class="page">
+    <div class="page__container container">
+        <header class="header container__header">
+            <h1 class="header__title">
+                <i class="header__icon fas fa-calculator"></i>
+                Милый калькулятор
+            </h1>
+            <p class="header__subtitle">Выполняйте простые операции в пастельном стиле</p>
+        </header>
+
+        <main class="calculator container__calculator">
+            <div class="calculator__card">
+                <div class="calculator__inputs">
+                    <div class="calculator__number-inputs">
+                        <div class="input-group calculator__input-group">
+                            <label for="num1" class="input-group__label">
+                                <i class="input-group__icon fas fa-hashtag"></i>
+                                Первое число
+                            </label>
+                            <input type="number" id="num1" class="input-group__input number-input" placeholder="Введите число" step="any">
+                        </div>
+
+                        <div class="operation-selector calculator__operation-selector">
+                            <label for="operation" class="operation-selector__label">
+                                <i class="operation-selector__icon fas fa-cogs"></i>
+                                Операция
+                            </label>
+                            <select id="operation" class="operation-selector__select">
+                                <option value="add">Сложение</option>
+                                <option value="subtract">Вычитание</option>
+                                <option value="multiply">Умножение</option>
+                                <option value="divide">Деление</option>
+                            </select>
+                        </div>
+
+                        <div class="input-group calculator__input-group">
+                            <label for="num2" class="input-group__label">
+                                <i class="input-group__icon fas fa-hashtag"></i>
+                                Второе число
+                            </label>
+                            <input type="number" id="num2" class="input-group__input number-input" placeholder="Введите число" step="any">
+                        </div>
+                    </div>
+                </div>
+
+                <div class="calculator__calculate-section">
+                    <button id="calculateBtn" class="calculator__button button">
+                        <i class="button__icon fas fa-magic"></i>
+                        <span class="button__text">Вычислить</span>
+                    </button>
+                </div>
+
+                <div class="calculator__result">
+                    <div class="calculator__result-label">
+                        <i class="calculator__result-icon fas fa-star"></i>
+                        <span class="calculator__result-text">Результат:</span>
+                    </div>
+                    <div id="resultValue" class="calculator__result-value">—</div>
+                </div>
+
+                <div id="errorMessage" class="calculator__error error-message error-message--hidden">
+                    <i class="error-message__icon fas fa-exclamation-triangle"></i>
+                    <span class="error-message__text"></span>
+                </div>
+
+                <div class="calculator__hint hint">
+                    <i class="hint__icon fas fa-lightbulb"></i>
+                    <span class="hint__text">Подсказка: вы также можете нажать Enter для вычисления</span>
+                </div>
+            </div>
+
+            <div class="calculator__decoration">
+                <div class="calculator__circle calculator__circle--1"></div>
+                <div class="calculator__circle calculator__circle--2"></div>
+                <div class="calculator__circle calculator__circle--3"></div>
+                <div class="calculator__heart">
+                    <i class="calculator__heart-icon fas fa-heart"></i>
+                </div>
+            </div>
+        </main>
+
+        <footer class="footer container__footer">
+            <p class="footer__text">С любовью создано для лабораторной работы</p>
+        </footer>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/lab4/labs/script.js b/lab4/labs/script.js
new file mode 100644
index 00000000..0e0c7bae
--- /dev/null
+++ b/lab4/labs/script.js
@@ -0,0 +1,123 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const elements = {
+        num1Input: document.getElementById('num1'),
+        num2Input: document.getElementById('num2'),
+        operationSelect: document.getElementById('operation'),
+        calculateBtn: document.getElementById('calculateBtn'),
+        resultValue: document.getElementById('resultValue'),
+        errorMessage: document.getElementById('errorMessage'),
+        errorText: document.querySelector('.error-message__text')
+    };
+
+    const missingElements = [];
+    for (const [key, element] of Object.entries(elements)) {
+        if (!element) {
+            missingElements.push(key);
+            console.error(`Элемент ${key} не найден на странице`);
+        }
+    }
+
+    if (missingElements.length > 0) {
+        console.error('Не удалось найти элементы:', missingElements.join(', '));
+        return;
+    }
+
+    function hideError() {
+        elements.errorMessage.classList.add('error-message--hidden');
+    }
+
+    function showError(message) {
+        elements.errorText.textContent = message;
+        elements.errorMessage.classList.remove('error-message--hidden');
+    }
+
+    function validateInputs(a, b) {
+        if (a === '' || b === '') {
+            return { isValid: false, message: 'Пожалуйста, введите оба числа' };
+        }
+
+        if (isNaN(a) || isNaN(b)) {
+            return { isValid: false, message: 'Пожалуйста, введите корректные числа' };
+        }
+
+        return { isValid: true, message: '' };
+    }
+
+    function performCalculation(a, b, operation) {
+        const numA = parseFloat(a);
+        const numB = parseFloat(b);
+
+        switch (operation) {
+            case 'add':
+                return numA + numB;
+            case 'subtract':
+                return numA - numB;
+            case 'multiply':
+                return numA * numB;
+            case 'divide':
+                if (numB === 0) {
+                    throw new Error('Деление на ноль невозможно');
+                }
+                return numA / numB;
+            default:
+                throw new Error('Неизвестная операция');
+        }
+    }
+
+    function formatResult(result) {
+        return result.toString();
+    }
+
+    function calculate() {
+        hideError();
+
+        const a = elements.num1Input.value;
+        const b = elements.num2Input.value;
+        const operation = elements.operationSelect.value;
+
+        const validation = validateInputs(a, b);
+        if (!validation.isValid) {
+            showError(validation.message);
+            updateResultDisplay('—');
+            return;
+        }
+
+        try {
+            const result = performCalculation(a, b, operation);
+            const formattedResult = formatResult(result);
+            updateResultDisplay(formattedResult);
+        } catch (error) {
+            showError(error.message);
+            updateResultDisplay('—');
+        }
+    }
+
+    function updateResultDisplay(value) {
+        elements.resultValue.textContent = value;
+        elements.resultValue.classList.add('pulse');
+
+        setTimeout(() => {
+            elements.resultValue.classList.remove('pulse');
+        }, 500);
+    }
+
+    elements.calculateBtn.addEventListener('click', calculate);
+
+    [elements.num1Input, elements.num2Input, elements.operationSelect].forEach(element => {
+        element.addEventListener('keypress', function (e) {
+            if (e.key === 'Enter') {
+                calculate();
+            }
+        });
+    });
+
+    elements.num1Input.focus();
+
+    function clearErrorOnInput() {
+        hideError();
+    }
+
+    elements.num1Input.addEventListener('input', clearErrorOnInput);
+    elements.num2Input.addEventListener('input', clearErrorOnInput);
+    elements.operationSelect.addEventListener('change', clearErrorOnInput);
+});
\ No newline at end of file
diff --git a/lab4/labs/styles/lab1.css b/lab4/labs/styles/lab1.css
new file mode 100644
index 00000000..e78f6ca9
--- /dev/null
+++ b/lab4/labs/styles/lab1.css
@@ -0,0 +1,84 @@
+.text-block {
+    background-color: #3F4531;
+    color: #8B2CD3;
+    text-align: left;
+}
+
+.image-container {
+    position: relative;
+}
+
+.image-main {
+    width: 300px;
+}
+
+.image-overlay {
+    position: absolute;
+    width: 100px;
+    left: 100px;
+}
+
+.traffic-light {
+    display: inline-block;
+    background-color: #333;
+    border-radius: 10px;
+    padding: 10px;
+}
+
+.traffic-light__lamp {
+    height: 100px;
+    width: 100px;
+    border-radius: 50%;
+    margin: 10px 0;
+}
+
+.traffic-light__lamp_red {
+    background: red;
+}
+
+.traffic-light__lamp_yellow {
+    background: yellow;
+}
+
+.traffic-light__lamp_green {
+    background: green;
+}
+
+.maze {
+    display: grid;
+    grid-template-columns: repeat(3, 50px);
+    grid-template-rows: repeat(3, 50px);
+    gap: 0;
+    width: fit-content;
+}
+
+.maze__row {
+    display: contents;
+}
+
+.maze__cell {
+    width: 50px;
+    height: 50px;
+    border: 1px solid black;
+    box-sizing: border-box;
+}
+
+.maze__cell_no-top {
+    border-top: none;
+}
+
+.maze__cell_no-bottom {
+    border-bottom: none;
+}
+
+.maze__cell_no-left {
+    border-left: none;
+}
+
+.maze__cell_no-right {
+    border-right: none;
+}
+
+.maze__cell_no-border {
+    border: none;
+}
diff --git a/lab4/labs/styles/lab2.css b/lab4/labs/styles/lab2.css
new file mode 100644
index 00000000..c9f7d067
--- /dev/null
+++ b/lab4/labs/styles/lab2.css
@@ -0,0 +1,374 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Arial Rounded MT Bold', 'Arial', sans-serif;
+    background-color: #ffe6f2;
+    color: #333;
+    line-height: 1.6;
+    padding: 20px;
+    max-width: 800px;
+    margin: 0 auto;
+    background-image: radial-gradient(#ffb6e1 1px, transparent 1px), radial-gradient(#ffb6e1 1px, transparent 1px);
+    background-size: 20px 20px;
+    background-position: 0 0, 10px 10px;
+}
+
+.letter-container {
+    background-color: #fff;
+    border: 2px solid #ffb6e1;
+    border-radius: 15px;
+    box-shadow: 0 8px 25px rgba(255, 105, 180, 0.3);
+    padding: 40px 30px;
+    position: relative;
+    min-height: 100vh;
+}
+
+.letter-header {
+    text-align: center;
+    margin-bottom: 40px;
+    padding: 30px 20px;
+    background: linear-gradient(135deg, #fff 0%, #fff 50%, #fff0f5 100%);
+    border: 2px dashed #ffb6e1;
+    border-radius: 20px;
+    position: relative;
+}
+
+    .letter-header::before,
+    .letter-header::after {
+        content: '✻';
+        position: absolute;
+        color: #ff69b4;
+        font-size: 1.5rem;
+    }
+
+    .letter-header::before {
+        top: 10px;
+        left: 10px;
+    }
+
+    .letter-header::after {
+        top: 10px;
+        right: 10px;
+    }
+
+    .letter-header h1 {
+        color: #ff1493;
+        font-size: 2.5rem;
+        margin-bottom: 15px;
+        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+        font-family: 'Georgia', serif;
+    }
+
+.subtitle {
+    color: #ff69b4;
+    font-size: 1.2rem;
+    font-weight: bold;
+    font-style: italic;
+}
+
+.games {
+    margin-bottom: 40px;
+    padding: 25px;
+    background: linear-gradient(135deg, #fff 0%, #f8f0ff 100%);
+    border: 2px solid #e6b8ff;
+    border-radius: 15px;
+    box-shadow: 0 4px 15px rgba(200, 120, 255, 0.2);
+}
+
+.games__title {
+    color: #9d4edd;
+    margin-bottom: 20px;
+    font-size: 1.8rem;
+    border-bottom: 2px dotted #e6b8ff;
+    padding-bottom: 8px;
+}
+
+.games__list {
+    list-style-type: none;
+}
+
+.games__item {
+    padding: 12px 20px;
+    margin: 8px 0;
+    background-color: #fff;
+    border-radius: 8px;
+    border-left: 4px solid #9d4edd;
+    font-size: 1.1rem;
+    font-weight: bold;
+    color: #7b2cbf;
+    transition: all 0.4s ease;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+    .games__item:hover {
+        color: #ff6bd6;
+        transform: translateX(10px);
+        background-color: #faf0ff;
+        box-shadow: 0 4px 12px rgba(157, 78, 221, 0.3);
+    }
+
+.parents {
+    display: flex;
+    flex-direction: column;
+    gap: 25px;
+    margin-bottom: 40px;
+}
+
+.parent {
+    padding: 20px;
+    border-radius: 12px;
+    background-color: #fff;
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+    border: 1px solid #ffe6f2;
+}
+
+.parent__title {
+    margin-bottom: 12px;
+    font-size: 1.4rem;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #ffe6f2;
+}
+
+.parent__list {
+    list-style-type: none;
+}
+
+.parent__child {
+    padding: 10px 15px;
+    margin: 6px 0;
+    border-radius: 8px;
+    transition: all 0.3s ease;
+    cursor: pointer;
+    border-left: 3px solid transparent;
+}
+
+    .parent__child:hover {
+        transform: translateX(8px);
+        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
+    }
+
+.parent_1 {
+    border-left: 5px solid #ff1493;
+    background: linear-gradient(135deg, #fff 0%, #fff5f5 100%);
+}
+
+    .parent_1 .parent__child_origin_1 {
+        color: red;
+        border-left-color: red;
+    }
+
+        .parent_1 .parent__child_origin_1:hover {
+            background-color: rgba(255, 0, 0, 0.08);
+            color: darkred;
+        }
+
+.parent_2 {
+    border-left: 5px solid orange;
+    background: linear-gradient(135deg, #fff 0%, #fff8f0 100%);
+}
+
+    .parent_2 .parent__title {
+        color: orange;
+    }
+
+    .parent_2 .parent__child_origin_2 {
+        color: #b4005a;
+        border: 2px dashed orange;
+        padding: 8px 12px;
+        border-left: 3px solid #b4005a;
+    }
+
+        .parent_2 .parent__child_origin_2:hover {
+            background-color: rgba(255, 165, 0, 0.08);
+            color: #8a0045;
+        }
+
+.parent_3 {
+    border-left: 5px solid green;
+    background: linear-gradient(135deg, #fff 0%, #f0fff0 100%);
+}
+
+    .parent_3 .parent__title {
+        color: green;
+    }
+
+    .parent_3 .parent__child_origin_3 {
+        color: green;
+        border-left-color: green;
+    }
+
+        .parent_3 .parent__child_origin_3:hover {
+            background-color: rgba(0, 128, 0, 0.08);
+            color: darkgreen;
+        }
+
+
+.parent_1 ~ .parent_3 {
+    border-left: 5px solid #333;
+    background: linear-gradient(135deg, #fff 0%, #f5f5f5 100%);
+}
+
+    .parent_1 ~ .parent_3 .parent__title {
+        color: #333;
+    }
+
+    .parent_1 ~ .parent_3 .parent__child_origin_3 {
+        color: #333;
+        border-left-color: #333;
+    }
+
+        .parent_1 ~ .parent_3 .parent__child_origin_3:hover {
+            background-color: rgba(0, 0, 0, 0.08);
+            color: #000;
+        }
+
+.parent_2 ~ .parent_3 {
+    border-left: 5px solid green;
+    background: linear-gradient(135deg, #fff 0%, #f0fff0 100%);
+}
+
+    .parent_2 ~ .parent_3 .parent__title {
+        color: green;
+    }
+
+    .parent_2 ~ .parent_3 .parent__child_origin_3:first-child,
+    .parent_2 ~ .parent_3 .parent__child_origin_3:nth-child(2) {
+        color: green;
+        border-left-color: green;
+    }
+
+        .parent_2 ~ .parent_3 .parent__child_origin_3:first-child:hover,
+        .parent_2 ~ .parent_3 .parent__child_origin_3:nth-child(2):hover {
+            background-color: rgba(0, 128, 0, 0.08);
+            color: darkgreen;
+        }
+
+    .parent_2 ~ .parent_3 .parent__child_origin_3:last-child {
+        color: purple;
+        border: none;
+        border-left: 3px solid purple;
+    }
+
+        .parent_2 ~ .parent_3 .parent__child_origin_3:last-child:hover {
+            background-color: rgba(128, 0, 128, 0.08);
+            color: darkviolet;
+        }
+
+.programming-languages {
+    background: linear-gradient(135deg, #fff 0%, #fff0f8 100%);
+    padding: 30px;
+    border-radius: 15px;
+    border: 2px solid #ffb6e1;
+    margin-bottom: 40px;
+    position: relative;
+}
+
+    .programming-languages::before {
+        content: '';
+        position: absolute;
+        top: -2px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 100px;
+        height: 15px;
+        background: #ffe6f2;
+        border: 2px solid #ffb6e1;
+        border-bottom: none;
+        border-radius: 10px 10px 0 0;
+    }
+
+.programming-languages__title {
+    color: #ff69b4;
+    margin: 25px 0 20px;
+    font-size: 1.8rem;
+    border-bottom: 2px dotted #ffb6e1;
+    padding-bottom: 8px;
+}
+
+.programming-languages__text {
+    margin-bottom: 18px;
+    font-size: 1.1rem;
+    text-align: justify;
+}
+
+.programming-languages__list {
+    list-style-type: none;
+    margin: 25px 0;
+}
+
+.programming-languages__item {
+    margin-bottom: 18px;
+    padding-left: 35px;
+    position: relative;
+    text-align: justify;
+}
+
+    .programming-languages__item::before {
+        content: "💖";
+        position: absolute;
+        left: 0;
+        top: 2px;
+        font-size: 1.2rem;
+    }
+
+.programming-languages__link {
+    font-weight: bold;
+    color: #ff1493;
+    text-decoration: none;
+    position: relative;
+    transition: color 0.3s ease;
+    border-bottom: 1px dotted #ff69b4;
+}
+
+    .programming-languages__link:hover {
+        color: #ff69b4;
+        text-decoration: none;
+        border-bottom: 1px solid #ff69b4;
+    }
+
+    .programming-languages__link::after {
+        content: " 🌸";
+        font-size: 0.8em;
+    }
+
+.programming-languages::after {
+    content: "СамГУ";
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 120px;
+    height: 120px;
+    margin: 30px auto 0;
+    background: radial-gradient(circle at center, transparent 30%, #ff69b4 31%, #ff69b4 40%, transparent 41%), radial-gradient(circle at center, #ff1493 50%, transparent 51%);
+    background-size: 100% 100%, 80% 80%;
+    background-repeat: no-repeat;
+    background-position: center;
+    border: 8px double #ff1493;
+    border-radius: 50%;
+    position: relative;
+    box-shadow: 0 4px 15px rgba(255, 105, 180, 0.4);
+    color: white;
+    font-weight: bold;
+    font-size: 14px;
+    font-family: 'Times New Roman', serif;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.footer {
+    text-align: center;
+    margin-top: 40px;
+    padding: 20px;
+    background: linear-gradient(135deg, #ffb6d9 0%, #ff8ec6 100%);
+    border-radius: 12px;
+    color: #fff;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.footer__text {
+    margin: 0;
+}
diff --git a/lab4/labs/styles/lab3.css b/lab4/labs/styles/lab3.css
new file mode 100644
index 00000000..91f69364
--- /dev/null
+++ b/lab4/labs/styles/lab3.css
@@ -0,0 +1,349 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: "Arial", sans-serif;
+    line-height: 1.6;
+    color: #5a4a4a;
+    background: linear-gradient(135deg,#ffe4ec, #fff0f5);
+    min-height: 100vh;
+}
+
+.resume {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.layout {
+    display: grid;
+    grid-template-columns: 1fr 350px;
+    background: white;
+    border: 2px solid #ffc2d6;
+    min-height: 80vh;
+    box-shadow: 0 8px 25px rgba(255, 182, 193, 0.15);
+    border-radius: 20px;
+    overflow: hidden;
+}
+
+.sidebar {
+    background: linear-gradient(135deg, #ffd1dc, #ffb7c5);
+}
+
+.main-content {
+    padding: 40px;
+    background: white;
+}
+
+.resume__title {
+    font-family: "Georgia", serif;
+    font-size: 4em;
+    color: #ff85a2;
+    text-align: center;
+    margin-bottom: 40px;
+    font-weight: normal;
+    letter-spacing: 3px;
+    text-transform: uppercase;
+    border-bottom: 3px solid #ffc2d6;
+    padding-bottom: 15px;
+}
+
+.profile-card {
+    text-align: center;
+    color: #5a4a4a;
+}
+
+.resume__photo {
+    width: 100%;
+    object-fit: cover;
+    border-bottom: 4px solid #ffc2d6;
+    margin-bottom: 30px;
+}
+
+.profile-card__name {
+    font-size: 1.4em;
+    margin-bottom: 15px;
+    font-weight: bold;
+    padding: 0 20px;
+    color: #ff6b9d;
+}
+
+.resume__birthdate {
+    font-size: 1.1em;
+    margin-bottom: 20px;
+    opacity: 0.9;
+    color: #7a6a6a;
+}
+
+.contact-section {
+    padding: 0 20px 20px;
+}
+
+.github__link {
+    display: block;
+    background: #ffc2d6;
+    color: #5a4a4a;
+    padding: 12px;
+    text-decoration: none;
+    font-weight: bold;
+    border: 2px solid #ffa8c2;
+    border-radius: 12px;
+    transition: 0.3s;
+    text-align: center;
+}
+
+    .github__link:hover {
+        background: #ffa8c2;
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(255, 105, 180, 0.2);
+    }
+
+.qr-code {
+    text-align: center;
+    margin-top: 20px;
+    padding: 15px;
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 12px;
+}
+
+.qr-code__image {
+    width: 150px;
+    height: auto;
+    border: 2px solid #ffc2d6;
+    border-radius: 8px;
+    background: white;
+    padding: 8px;
+}
+
+.about-section {
+    padding: 20px;
+    text-align: left;
+}
+
+.sidebar .resume__section-title {
+    font-size: 1.3em;
+    color: #ff6b9d;
+    margin-bottom: 15px;
+    border-bottom: 2px solid #ffc2d6;
+    padding-bottom: 8px;
+    font-family: "Arial", sans-serif;
+}
+
+.about__text {
+    font-size: 0.95em;
+    opacity: 0.9;
+    line-height: 1.7;
+}
+
+.main-content .resume__section-title {
+    color: #ff6b9d;
+    font-size: 1.5em;
+    margin-bottom: 20px;
+    border-bottom: 2px solid #ffc2d6;
+    padding-bottom: 8px;
+    font-family: "Georgia", serif;
+}
+
+.skills-section__container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 25px;
+    margin-bottom: 35px;
+}
+
+.skills-section__column {
+    width: 100%;
+}
+
+.skills-section__subtitle {
+    font-size: 1.2em;
+    margin-bottom: 12px;
+    font-family: "Georgia", serif;
+    color: #ff85a2;
+}
+
+.skills {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 10px;
+}
+
+.skill {
+    display: block;
+    width: 100%;
+    padding: 12px 15px;
+    background: #fff0f5;
+    border: 2px solid #ffc2d6;
+    border-radius: 12px;
+    font-weight: bold;
+    transition: 0.3s;
+    color: #5a4a4a;
+}
+
+    .skill:hover {
+        border-color: #ff6b9d;
+        transform: translateX(5px);
+        box-shadow: 0 4px 8px rgba(255, 107, 157, 0.1);
+    }
+
+.skill--hard:hover {
+    background: #ffd1dc;
+}
+
+.skill--soft:hover {
+    background: #ffe4ec;
+}
+
+.hobbies-list {
+    list-style: none;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 12px;
+    padding: 0;
+    margin-bottom: 35px;
+}
+
+.hobbies-list__item {
+    padding: 12px 15px;
+    background: #fff0f5;
+    border: 2px solid #ffc2d6;
+    border-radius: 12px;
+    margin-bottom: 4px;
+    font-weight: bold;
+    transition: 0.3s;
+    text-align: center;
+}
+
+    .hobbies-list__item:hover {
+        background: #ffe4ec;
+        transform: translateY(-4px);
+        border-color: #ff6b9d;
+        box-shadow: 0 6px 12px rgba(255, 107, 157, 0.15);
+    }
+
+.projects-section {
+    margin-top: 10px;
+}
+
+.projects-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 20px;
+    margin-top: 15px;
+}
+
+.project-card {
+    display: block;
+    text-decoration: none;
+    background: #fff0f5;
+    border: 2px solid #ffc2d6;
+    border-radius: 15px;
+    padding: 20px;
+    transition: all 0.3s ease;
+    color: #5a4a4a;
+    height: 100%;
+}
+
+    .project-card:hover {
+        background: #ffe4ec;
+        border-color: #ff6b9d;
+        transform: translateY(-5px);
+        box-shadow: 0 8px 16px rgba(255, 107, 157, 0.15);
+    }
+
+    .project-card:nth-child(3) {
+        background: #ffe4ec;
+        border-color: #ffa8c2;
+    }
+
+        .project-card:nth-child(3):hover {
+            background: #ffd1dc;
+        }
+
+.project-card__title {
+    font-size: 1.3em;
+    color: #ff6b9d;
+    margin-bottom: 10px;
+    font-family: "Georgia", serif;
+    font-weight: bold;
+}
+
+.project-card__description {
+    font-size: 0.95em;
+    line-height: 1.5;
+    margin-bottom: 15px;
+    color: #7a6a6a;
+}
+
+.project-card__link {
+    display: inline-block;
+    font-weight: bold;
+    color: #ff85a2;
+    font-size: 0.9em;
+    padding: 5px 0;
+    border-bottom: 2px solid transparent;
+    transition: all 0.2s ease;
+}
+
+.project-card:hover .project-card__link {
+    color: #ff6b9d;
+    border-bottom-color: #ff6b9d;
+}
+
+@media (max-width: 968px) {
+    .layout {
+        grid-template-columns: 300px 1fr;
+    }
+
+    .skills-section__container {
+        grid-template-columns: 1fr;
+    }
+
+    .projects-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 768px) {
+    .layout {
+        grid-template-columns: 1fr;
+    }
+
+    .resume__title {
+        font-size: 3em;
+    }
+
+    .hobbies-list {
+        grid-template-columns: 1fr;
+    }
+
+    .projects-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 480px) {
+    .main-content {
+        padding: 20px;
+    }
+
+    .resume__title {
+        font-size: 2.5em;
+    }
+
+    .skill {
+        padding: 10px 12px;
+        font-size: 0.95em;
+    }
+
+    .project-card {
+        padding: 15px;
+    }
+
+    .project-card__title {
+        font-size: 1.2em;
+    }
+}
diff --git a/lab4/labs/styles/lab4.css b/lab4/labs/styles/lab4.css
new file mode 100644
index 00000000..7931fa23
--- /dev/null
+++ b/lab4/labs/styles/lab4.css
@@ -0,0 +1,335 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.page {
+    font-family: 'Nunito', sans-serif;
+    background: linear-gradient(135deg, #fff5f7 0%, #ffeef2 100%);
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    color: #555;
+}
+
+.container {
+    max-width: 800px;
+    width: 100%;
+    margin: 0 auto;
+}
+
+.header {
+    text-align: center;
+    margin-bottom: 30px;
+}
+
+.header__title {
+    font-size: 2.8rem;
+    color: #ff7bac;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 15px;
+    text-shadow: 2px 2px 4px rgba(255, 123, 172, 0.1);
+}
+
+.header__subtitle {
+    font-size: 1.2rem;
+    color: #ffa8c8;
+    font-weight: 300;
+}
+
+.calculator {
+    position: relative;
+    margin-bottom: 40px;
+}
+
+.calculator__card {
+    background-color: white;
+    border-radius: 25px;
+    padding: 40px;
+    box-shadow: 0 15px 35px rgba(255, 123, 172, 0.15);
+    position: relative;
+    z-index: 2;
+    border: 2px solid #ffe4ec;
+}
+
+.calculator__inputs {
+    margin-bottom: 30px;
+}
+
+.calculator__number-inputs {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    gap: 20px;
+    flex-wrap: nowrap;
+}
+
+.input-group {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.input-group__label {
+    font-size: 1.1rem;
+    color: #ff7bac;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: 600;
+}
+
+.input-group__input {
+    padding: 18px 20px;
+    border: 2px solid #ffe0e9;
+    border-radius: 15px;
+    font-size: 1.2rem;
+    transition: all 0.3s ease;
+    background-color: #fff9fb;
+    font-family: 'Nunito', sans-serif;
+}
+
+    .input-group__input:focus {
+        outline: none;
+        border-color: #ff7bac;
+        box-shadow: 0 0 0 3px rgba(255, 123, 172, 0.2);
+        background-color: white;
+    }
+
+    .input-group__input::placeholder {
+        color: #ffc1d6;
+    }
+
+.calculator__operation-selector {
+    flex: 0 0 200px;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+.operation-selector__label {
+    font-size: 1.1rem;
+    color: #ff7bac;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: 600;
+}
+
+.operation-selector__select {
+    padding: 18px 20px;
+    border: 2px solid #ffe0e9;
+    border-radius: 15px;
+    font-size: 1.2rem;
+    transition: all 0.3s ease;
+    background-color: #fff9fb;
+    font-family: 'Nunito', sans-serif;
+}
+
+    .operation-selector__select:focus {
+        outline: none;
+        border-color: #ff7bac;
+        box-shadow: 0 0 0 3px rgba(255, 123, 172, 0.2);
+        background-color: white;
+    }
+
+.calculator__calculate-section {
+    margin: 35px 0;
+    text-align: center;
+}
+
+.button {
+    background: linear-gradient(to right, #ff9bc0, #ff7bac);
+    color: white;
+    border: none;
+    border-radius: 15px;
+    padding: 20px 40px;
+    font-size: 1.3rem;
+    font-weight: 700;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    box-shadow: 0 5px 15px rgba(255, 123, 172, 0.4);
+}
+
+    .button:hover {
+        background: linear-gradient(to right, #ff8ab5, #ff6a9f);
+        transform: translateY(-3px);
+        box-shadow: 0 8px 20px rgba(255, 123, 172, 0.5);
+    }
+
+    .button:active {
+        transform: translateY(0);
+    }
+
+.calculator__result {
+    background-color: #fff5f9;
+    border-radius: 15px;
+    padding: 25px;
+    margin-bottom: 25px;
+    border: 2px dashed #ffc1d6;
+}
+
+.calculator__result-label {
+    font-size: 1.2rem;
+    color: #ff7bac;
+    margin-bottom: 15px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.calculator__result-value {
+    font-size: 3.5rem;
+    font-weight: 700;
+    color: #ff5a9c;
+    text-align: center;
+    min-height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    word-break: break-all;
+}
+
+.error-message {
+    background-color: #ffe6ee;
+    border-left: 5px solid #ff5a9c;
+    border-radius: 10px;
+    padding: 20px;
+    margin-top: 20px;
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    animation: slideIn 0.3s ease;
+}
+
+.error-message--hidden {
+    display: none !important;
+}
+
+.error-message__icon {
+    color: #ff5a9c;
+    font-size: 1.5rem;
+}
+
+.error-message__text {
+    font-size: 1.1rem;
+    color: #d44d7e;
+    font-weight: 600;
+}
+
+.calculator__hint {
+    margin-top: 25px;
+    padding: 15px;
+    background-color: #fff9fb;
+    border-radius: 10px;
+    color: #ff8ab5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    font-size: 0.95rem;
+}
+
+.calculator__decoration {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    overflow: hidden;
+    pointer-events: none;
+}
+
+.calculator__circle {
+    position: absolute;
+    border-radius: 50%;
+    background-color: rgba(255, 123, 172, 0.08);
+}
+
+.calculator__circle--1 {
+    width: 120px;
+    height: 120px;
+    top: -40px;
+    right: -40px;
+}
+
+.calculator__circle--2 {
+    width: 80px;
+    height: 80px;
+    bottom: 30px;
+    left: -30px;
+}
+
+.calculator__circle--3 {
+    width: 60px;
+    height: 60px;
+    bottom: -20px;
+    right: 20%;
+}
+
+.calculator__heart {
+    position: absolute;
+    top: 50%;
+    left: -25px;
+    color: #ffc1d6;
+    font-size: 2.5rem;
+    transform: translateY(-50%);
+    animation: float 3s ease-in-out infinite;
+}
+
+.footer {
+    text-align: center;
+    color: #ffa8c8;
+    font-size: 0.9rem;
+    padding: 20px;
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes float {
+    0%, 100% {
+        transform: translateY(-50%) translateX(0);
+    }
+
+    50% {
+        transform: translateY(-50%) translateX(10px);
+    }
+}
+
+@keyframes pulse {
+    0%, 100% {
+        transform: scale(1);
+    }
+
+    50% {
+        transform: scale(1.05);
+    }
+}
+
+.calculator__result-value.pulse {
+    animation: pulse 0.5s ease;
+}
\ No newline at end of file