diff --git a/image1.png b/image1.png new file mode 100644 index 00000000..413a7e8f Binary files /dev/null and b/image1.png differ diff --git a/image2.png b/image2.png new file mode 100644 index 00000000..4aaefb6c Binary files /dev/null and b/image2.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..446d04ff --- /dev/null +++ b/index.html @@ -0,0 +1,82 @@ + + + + + + Резюме - Тудаков Родион Алексеевич + + + + +
+ + + + +
+
+

О себе

+

Привет! Я — Родион, студент, увлечённый веб-разработкой и программированием. С интересом изучаю фронтенд и бэкенд технологии, стараюсь писать чистый и понятный код. Люблю решать задачи, которые требуют творческого подхода, и постоянно развиваюсь через личные проекты и лабораторные работы. Цель — стать квалифицированным full-stack разработчиком и участвовать в реальных проектах. Открыт к новым знаниям, стажировкам и сотрудничеству!

+
+ +
+

Дата рождения

+

16 сентября 2005 г.

+
+ +
+

Любимые увлечения

+
    +
  • Веб-разработка и создание личных сайтов
    • +
  • Изучение новых технологий и фреймворков
    • +
  • Компьютерные игры (особенно стратегии и RPG)
    • +
  • Просмотр научно-популярных видео и документалистики
    • +
  • Спорт: бег и тренажёрный зал
    • +
  • Общение с друзьями и путешествия по городу
    • +
+
+ +
+

Дополнительно

+

Готов к junior-позициям и стажировкам. Всегда рад обратной связи и новым вызовам!

+
+
+
+ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 00000000..46d30ca6 --- /dev/null +++ b/style.css @@ -0,0 +1,116 @@ +body { + font-family: Arial, Helvetica, sans-serif; + background-color: #f4f4f4; + padding: 20px; + line-height: 1.6; +} + +.header { + text-align: center; + margin-bottom: 40px; +} + +.header h1 { + margin-bottom: 10px; + color: #333; +} + +.header p { + font-size: 1.4em; + font-weight: bold; + color: #222; + margin: 8px 0; +} + +h2 { + text-align: center; + color: #444; + padding: 20px 0 50px; +} + +.text-container { + max-width: 800px; + margin: 40px auto; + padding: 30px; + background-color: #6F4700; + color: #3D5D93; + text-align: left; + border-radius: 10px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); +} + +.image-overlay { + position: relative; + width: 300px; + height: 400px; + margin: 50px auto; + border: 3px solid #333; +} + +.image-overlay__img { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 250px; + height: auto; +} + +.image-overlay__img--front { + z-index: 10; +} + +.traffic-light { + width: 120px; + height: 300px; + background-color: #222; + margin: 60px auto; + padding: 15px; + border-radius: 20px; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; +} + +.traffic-light__light { + width: 90px; + height: 90px; + border-radius: 50%; +} + +.traffic-light__light--red { background-color: #c0392b; } +.traffic-light__light--yellow { background-color: #f1c40f; } +.traffic-light__light--green { background-color: #27ae60; } + +.maze { + display: grid; + grid-template-columns: repeat(3, 120px); + grid-template-rows: repeat(3, 120px); + gap: 0; + margin: 60px auto; + width: fit-content; + background-color: #ffffff; + padding: 15px; + border: 5px solid #000; + border-radius: 10px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); +} + +.maze__cell { + box-sizing: border-box; + background-color: #f8f8f8; +} + +.maze__cell--wall-top { border-top: 5px solid #000; } +.maze__cell--wall-right { border-right: 5px solid #000; } +.maze__cell--wall-bottom { border-bottom: 5px solid #000; } +.maze__cell--wall-left { border-left: 5px solid #000; } + +.maze__cell--start, +.maze__cell--end { + background-color: #d0f0d0; +} + background-color: #dff0d8; + +} diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..4f2ac3e3 --- /dev/null +++ b/styles.css @@ -0,0 +1,117 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Roboto', sans-serif; + background-color: #f5f5f5; + color: #333; +} + +.container { + display: flex; + max-width: 1200px; + margin: 40px auto; + background-color: #fff; + box-shadow: 0 0 20px rgba(0,0,0,0.1); + border-radius: 10px; + overflow: hidden; +} + +.sidebar { + width: 350px; + background-color: #2c3e50; + color: #ecf0f1; + padding: 40px; + text-align: center; +} + +.avatar { + width: 200px; + height: 200px; + border-radius: 50%; + object-fit: cover; + border: 5px solid #ecf0f1; + margin-bottom: 20px; +} + +.sidebar h1 { + font-size: 28px; + margin-bottom: 10px; +} + +.profession { + font-size: 18px; + margin-bottom: 40px; + opacity: 0.9; +} + +.section { + margin-bottom: 40px; + text-align: left; +} + +.section h3 { + font-size: 20px; + margin-bottom: 15px; + border-bottom: 2px solid #ecf0f1; + padding-bottom: 5px; +} + +.section ul { + list-style: none; +} + +.section li { + margin-bottom: 10px; +} + +.section a { + color: #3498db; + text-decoration: none; +} + +.section a:hover { + text-decoration: underline; +} + +.main { + flex: 1; + padding: 40px; +} + +.main section { + margin-bottom: 50px; +} + +.main h2 { + font-size: 24px; + margin-bottom: 20px; + color: #2c3e50; + border-bottom: 3px solid #3498db; + padding-bottom: 10px; +} + +.main p, .main ul { + font-size: 18px; + line-height: 1.6; +} + +.main ul { + padding-left: 20px; +} + +.main li { + margin-bottom: 10px; +} + +@media (max-width: 768px) { + .container { + flex-direction: column; + } + .sidebar { + width: 100%; + } +} \ No newline at end of file