second comit

src/App.js

@@ -93,9 +93,9 @@ const Main = () =>
     <section className="section-skill">
       <div className ="container"><SkillRow /> </div>
   </section>
-   <section className = "container-work"></section>
-   <section></section>
-   <section></section>
+   <section className = "container-work"> <Work/> </section>
+   <section>   <Blok5/>  </section>
+   <section> <ContainerPole/> </section>
 </>
 
 const SkillRow = () =>
@@ -111,36 +111,120 @@ const SkillRow = () =>
     </div>
   
       <div class="skill-col">
-        <div class="skill-bg" style="background: url(img/Rectangle.jpg);"></div>
+        <div class="skill-bg"></div>
       </div>
 </div>
   </>
 
-/*const SkillBg = () =>
-  " background: url(img/Rectangle.jpg) "
-*/
+
    
 const Skills = () =>
-  <div className = "skills">
-    <SkillsItem />
-    <SkillsItem />
-    <SkillsItem />
-  </div>
-
-const SkillsItem = () =>
-  <div className = "skills-item">
-      <span class="skill-title">Adobe Photoshop</span>
+  <div class="skills">
+                    <div class="skills-item">
+                        <span class="skill-title">Adobe Photoshop</span>
                         <div class="skill-wrap">
-                            <div class="skill" style={"width: 85%;"}></div>
+                            <div class="skill" ></div>
                         </div>
-  </div>
+                    </div>
+                    <div class="skills-item">
+                        <span class="skill-title">Adobe Photoshop</span>
+                        <div class="skill-wrap">
+                            <div class="skill" ></div>
+                        </div>
+                    </div>
+                    <div class="skills-item">
+                        <span class="skill-title">Adobe Photoshop</span>
+                        <div class="skill-wrap">
+                            <div class="skill" ></div>
+                        </div>
+                    </div>
+                  </div>
+
+
+const Work = () => 
+  
+    <div class="work">
+                <div class="work-text">
+                    <h2 class="work-h2">Как я работаю</h2>
+                    <p class="work-p">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для
+                    текстов на латинице с начала XVI века.</p>
+
+                </div>
+                <div class="work-img"> <img src="img/Rectangle-text.png" alt="" class="work-liters"/> <img src="img/play-button.png" class="img-buttom" alt=""/></div>
+                
+            </div>
+  
+const Blok5 = () =>
+  <div class="blok5">
+                <div class="img-2strochki">
+                    <ul class="img-spisok">
+                        <li class="img-list">  <img src="img/list.png" alt=""/> </li>
+                        <li class="img-list">  <img src="img/comps.png" alt=""/> </li>
+                        <li class="img-list">  <img src="img/list.png" alt=""/> </li>
+                        <li class="img-list">  <img src="img/comps.png" alt=""/> </li>
+                        
+                        <li class="img-list">  <img src="img/comps.png" alt=""/> </li>
+                        <li class="img-list">  <img src="img/list.png" alt=""/> </li>
+                        <li class="img-list">  <img src="img/comps.png" alt=""/> </li>
+                        <li class="img-list"> <img src="img/list.png" alt=""/> </li>
+                        /
+                    </ul> 
+                </div>
+                <div class="img-microsoft">
+                    <ul class="img-spisok-microsoft">
+                        <li class="img-list-microsoft"> <img src="img/microsoft.png" alt=""/> </li>
+                        <li class="img-list-microsoft"> <img src="img/microsoft.png" alt=""/> </li>
+                        <li class="img-list-microsoft"> <img src="img/microsoft.png" alt=""/> </li>
+                        <li class="img-list-microsoft"> <img src="img/microsoft.png" alt=""/> </li>
+                    </ul>
+                </div>
+            </div>
+
+const ContainerPole = () =>
+            <div class="container-pole">
+                <div class="pole">
+                    <h2 class="work-h2">Хотите веб-сайт?</h2>
+                    <p class="work-p">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для
+                    текстов на латинице с начала XVI века.</p>
+                <div class="container-polya-2">  
+                    <form class="polya-2">
+                        <input class="vashe-ime" type="text" id="#" placeholder="Ваше имя" />
+                        <input class="vash-email" type="email" id="p" placeholder="Ваш e-mail" />
+                    
+                    </form>
+                    
+                    <form action="#" >
+                        <input  class="message" type="text" placeholder="Сообщение" />
+                    </form>
+                    <button class="button-2" >Отправить</button>
+                </div>
+                </div>
+            </div>
+
+const Footer = () =>
+<footer class="footer">
+            <div class="footer-div">
+                <div class="footer-Ivan">
+                    <h3 class="footer-Ivan-text-ivan">Иванов Иван</h3>
+                    <p class="footer-Ivan-text-2018">(с) 2018. Все права защищены.</p>
+                </div>
+                <div class="footer-vk">
+                    <img src="img/footer__soc-buttons.png" alt="" class="footer-vk-img"/>
+                </div>
+            </div>
+
+        </footer>
+
+
 
 
 const App = () =>
   <div className="App" >
+    <div className="wrapper">
       <Header />
       <Main />
-
+      <Footer />
+    </div>  
   </div>
 
 export default App;