evshipilo · evshipilo · Feb 7, 2020 · Feb 7, 2020 · Feb 7, 2020 · Feb 7, 2020
diff --git a/cv.md b/cv.md
@@ -0,0 +1,23 @@
+**Junior Developer Resume.**
+
+
+1. My name is Yauheni Shypila.
+2. My mobile phone number is: *+375293754811*. You can find me on *Telegram* and *Viber*. My Skype is *evshipilo*, my e-mail is *evshipilo@gmail.com*.
+3. I really like to learn something new. My goal is to become a software developer and I will achieve it.
+4. I was learning front end. I have studied HTML, SCC and JS basics. I have studied  the *JAVA* basics too. I was working in *Intellij IDEA, WEB Storm* and *Brackets* IDEs. 
+5. Some JS code example:
+    ```javascript
+   function camelize(str) {
+       let arr = str.split('-');
+       arr[0] = arr[0].toLowerCase();
+       for (let i = 1; i < arr.length; i++) {
+           let a=arr[i];
+           arr[i]=a[0].toUpperCase()+a.slice(1);
+       }
+       return (arr.join(''));
+   }
+
+   ```
+6. [Here  you can see my portfolio.](http://r29735qf.beget.tech/) 
+7. I was learning JAVA in online JAVA Rush courses. Now I am studying JS in Rolling Scopes School. 
+8. I am improving my English skills in offline courses and in *Duolingo* application.
diff --git a/img/avatar.jpg b/img/avatar.jpg
diff --git a/img/call-answer.png b/img/call-answer.png
diff --git a/img/github.png b/img/github.png
diff --git a/img/global.png b/img/global.png
diff --git a/img/message-envelope.png b/img/message-envelope.png
diff --git a/img/skype.png b/img/skype.png
diff --git a/index.html b/index.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>HTML, CSS & Git Basics</title>
+    <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/css?family=Raleway:400,700&display=swap"
+          rel="stylesheet">
+</head>
+<body>
+<div class="container">
+    <div class="section0">
+
+    </div>
+    <header>
+        <h1>Yauheni Shypila</h1>
+        <h2>Beginner Front-End Developer</h2>
+    </header>
+    <div class="section1">
+
+        <img src="img/avatar.jpg" alt="avatar" width="15">
+    </div>
+    <section class="section2">
+        <h3>Contacts:</h3>
+        <ul>
+            <li><img src="img/call-answer.png" alt="icon" width="15">Mobile
+                number:
+                +375297354811
+            </li>
+            <li>
+                <a href="skype:evshipilo?chat" target="_blank">
+                    <img src="img/skype.png" alt="icon" width="15">Skype:
+                    evshipilo
+                </a>
+            </li>
+            <li>
+                <a href="mailto:evshipilo@gmail.com" target="_blank">
+                    <img src="img/message-envelope.png"
+                         alt="icon" width="15">Email:
+                    evshipilo@gmail.com
+                </a>
+            </li>
+        </ul>
+    </section>
+    <section class="section3">
+        <h3>My projects:</h3>
+        <ul>
+            <li>
+                <a href="http://r29735qf.beget.tech/" target="_blank">
+                    <img src="img/global.png" alt="icon" width="15"> Link
+                    to My
+                    Portfolio
+                </a>
+            </li>
+            <li>
+                <a href="https://github.com/evshipilo/My-Front-End-Projects"
+                   target="_blank">
+                    <img src="img/github.png" alt="icon" width="15">My
+                    Markup on
+                    GitHub
+                </a>
+            </li>
+        </ul>
+    </section>
+    <section class="section4">
+        <h3>My Goals:</h3>
+        <p>I really like to learn something new. My goal is to become a software
+            developer and I will achieve it.</p>
+    </section>
+    <section class="section5">
+        <h3>My Skills:</h3>
+        <p>I was learning front end. I have studied HTML, SCC and JS basics.
+            I have studied the JAVA basics too. I was working in Intellij
+            IDEA, WEB Storm and Brackets IDEs. </p>
+    </section>
+    <section class="section6">
+        <h3>
+            Some JS code example:
+        </h3>
+        <pre>
+function camelize(str) {
+   let arr = str.split('-');
+   arr[0] = arr[0].toLowerCase();
+   for (let i = 1; i &lt; arr.length; i++) {
+       let a=arr[i];
+       arr[i]=a[0].toUpperCase()+a.slice(1);
+   }
+   return (arr.join(''));
+}
+        </pre>
+    </section>
+
+    <footer>
+        <p>© Yauheni Shypila</p>
+        <div>
+            <a href="skype:evshipilo?chat" target="_blank">
+                <img src="img/skype.png" alt="icon" width="15">
+            </a>
+            <a href="mailto:evshipilo@gmail.com" target="_blank">
+                <img src="img/message-envelope.png" alt="icon" width="15">
+            </a>
+            <a href="https://github.com/evshipilo/My-Front-End-Projects"
+               target="_blank">
+                <img src="img/github.png" alt="icon" width="15">
+            </a>
+        </div>
+    </footer>
+
+</div>
+
+
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,154 @@
+body {
+    font-family: 'Raleway', sans-serif;
+}
+
+.container {
+    max-width: 1024px;
+    margin: auto;
+    display: grid;
+    grid-gap: 5px;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-areas:
+            " section0 header header  section1 "
+            "section2 section2 section3 section3 "
+            "section4 section5 section6  section6 "
+            ". footer footer .";
+}
+
+.container > * {
+    /*background-color: cornsilk;*/
+    border-radius: 10px;
+    border: 1px solid rgba(205, 214, 219, 0.5);
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+header {
+    grid-area: header;
+    background-color: rgba(106, 158, 209, 0.15);
+}
+
+.section0 {
+    grid-area: section0;
+    background-color: rgba(209, 106, 106, 0.15);
+}
+
+.section1 {
+    grid-area: section1;
+    text-align: center;
+    background-color: rgba(209, 209, 106, 0.15);
+}
+
+.section1 img {
+    border-radius: 50%;
+    padding-top: 4px;
+    opacity: 0.6;
+    width: 80%;
+}
+
+.section2 {
+    grid-area: section2;
+    background-color: rgba(209, 106, 209, 0.15);
+}
+
+.section3 {
+    grid-area: section3;
+    background-color: rgba(165, 14, 165, 0.15);
+}
+
+.section4 {
+    grid-area: section4;
+    background-color: rgba(128, 75, 75, 0.15);
+}
+
+.section5 {
+    grid-area: section5;
+    background-color: rgba(20, 20, 106, 0.15);
+}
+
+.section6 {
+    grid-area: section6;
+    background-color: rgba(172, 100, 70, 0.15);
+}
+
+footer {
+    grid-area: footer;
+    background-color: cornsilk;
+}
+
+footer p {
+    display: inline-block;
+}
+
+footer div {
+    float: right;
+}
+
+footer img {
+    margin-left: 5px;
+    margin-top: 17px;
+}
+
+ul {
+    list-style-type: none;
+    padding-left: 0;
+}
+
+li {
+    margin-bottom: 10px;
+}
+
+li img {
+    padding-right: 10px;
+}
+
+a {
+    text-decoration: none;
+    color: black;
+}
+
+a:hover {
+    color: red;
+    filter: blur(0.06rem);
+    transition: 0.5s;
+}
+
+p {
+    text-align: justify;
+}
+
+@media (max-width: 800px) {
+    .container {
+
+        grid-template-columns: repeat(2, 1fr);
+        grid-template-areas:
+                "  header  section1 "
+                "section2  section3 " "section4   section5 "
+                "section6  section6" "footer  footer";
+    }
+
+}
+
+@media (max-width: 600px) {
+    .container {
+
+        grid-template-columns: repeat(1, 1fr);
+        grid-template-areas:
+                "  header  "
+                "section1"
+                "section2"
+                "section3"
+                "section4"
+                "section5"
+                "section6"
+                "footer";
+    }
+
+    .section1 img {
+        max-width: 50%;
+        border-radius: 50%;
+        padding-top: 4px;
+        opacity: 0.6;
+
+    }
+}