ReactMarkup/src/App.js

import "./App.css";

const Header = () => (
  <header class="header">
    <div class="container">
      <div class="header-wrap">
        <a href="#" class="logo">
          <img src="img\WD.png" alt="WD-logo" />
        </a>
        <nav class="nav">
          <input type="checkbox" id="burger" class="hidden" />
          <label for="burger" class="burger">
            <span></span>
          </label>
          <ul class="nav-list">
            <li class="nav-item">
              <a href="index.html" class="nav-link">
                ГЛАВНАЯ
              </a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">
                ОБ АВТОРЕ
              </a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">
                РАБОТЫ
              </a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">
                ПРОЦЕСС
              </a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">
                КОНТАКТЫ
              </a>
            </li>
          </ul>
        </nav>
      </div>
      <div class="header-info">
        <img class="image-info" src="/img/Frame.png" alt="Frame-img" />
        <div class="info-item">
          <h1>Дизайн и верстка</h1>
          <p>
            Lorem Ipsum - это текст-"рыба", часто используемый в печати и
            вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на
            латинице с начала XVI века.
          </p>
          <div class="info-bottom">
            <a href="#" class="btn-head">
              НАПИСАТЬ МНЕ
            </a>
          </div>
        </div>
      </div>
    </div>
  </header>
);
const Main = () => (
  <main>
    <section class="about">
      <div class="container">
        <h2>Обо мне</h2>
        <p>
          Lorem Ipsum - это текст-"рыба", часто используемый в печати и
          вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на
          латинице с начала XVI века.
        </p>
      </div>
    </section>
    <section class="about-item">
      <div class="container img-item">
        <img class="numbers-item" src="/img/Project.png" alt="about-item" />
        <img class="numbers-item" src="/img/Project.png" alt="about-item" />
        <img class="numbers-item" src="/img/Project.png" alt="about-item" />
        <img class="numbers-item" src="/img/Project.png" alt="about-item" />
        <img class="numbers-item" src="/img/Project.png" alt="about-item" />
        <img class="numbers-item" src="/img/Project.png" alt="about-item" />
      </div>
    </section>
    <section className="skill">
      <div className="container">
        <div className="row">
          <div className="col col-description">
            <header className="skill-header">
              <h2>Мои навыки</h2>
            </header>
            <div className="skill-box">
              <div className="skill-item">
                <span class="skill-label">Adobe Photoshop</span>
                <div className="skill-loader">
                  <div className="skill-load"></div>
                </div>
              </div>
              <div className="skill-item">
                <span class="skill-label">Adobe Photoshop</span>
                <div className="skill-loader">
                  <div className="skill-load"></div>
                </div>
              </div>
              <div className="skill-item">
                <span class="skill-label">Adobe Photoshop</span>
                <div className="skill-loader">
                  <div className="skill-load"></div>
                </div>
              </div>
              <div class="col col-img">
                <img
                  src="/img/Man.png"
                  alt="image-description "
                  className="img-man"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="media">
      <div class="container">
        <h3>Как я работаю</h3>
        <p>
          Lorem Ipsum - это текст-"рыба", часто используемый в печати и
          вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на
          латинице с начала XVI века.
        </p>
        <div class="media-img">
          <img src="/img/Code.png" width="1110" height="600" alt="media-img" />
          <img
            class="play-button"
            src="/img/play-button.png"
            alt="play-button"
          />
        </div>
      </div>
    </section>

    <section className="gallery">
      <div className="gallery-row">
        <a href="#" className="gallery-cols"></a>
        <a href="#" className="gallery-colf"></a>
        <a href="#" className="gallery-cols"></a>
        <a href="#" className="gallery-colf"></a>
        <a href="#" className="gallery-cols"></a>
        <a href="#" className="gallery-colf"></a>
        <a href="#" className="gallery-cols"></a>
        <a href="#" className="gallery-colf"></a>
      </div>
    </section>
    <section>
      <div class="microsoft">
        <img
          class="microsoft logo_1"
          src="/img/Microsoft.png"
          alt="microsoft-logo"
        />
        <img
          class="microsoft logo_2"
          src="/img/Microsoft.png"
          alt="microsoft-logo"
        />
        <img
          class="microsoft logo_3"
          src="/img/Microsoft.png"
          alt="microsoft-logo"
        />
        <img
          class="microsoft logo_4"
          src="/img/Microsoft.png"
          alt="microsoft-logo"
        />
      </div>
    </section>
  </main>
);
const Footer = () => (
  <footer class="footer">
    <div class="container">
      <div class="footer-list">
        <h4>Хотите веб-сайт?</h4>
        <p>
          Lorem Ipsum - это текст-"рыба", часто используемый в печати и
          вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на
          латинице с начала XVI века.
        </p>

        <form class="footer-form" action="#" method="post" name="info-client ">
          <input class="form-name" type="text" placeholder="Ваше имя" />
          <input class="form-mail" type="text" placeholder="Ваш e-mail" />
          <input class="form-textarea" type="text" placeholder="Cообщение" />

          <button class="btn-form" type="submit" form="form" value="Submit">
            Отправить
          </button>
        </form>
      </div>
    </div>
    <section class="bottom-section">
      <div class="container">
        <div class="bottom-area">
          <div class="contact">
            <p>Иванов Иван</p>
            <span>(с) 2018. Все права защищены.</span>
          </div>
          <div class="logo-bottom">
            <a href="#">
              <img src="/img/Vk.png" alt="vk-logo" />
            </a>
            <a href="#">
              <img src="/img/Vk.png" alt="vk-logo" />
            </a>
            <a href="#">
              <img src="/img/Vk.png" alt="vk-logo" />
            </a>
          </div>
        </div>
      </div>
    </section>
  </footer>
);
const App = () => (
  <div className="Wrapper">
    <Header />
    <Main />
    <Footer />
  </div>
);

export default App;