diff --git a/README.md b/README.md index f5d7127..14e2229 100644 --- 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 new file mode 100644 index 0000000..06f9c25 --- /dev/null +++ b/index.html @@ -0,0 +1,54 @@ + + + + + + Иван Иванов — Frontend Developer + + + + +
+
+

Иван Иванов

+

Frontend Developer

+
+
+ +
+
+

Обо мне

+

+ Занимаюсь frontend-разработкой, люблю чистый код и понятные + интерфейсы. +

+
+ +
+

Навыки

+ +
+ +
+

Контакты

+ + + +

+ ivan.ivanov@example.com +

+
+
+ + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..409f527 --- /dev/null +++ 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 new file mode 100644 index 0000000..33943db --- /dev/null +++ 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; +}