Browse Source

HW <4> done

Vadym Shakhmatenko 1 year ago
parent
commit
7d1973f602

BIN
.DS_Store


+ 1 - 1
HomeWork3/index.html

@@ -318,7 +318,7 @@
                             })
             break;
          }
-            ////////aaaaaaaa
+
 
     
         

+ 249 - 0
HomeWork4/index.html

@@ -0,0 +1,249 @@
+<!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>Document</title>
+</head>
+<body>
+    <script>
+
+        //html tree
+        let body = {
+            tagName : 'body',
+            subTags : [
+                {
+                    tagName : 'div',
+                    subTags : [
+                        {
+                            tagName : 'span',
+                            text: 'Enter a data please:'
+                        },
+                        {
+                            tagName : 'input',
+                            attrs : {
+                                type : 'text',
+                                id : 'id'
+                            }
+                        },
+                        {
+                            tagName : 'input',
+                            attrs : {
+                                type : 'text',
+                                id : 'surname'
+                            }
+                        }
+                    ]
+                },
+                {
+                    tagName : 'div',
+                    subTags : [
+                        {
+                            tagName : 'button',
+                            text : 'OK' ,
+                            attrs : {
+                                id : 'ok'
+                            }
+                        },
+                        {
+                            tagName : 'button' ,
+                            text : 'Cancel',
+                            attrs : {
+                                id : 'cancel'
+                            }
+                        }
+                    ]
+                }
+            ]
+        }
+        body.subTags[1].subTags[1]
+        body.subTags[0].subTags[2].attrs.id
+
+        //declarative fields
+        var notebook = {
+            brand: prompt("Введите название бренда :"),
+            type:  prompt("Введите серию :"),
+            model: prompt("Введите модель :"),
+            ram: confirm("Память 4 gb ?"),
+            size: prompt("Введите размер:"),
+            weight: confirm("Вес 1.8 ?"),
+            resolution: {
+                width:confirm("Ширина экрана 1920 ?"),
+                height: confirm("Высота 1080 ?"),
+            },
+            owner : {}
+        };
+
+        var phone = {
+            brand: prompt("Введите название бренда:"),
+            model: prompt("Введите модель:"),
+            ram:  confirm("Память 2 gb ?"),
+            color: prompt("Введите цвет :"),
+            owner : {}
+        };
+
+        var person = {
+            name: prompt("Введите ваше имя:"),
+            surname: prompt("Введите вашу фамилию:"),
+            married:  confirm("Вы женаты/замужем ? "),
+            smartphone: {},
+            laptop:{}
+        }
+        //object links
+        person.smartphone = phone
+        person.laptop = notebook
+        notebook.owner = person
+        phone.owner = person
+        // person.smartphone.owner.laptop.owner.smartphone == person.smartphone
+
+        // imperative array fill 3
+        let imperatArray = []
+        for (let i = 0; i < 3; i++) {
+            imperatArray.push(prompt('Введите числа:'))
+        }
+        console.log(imperatArray)
+ 
+        // while confirm
+        let askUser = confirm('Нажмите ОТМЕНА чтобы выйти отсюда ...')
+        while (askUser != true) {
+            askUser = confirm('Нажмите ОТМЕНА чтобы выйти отсюда ...')
+        }
+
+        //array fill
+        let elements = []
+        while (true) {
+            let quesUser = prompt("Введите число :")
+            elements.push(quesUser)
+            if (!quesUser) {
+                break;
+            }
+        }
+
+        //array fill nopush
+        let elementsSecond = []
+        while (true) {
+            var quesUserSecond = prompt(["Введите число :"])
+            if (elementsSecond[quesUserSecond]){
+                elementsSecond[quesUserSecond]++;
+            }else {
+                elementsSecond[quesUserSecond] = 1;
+            }
+            if (!quesUserSecond) {
+                break;
+            }
+        }
+        
+        //infinite probability
+        while(true) {
+                var infiniteProb = Math.random();
+                alert(infiniteProb);
+        if (infiniteProb > 0.9) {
+                break;
+            }
+        }
+
+        //empty loop
+        do {
+        } while (prompt("Нажмите отмена") == null);
+
+        //progression sum
+        let d = 3;
+        let n = 150;
+        for (let a1 = 1; 1 + d < n ; a1++) {
+            let an = a1 + d * (n-1)
+            let sn = ((a1 + an) * n)/2
+           
+            console.log("Последний член an : " + an)
+            console.log("Сумма арифметической прогрессии Sn : " + sn)
+            break;
+        }
+
+        // chess one line
+        let grid = "#";
+        for (let i = 0; i < 9 ;i++) {
+            if (i % 2) {
+                grid = grid + "#";
+            }else {
+                grid = grid + " ";
+            }
+        } console.log (grid);
+
+        //numbers
+        let str = '';
+        for ( let j = 0; j <= 9 ; j++){
+                for (let i = 0; i <= 9; i++) {
+                    str = str + i;
+                if (i == 9) {
+                    str = str + '\n'
+                }
+            }
+            if (j == 9) {
+                console.log(str)  
+                break;
+            }
+        }
+     
+        //chess
+        let chess = "";
+        for (let i = 0;i <= 10; i++){
+                chess += '\n'
+                for (let j = 0; j <= 6; j++){
+                    if (i % 2 === 0 && j === 0) {
+                        chess += "#"
+                    }else chess += ".#"
+                }
+        }
+        console.log(chess)
+      
+        //cubes
+        for (let cub = [];;) {
+            let index = cub.length
+            for (let i = 0; i < 1;i++) {
+                let result = index ** 3
+                cub.push(result)
+            }
+            if (cub.length == 10){
+                console.log(cub)
+                break;
+            }
+        }
+       
+        //multiply table
+        let arr = [];
+        for(let i = 0; i <= 10; i++) {
+            let table = []
+            arr.push(table)
+            for(let j = 0; j <= 10; j++) {
+                table.push(j * i)
+            }
+        }
+
+
+        // matrix to html table
+        let str = '<table border = "1">';
+        for(let i = 0; i <= 0; i++) {
+            str += '<tr> <td> FIRST </td>'
+            for(let j = 0; j <= 0; j++) {
+                str += '<td> SECOND </td> </tr>'
+            }
+        }
+        str += "</table>"
+        document.write(str)
+
+        //Задание на синий пояс: Треугольник
+        let triangle = "";
+        for (let i = 0; i <= 10 ; i++){
+            triangle += '\n'
+            for (let j = 0; j <= 11; j++) {
+                triangle += '.' + '#'
+            }
+        }
+
+    
+            
+
+
+    </script>
+</body>
+</html>

+ 8 - 0
HomeWork4/workspace.code-workspace

@@ -0,0 +1,8 @@
+{
+	"folders": [
+		{
+			"path": ".."
+		}
+	],
+	"settings": {}
+}

File diff suppressed because it is too large
+ 28003 - 0
react_introduction-2/package-lock.json


+ 38 - 0
react_introduction-2/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "myproject",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.2.0",
+    "@testing-library/user-event": "^13.5.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

+ 68 - 0
react_introduction-2/public/index.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <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=Roboto:wght@400;500&display=swap" rel="stylesheet">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root">
+
+      <header class="header">
+
+        <div class="header-wrap">
+
+                <a href="#" class="logo">
+                    <img src="image/WD.svg" alt="logo">
+                </a>
+
+            <nav class="nav">
+
+                <input type="checkbox" id="burger" class="burger-checkbox">
+                <label for="burger" class="burger">
+                    <span></span>
+                </label>
+
+                <ul class="header-list">
+                    <li><a href="#" class="header-item">Главная</a></li>
+                    <li><a href="#" class="header-item">Об Авторе</a></li>
+                    <li><a href="#" class="header-item">работы</a></li>
+                    <li><a href="#" class="header-item">процесс</a></li>
+                    <li><a href="#" class="header-item">контакты</a></li>
+                </ul>
+            </nav>
+
+        </div>
+       
+        
+    </header>
+
+    </div>
+  
+  </body>
+</html>

+ 25 - 0
react_introduction-2/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

+ 762 - 0
react_introduction-2/src/App.css

@@ -0,0 +1,762 @@
+
+body {
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+  line-height: 1.6;
+  color: #727272;
+  margin: 0;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+.wrapper {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+/* header */
+.header {
+  /* width: 100%; */
+  background: #EEEFF1;
+  position: relative;
+}
+
+.header-wrap {
+  display: flex;
+}
+
+.logo {
+  display: inline-block;
+  max-width: 96px;
+  margin-right: 15px;
+  padding-top: 50px;
+  margin-left: 7%;
+  line-height: 60px;
+  position: absolute;
+}
+
+.logo img {
+  vertical-align: middle;
+}
+
+.nav {
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.header-list {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin: 72px -20px;
+  list-style-type: none;
+  background: #EEEFF1;
+
+  opacity: 0;
+  visibility: hidden;
+}
+
+.burger-checkbox:checked ~ .header-list {
+  transition: opacity .3s ease-in;
+  opacity: 1;
+  visibility: visible;
+}
+
+.header-item {
+  padding-right: 22px;
+}
+
+.header-list a {
+  display: flex;
+  align-items: center;
+  color: #34547A;
+  white-space: nowrap;
+  text-decoration: none;
+  text-transform: uppercase;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 26px;
+  letter-spacing: 0.1em;
+}
+
+.header-list a:hover {
+  color: rgb(157, 157, 157);
+}
+
+
+/* burger */
+.burger-checkbox {
+  opacity: 0;
+  visibility: hidden;
+  position: absolute;
+  left: -99999999px;
+}
+
+.burger {
+  position: relative;
+  width: 26px;
+  height: 18px;
+  margin-top: 50px;
+  margin-right: 50px;
+}
+
+.burger::before,
+.burger span,
+.burger::after {
+  position: absolute;
+  right: 0;
+  left: 0;
+  background: #000;
+  height: 2px;
+}
+
+.burger::before {
+  content: '';
+  top: 0;
+}
+
+.burger span {
+  top: 8px;
+}
+
+.burger::after {
+  content: '';
+  bottom: 0;
+}
+
+.burger-checkbox:checked + .burger span {
+  opacity: 0;
+}
+
+.burger-checkbox:checked + .burger::before {
+  transition: transform .3s ease-in;
+  transform: rotate(45deg);
+  top: 8px;
+}
+
+.burger-checkbox:checked + .burger::after {
+  transition: transform .3s ease-in;
+  transform: rotate(-45deg);
+  bottom: 8px;
+}
+
+
+/*about me  */
+.box_text_second {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+}
+
+.about_me {
+
+  padding-left: 15%;
+  padding-right: 15%;
+  margin-top: 120px;
+  /* margin-left: 565px; */
+  /* width: 400px; */
+
+}
+
+.about_me h1 {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 32px;
+  line-height: 38px;
+  text-align: center;
+  color: #000000;
+  margin-bottom: 35px;
+}
+
+.about_me p {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 26px;
+  text-align: center;
+  padding-bottom: 63px;
+  color: #727272;
+}
+
+/* blue box */
+
+.blue_box {
+  width: 100%;
+  background-color: #34547A;
+  height: 250px;
+  display: flex;
+  align-items: center;
+}
+
+.blue_box__images {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.blue_box img {
+  width: 31%;
+  padding-left: 10px;
+  padding-top: 20px;
+  padding-right: 10px;
+}
+
+
+/*  */
+img {
+  max-width: 100%;
+  height: auto;
+  vertical-align: top;
+}
+
+p {
+  margin-bottom: 5px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0;
+  color: #000;
+  line-height: 1.15;
+  font-weight: 500;
+}
+
+h1 {
+  font-size: 28px;
+}
+
+h2 {
+  font-size: 32px;
+}
+
+.btn {
+  display: inline-block;
+  border: 1px solid #34547A;
+  background: #34547A;
+  color: #fff;
+  text-transform: uppercase;
+  padding: 23px 50px;
+  line-height: 1;
+  text-decoration: none;
+}
+
+.btn:hover {
+  transition: opacity .3s ease-in;
+  opacity: .7;
+}
+
+.container {
+  max-width: 1180px;
+  padding: 0 15px;
+  margin: 0 auto;
+}
+
+.section-banner {
+  background: #EEEFF1;
+  padding: 125px 0 146px;
+}
+
+.banner-wrap {
+  display: flex;
+  align-items: center;
+  margin: 0 -65px;
+}
+
+.col {
+  padding: 0 55px;
+  width: 50%;
+}
+
+.col--img {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.section-banner .title {
+  margin-bottom: 20px;
+}
+
+.section-banner .holder {
+  padding-bottom: 40px;
+}
+
+
+
+/*  */
+
+
+
+.section-skill {
+  padding: 100px 0;
+}
+
+.skill-row {
+  display: flex;
+  align-items: center;
+}
+
+.skill-col {
+  width: 50%;
+}
+
+.skill-descr {
+  padding-right: 20px;
+}
+
+.skill-img {
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  padding-top: 5%;
+}
+
+.skill-descr .title {
+  margin-bottom: 50px;
+}
+
+.skill-box {
+  max-width: 445px;
+}
+
+.skill-this {
+  margin-bottom: 30px;
+}
+
+.skill-label {
+  display: block;
+  margin-bottom: 20px;
+}
+
+.skill-loader {
+  background: #C4C4C4;
+  height: 4px;
+  position: relative;
+}
+
+.skill-load {
+  position: absolute;
+  width: 75%;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  background: #34547A;
+}
+/* my work*/
+
+.my_work {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  /* justify-content: center; */
+  align-items: center;
+  background: #EEEFF1;
+  padding-bottom: 100px;
+
+}
+.my_work__text {
+  text-align: center;
+  padding-top: 100px;
+  padding-bottom: 25px;
+}
+
+.my_work__text p {
+  padding-top: 25px;
+  padding-left: 30%;
+  padding-right: 30%;
+  padding-bottom: 57px;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 26px;
+  text-align: center;
+}
+
+.my_work__video {
+  position: relative;
+}
+.play img {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  top: 33.5%;
+  left: 42.5%;
+}
+
+.play img:hover {
+  background-color: #C4C4C4;
+  border-radius: 50%;
+}
+/* gellary */
+
+.section-gellary .row {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.section-gellary .col  {
+  width: 25%;
+  padding-top: 0%;
+  padding-left: 0%;
+  padding-right: 0%;
+  background-size: cover;
+  background-position: center;
+  position: relative;
+}
+
+.section-gellary .col:hover::before,
+.section-gellary .col:hover::after {
+  transition: opacity .3s ease-in;
+  opacity: 1;
+  visibility: visible;
+}
+
+.section-gellary .col::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(52, 84, 122, .8);
+  opacity: 0;
+  visibility: hidden;
+}
+
+.section-gellary .col::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: url(image/view.svg) no-repeat;
+  background-size: cover;
+  background-position: center;
+  width: 100px;
+  height: 58px;
+  opacity: 0;
+  visibility: hidden;
+}
+
+/* microsoft */
+
+.microsoft_box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 250px;
+}
+
+.microsoft img {
+  width: 23.5%;
+}
+
+/* form action */
+
+.feedback {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: #EEEFF1;
+}
+.feedback__col {
+  text-align: center;
+  padding-left: 100px;
+  padding-top: 100px;
+  padding-right: 100px;
+  padding-bottom: 65px;
+}
+.form_action {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 700px;
+  background: #EEEFF1;
+  padding-left: 30px;
+  padding-bottom: 100px;
+}
+
+.form_action input {
+  height: 50px;
+  width: 255px;
+  margin-right: 30px;
+  padding-left: 20px;
+  margin-bottom: 20px;
+  border: none;
+  display: inline-block;
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 23px;
+  color: #5F5D5D;
+}
+
+input:nth-child(3) {
+  width: 540px;
+  padding-top: 17px;
+  padding-bottom: 158px;
+}
+
+.btn_send {
+  width: 190px;
+  height: 55px;
+  font-size: 14px;
+}
+
+/* footer */
+
+.footer {
+  width: 100%;
+  height: 151px;
+  display: flex;
+  justify-content: space-between;
+
+  background-color: #34547A;
+  color: #EEEFF1;
+}
+.footer_col {
+  padding-left: 100px;
+  padding-top: 50px;
+}
+
+.footer_col h3 {
+  color: #EEEFF1;
+}
+
+.social_col {
+  padding-right: 50px;
+  padding-top: 64.59px;
+}
+
+.social_col img {
+  margin-left: 15px;
+}
+
+
+
+/* responsive */
+
+  .header-list {
+      margin: 72px 0px;
+  }
+
+
+
+  .burger {
+      display: none;
+  }
+
+  .microsoft img {
+      padding-right: 15px;
+      padding-left: 15px;
+  }
+  .feedback__col {
+      text-align: center;
+      padding-left: 30%;
+      padding-top: 100px;
+      padding-right: 30%;
+      padding-bottom: 65px;
+  }
+
+
+
+
+ 
+  .burger {
+      display: none;
+  }
+
+  .microsoft_box {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 250px;
+  
+  }
+
+  .microsoft img {
+      padding-right: 15px;
+      padding-left: 15px;
+  }
+
+
+
+  .burger {
+      display: none;
+     
+  }
+  .header-list {
+      position: static;
+      opacity: 1;
+      visibility: visible;
+      display: flex;
+      align-items: center;
+      margin: 72px -20px;
+  }
+  .header-item {
+      padding-bottom: 0;
+  }
+  .feedback__col {
+      text-align: center;
+      padding-left: 400px;
+      padding-top: 100px;
+      padding-right: 400px;
+      padding-bottom: 65px;
+  }
+
+ 
+  .about_me p {
+      font-family: 'Roboto';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 26px;
+      text-align: center;
+      padding-right: 200px;
+      padding-left: 200px;
+      padding-bottom: 63px;
+      color: #727272;
+  }
+
+  
+  .blue_box {
+      width: 100%;
+      background-color: #34547A;
+      height: 250px;
+      display: flex;
+      align-items: center;
+  }
+  
+  .blue_box__images {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+  }
+  
+  .blue_box img {
+      width: 13%;
+      padding-left: 21px;
+      padding-right: 21px;
+  }
+  .logo {
+      display: inline-block;
+      max-width: 96px;
+      margin-right: 15px;
+      padding-top: 50px;
+      margin-left: 200px;
+      line-height: 60px;
+      position: absolute;
+  }
+
+
+
+ 
+  .header-list {
+      margin: 72px 100px;
+  }
+  .header-item {
+      padding-right: 42px;
+  }
+  .social_col {
+      padding-right: 100px;
+      padding-top: 64.59px;
+  }
+  .my_work__text p {
+      padding-top: 25px;
+      padding-left: 15%;
+      padding-right: 15%;
+      padding-bottom: 57px;
+  }
+  .play img {
+      position: absolute;
+      width: 100px;
+      height: 100px;
+      top: 41.5%;
+      left: 45.5%;
+  }
+
+
+
+ 
+  h1 {
+      font-size: 48px;
+  }
+
+  .col {
+      padding: 0 65px;
+      width: 50%;
+  }
+  .section-banner .title {
+      margin-bottom: 60px;
+  }
+  .blue_box {
+      width: 100%;
+      background-color: #34547A;
+      height: 250px;
+      display: flex;
+      align-items: center;
+  }
+  
+  .blue_box__images {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      flex-wrap: wrap;
+  }
+  
+  .blue_box img {
+      width: 15%;
+      padding-left: 10px;
+      padding-right: 10px;
+  }
+  .form_action {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      width: 700px;
+      background: #EEEFF1;
+      padding-bottom: 100px;
+  }
+  .feedback__col {
+      text-align: center;
+      padding-left: 200px;
+      padding-top: 100px;
+      padding-right: 200px;
+      padding-bottom: 65px;
+  }
+
+
+
+
+
+ 

+ 296 - 0
react_introduction-2/src/App.js

@@ -0,0 +1,296 @@
+import './App.css';
+import logo from './image/WD.svg';
+import laptop from './image/img-01.svg';
+import numberItems from './image/numbers__item.svg'
+import MyWorkPlay from './image/play.svg'
+import myWork from './image/my_work.png'
+import GalleryPicture from './image/img-04.jpg'
+import GalleryPicture1 from './image/img-03.jpg'
+import SectionSkillImage from './image/img-02.png'
+import Microsoft from './image/microsoft.svg'
+import socialImage from './image/social_vk.svg'
+
+
+
+
+
+
+const Header = () => 
+<header class="header">
+
+<div class="header-wrap">
+
+        <a href="#" class="logo">
+            <img src={logo} alt="logo">
+            </img>
+        </a>
+
+    <nav class="nav">
+
+        <input type="checkbox" id="burger" class="burger-checkbox"></input>
+        <label for="burger" class="burger">
+            <span></span>
+        </label>
+
+        <ul class="header-list">
+            <HeaderItem>
+              ГЛАВНАЯ
+            </HeaderItem>
+          
+           <HeaderItem url='https://google.com'>
+             Об Авторе
+           </HeaderItem>
+
+           <HeaderItem>работы</HeaderItem>
+            <HeaderItem>Процесс</HeaderItem>
+             <HeaderItem>контакты</HeaderItem>
+        </ul>
+    </nav>
+
+</div>
+
+
+</header>
+
+const HeaderItem = ({children='Главная', url='#'}) => 
+    <li><a href={url} class="header-item">{children}</a></li>
+
+const SectionBanner = ({children='SectionBanner'}) =>
+
+<section className="section-banner">
+<div class="container">
+    <div class="banner-wrap">
+        <div class="col col--img">
+            <img src={laptop} alt="image description"></img>
+        </div>
+        <div class="col col--description">
+            <header class="section-header">
+                <h1 class="title">Дизайн и верстка</h1>
+            </header>
+            <div class="holder">
+                <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
+            </div>
+            <a href="#" class="btn">НАПИСАТЬ МНЕ</a>
+        </div>
+    </div>
+</div>
+</section>
+
+const SectionHowWork = ({children='SectionHowWork'}) =>
+
+<section class="my_work">
+<div class="my_work__text">
+    <h2>Как я работаю</h2>
+    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>    
+</div>
+<div class="my_work__video">
+
+  <img src={myWork} alt="my_work"></img>
+  <div class="play">
+    <img src={MyWorkPlay}alt=""></img>
+</div>
+</div>
+</section>
+
+const SectionBlueBox = ({children='SectionBlueBox'}) =>
+<>
+  <div class="blue_box">
+      <div class="blue_box__images">
+        
+        <img src={numberItems} alt="number_item"></img>
+        <img src={numberItems} alt="number_item"></img>
+        <img src={numberItems} alt="number_item"></img>
+        <img src={numberItems} alt="number_item"></img>
+        <img src={numberItems} alt="number_item"></img>
+        <img src={numberItems} alt="number_item"></img>
+
+      </div>
+  </div>
+
+</>
+
+const SectionImage = ({children='SectionImage'}) =>
+<>
+ <div class="row">
+
+    <a href="#" class="col"><img src={GalleryPicture}></img></a>
+    <a href="#" class="col"><img src={GalleryPicture1}></img></a>
+    <a href="#" class="col"><img src={GalleryPicture}></img></a>
+    <a href="#" class="col"><img src={GalleryPicture1}></img></a>
+    <a href="#" class="col"><img src={GalleryPicture}></img></a>
+    <a href="#" class="col"><img src={GalleryPicture1}></img></a>
+    <a href="#" class="col"><img src={GalleryPicture}></img></a>
+    <a href="#" class="col"><img src={GalleryPicture1}></img></a>
+
+ </div>
+</>
+
+const SectionSkill = ({children='SectionSkill'}) =>
+<>
+            <section class="section-skill">
+                <div class="container">
+                    <div class="skill-row">
+                        <div class="skill-col skill-descr">
+                            <header class="section-header">
+                                <h2 class="title">Мои навыки</h2>
+                            </header>
+                            <div class="skill-box">
+                                <div class="skill-this">
+                                    <span class="skill-label">Adobe Photoshop</span>
+                                    <div class="skill-loader">
+                                        <div class="skill-load"></div>
+                                    </div>
+                                </div>
+                                <div class="skill-this">
+                                    <span class="skill-label">Adobe Photoshop</span>
+                                    <div class="skill-loader">
+                                        <div class="skill-load"></div>
+                                    </div>
+                                </div>
+                                <div class="skill-this">
+                                    <span class="skill-label">Adobe Photoshop</span>
+                                    <div class="skill-loader">
+                                        <div class="skill-load"></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="skill-col skill-img"><img src={SectionSkillImage}></img></div>
+                    </div>
+                </div>
+            </section>
+</>
+
+
+const SectionGallery = ({children='SectionGallery'}) => 
+<section class="section-gellary">
+
+ <SectionImage>
+
+ </SectionImage>
+
+</section>
+
+const MicrosoftBox = ({children='MicrosoftBox'}) =>
+<>
+        <section class="microsoft_box">
+                <div class="microsoft">
+
+                    <img src={Microsoft} alt="microsoft"></img>
+                    <img src={Microsoft} alt="microsoft"></img>
+                    <img src={Microsoft} alt="microsoft"></img>
+                    <img src={Microsoft} alt="microsoft"></img>
+                </div>
+        </section>
+</>
+
+
+const FeedBack = ({children='FeedBack'}) => 
+<>
+            <section class="feedback">
+                <div class="feedback__col">
+
+                    <h2>Хотите веб-сайт?</h2>
+
+                    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
+
+                </div>
+
+
+
+                    <form class="form_action">
+
+                            <input type="text" name="name" placeholder="Ваше имя"></input>
+
+                            <input type="email" name="e-mail" placeholder="Ваш e-mail"></input>
+
+                            <input type="text" name="text" placeholder="Сообщение"></input>
+
+                            <a href="#" class="btn btn_send">Отправить</a>
+
+                    </form>
+
+            </section>
+</>
+
+const Main = () => 
+<main class="main">
+  <div class="wrapper">
+
+  <SectionBanner>
+ 
+  </SectionBanner>
+
+           <div class="box_text_second">
+                 <div class="about_me">
+                     <h1>Обо мне</h1>
+                     <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
+                 </div>
+           </div>
+ 
+ 
+    <SectionBlueBox>
+
+    </SectionBlueBox>
+
+    <SectionSkill>
+      
+    </SectionSkill>
+
+    <SectionHowWork>
+
+    </SectionHowWork>
+
+    <SectionGallery>
+      
+    </SectionGallery>
+
+    <MicrosoftBox>
+
+    </MicrosoftBox>
+
+    <FeedBack>
+
+    </FeedBack>
+ 
+  </div>
+
+
+  
+ 
+
+
+</main>
+
+
+
+const SocialCol = ({children='SocialCol'}) => 
+<div class="social_col">
+      <img src={socialImage} alt="social_link"></img>
+      <img src={socialImage} alt="social_link"></img>
+      <img src={socialImage} alt="social_link"></img>
+</div>
+
+const Footer = () => 
+
+    <footer class="footer">
+      <div class="footer_col">
+          <h3>Иванов Иван</h3>
+          <p>(с) 2018. Все права защищены.</p>
+      </div>
+      <SocialCol>
+        
+      </SocialCol>
+    </footer>
+
+function App() {
+  return (
+  <>
+    <Header />
+    <Main />
+    <Footer />
+  </>
+  );
+}
+
+export default App;

+ 8 - 0
react_introduction-2/src/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

File diff suppressed because it is too large
+ 3 - 0
react_introduction-2/src/image/WD.svg


+ 81 - 0
react_introduction-2/src/image/img-01.svg

@@ -0,0 +1,81 @@
+<svg width="357" height="234" viewBox="0 0 357 234" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_191)">
+<path d="M337.3 225.4H24.1C19.9 225.4 16.5 222 16.5 217.8V7.6C16.5 3.4 19.9 0 24.1 0H337.3C341.5 0 344.9 3.4 344.9 7.6V217.7C345 222 341.5 225.4 337.3 225.4Z" fill="#00D5E4"/>
+<path d="M326.2 217.8H35.2C31 217.8 27.6 214.4 27.6 210.2V15.3C27.6 11.1 31 7.70001 35.2 7.70001H326.2C330.4 7.70001 333.8 11.1 333.8 15.3V210.2C333.9 214.3 330.4 217.8 326.2 217.8Z" fill="#065090"/>
+<path d="M115.6 28.9H75.4V33.4H115.6V28.9Z" fill="#FCFDFD"/>
+<path d="M101 38.9H75.4V43.4H101V38.9Z" fill="#FCFDFD"/>
+<path d="M218.5 38.9H115.4V43.4H218.5V38.9Z" fill="#FCFDFD"/>
+<path d="M282.5 38.9H228.5V43.4H282.5V38.9Z" fill="#FF6452"/>
+<path d="M150.5 48.9H85.4V53.4H150.5V48.9Z" fill="#00D050"/>
+<path d="M267.5 48.9H170.5V53.4H267.5V48.9Z" fill="#FCFDFD"/>
+<path d="M167 58.9H75.4V63.4H167V58.9Z" fill="#FF6452"/>
+<path d="M240.5 58.9H175.4V63.4H240.5V58.9Z" fill="#00D5E4"/>
+<path d="M150.5 68.9H85.4V73.4H150.5V68.9Z" fill="#FCFDFD"/>
+<path d="M170.5 78.9H75.4V83.4H170.5V78.9Z" fill="#FCFDFD"/>
+<path d="M140.5 88.9H75.4V93.4H140.5V88.9Z" fill="#FCFDFD"/>
+<path d="M204 98.9H95.4V103.4H204V98.9Z" fill="#FF6452"/>
+<path d="M250.5 98.9H215.4V103.4H250.5V98.9Z" fill="#FCFDFD"/>
+<path d="M300.5 98.9H265.4V103.4H300.5V98.9Z" fill="#FCFDFD"/>
+<path d="M149.7 108.9H105.4V113.4H149.7V108.9Z" fill="#FCFDFD"/>
+<path d="M164.5 118.9H105.4V123.4H164.5V118.9Z" fill="#FF6452"/>
+<path d="M250.5 118.9H185.4V123.4H250.5V118.9Z" fill="#FCFDFD"/>
+<path d="M292.5 118.9H265.4V123.4H292.5V118.9Z" fill="#FF6452"/>
+<path d="M115.4 128.9H75.4V133.4H115.4V128.9Z" fill="#FCFDFD"/>
+<path d="M140.5 138.9H75.4V143.4H140.5V138.9Z" fill="#FCFDFD"/>
+<path d="M223.5 148.9H105.4V153.4H223.5V148.9Z" fill="#FCFDFD"/>
+<path d="M308.5 148.9H235.4V153.4H308.5V148.9Z" fill="#00D5E4"/>
+<path d="M145.5 158.9H105.4V163.4H145.5V158.9Z" fill="#FCFDFD"/>
+<path d="M195.5 158.9H155.4V163.4H195.5V158.9Z" fill="#00D050"/>
+<path d="M245.5 158.9H205.4V163.4H245.5V158.9Z" fill="#FCFDFD"/>
+<path d="M140.5 168.9H75.4V173.4H140.5V168.9Z" fill="#FCFDFD"/>
+<path d="M160.5 178.9H95.4V183.4H160.5V178.9Z" fill="#00D050"/>
+<path d="M238 178.9H172.9V183.4H238V178.9Z" fill="#00D050"/>
+<path d="M208 198.9H171.5V203.4H208V198.9Z" fill="#FCFDFD"/>
+<path d="M192 188.9H95.4V193.4H192V188.9Z" fill="#FCFDFD"/>
+<path d="M50.3 28.9H45.8V33.4H50.3V28.9Z" fill="#5E94C1"/>
+<path d="M50.3 38.9H45.8V43.4H50.3V38.9Z" fill="#5E94C1"/>
+<path d="M50.3 48.9H45.8V53.4H50.3V48.9Z" fill="#5E94C1"/>
+<path d="M50.3 58.9H45.8V63.4H50.3V58.9Z" fill="#5E94C1"/>
+<path d="M50.3 68.9H45.8V73.4H50.3V68.9Z" fill="#5E94C1"/>
+<path d="M50.3 78.9H45.8V83.4H50.3V78.9Z" fill="#5E94C1"/>
+<path d="M50.3 88.9H45.8V93.4H50.3V88.9Z" fill="#5E94C1"/>
+<path d="M50.3 98.9H45.8V103.4H50.3V98.9Z" fill="#5E94C1"/>
+<path d="M50.3 108.9H45.8V113.4H50.3V108.9Z" fill="#5E94C1"/>
+<path d="M50.3 118.9H45.8V123.4H50.3V118.9Z" fill="#5E94C1"/>
+<path d="M50.3 128.9H45.8V133.4H50.3V128.9Z" fill="#5E94C1"/>
+<path d="M50.3 138.9H45.8V143.4H50.3V138.9Z" fill="#5E94C1"/>
+<path d="M50.3 148.9H45.8V153.4H50.3V148.9Z" fill="#5E94C1"/>
+<path d="M50.3 158.9H45.8V163.4H50.3V158.9Z" fill="#5E94C1"/>
+<path d="M50.3 168.9H45.8V173.4H50.3V168.9Z" fill="#5E94C1"/>
+<path d="M50.3 178.9H45.8V183.4H50.3V178.9Z" fill="#5E94C1"/>
+<path d="M50.3 188.9H45.8V193.4H50.3V188.9Z" fill="#5E94C1"/>
+<path d="M50.3 198.9H45.8V203.4H50.3V198.9Z" fill="#5E94C1"/>
+<path d="M143.7 198.9H95.4V203.4H143.7V198.9Z" fill="#FCFDFD"/>
+<path d="M284.7 203.3L265.7 195.2V191.9L284.7 183.8V187.3L269.6 193.5L284.7 199.7V203.3Z" fill="#FCFDFD"/>
+<path d="M298.1 179L289.8 207.7H287L295.3 179H298.1Z" fill="#FCFDFD"/>
+<path d="M319.3 195.2L300.3 203.3V199.8L315.4 193.6L300.3 187.4V183.9L319.3 192V195.2Z" fill="#FCFDFD"/>
+<path d="M337 233.7H20C9 233.7 0 224.7 0 213.7H357C357 224.8 348 233.7 337 233.7Z" fill="#00BBD3"/>
+<g opacity="0.1">
+<g opacity="0.1">
+<path opacity="0.1" d="M129.4 217.8L204 7.59998H175.7L101.1 217.8H129.4Z" fill="white"/>
+</g>
+<g opacity="0.1">
+<path opacity="0.1" d="M35.3 217.8H48.6L123.2 7.59998H35.3C31.1 7.59998 27.7 11 27.7 15.2V210.1C27.6 214.3 31.1 217.8 35.3 217.8Z" fill="white"/>
+</g>
+<g opacity="0.1">
+<path opacity="0.1" d="M287.6 217.8H326.3C330.5 217.8 333.9 214.4 333.9 210.2V87.4L287.6 217.8Z" fill="white"/>
+</g>
+</g>
+<g opacity="0.1">
+<g opacity="0.1">
+<path opacity="0.1" d="M184.3 217.8H236.2L310.8 7.59998H258.9L184.3 217.8Z" fill="white"/>
+</g>
+</g>
+<path d="M354.3 223.7C356 220.8 357 217.3 357 213.7H0C0 217.3 1 220.8 2.7 223.7H354.3Z" fill="#15D7E2"/>
+</g>
+<defs>
+<clipPath id="clip0_1_191">
+<rect width="357" height="233.7" fill="white"/>
+</clipPath>
+</defs>
+</svg>

BIN
react_introduction-2/src/image/img-02.png


BIN
react_introduction-2/src/image/img-03.jpg


BIN
react_introduction-2/src/image/img-04.jpg


File diff suppressed because it is too large
+ 9 - 0
react_introduction-2/src/image/microsoft.svg


BIN
react_introduction-2/src/image/my_work.png


File diff suppressed because it is too large
+ 12 - 0
react_introduction-2/src/image/numbers__item.svg


+ 3 - 0
react_introduction-2/src/image/oko.svg

@@ -0,0 +1,3 @@
+<svg width="100" height="58" viewBox="0 0 100 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M86.2534 15.4207C66.1706 -4.66205 33.4966 -4.66205 13.4139 15.4207L0 28.8329L13.7466 42.5795C23.7872 52.62 36.9764 57.642 50.1672 57.642C63.3581 57.642 76.5456 52.6217 86.5878 42.5795L100.002 29.1657L86.2534 15.4207ZM84.1976 40.191C65.4324 58.9545 34.9003 58.9545 16.1351 40.191L4.77703 28.8329L15.8024 17.8075C34.5676 -0.955968 65.0997 -0.955968 83.8649 17.8075L95.223 29.1657L84.1976 40.191Z" fill="white"/>
+</svg>

File diff suppressed because it is too large
+ 3 - 0
react_introduction-2/src/image/play.svg


File diff suppressed because it is too large
+ 3 - 0
react_introduction-2/src/image/social_vk.svg


+ 12 - 0
react_introduction-2/src/image/view.svg

@@ -0,0 +1,12 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_138)">
+<path d="M86.2534 36.4207C66.1706 16.338 33.4966 16.338 13.4139 36.4207L0 49.8329L13.7466 63.5795C23.7872 73.62 36.9764 78.642 50.1672 78.642C63.3581 78.642 76.5456 73.6217 86.5878 63.5795L100.002 50.1657L86.2534 36.4207ZM84.1976 61.191C65.4324 79.9545 34.9003 79.9545 16.1351 61.191L4.77703 49.8329L15.8024 38.8075C34.5676 20.044 65.0997 20.044 83.8649 38.8075L95.223 50.1657L84.1976 61.191Z" fill="white"/>
+<path d="M48.2635 36.436C41.7432 36.436 36.4392 41.7401 36.4392 48.2604C36.4392 49.1928 37.1959 49.9496 38.1284 49.9496C39.0608 49.9496 39.8176 49.1928 39.8176 48.2604C39.8176 43.6033 43.6064 39.8144 48.2635 39.8144C49.1959 39.8144 49.9527 39.0577 49.9527 38.1252C49.9527 37.1928 49.1976 36.436 48.2635 36.436Z" fill="white"/>
+<path d="M49.9527 27.99C37.8446 27.99 27.9932 37.8413 27.9932 49.9494C27.9932 62.0576 37.8446 71.9089 49.9527 71.9089C62.0608 71.9089 71.9121 62.0576 71.9121 49.9494C71.9121 37.8413 62.0625 27.99 49.9527 27.99ZM49.9527 68.5305C39.7078 68.5305 31.3716 60.1944 31.3716 49.9494C31.3716 39.7045 39.7078 31.3684 49.9527 31.3684C60.1976 31.3684 68.5338 39.7045 68.5338 49.9494C68.5338 60.1944 60.1993 68.5305 49.9527 68.5305Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1_138">
+<rect width="100" height="100" fill="white"/>
+</clipPath>
+</defs>
+</svg>

+ 13 - 0
react_introduction-2/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

+ 17 - 0
react_introduction-2/src/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

+ 13 - 0
react_introduction-2/src/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

+ 5 - 0
react_introduction-2/src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';