MarkupREACT/src/App.js

// import logo from './logo.svg';
import './App.css'

/* const fg = () =>
   
        <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
           
  </header> */


const Header = () =>
  <div className = "Container-1">
    <Page1></Page1>
    <Obomne></Obomne>
    <Project40></Project40>

  </div>
   
  

const Page1 = () =>
  <section className="page-1">
     <Stranica1></Stranica1>
  </section>
 
  
  

const Stranica1 = () =>
  <div >
    <Navigation> </Navigation>
    <CompText> </CompText>
  </div>


const Navigation = () =>
  <div className = "navigation">
   <span class="wb">WD</span>
                        <ul class="navigation-list">
                         <li class="nav-item">ГЛАВНАЯ</li>
                         <li class="nav-item">ОБ АВТОРЕ</li>
                         <li class="nav-item">РАБОТЫ</li>
                         <li class="nav-item">ПРОЦЕСС</li>
                         <li class="nav-item">КОНТАКТЫ</li>
                        </ul>
  </div>


const CompText = () =>
  <div className="comp-text">
     <div class="comp"> <img src="img/comp.png" alt="computer"/></div>
                    <div class="text-lorem"> 
                        <h1 class="design">Дизайн и верстка</h1>
                        <p class="lorem-ruba">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для
                        текстов на латинице с начала XVI века.</p>
                        <button  class="button-1">НАПИСАТЬ МНЕ</button>
                    </div>
  </div>

const Obomne = () =>
  <div className="obo-mne">
    <h2 class="obo-mne-1">Обо мне</h2>
                <p class="obo-mne-lorem">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной
                    "рыбой" для
                    текстов на латинице с начала XVI века</p>
  </div>


const Li = () =>
    
  <li class="progect-li"><img src="numbers__item.png" alt=""/>
         </li>
         

const Project40 = () =>
  
     <div className="project-40">
    <ul className="progect-list" >
        <Li></Li>
        <Li></Li>
        <Li></Li>
        <Li></Li>
        <Li></Li>
        <Li></Li>
    </ul>
   </div>

 // Main 

const Main = () =>
<>
    <section className="section-skill">
      <div className ="container"><SkillRow /> </div>
  </section>
   <section className = "container-work"> <Work/> </section>
   <section>   <Blok5/>  </section>
   <section> <ContainerPole/> </section>
</>

const SkillRow = () =>
  
  <>
 <div className ="skill-row">
     <div className="skill-col skill-text">
      <header class="section-header">
                    <h1 class="title">Мои навыки</h1>
        </header>
        <Skills />

    </div>
  
      <div class="skill-col">
        <div class="skill-bg"></div>
      </div>
</div>
  </>


   
const Skills = () =>
  <div class="skills">
                    <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 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;