HW/React_верстка/src/App.js

import './App.css';
import wd from './img/WD.svg';
import frame from './img/Frame.svg'
import group from './img/Group.png'
import imgSkill from './img/skills.png'
import code from './img/code.jpg'
import vector from './img/Vector.png'
import img1 from './img/img1.jpg'
import img2 from './img/img2.jpg'
import microsoft from './img/microsoft.svg'
import vk from './img/vk.svg'


const HeaderItem = ({children = 'Главная', url = '#'}) => 
    <li class="header-item">
        <a href={url}>{children}</a>
    </li>

const Header = () => 
    <header class="header">
    <div class="container">
        <div class="header-wrap">
        <a class="logo" href="#">
            <img class="wd" src={wd} alt="logo" />
        </a>
        <nav class="nav">
            <input type="checkbox" id="burger" class="burger-checkbox" />
            <label for="burger" class="burger">
                <span></span>
            </label>
            <ul class="header-list">
            <HeaderItem>
                Главная
            </HeaderItem>
            <HeaderItem>
                Об Авторе
            </HeaderItem>
            <HeaderItem>
                Работы
            </HeaderItem>
            <HeaderItem>
                Процесс
            </HeaderItem>
            <HeaderItem>
                Контакты
            </HeaderItem>
            </ul>
        </nav>
        </div>
    </div>
    </header>

const Main = () =>
    <main class="main">
        <SectionBanner />
        <SectionLorem />
        <SectionProject />
        <SectionSkill />
        <SectionWork />
        <SectionGallery />
        <SectionBrand />
        <SectionInput />
    </main>

const SectionBanner = () =>
    <section class="section-banner">
        <div class="container">
            <div class="banner-wrap">
                <div class="col col--img">
                    <img src={frame} alt="image description" />
                </div>
                <div class="col col--discription">
                    <header class="section-header">
                    <h1 class="tittle">Дизайн и верстка</h1>
                    </header>
                    <div class="holder">
                    <p class="lorem-banner">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является
                        стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
                    <a href="#" class="btn">НАПИСАТЬ МНЕ</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

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

const SectionProject = () => 
    <section class="section-project">
        <Project />
        <Project />
        <Project />
        <Project />
        <Project />
        <Project />
    </section>

const Project = () =>
    <div class="project">
        <div class="img-project">
            <img src={group} alt="image description" />
        </div>
        <div class="text-project">
            <h3>40+</h3>
        <p class="proj">проектов</p>
        </div>
    </div>

const SectionSkill = () =>
    <section class="section-skill">
        <div class="container">
            <div class="skill-row">
                <div class="skill-col skill-descr">
                    <header class="section-header">
                        <h2 class="tittle">Мои Навыки</h2>
                    </header>
                    <div class="skill-box">
                        <SkillBox />
                        <SkillBox />
                        <SkillBox />
                    </div>
                </div>
                <div class="skill-col skill-img">
                    <img src={imgSkill} alt="image description" />
                </div>
            </div>
        </div>
    </section>
    
const SkillBox = () =>
    <div class="skill-this">
        <span class="skill-label">Adobe Photoshop</span>
        <div class="skill-loader">
            <div class="skill-load" /* style="width: 75%;" */></div>
        </div>
    </div>

const SectionWork = () =>
    <section class="section-work">
        <div class="work">
            <div class="text-work">
                <h2 class="present">Как я работаю</h2>
                <p class="lorem">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum
                является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
            </div>
            <div class="img-work">
                <img src={code} alt="image description" class="code-img" />
                <img src={vector} alt="image description" class="play" />
            </div>
        </div>
    </section>

const SectionGallery = () =>
    <section class="section-gallery">
        <div class="row">
            <Gallery1> 
                {img1} 
            </Gallery1>
            <Gallery1> 
                {img2} 
            </Gallery1>
            <Gallery1> 
                {img1} 
            </Gallery1>
            <Gallery1> 
                {img2} 
            </Gallery1>
            <Gallery1> 
                {img2} 
            </Gallery1>
            <Gallery1> 
                {img1} 
            </Gallery1>
            <Gallery1> 
                {img2} 
            </Gallery1>
            <Gallery1> 
                {img1} 
            </Gallery1>
        </div>
    </section>

const Gallery1 = ({children = {img1}, url = '#'}) =>
    <a href={url} class="gal">
        <img src={children} alt="image description" class="play" />
    </a>

const SectionBrand = () =>
    <section class="section-brand">
        <MicrososftImg />
        <MicrososftImg />
        <MicrososftImg />
        <MicrososftImg />
    </section>

const MicrososftImg = () =>
    <img src={microsoft} alt="image description" class="img-label" />

const SectionInput = () =>
    <section class="section-input">
        <div class="form">
            <div class="text-form">
                <h2 class="present-form">Хотите веб-сайт?</h2>
                <p class="lorem">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum
                является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
            </div>
            <div class="input-form">
                <input class="input-name" type="text" placeholder="Ваше имя" />
                <input class="input-mail" type="text" placeholder="Ваш e-mail" />
            </div>
            <div class="message-form">
                <textarea class="textarea" name="#" id="text-mail" cols="30" rows="10" placeholder="Сообщение"></textarea>
            </div>
            <div class="btn-form">
                <a href="#" class="btn">Отправить</a>
            </div>
        </div>
    </section>

const Footer = () =>
    <footer class="footer">
        <div class="footer-name">
            <h3>Иван Иванов</h3>
            <h4>(с) 2018. Все права защищены.</h4>
        </div>

        <div class="footer-logo">
            <Logo />
            <Logo />
            <Logo />
        </div>
    </footer>

const Logo = ({url = '#'}) =>
    <a class="logo-vk" href={url}>
        <img class="vk" src={vk} alt="image description" />
    </a>     

const Wrapper = () => 
    <div class="wrapper">
        <Header />
        <Main />
        <Footer />
    </div>

function App() {
  return (
    <Wrapper />
  );
}

export default App;