React/src/App.js

import "./App.css";

const Header = () => (
  <header class="header">
    <div class="header_container">
      <div class="logo">
        <a href="#">
          <img src="/img/WD.png" alt="logo" />
        </a>
      </div>
      <nav class="navigation">
        <input type="checkbox" class="toggle-menu" />
        <div class="hamburger"></div>
        <ul class="menu">
          <li>
            <a href="#mainpage">Головна</a>
          </li>
          <li>
            <a href="#aboutme">Про автора</a>
          </li>
          <li>
            <a href="#process">Роботи</a>
          </li>
          <li>
            <a href="#howiwork">Процес</a>
          </li>
          <li>
            <a href="#footer">Контакти</a>
          </li>
        </ul>
      </nav>
    </div>
  </header>
);

const Mainpage = () => (
  <section id="mainpage">
    <div class="mainpage_container _container">
      <div class="mainpage_container__notelogo">
        <img src="/img/Notebook.png" alt="Notebook" class="notelogo_note" />
      </div>
      <div class="mainpage_container__information">
        <div class="mainpage_container__title">Дизайн та верстка</div>
        <div class="mainpage_container__description">
          <p>
            Lorem Ipsum - це текст-"риба", який часто використовують у друку та
            веб-дизайні. Lorem Ipsum є стандартною "рибою" для текстів
            латинницею з початку XVI сторіччя.
          </p>
        </div>
        <a href="https://t.me/AlekseyL2198" class="link_btn">
          Написати мені
        </a>
      </div>
    </div>
  </section>
);

const DescriptionInformation = ({ title, children }) => (
  <>
    <div class="description__title">{title}</div>
    <div class="description__text">
      <p>{children}</p>
    </div>
  </>
);

const AboutMe = () => (
  <section id="aboutme">
    <div class="aboutme_description _container">
      <DescriptionInformation title="Про мене">
        Lorem Ipsum - це текст-"риба", який часто використовують у друку та
        веб-дизайні. Lorem Ipsum є стандартною "рибою" для текстів латинницею з
        початку XVI сторіччя.
      </DescriptionInformation>
    </div>
  </section>
);

const Projectblock = () => (
  <>
    <div class="projects_description">
      <div
        class="projects_description__pict"
        style={{
          background:
            "url(/img/icons/projects.svg) no-repeat scroll 0% 0%, rgba(0, 0, 0, 0) none no-repeat scroll 0% 0%",
        }}
      ></div>
      <div class="projects_description__about">
        <h3 class="projects_description__title">40+</h3>
        <p class="projects_description__text">проєктів</p>
      </div>
    </div>
  </>
);

const Projects = () => (
  <section class="projects" id="process">
    <div class="projects_row _container">
      <Projectblock></Projectblock>
      <Projectblock></Projectblock>
      <Projectblock></Projectblock>
      <Projectblock></Projectblock>
      <Projectblock></Projectblock>
      <Projectblock></Projectblock>
    </div>
  </section>
);

const SkillItem = () => (
  <div class="skills-item">
    <span class="skill-title">Adobe Photoshop</span>
    <div class="skill-wrap">
      <div class="skill" style={{ width: "85%" }}></div>
    </div>
  </div>
);

const SkillsBlock = () => (
  <section class="section-skill">
    <div class="container">
      <div class="skill-row">
        <div class="skill-coll skill-text">
          <header class="section-header">
            <h1 class="title">Мої навички</h1>
          </header>
          <div class="skills">
            <SkillItem></SkillItem>
            <SkillItem></SkillItem>
            <SkillItem></SkillItem>
          </div>
        </div>
        <div
          class="skill-coll skill-bg"
          style={{
            background:
              "url(/img/Rectangle.png) no-repeat scroll 0% 0%, rgba(0, 0, 0, 0) none no-repeat scroll 0% 0%",
          }}
        ></div>
      </div>
    </div>
  </section>
);

const HowiWork = () => (
  <section id="howiwork">
    <div class="howiwork_container _container">
      <div class="howiwork_description">
        <DescriptionInformation title="Як я працюю">
          Lorem Ipsum - це текст-"риба", який часто використовують у друку та
          веб-дизайні. Lorem Ipsum є стандартною "рибою" для текстів латинницею
          з початку XVI сторіччя.
        </DescriptionInformation>
      </div>
      <div class="howiwork_video">
        <div
          class="howiwork_button"
          style={{ background: "url(/img/icons/play-button.png)" }}
        ></div>
      </div>
    </div>
  </section>
);

const PhotoRow1 = () => (
  <div class="photo_row1">
    <div class="photo_row__straight notes__eye">
      <div class="eye"></div>
    </div>
    <div class="photo_row__straight notebooks__eye">
      <div class="eye"></div>
    </div>
    <div class="photo_row__straight notes__eye">
      <div class="eye"></div>
    </div>
    <div class="photo_row__straight notebooks__eye">
      <div class="eye"></div>
    </div>
  </div>
);

const PhotoRow2 = () => (
  <div class="photo_row2">
    <div class="photo_row__straight notebooks__eye">
      <div class="eye"></div>
    </div>
    <div class="photo_row__straight notes__eye">
      <div class="eye"></div>
    </div>
    <div class="photo_row__straight notebooks__eye">
      <div class="eye"></div>
    </div>
    <div class="photo_row__straight notes__eye">
      <div class="eye"></div>
    </div>
  </div>
);

const Photo = () => (
  <section class="photo">
    <div class="photo_container _container">
      <PhotoRow1></PhotoRow1>
      <PhotoRow2></PhotoRow2>
    </div>
  </section>
);

const PartnerCard = () => (
  <>
    <a href="https://www.microsoft.com/uk-ua" class="logo_link">
      <div
        class="microsoftlogo"
        style={{ background: "url(/img/Microsoft_logo.png)" }}
      ></div>
    </a>
  </>
);

const Partners = () => (
  <section class="microsoft_logo">
    <div class="microsoft_logocontainer _container">
      <PartnerCard></PartnerCard>
      <PartnerCard></PartnerCard>
      <PartnerCard></PartnerCard>
      <PartnerCard></PartnerCard>
    </div>
  </section>
);

const Form = () => (
  <>
    <section class="form">
      <div class="formcontainer _container">
        <div class="form_description">
          <DescriptionInformation title="Хочете сайт?">
            Lorem Ipsum - це текст-"риба", який часто використовують у друку та
            веб-дизайні. Lorem Ipsum є стандартною "рибою" для текстів
            латинницею з початку XVI сторіччя.
          </DescriptionInformation>
        </div>
        <div class="forminput_container">
          <form class="form_input">
            <div class="form_input__nameemail">
              <div class="form_input__name">
                <input type="text" name="name" value="Ваше ім'я" class="name" />
              </div>
              <div class="form_input__email">
                <input
                  type="text"
                  name="e-mail"
                  value="Ваш e-mail"
                  class="email"
                />
              </div>
            </div>
            <div class="form_input__message">
              <textarea name="message" id="form_message" class="message">
                Повідомлення
              </textarea>
            </div>
            <input type="submit" value="Надіслати" class="btn" />
          </form>
        </div>
      </div>
    </section>
  </>
);

const Footer = () => (
  <>
    <footer id="footer">
      <div class="footer_container _container">
        <div class="footer_about">
          <div class="footer_name">Литвин Олексій</div>
          <div class="footer_year">(с) 2018. Всі права захищені.</div>
        </div>
        <div class="footer_logo">
          <a href="https://uk-ua.facebook.com/" class="logo_link">
            <img src="/img/icons/footer__soc-buttons.svg" alt="Vk" />
          </a>
        </div>
      </div>
    </footer>
  </>
);

const Main = () => (
  <>
    <Mainpage />
    <AboutMe />
    <Projects />
    <SkillsBlock />
    <HowiWork />
    <Photo />
    <Partners />
    <Form />
  </>
);

function App() {
  return (
    <div className="App">
      <Header />
      <Main />
      <Footer />
    </div>
  );
}

export default App;