diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..6d359f1
Binary files /dev/null and b/.DS_Store differ
diff --git a/README.md b/README.md
index a7ac464..4c21733 100644
--- a/README.md
+++ b/README.md
@@ -1 +1 @@
-# rsschool-cv
\ No newline at end of file
+https://sleepycomrade.github.io/rsschool-cv/
\ No newline at end of file
diff --git a/css/normalize.css b/css/normalize.css
new file mode 100644
index 0000000..e9c25d9
--- /dev/null
+++ b/css/normalize.css
@@ -0,0 +1,427 @@
+/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+ html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+* Remove default margin.
+*/
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+ ========================================================================== */
+
+/**
+* Correct `block` display not defined for any HTML5 element in IE 8/9.
+* Correct `block` display not defined for `details` or `summary` in IE 10/11
+* and Firefox.
+* Correct `block` display not defined for `main` in IE 11.
+*/
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/**
+* 1. Correct `inline-block` display not defined in IE 8/9.
+* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+*/
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+* Prevent modern browsers from displaying `audio` without controls.
+* Remove excess height in iOS 5 devices.
+*/
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+* Address `[hidden]` styling not present in IE 8/9/10.
+* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
+*/
+
+[hidden],
+template {
+  display: none;
+}
+
+/* Links
+ ========================================================================== */
+
+/**
+* Remove the gray background color from active links in IE 10.
+*/
+
+a {
+  background-color: transparent;
+}
+
+/**
+* Improve readability when focused and also mouse hovered in all browsers.
+*/
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/* Text-level semantics
+ ========================================================================== */
+
+/**
+* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+*/
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+*/
+
+b,
+strong {
+  font-weight: bold;
+}
+
+/**
+* Address styling not present in Safari and Chrome.
+*/
+
+dfn {
+  font-style: italic;
+}
+
+/**
+* Address variable `h1` font-size and margin within `section` and `article`
+* contexts in Firefox 4+, Safari, and Chrome.
+*/
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+* Address styling not present in IE 8/9.
+*/
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+/**
+* Address inconsistent and variable font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/**
+* Prevent `sub` and `sup` affecting `line-height` in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* Embedded content
+ ========================================================================== */
+
+/**
+* Remove border when inside `a` element in IE 8/9/10.
+*/
+
+img {
+  border: 0;
+}
+
+/**
+* Correct overflow not hidden in IE 9/10/11.
+*/
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+ ========================================================================== */
+
+/**
+* Address margin not present in IE 8/9 and Safari.
+*/
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+* Address differences between Firefox and other browsers.
+*/
+
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+* Contain overflow in all browsers.
+*/
+
+pre {
+  overflow: auto;
+}
+
+/**
+* Address odd `em`-unit font size rendering in all browsers.
+*/
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+/* Forms
+ ========================================================================== */
+
+/**
+* Known limitation: by default, Chrome and Safari on OS X allow very limited
+* styling of `select`, unless a `border` property is set.
+*/
+
+/**
+* 1. Correct color not being inherited.
+*    Known issue: affects color of disabled elements.
+* 2. Correct font properties not being inherited.
+* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+* Address `overflow` set to `hidden` in IE 8/9/10/11.
+*/
+
+button {
+  overflow: visible;
+}
+
+/**
+* Address inconsistent `text-transform` inheritance for `button` and `select`.
+* All other form control elements do not inherit `text-transform` values.
+* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+* Correct `select` style inheritance in Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+*    and `video` controls.
+* 2. Correct inability to style clickable `input` types in iOS.
+* 3. Improve usability and consistency of cursor style between image-type
+*    `input` and others.
+*/
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+}
+
+/**
+* Re-set default cursor for disabled elements.
+*/
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+* Remove inner padding and border in Firefox 4+.
+*/
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+* Address Firefox 4+ setting `line-height` on `input` using `!important` in
+* the UA stylesheet.
+*/
+
+input {
+  line-height: normal;
+}
+
+/**
+* It's recommended that you don't attempt to style these elements.
+* Firefox's implementation doesn't respect box-sizing, padding, or width.
+*
+* 1. Address box sizing set to `content-box` in IE 8/9/10.
+* 2. Remove excess padding in IE 8/9/10.
+*/
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+* Fix the cursor style for Chrome's increment/decrement buttons. For certain
+* `font-size` values of the `input`, it causes the cursor style of the
+* decrement button to change from `default` to `text`.
+*/
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+*    (include `-moz` to future-proof).
+*/
+
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; /* 2 */
+  box-sizing: content-box;
+}
+
+/**
+* Remove inner padding and search cancel button in Safari and Chrome on OS X.
+* Safari (but not Chrome) clips the cancel button when the search input has
+* padding (and `textfield` appearance).
+*/
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+* Define consistent border, margin, and padding.
+*/
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+* 1. Correct `color` not being inherited in IE 8/9/10/11.
+* 2. Remove padding so people aren't caught out if they zero out fieldsets.
+*/
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+* Remove default vertical scrollbar in IE 8/9/10/11.
+*/
+
+textarea {
+  overflow: auto;
+}
+
+/**
+* Don't inherit the `font-weight` (applied by a rule above).
+* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+*/
+
+optgroup {
+  font-weight: bold;
+}
+
+/* Tables
+ ========================================================================== */
+
+/**
+* Remove most spacing between table cells.
+*/
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..57f8caf
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,655 @@
+html {
+  display: flex;
+  justify-content: center;
+}
+
+body {
+  width: 85%;
+  max-width: 1100px;
+  font-family: 'Inter', sans-serif;
+  background-color: #fffdf6;
+}
+
+/* Header */
+
+nav ul {
+  display: flex;
+  justify-content: space-around;
+  padding: 0;
+  margin-top: 20px;
+  color: rgb(150, 150, 150);
+  list-style: none;
+  animation-name: fade;
+  animation-duration: 4s;
+  animation-delay: 1s;
+  animation-iteration-count: infinite;
+}
+
+@keyframes fade {
+  0% {
+    color: rgb(150, 150, 150);
+  }
+
+  50% {
+    color: rgb(223, 223, 223);
+  }
+
+  100% {
+    color: rgb(150, 150, 150);
+  }
+}
+
+nav li a,
+nav li a:visited {
+  color: inherit;
+}
+
+nav li {
+  font-size: 20px;
+}
+
+nav li a {
+  text-decoration: none;
+}
+
+nav li a:hover {
+  color: #000000;
+}
+
+nav li a:active {
+  color: rgb(129, 129, 129);
+}
+
+.cv-photo-wrapper {
+  position: relative;
+  float: right;
+  width: 0;
+  height: 0;
+  margin: 0;
+  margin-top: 9%;
+  border: 150px solid rgb(63, 63, 63);
+  border-radius: 150px;
+}
+
+.cv-photo {
+  position: absolute;
+  top: -135px;
+  left: -146px;
+  width: 270px;
+  height: 270px;
+  border: 4px solid rgb(63, 63, 63);
+  border-radius: 150px;
+  overflow: hidden;
+}
+
+.main-picture {
+  position: absolute;
+  left: -3px;
+  width: 280px;
+}
+
+/* Main */
+
+h1 {
+  position: relative;
+  margin: 0 !important;
+  font-size: 28px !important;
+  font-weight: 500;
+}
+
+h2 {
+  position: absolute;
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.introduction {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  height: 300px;
+  width: 50%;
+  margin: 18% 5% 2% 0;
+  font-size: 20px;
+}
+
+.occupation {
+  margin-top: 10px;
+  font-size: 22px;
+}
+
+.about-me {
+  margin: 20px 0;
+  line-height: 1.4;
+}
+
+.introduction a {
+  color: rgb(123, 30, 142);
+  font-weight: 500;
+  text-decoration: none;
+}
+
+.introduction a:hover {
+  color: #000000;
+}
+
+.introduction a:active {
+  color: rgb(123, 30, 142);
+}
+
+.info-blocks {
+  overflow: hidden;
+}
+
+.skills-block-out {
+  margin-top: 45px;
+}
+
+.info-block {
+  position: relative;
+  width: 47%;
+  min-width: 350px;
+  height: 350px;
+  margin: 0;
+  margin-bottom: 15%;
+  background-color: rgb(134, 134, 134);
+  border-radius: 10px;
+}
+
+.info-block:nth-child(2n+1) {
+  float: right;
+}
+
+.info-block:nth-child(2n+1) h2 {
+  right: 0;
+  top: -18%;
+}
+
+.info-block:nth-child(2n) {
+  float: left;
+}
+
+.info-block:nth-child(2n) h2 {
+  top: -18%;
+}
+
+.info-block:nth-child(2) {
+  margin-top: 20%;
+}
+
+.info-block:nth-child(1) {
+  background: url("../img/Backgrounds/texture-2.jpg");
+  background-size: cover;
+}
+
+.info-block:nth-child(2) {
+  background: url("../img/Backgrounds/texture-1.jpg");
+  background-size: cover;
+}
+
+.info-block:nth-child(3) {
+  background: url("../img/Backgrounds/texture-3.jpg");
+  background-size: cover;
+}
+
+.info-block:nth-child(4) {
+  background: url("../img/Backgrounds/texture-4.jpg");
+  background-size: cover;
+}
+
+.info-block:nth-child(5) {
+  background: url("../img/Backgrounds/texture-5.jpg");
+  background-size: cover;
+}
+
+.info-block:nth-child(6) {
+  background: url("../img/Backgrounds/texture-6.jpg");
+  background-size: cover;
+}
+
+/* Skills section */
+
+.info-block:nth-child(1) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.skills-list ul {
+  list-style: none;
+}
+
+.skills-list {
+  width: 90%;
+  height: 90%;
+}
+
+.skills-list ul {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+.skills-list li {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 50%;
+}
+
+.html-logo {
+  width: 45%;
+}
+
+.css-logo {
+  width: 73%;
+}
+
+.js-logo {
+  width: 50%;
+}
+
+.git-logo {
+  width: 75%;
+}
+
+@media (min-width: 1240px) {
+  .js-logo {
+    width: 45%;
+  }
+}
+
+/* Education section */
+
+.education-block {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  font-size: 22px;
+}
+
+.education-block div {
+  height: 50%;
+  padding: 25px 0 20px 25px;
+}
+
+.education-block div:nth-child(2)::before {
+  position: absolute;
+  top: 53%;
+  content: "";
+  width: 135px;
+  height: 3px;
+  background-color: #353535;
+}
+
+.education-block p {
+  padding: 5px;
+  margin: 0;
+}
+
+.education-block p:not(.bold) {
+  padding: 5px 0 0 5px;
+}
+
+.bold a {
+  color: rgb(123, 30, 142);
+  font-weight: 600;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.bold a:hover {
+  color: #000000;
+}
+
+.bold a:active {
+  color: rgb(123, 30, 142);
+}
+
+.years {
+  padding-bottom: 12px !important;
+  font-style: oblique;
+  font-weight: normal;
+}
+
+/* Languages */
+
+.languages-block {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  font-size: 22px;
+  text-align: center;
+}
+
+.languages-block div:nth-child(2)::before {
+  position: absolute;
+  top: 49.5%;
+  left: 33%;
+  content: "";
+  width: 34%;
+  height: 3px;
+  background-color: #353535;
+}
+
+.title {
+  font-size: 23px;
+  font-weight: 600;
+}
+
+.english {
+  margin-bottom: 3%;
+}
+
+.russian {
+  margin-top: 3%;
+}
+
+/* Projects */
+
+.projects-block {
+  position: relative;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.projects-block h2 {
+  left: 0;
+}
+
+.local-club-project-out {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
+  width: 40%;
+  height: 90%;
+}
+
+.local-club-project {
+  box-sizing: border-box;
+  width: 100%;
+  height: 75%;
+  background-image: url("../img/Backgrounds/Local-club.png");
+  background-size: cover;
+  border: 1px solid rgb(81, 81, 81);
+  border-radius: 10px;
+  opacity: 0.8;
+  transition: all 0.4s ease;
+}
+
+.local-club-project:hover {
+  z-index: 5;
+  height: 100%;
+  border: none;
+  opacity: 1;
+}
+
+.cv-project-title {
+  position: absolute;
+  z-index: 3;
+  top: 0%;
+  left: 50%;
+  margin-left: -17px;
+  font-weight: 600;
+}
+
+.cv-project-out {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
+  width: 40%;
+  height: 90%;
+}
+
+.cv-project {
+  box-sizing: border-box;
+  width: 100%;
+  height: 75%;
+  background-image: url("../img/Backgrounds/CV.png");
+  background-repeat: no-repeat;
+  background-size: cover;
+  border: 1px solid rgb(81, 81, 81);
+  border-radius: 10px;
+  opacity: 0.8;
+  transition: all 0.4s ease;
+}
+
+.cv-project:hover {
+  z-index: 5;
+  height: 100%;
+  border: none;
+  opacity: 1;
+}
+
+.local-club-title {
+  position: absolute;
+  z-index: 3;
+  top: 0%;
+  left: 50%;
+  margin-left: -57px;
+  font-weight: 600;
+}
+
+.projects-block::before {
+  position: absolute;
+  top: 49.5%;
+  left: 33%;
+  content: "";
+  width: 34%;
+  height: 3px;
+  background-color: #353535;
+  transform: rotate(90deg)
+}
+
+.projects-block p {
+  font-size: 22px;
+}
+
+/* Code example section */
+
+.code-example {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+pre {
+  font-size: 18px !important;
+}
+
+/* Contacts section */
+
+.contacts-block {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  margin-bottom: 10%;
+}
+
+.contacts-block ul {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  margin: 0%;
+  list-style: none;
+}
+
+.contacts-block ul li {
+  position: relative;
+  height: 33%;
+}
+
+.contacts-block ul li img {
+  height: 60px;
+  margin: 3px 0 3px 6px;
+}
+
+.contacts-block ul li:nth-child(2) img {
+  margin-bottom: 0;
+}
+
+.contacts-block ul li:last-child img {
+  height: 73px;
+  margin: 0;
+}
+
+.contact-link {
+  position: absolute;
+  top: 23px;
+  margin-left: 15px;
+  font-size: 22px;
+  font-weight: 500;
+  color: rgb(123, 30, 142);
+  text-decoration: none;
+}
+
+.contact-link:hover {
+  color: black;
+}
+
+.contact-link:active {
+  color: rgb(123, 30, 142);
+}
+
+/* Footer */
+
+footer {
+  display: flex !important;
+  justify-content: space-around;
+  padding: 3%;
+}
+
+footer p {
+  display: inline-block;
+  font-size: 18px;
+}
+
+.gith-logo {
+  width: 50px;
+}
+
+.rsschool-logo {
+  width: 125px;
+}
+
+footer img:hover {
+  opacity: 0.7;
+}
+
+/* Media */
+
+@media (max-width: 950px) {
+  .cv-photo-wrapper {
+    float: none;
+    left: 50%;
+    margin-left: -150px;
+  }
+
+  .introduction {
+    margin-top: 8%;
+    width: 80%;
+  }
+
+  .info-blocks {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .info-block {
+    width: 65%;
+  }
+
+  .info-block:nth-child(2n+1) {
+    float: none;
+  }
+
+  .info-block:nth-child(2n) {
+    float: none;
+  }
+
+  .info-block:nth-child(2) {
+    margin-top: 0;
+  }
+
+  .skills-block {
+    margin: auto;
+    margin-bottom: 15%;
+  }
+}
+
+@media (max-width: 768px) {
+  .introduction {
+    margin-top: 16%;
+  }
+}
+
+@media (max-width: 658px) {
+  .introduction {
+    margin-top: 20%;
+    width: 100%;
+  }
+}
+
+@media (max-width: 580px) {
+  .introduction {
+    margin-top: 25%;
+  }
+}
+
+@media (max-width: 510px) {
+  .introduction {
+    margin-top: 31%;
+  }
+}
+
+@media (max-width: 700px) {
+  pre {
+    font-size: 16px !important;
+  }
+}
+
+@media (max-width: 700px) {
+  .info-block {
+    margin-bottom: 25%;
+  }
+}
+
+@media (max-width: 500px) {
+  .info-block {
+    margin-bottom: 30%;
+  }
+}
+
+@media (max-width: 700px) {
+  footer p {
+    font-size: 16px;
+  }
+
+  .gith-logo {
+    width: 40px;
+  }
+
+  .rsschool-logo {
+    width: 100px;
+  }
+}
+
+@media (max-width: 768px) {
+  nav ul {
+    flex-wrap: wrap;
+  }
+
+  nav li {
+    margin: 10px 20px;
+  }
+}
\ No newline at end of file
diff --git a/cv.md b/cv.md
new file mode 100644
index 0000000..2ce2355
--- /dev/null
+++ b/cv.md
@@ -0,0 +1,44 @@
+# Leonid Khitskov
+
+## Contacts
+
+- [GitHub](https://github.com/sleepyComrade)
+- [Telegram](https://t.me/leohgkg)
+- [E-mail](mailto:ivanovichivanivanov@protonmail.ch)
+
+## About me
+
+Being educated as an engineer and practiced as a visual content maker I believe front-end development will be perfect field to make a career for me. So now I'm full of energy accumulating knowledge and gaining skills to find myself in this industry.
+
+## Core Skills
+
+- HTML
+- CSS
+- JavaScript
+- Git
+
+## Code Example
+
+```
+function vowelIndices(word) {
+  const vowels = 'aeiouyAEIOUY';
+  let myArr = word.split('');
+  let res = [];
+  myArr.forEach((el, index) => {
+    if (vowels.includes(el)) {
+      res.push(index + 1);
+    }
+  })
+  return res;
+}
+```
+
+## Education
+
+- **Dubna State University**
+  - Faculty of Natural and Engineering Sciences
+
+## Languages
+
+- Russian(native)
+- English(B1)
diff --git a/img/.DS_Store b/img/.DS_Store
new file mode 100644
index 0000000..ccbffa7
Binary files /dev/null and b/img/.DS_Store differ
diff --git a/img/Backgrounds/.DS_Store b/img/Backgrounds/.DS_Store
new file mode 100644
index 0000000..5008ddf
Binary files /dev/null and b/img/Backgrounds/.DS_Store differ
diff --git a/img/Backgrounds/CV.png b/img/Backgrounds/CV.png
new file mode 100644
index 0000000..aa32ec5
Binary files /dev/null and b/img/Backgrounds/CV.png differ
diff --git a/img/Backgrounds/Local-club.png b/img/Backgrounds/Local-club.png
new file mode 100644
index 0000000..6da40fe
Binary files /dev/null and b/img/Backgrounds/Local-club.png differ
diff --git a/img/Backgrounds/texture-1.jpg b/img/Backgrounds/texture-1.jpg
new file mode 100644
index 0000000..28c15f4
Binary files /dev/null and b/img/Backgrounds/texture-1.jpg differ
diff --git a/img/Backgrounds/texture-2.jpg b/img/Backgrounds/texture-2.jpg
new file mode 100644
index 0000000..e4ed166
Binary files /dev/null and b/img/Backgrounds/texture-2.jpg differ
diff --git a/img/Backgrounds/texture-3.jpg b/img/Backgrounds/texture-3.jpg
new file mode 100644
index 0000000..1d4f990
Binary files /dev/null and b/img/Backgrounds/texture-3.jpg differ
diff --git a/img/Backgrounds/texture-4.jpg b/img/Backgrounds/texture-4.jpg
new file mode 100644
index 0000000..f580ce1
Binary files /dev/null and b/img/Backgrounds/texture-4.jpg differ
diff --git a/img/Backgrounds/texture-5.jpg b/img/Backgrounds/texture-5.jpg
new file mode 100644
index 0000000..4d0cb35
Binary files /dev/null and b/img/Backgrounds/texture-5.jpg differ
diff --git a/img/Backgrounds/texture-6.jpg b/img/Backgrounds/texture-6.jpg
new file mode 100644
index 0000000..a4c3ce4
Binary files /dev/null and b/img/Backgrounds/texture-6.jpg differ
diff --git a/img/Icons/css.svg b/img/Icons/css.svg
new file mode 100644
index 0000000..e89bbe6
--- /dev/null
+++ b/img/Icons/css.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="2500" height="2500" viewBox="0 0 538.584 538.583"><path fill="none" d="M0 0h538.584v538.583H0V0z"/><path fill="#2062af" d="M405.5 467.454L269.29 504.13l-136.212-36.676-31.432-340.525h335.29L405.5 467.454z"/><path fill="#3c9cd7" d="M269.289 154.511v320.367l.308.084 110.229-29.682 25.443-290.769h-135.98z"/><path d="M191.985 76.899V56.631h29.571V34.453h-51.749v62.684h51.749V76.899h-29.571zm82.766-20.268h20.674V34.453h-51.754v22.178c6.924 6.924 10.535 10.238 20.549 20.252-5.854 0-20.549.021-20.549.02v20.234h51.754V76.899l-20.674-20.268zm73.352 0h20.673V34.453H317.02v22.178c6.924 6.924 10.537 10.238 20.551 20.252-5.852 0-20.551.021-20.551.02v20.234h51.757V76.899l-20.674-20.268z"/><path fill="#fff" d="M269.168 239.656l-97.49 40.602 3.233 40.199 94.257-40.301 100.265-42.868 4.157-41.122-104.422 43.49z"/><linearGradient id="a" x1="-825.508" x2="-825.508" y1="1338.301" y2="1419.102" gradientTransform="matrix(1 0 0 -1 1045.93 1658.759)" gradientUnits="userSpaceOnUse"><stop offset=".387" stop-color="#d1d3d4" stop-opacity="0"/><stop offset="1" stop-color="#d1d3d4"/></linearGradient><path fill="url(#a)" d="M171.677 280.258l3.233 40.199 94.257-40.301v-40.5l-97.49 40.602z"/><linearGradient id="b" x1="-724.552" x2="-724.552" y1="1378.602" y2="1462.591" gradientTransform="matrix(1 0 0 -1 1045.93 1658.759)" gradientUnits="userSpaceOnUse"><stop offset=".387" stop-color="#d1d3d4" stop-opacity="0"/><stop offset="1" stop-color="#d1d3d4"/></linearGradient><path fill="url(#b)" d="M373.59 196.167l-104.422 43.489v40.5l100.265-42.868 4.157-41.121z"/><linearGradient id="c" x1="-874.103" x2="-680.039" y1="1302.263" y2="1302.263" gradientTransform="matrix(1 0 0 -1 1045.93 1658.759)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e8e7e5"/><stop offset="1" stop-color="#fff"/></linearGradient><path fill="url(#c)" d="M171.827 280.258l3.234 40.199 144.625.461-3.235 53.598-47.59 13.398-45.748-11.551-2.772-33.268h-42.508l5.545 64.225 85.945 25.412 85.479-24.951 11.09-127.523H171.827z"/><path d="M269.168 280.258h-97.49l3.233 40.199 94.257.301v-40.5zm0 107.528l-.462.129-45.742-11.551-2.772-33.268h-42.507l5.544 64.225 85.939 25.412v-44.947z" opacity=".05"/><linearGradient id="d" x1="-883.032" x2="-672.341" y1="1442.031" y2="1442.031" gradientTransform="matrix(1 0 0 -1 1045.93 1658.759)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e8e7e5"/><stop offset="1" stop-color="#fff"/></linearGradient><path fill="url(#d)" d="M162.898 196.167H373.59l-4.157 41.122H167.98l-5.082-41.122z"/><path d="M269.168 196.167h-106.27l5.082 41.122h101.188v-41.122z" opacity=".05"/></svg>
\ No newline at end of file
diff --git a/img/Icons/email.png b/img/Icons/email.png
new file mode 100644
index 0000000..5cf7859
Binary files /dev/null and b/img/Icons/email.png differ
diff --git a/img/Icons/git.svg b/img/Icons/git.svg
new file mode 100644
index 0000000..2320024
--- /dev/null
+++ b/img/Icons/git.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="#F34F29" d="M76.004 50.588c-7.655 0-11.459 3.996-11.459 9.75 0 3.704 1.852 6.328 4.304 7.529-1.201 1.101-2.201 2.064-3.102 3.014-.902.952-1.452 1.957-1.452 3.059 0 1.352.55 2.605 2.202 3.303-1.751 1.654-2.753 2.854-2.753 5.107 0 3.953 3.453 6.256 12.511 6.256 8.708 0 13.761-3.251 13.761-9.007 0-6.653-5.103-6.904-13.761-7.456l-4.904-.3 1.652-2.652c.899.25 2.352.45 3.955.45 6.304 0 10.658-3.252 10.658-8.808 0-2.302-1.137-3.903-2.037-5.055l4.421-.35v-4.428h-9.391c-1.15 0-2.453-.412-4.605-.412zm2.252 28.511c2.404.15 4.306.25 4.306 1.854 0 2.699-3.955 2.902-6.856 2.902-3.504 0-6.056-.602-6.056-2.603 0-1.002.65-1.852 1.302-2.652l7.304.499zm-1.949-14.712c-3.304 0-4.655-1.703-4.655-4.154 0-3.253 2.051-4.605 4.804-4.605 2.852 0 4.554 1.552 4.554 4.504 0 2.604-1.902 4.255-4.703 4.255zM99.173 46.685c2.902 0 4.554-1.652 4.554-4.506 0-2.85-1.652-4.403-4.554-4.403-2.853 0-4.505 1.553-4.505 4.403 0 2.853 1.652 4.506 4.505 4.506zM103 71.455v-20.455h-9.733l-.55 3.896 2.667.874c.502.149.616.423.616.973v14.712c0 .752-.422.902-1.123 1.003l-2.877.35v4.192h15v-4.192l-2.876-.35c-.753-.101-1.124-.2-1.124-1.003zM125.418 70.415c-1.202.45-2.632.799-4.035.799-2.701 0-3.383-1.15-3.383-4.103v-12.111h7v-5h-6.638c-.401 0-.362-.003-.362-.353v-6.647h-4.793c-.55 5-3.207 7.196-7.207 7.698v4.302h4.003c.401 0-.003.353-.003.652v13.111c0 5.657 2.454 8.058 8.408 8.058 2.854 0 6.107-.951 8.26-2.001l-1.25-4.405zM29.738 38.806c-1.317-1.318-3.455-1.318-4.773 0l-4.751 4.751 6.027 6.027c1.401-.473 3.007-.156 4.124.961 1.122 1.123 1.437 2.743.952 4.149l5.809 5.809c1.406-.484 3.027-.171 4.149.953 1.57 1.568 1.57 4.11 0 5.679-1.569 1.57-4.11 1.57-5.68 0-1.18-1.181-1.624-2.914-1.025-4.368l-5.57-5.417v14.257c0 .189.895.441 1.214.759 1.568 1.568 1.644 4.11.075 5.681-1.569 1.568-4.074 1.568-5.642 0-1.568-1.571-1.549-4.112.02-5.681.388-.387.333-.68 1.333-.876v-14.389c-1-.196-.927-.487-1.314-.876-1.188-1.188-1.474-2.931-.865-4.39l-5.942-5.943-15.689 15.689c-1.319 1.319-1.319 3.457 0 4.774l22.882 22.881c1.317 1.317 3.454 1.317 4.773 0l22.775-22.776c1.317-1.318 1.317-3.456 0-4.774l-22.882-22.88z"/></svg>
\ No newline at end of file
diff --git a/img/Icons/github.svg b/img/Icons/github.svg
new file mode 100644
index 0000000..387a4d3
--- /dev/null
+++ b/img/Icons/github.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M7.999 0C3.582 0 0 3.596 0 8.032a8.031 8.031 0 0 0 5.472 7.621c.4.074.546-.174.546-.387 0-.191-.007-.696-.011-1.366-2.225.485-2.695-1.077-2.695-1.077-.363-.928-.888-1.175-.888-1.175-.727-.498.054-.488.054-.488.803.057 1.225.828 1.225.828.714 1.227 1.873.873 2.329.667.072-.519.279-.873.508-1.074-1.776-.203-3.644-.892-3.644-3.969 0-.877.312-1.594.824-2.156-.083-.203-.357-1.02.078-2.125 0 0 .672-.216 2.2.823a7.633 7.633 0 0 1 2.003-.27 7.65 7.65 0 0 1 2.003.271c1.527-1.039 2.198-.823 2.198-.823.436 1.106.162 1.922.08 2.125.513.562.822 1.279.822 2.156 0 3.085-1.87 3.764-3.652 3.963.287.248.543.738.543 1.487 0 1.074-.01 1.94-.01 2.203 0 .215.144.465.55.386A8.032 8.032 0 0 0 16 8.032C16 3.596 12.418 0 7.999 0z"/></svg>
\ No newline at end of file
diff --git a/img/Icons/html.svg b/img/Icons/html.svg
new file mode 100644
index 0000000..1642ee5
--- /dev/null
+++ b/img/Icons/html.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1773" height="2500" preserveAspectRatio="xMinYMin meet" viewBox="0 0 256 361"><path fill="#E44D26" d="M255.555 70.766l-23.241 260.36-104.47 28.962-104.182-28.922L.445 70.766h255.11z"/><path fill="#F16529" d="M128 337.95l84.417-23.403 19.86-222.49H128V337.95z"/><path fill="#EBEBEB" d="M82.82 155.932H128v-31.937H47.917l.764 8.568 7.85 88.01H128v-31.937H85.739l-2.919-32.704zM90.018 236.542h-32.06l4.474 50.146 65.421 18.16.147-.04V271.58l-.14.037-35.568-9.604-2.274-25.471z"/><path d="M24.18 0h16.23v16.035h14.847V0h16.231v48.558h-16.23v-16.26H40.411v16.26h-16.23V0zM92.83 16.103H78.544V0h44.814v16.103h-14.295v32.455h-16.23V16.103h-.001zM130.47 0h16.923l10.41 17.062L168.203 0h16.93v48.558h-16.164V24.49l-11.166 17.265h-.28L146.35 24.49v24.068h-15.88V0zM193.21 0h16.235v32.508h22.824v16.05h-39.06V0z"/><path fill="#FFF" d="M127.89 220.573h39.327l-3.708 41.42-35.62 9.614v33.226l65.473-18.145.48-5.396 7.506-84.08.779-8.576H127.89v31.937zM127.89 155.854v.078h77.143l.64-7.178 1.456-16.191.763-8.568H127.89v31.86z"/></svg>
\ No newline at end of file
diff --git a/img/Icons/javascript.svg b/img/Icons/javascript.svg
new file mode 100644
index 0000000..c6d6fac
--- /dev/null
+++ b/img/Icons/javascript.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="2500" height="2500" preserveAspectRatio="xMinYMin meet" viewBox="0 0 256 256"><path fill="#F7DF1E" d="M0 0h256v256H0V0z"/><path d="M67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371 7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259-19.245 0-30.416-9.967-36.087-21.996M152.381 211.354l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607 9.969 0 16.325-4.984 16.325-11.858 0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257 0-18.044 13.747-31.792 35.228-31.792 15.294 0 26.292 5.328 34.196 19.247L210.29 147.43c-4.125-7.389-8.591-10.31-15.465-10.31-7.046 0-11.514 4.468-11.514 10.31 0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804 0 21.654-17.012 33.51-39.867 33.51-22.339 0-36.774-10.654-43.819-24.574"/></svg>
\ No newline at end of file
diff --git a/img/Icons/telegram.svg b/img/Icons/telegram.svg
new file mode 100644
index 0000000..e53fa6a
--- /dev/null
+++ b/img/Icons/telegram.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none" viewBox="0 0 48 48"><rect width="48" height="48" fill="#419FD9" rx="24"/><rect width="48" height="48" fill="url(#paint0_linear)" rx="24"/><path fill="#fff" d="M10.7874 23.4709C17.7667 20.3663 22.4206 18.3195 24.7493 17.3305C31.3979 14.507 32.7795 14.0165 33.68 14.0002C33.878 13.9968 34.3208 14.0469 34.6077 14.2845C34.8499 14.4852 34.9165 14.7563 34.9484 14.9465C34.9803 15.1368 35.02 15.5702 34.9884 15.9088C34.6281 19.774 33.0692 29.1539 32.276 33.483C31.9404 35.3148 31.2796 35.929 30.6399 35.9891C29.2496 36.1197 28.1938 35.051 26.8473 34.1497C24.7401 32.7395 23.5498 31.8615 21.5044 30.4854C19.1407 28.895 20.673 28.0209 22.0201 26.5923C22.3726 26.2185 28.4983 20.5295 28.6169 20.0135C28.6317 19.9489 28.6455 19.7083 28.5055 19.5813C28.3655 19.4543 28.1589 19.4977 28.0098 19.5322C27.7985 19.5812 24.4323 21.8529 17.9113 26.3473C16.9558 27.0172 16.0904 27.3435 15.315 27.3264C14.4602 27.3076 12.8159 26.833 11.5935 26.4273C10.0942 25.9296 8.90254 25.6666 9.0063 24.8215C9.06035 24.3813 9.65403 23.9311 10.7874 23.4709Z"/><defs><linearGradient id="paint0_linear" x1="24" x2="24" y2="47.644" gradientUnits="userSpaceOnUse"><stop stop-color="#2AABEE"/><stop offset="1" stop-color="#229ED9"/></linearGradient></defs></svg>
\ No newline at end of file
diff --git a/img/me.png b/img/me.png
new file mode 100644
index 0000000..7296ea5
Binary files /dev/null and b/img/me.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..80599d6
--- /dev/null
+++ b/index.html
@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Leonid Khitskov</title>
+  <link rel="stylesheet" href="./css/style.css">
+  <link rel="stylesheet" href="./css/normalize.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&display=swap"
+    rel="stylesheet">
+</head>
+<body>
+  <header>
+    <nav>
+      <ul>
+        <li><a href="#skills">Skills</a></li>
+        <li><a href="#education">Education</a></li>
+        <li><a href="#languages">Languages</a></li>
+        <li><a href="#projects">Projects</a></li>
+        <li><a href="#code">Code</a></li>
+        <li><a href="#contacts">Contacts</a></li>
+      </ul>
+    </nav>
+    <div class="cv-photo-wrapper">
+      <div class="cv-photo">
+        <img class="main-picture" src="./img/me.png" alt="photo of mine">
+      </div>
+    </div>
+  </header>
+  <main>
+    <section class="introduction">
+      <h1>Leonid Khitskov</h1>
+      <p class="occupation">Front-end Developer</p>
+      <p class="about-me">
+        Being educated as an engineer and practiced as a visual content maker I believe front-end development is a
+        perfect field to make a career for me. So now I’m full of energy accumulating knowledge and gaining skills to
+        find myself in this industry.
+      </p>
+      <p><a href="mailto:ivanovichivanivanov@protonmail.ch">Let's work together</a></p>
+    </section>
+    <section class="info-blocks">
+      <div class="skills-block-out">
+        <div class="info-block skills-block">
+          <h2 id="skills">Skills</h2>
+          <div class="skills-list">
+            <ul>
+              <li><img class="html-logo" src="./img/Icons/html.svg" alt="html-logo"></li>
+              <li><img class="css-logo" src="./img/Icons/css.svg" alt="css-logo"></li>
+              <li><img class="js-logo" src="./img/Icons/javascript.svg" alt="js-logo"></li>
+              <li><img class="git-logo" src="./img/Icons/git.svg" alt="git-logo"></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="info-block education-block">
+        <h2 id="education">Education</h2>
+        <div>
+          <p class="years">2008 - 2013</p>
+          <p class="bold"><a href="https://uni-dubna.ru/">Dubna State University</a></p>
+          <p>Department of General and applied geophysics</p>
+        </div>
+        <div>
+          <p class="years">since June, 2022</p>
+          <p class="bold"><a href="https://rs.school/">Rolling Scopes School</a></p>
+          <p>Javascript/Front-End</p>
+        </div>
+      </div>
+      <div class="info-block languages-block">
+        <h2 id="languages">Languages</h2>
+        <div class="english">
+          <p class="title">English</p>
+          <p>Pre-Intermediate</p>
+        </div>
+        <div class="russian">
+          <p class="title">Russian</p>
+          <p>Native</p>
+        </div>
+      </div>
+      <div class="info-block projects-block">
+        <h2 id="projects">Projects</h2>
+        <div class="local-club-project-out">
+          <p class="local-club-title">Local Club</p>
+          <a href="https://sleepycomrade.github.io/Local-Club-Project/" target="_blank" class="local-club-project">
+          </a>
+        </div>
+        <div class="cv-project-out">
+          <p class="cv-project-title">CV</p>
+          <a href="https://sleepycomrade.github.io/rsschool-cv/" target="_blank" class="cv-project">
+          </a>
+        </div>
+      </div>
+      <div class="info-block code-example">
+        <h2 id="code">Code Example</h2>
+        <div>
+          <pre>
+function vowelIndices(word) {
+  const vowels = 'aeiouyAEIOUY';
+  let myArr = word.split('');
+  let res = [];
+  myArr.forEach((el, index) => {
+    if (vowels.includes(el)) {
+      res.push(index + 1);
+    }
+  })
+  return res;
+}
+          </pre>
+        </div>
+      </div>
+      <div class="info-block contacts-block">
+        <h2 id="contacts">Contacts</h2>
+        <ul>
+          <li><a href="https://github.com/sleepyComrade"><img src="./img/Icons/github.svg" alt="github-logo"></a><a
+              href="https://github.com/sleepyComrade" class="contact-link">GitHub</a></li>
+          <li><a href="https://t.me/leohgkg"><img src="./img/Icons/telegram.svg" alt="telegram-logo"></a><a
+              href="https://t.me/leohgkg" class="contact-link">Telegram</a></li>
+          <li><a href="mailto:ivanovichivanivanov@protonmail.ch"><img src="./img/Icons/email.png" alt="email-icon"></a><a
+              href="mailto:ivanovichivanivanov@protonmail.ch" class="contact-link">E-Mail</a></li>
+        </ul>
+      </div>
+    </section>
+  </main>
+  <footer>
+    <a href="https://github.com/sleepyComrade" class="gith-logo" target="_blank"><img src="./img/Icons/github.svg"
+        alt="github-logo"></a>
+    <p>&#169; 2022 Leonid Khitskov</p>
+    <a href="https://rs.school/js/" class="rsschool-logo" target="_blank"><img
+        src="https://rs.school/images/rs_school_js.svg" alt="rs-school-js-logo"></a>
+  </footer>
+</body>
+</html>