rsschool-cv

photo

Irina Bukhtoyarova

Contact information

Telegram: @Kiririsa
Discord: iri_bukhtoyarova
E-mail: ira-bukhtoyarova2012@yandex.ru ***

For the past 4 years, I have been working as a business assistant. This has greatly improved my strengths, such as my ability to work in and with uncertainty, systematization, prioritization, soft skills, completing new tasks in a limited time, and more.
Now, I want to switch careers and become a frontend developer. This profession seems less stressful, but it’s just as interesting. ***

Skills

Code Examples

Project: Landing Page

HTML

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>4 правила вёрстки</title>
    <link
      rel="stylesheet"
      href="https://code.s3.yandex.net/web-code/fonts/fonts.css"
    />
    <link rel="stylesheet" href="styles/style.css" />
  </head>
  <body>
    <header class="header">
      <div class="overlay">
        <h1 class="header-title">Четыре правила вёрстки</h1>
      </div>
    </header>
    <section class="content">
      <div class="card">
        <img
          class="card-image"
          src="https://code.s3.yandex.net/web-code/images/freetrack/04/card-1.jpg"
          alt="Неоновые лампочки в виде символов светятся красным"
        />
        <h3 class="card-title">Пустота</h3>
        <p class="card-text">
          Простое правило, которое часто нарушают: ставить рядом элементы с
          похожим смыслом и окружать их пустым пространством. Пустота — мощное
          средство воздействия.
        </p>
      </div>
      <div class="card no-right-margin">
        <img
          class="card-image"
          src="https://code.s3.yandex.net/web-code/images/freetrack/04/card-2.jpg"
          alt="Разметка теннисного корта крупным планом"
        />
        <h3 class="card-title">Сетка</h3>
        <p class="card-text">
          Размеры элементов и расстояния между ними укладываются в гармоничную
          схему — её называют сеткой. Если элемент выпадает, зритель может это
          заметить.
        </p>
      </div>
      <div class="card">
        <img
          class="card-image"
          src="https://code.s3.yandex.net/web-code/images/freetrack/04/card-3.jpg"
        />
        <h3 class="card-title">Шрифты</h3>
        <p class="card-text">
          Не больше трёх шрифтов на сайт. Один для заголовков, второй — для всех
          остальных текстов, третий — для выделения важных слов. Должно хватить.
        </p>
      </div>
      <div class="card no-right-margin">
        <img
          class="card-image"
          src="https://code.s3.yandex.net/web-code/images/freetrack/04/card-4.jpg"
        />
        <h3 class="card-title">Цвета</h3>
        <p class="card-text">
          Обычно на сайте два цвета: ведущий и акцентный. Подобрать удачную
          цветовую пару можно за счёт насмотренности или специальных
          инструментов.
        </p>
      </div>
    </section>
    <footer class="footer">
      <h4 class="footer-author">Ири Бухтоярова х Практикум</h4>
    </footer>
  </body>
</html>

CSS

* {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p {
  margin: 0;
  font-weight: normal;
  font-size: 100%;
}

body {
  min-width: 850px;
  font-family: 'Open Sans', Arial, sans-serif;
}

.header {
  height: 100vh;
  text-align: center;
  background-color: #eee;
  background-image: url(https://code.s3.yandex.net/web-code/images/freetrack/03/cover.png);
  background-position: center;
  background-size: cover;
}

.header-title {
  margin: auto;
  color: white;
  font-weight: 800;
  font-size: 74px;
  text-transform: uppercase;
}

.overlay {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: rgb(95 13 238 / 0.5);
}

.content {
  width: 770px;
  margin: 100px auto 50px;
  font-size: 0;
}

.card {
  display: inline-block;
  width: 360px;
  margin-right: 50px;
  margin-bottom: 50px;
  border: 1px solid black;
  padding: 25px 25px 30px;
  box-shadow: 4px 4px 0 black;
}

.no-right-margin {
  margin-right: 0;
}

.card-title {
  margin-bottom: 10px;
  font-weight: 800;
  font-size: 31px;
  text-align: center;
  text-transform: uppercase;
}

.card-text {
  font-size: 18px;
}

.card-image {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid black;
}

.footer {
  display: flex;
  height: 200px;
  background-color: #5f0dee;
}

.footer-author {
  margin: auto;
  color: white;
  font-weight: 800;
  font-size: 25px;
}

Work Experience

No experience working as a front-end developer ***

Education

Language