myproject/src/App.js

/*
      <Header>
        <HeaderNav />
        <HeaderBanner />
      </Header>
      <Projects />
      <Wrapper>
        <WrapperHeader />
        <WrapperMain>
          <Skills />
          <MyWork />
          <Gallery />
          <Client />
          <Footer />
        </WrapperMain>
      </Wrapper>
      
*/

import logo from './logo.svg';
import './App.css';
const ProjectInfo=()=>
<li className="project-item">
<div className="project-data">
  <div><img className="project-img" src="img/proj.png" alt="img" /></div>
  <div className="project-txt">
    <p>40+</p>
    <p>проектов</p>
  </div>
</div>
</li>
const Projects = () =>
<div className="projects">
  <ul className="projects-list">
    <ProjectInfo />
    <ProjectInfo />
    <ProjectInfo />
    <ProjectInfo />
    <ProjectInfo />
    <ProjectInfo />
  </ul>
</div>
const NavItem = ({text1}) => 
<li className="nav-item">
<a href="#" className="nav-link">{text1}</a>
</li>

function App() {
  return (
    <div>
      <header className="header-topx">
        <div className="container-top">
          <div className="header-wrap-top">
            <a href="#" className="logo-top">
              <img src="img/wd.png" alt="logo" />
            </a>
            <nav className="nav">
              <label className="opener" htmlFor="burger">
                <span></span>
              </label>
              <input className="burger" type="checkbox" name="" id="burger" title="#" />
              <ul className="nav-list">
                <NavItem text1="ГЛАВНАЯ" />
                <NavItem text1="ОБ АВТОРЕ" />
                <NavItem text1="РАБОТЫ" />
                <NavItem text1="ПРОЦЕСС" />
                <NavItem text1="КОНТАКТЫ" />
              </ul>
            </nav>
          </div>
        </div>
        <div className="banner">
          <div className="banner-img">
            <img src="img/frame.png" alt="img" />
          </div>
          <div className="banner-text">
            <h2>Дизайн и верстка</h2>
            <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
              Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI
              века.</p>
            <div><button className="banner-btn">НАПИСАТЬ МНЕ</button> </div>
          </div>
        </div>
      </header>
      <div className="about">
        <h2>Обо мне</h2>
        <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
          Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI
          века.</p>
      </div>
      <Projects />
      <div className="wrapper">

        <header className="header">
          <div className="container">
            <div className="header-wrap">
            </div>
          </div>
        </header>
        <main className="main">
          <section className="section-skills">
            <div className="container">
              <div className="row">
                <div className="col">
                  <div className="skill-holder">
                    <header className="section-header">
                      <h1 className="section-title">Мои
                        навыки</h1>
                    </header>
                    <div className="skill-list">
                      <div className="skill-item">
                        <span className="skill-title">Adobe
                          Photoshop</span>
                        <div className="skill-loader">
                          <div className="skill-load"
                            style={{width: "80%" }}>
                          </div>
                        </div>
                      </div>
                      <div className="skill-item">
                        <span className="skill-title">Adobe
                          Photoshop</span>
                        <div className="skill-loader">
                          <div className="skill-load"
                            style={{width: "90%"}}>
                          </div>
                        </div>
                      </div>
                      <div className="skill-item">
                        <span className="skill-title">Adobe
                          Photoshop</span>
                        <div className="skill-loader">
                          <div className="skill-load"
                            style={{width: "60%"}}>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="col">
                  <div className="col-img"
                    style={{ backgroundImage: "url(img/img.png)" }}>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <section className="my-work">
            <div className="my-work-text">
              <h2>Как я работаю</h2>
              <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и
                вэб-дизайне.
                Lorem Ipsum является стандартной "рыбой" для текстов на
                латинице с
                начала XVI века.</p>
            </div>
            <div className="my-work-video">
              <img className="video-main" src="img/video.png" alt="my-work-video" />
              <img src="img\button.png" alt="play button" className="button-play" />
            </div>
          </section>
          <section className="section-gallery">
            <div className="gallery-list">
              <a href="#" className="gallery-item"
                style={{backgroundImage: "url(img/pic1.png)"}} alt="img"></a>
              <a href="#" className="gallery-item"
                style={{backgroundImage: "url(img/pic2.png)"}} alt="img"></a>
              <a href="#" className="gallery-item"
                style={{backgroundImage: "url(img/pic1.png)"}} alt="img"></a>
              <a href="#" className="gallery-item"
                style={{backgroundImage: "url(img/pic2.png)"}} alt="img"></a>
              <a href="#" className="gallery-item"
                style={{backgroundImage: "url(img/pic2.png)"}} alt="img"></a>
              <a href="#" className="gallery-item"
                style={{backgroundImage: "url(img/pic1.png)"}} alt="img"></a>
              <a href="#" className="gallery-item"
                style={{backgroundImage: "url(img/pic2.png)"}} alt="img"></a>
              <a href="#" className="gallery-item"
                style={{backgroundImage: "url(img/pic1.png)"}} alt="img"></a>
            </div>
          </section>
          <section className="clients">
            <img className="client-logo" src="img\microsoft.png" alt="logo client" />
            <img className="client-logo" src="img\microsoft.png" alt="logo client" />
            <img className="client-logo" src="img\microsoft.png" alt="logo client" />
            <img className="client-logo" src="img\microsoft.png" alt="logo client" />
          </section>
          <section className="client-form">
            <div className="form-wrapper">
              <h2 style={{paddingTop:"50px"}}>Хотите веб-сайт?</h2>
              <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и
                вэб-дизайне.
                Lorem Ipsum является стандартной "рыбой" для текстов на латинице
                с начала XVI
                века.</p>
              <div className="form table">
                <div className="form-name">
                  <input className="form-name1" placeholder="Ваше имя" size="25" />
                  <input className="form-name2" placeholder="Ваш e-mail" size="25" />
                  <textarea className="form-message" placeholder="Сообщение" rows="8"
                    cols="62"></textarea>
                  <button className="button-form">ОТПРАВИТЬ</button>


                </div>
              </div>

            </div>
          </section>
        </main>
        <footer className="footer">
          <div className="sign">
            <h3>Иванов Иван</h3>
            <p>&#40;с&#41; 2018.Все права защищены.</p>
          </div>
          <div className="vk">
            <img src="img/VK.png" alt="img" />
            <img className="vk-i" src="img/VK.png" alt="img" />
            <img src="img/VK.png" alt="img" />
          </div>


        </footer>
      </div>
    </div>
  );
}

export default App;