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"></section>
   <section></section>
   <section></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" style="background: url(img/Rectangle.jpg);"></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="skill-wrap">
                            <div class="skill" style={"width: 85%;"}></div>
                        </div>
  </div>


const App = () =>
  <div className="App" >
      <Header />
      <Main />

  </div>

export default App;