kozhemyakin · kozhemyakin · Mar 8, 2023 · Mar 8, 2023 · Mar 8, 2023 · Mar 8, 2023
diff --git a/README.md b/README.md
@@ -1,3 +1,5 @@
 # rsschool-cv
 
-Shelter task: https://kozhemyakin.github.io/rsschool-cv/shelter/
+Markdown CV: https://kozhemyakin.github.io/rsschool-cv/cv
+
+Html&CSS&JS CV: https://kozhemyakin.github.io/rsschool-cv/
diff --git a/cssBayan/index.html b/cssBayan/index.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>kozhemyakin - cssBayan</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="accordion">
+      <fieldset>
+        <h1>CSS BAYAN [:|||:]</h1>
+      <ul>
+        <li>
+          <input type="radio" id="meme1" name="meme" value="meme1" checked>
+          <label for="meme1">500 Internal Server Error! 500 Internal Server Error!! Error!!!
+            <i></i>
+            <img src="https://blog.skillfactory.ru/wp-content/uploads/2021/06/pasted-image-0-7.png" alt="meme1" class="memeImg1">
+          </label>
+        </li>
+        <li>
+          <input type="radio" id="meme2" name="meme" value="meme">
+          <label for="meme2">You know i'm frontend developer too.. in some case.. some case..
+            <i></i>
+            <img src="http://memesmix.net/media/created/3a5n9d.jpg" alt="meme1" class="memeImg2">
+          </label>
+        </li>
+        <li>
+          <input type="radio" id="meme3" name="meme" value="meme">
+          <label for="meme3">I'm looking for bug everywhere... but where is it.. where is it..
+            <i></i>
+            <img src="https://sun9-56.userapi.com/impg/Jdw6rjyIB5r-vi3tHkrwk1WFHwWK2h1THEgJgw/i-BlZ4KJnO8.jpg?size=1224x1160&quality=96&sign=9848f8f08211695731d5caed7af33e36&c_uniq_tag=z1NWdxnt3SwCBB8zkEZD9CLqNP9c9rf_VnJmbNbm2Nc&type=album" alt="meme1" class="memeImg3">
+          </label>
+        </li>
+        <li>
+            <input type="radio" id="meme4" name="meme" value="meme">
+            <label for="meme4">Frontend in my heart. Absolutely, in heart. Frontend. Worldwide.
+              <i></i>
+              <img src="http://memesmix.net/media/created/mptrvx.jpg" alt="meme1" class="memeImg3">
+            </label>
+          </li>
+          <li>
+            <input type="radio" id="meme5" name="meme" value="meme">
+            <label for="meme5">He's looking in his note and drawing. Probably, he is a painter...
+              <i></i>
+              <img src="https://sun9-53.userapi.com/impg/c855220/v855220093/1e27b6/mZ6mMxvGNyY.jpg?size=960x960&quality=96&sign=094e993f8df1d84ee9c5c5ba58c1b755&c_uniq_tag=d7uBVyA0DLd4gHKTQLZVkTaTGOEwidjo_H5rHcNbuws&type=album" alt="meme1" class="memeImg3">
+            </label>
+          </li>
+      </ul>
+    </fieldset>
+    </div>
+  </body>
+</html>
diff --git a/cssBayan/styles.css b/cssBayan/styles.css
@@ -0,0 +1,180 @@
+body {
+    background-color: rgb(253, 243, 228);
+}
+
+.accordion {
+    display: flex;
+    justify-content: center;
+}
+
+fieldset {
+    background-color: rgb(249, 213, 158);
+    border: none;
+    height: 100vh;
+    padding: 0;
+    width: 500px;
+}
+
+ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+}
+
+ul li {
+    position: relative;
+    padding: 0;
+    margin: 0;
+    padding-bottom: 8px;
+    padding-top: 18px;
+    border-top: 1px dotted #dfeff4;
+    cursor: pointer;
+    background-color: rgb(249, 213, 158);
+    width: 100%;
+    font-size: 16px;
+}
+
+label {
+    cursor: pointer;
+}
+
+ul li label i {
+    position: absolute;
+    transform: translate(-44px, 0);
+    margin-top: 0px;
+    right: 0;
+}
+
+ul li label i:before, ul li label i:after {
+    content: "";
+    position: absolute;
+    background-color: #f96b74;
+    width: 3px;
+    height: 9px;
+}
+
+ul li label i:before {
+    transform: translate(-2px, 0) rotate(45deg);
+}
+
+ul li label i:after {
+    transform: translate(2px, 0) rotate(-45deg);
+}
+
+ul li input[type=radio] ~ img {
+    cursor: pointer;
+    width: 100%;
+    z-index: 1;
+    opacity: 0;
+    display: none;
+}
+
+ul li input[type=radio]:checked ~ label i:before, ul li input[type=radio]:hover ~ label i:before  {
+    transform: translate(2px, 0) rotate(45deg);
+}
+
+ul li input[type=radio]:checked ~ i:after, ul li input[type=radio]:hover ~ i:after  {
+    transform: translate(-2px, 0) rotate(-45deg);
+}
+
+ul li input[type=radio]:checked ~ img {
+    height: 100px;
+    display: block;
+    opacity: 100;
+}
+
+ul li:hover input[type=radio] ~ img {
+    height: 300px;
+    width: 300px;
+    padding-top: 10px;
+    display: block;
+    opacity: 100;
+}
+
+img {
+    height: 300px;
+    width: 300px;
+    padding-top: 10px;
+    display: none;
+    margin: 0 auto;
+}
+
+ul li input[type=radio]:checked ~ label img {
+    height: 300px;
+    width: 300px;
+    padding-top: 10px;
+    display: block;
+    opacity: 100;
+}
+
+ul li:hover label > img {
+    height: 300px;
+    width: 300px;
+    padding-top: 10px;
+    display: block;
+    opacity: 100;
+}
+
+ul li:hover label {
+    color: rgb(26, 66, 243);
+}
+
+input {
+    visibility: hidden;
+}
+
+h1 {
+    display: flex;
+    justify-content: center;
+}
+
+li i:before, ul li i:after {
+    transition: all 1s ease-in-out;
+}
+
+img {
+    animation: imgShowing 2s ease-in-out;
+}
+
+@keyframes imgShowing {
+    0% {
+        opacity: 0;
+        transform-origin: top center;
+        transform: rotateX(-90deg);
+    }
+    100% {
+        transform-origin: top center;
+        transform: rotateX(0deg);
+    }
+}
+
+@media screen and (max-width: 821px) {
+    ul li {
+        font-size: 14px;
+    }
+
+    fieldset {
+        width: 100%;
+    }
+}
+
+@media screen and (max-width: 440px) {
+    ul li {
+        font-size: 12px;
+    }
+
+    ul li label i {
+        transform: translate(-16px, 0);
+    }
+}
+
+@media screen and (max-width: 360px) {
+    ul li {
+        font-size: 10px;
+    }
+
+    ul li label i {
+        transform: translate(-16px, 0);
+    }
+}
diff --git a/cv.md b/cv.md
@@ -0,0 +1,28 @@
+## CV:
+
+![kozhemyakin sergey](https://avatars.githubusercontent.com/u/19146069?s=96&v=4 "kozhemyakin sergey")
+
+1. Kozhemyakin Sergey
+2. Discord - kozhemyakin, email - [email protected]
+3. I want to learn JS and React and try to find a job as a Frontend developer
+4. Stack: JS, React, Redux, Git, VS Code, Cypress
+5. Code example: 
+```
+function getCount(str) {
+  let i = 0;
+
+  const strArr = str.split('');
+
+  strArr.forEach(letter => {
+    if (letter === 'a' || letter === 'e' || letter === 'i' || letter === 'o' || letter === 'u'){
+      i++
+    }
+    return i
+  })
+
+  return i;
+}
+```
+6. My diploma project(TMS react 2022) on React: https://github.com/kozhemyakin/tms-diploma
+7. At 2013 I graduated from QA courses at EPAM. At 2022 I graduated from Frontend Developer(React) courses at teachmeskills. At 2023 i have finished RSS-JS/PreQ42022 course.
+8. English level - B1
diff --git a/images/code.jpeg b/images/code.jpeg
diff --git a/images/logo.svg b/images/logo.svg
diff --git a/images/photo1.jpeg b/images/photo1.jpeg
diff --git a/index.html b/index.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <meta charset="utf-8">
+    <title class="title-test-class">Заголовок</title>
+  </head>
+  <body>Страница</body>
+</html>
diff --git a/minesweeper/index.html b/minesweeper/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>kozhemyakin - minesweeper</title>
+  <link rel="stylesheet" href="./styles.css"></link>
+</head>
+<body>
+</body>
+<script src="./index.js" charset="utf-8"></script>
+</html>