inspiritum · inspiritum · Jan 27, 2026 · Jan 27, 2026
diff --git a/README.md b/README.md
@@ -2,10 +2,17 @@
 
 ### Шаг 0 - настроить новый проект
 
-1) Создать проект "resume" у себя на github  
+0.1) Создать проект "resume" у себя на github  
 (или свое корректное название, в котором есть слово "resume")
 
-2) Добавить в него базовые файлы и конфиги:  
+0.2) Добавить в него базовые файлы и конфиги:  
 - `README.md` (указать название или выбрать README при создании проекта)
 - `.gitignore` (указать базовые настройки, как в проекте-образце)
 - `.edigorconfig` (указать базовые настройки, как в проекте-образце)
+
+### Шаг 1 - добавить vanilla landing
+
+> Имеется ввиду сайт-визитка, в той ее версии, где еше не добавляли typescript  
+> (т.е. просто html+css+js, и картинки, если они были ранее или если хочется сейчас)
+
+1.1) Добавить файлы лендинга "сайт-визитка" из прошлых ДЗ
diff --git a/index.html b/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="ru">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Иван Иванов — Frontend Developer</title>
+
+        <link rel="stylesheet" href="styles.css" />
+    </head>
+    <body class="page">
+        <header class="page__header header">
+            <div class="container">
+                <h1 class="header__name">Иван Иванов</h1>
+                <p class="header__role">Frontend Developer</p>
+            </div>
+        </header>
+
+        <main class="page__content container">
+            <section class="section">
+                <h2 class="section__title">Обо мне</h2>
+                <p class="section__text">
+                    Занимаюсь frontend-разработкой, люблю чистый код и понятные
+                    интерфейсы.
+                </p>
+            </section>
+
+            <section class="section">
+                <h2 class="section__title">Навыки</h2>
+                <ul class="skills">
+                    <li class="skills__item">HTML / CSS</li>
+                    <li class="skills__item">JavaScript</li>
+                    <li class="skills__item">TypeScript</li>
+                    <li class="skills__item">Angular</li>
+                </ul>
+            </section>
+
+            <section class="section">
+                <h2 class="section__title">Контакты</h2>
+
+                <button id="contactBtn" class="button">Скрыть контакты</button>
+
+                <p id="email" class="contact contact--hidden">
+                    ivan.ivanov@example.com
+                </p>
+            </section>
+        </main>
+
+        <footer class="page__footer footer">
+            <div class="container">© 2026</div>
+        </footer>
+
+        <script src="script.js"></script>
+    </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,8 @@
+const button = document.getElementById("contactBtn");
+const email = document.getElementById("email");
+
+button.addEventListener("click", () => {
+    const isHidden = email.classList.toggle("hidden");
+
+    button.textContent = isHidden ? "Показать контакты" : "Скрыть контакты";
+});
diff --git a/styles.css b/styles.css
@@ -0,0 +1,94 @@
+:root {
+    --bg: #f9fafb;
+    --text: #111827;
+    --muted: #6b7280;
+    --accent: #2563eb;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    font-family: system-ui, -apple-system, sans-serif;
+    color: var(--text);
+    background: var(--bg);
+    line-height: 1.6;
+}
+
+.container {
+    max-width: 60rem;
+    padding: 0 1rem;
+    margin: 0 auto;
+}
+
+.header {
+    padding: 3rem 0;
+    background: white;
+    border-bottom: 1px solid #e5e7eb;
+}
+
+.name {
+    margin: 0;
+    font-size: 2rem;
+}
+
+.role {
+    margin: 0.5rem 0 0;
+    color: var(--muted);
+}
+
+.section {
+    margin: 3rem 0;
+}
+
+.section h2 {
+    margin-bottom: 0.75rem;
+}
+
+.skills {
+    list-style: none;
+    padding: 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr));
+    gap: 0.5rem;
+}
+
+.skills li {
+    padding: 0.5rem 0.75rem;
+    background: white;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.375rem;
+    text-align: center;
+}
+
+.button {
+    padding: 0.625rem 1rem;
+    border: none;
+    border-radius: 0.375rem;
+    background: var(--accent);
+    color: white;
+    cursor: pointer;
+    font-size: 0.875rem;
+}
+
+.button:hover {
+    opacity: 0.9;
+}
+
+.email {
+    margin-top: 0.75rem;
+    font-weight: 500;
+}
+
+.hidden {
+    display: none;
+}
+
+.footer {
+    padding: 1.5rem 0;
+    color: var(--muted);
+    text-align: center;
+    border-top: 1px solid #e5e7eb;
+}