HW/Modul_Project/src/App.js

import './App.css';

function App() {
    return (
        <div className="wrapper">
            <Header />
            <main className="main">
                <Design />
                <AboutMe />
                <section className="group">
                    <Project />
                    <Project />
                    <Project />
                    <Project />
                    <Project />
                    <Project />
                    <Project />
                </section>
                <Skill />
                <Work />

                <section className="my_works">
                    <MyWorksImage img="image/second.png" alt="second" />
                    <MyWorksImage img="image/first.png" alt="first" />
                    <MyWorksImage img="image/second.png" alt="second" />
                    <MyWorksImage img="image/first.png" alt="first" />
                    <MyWorksImage img="image/first.png" alt="first" />
                    <MyWorksImage img="image/second.png" alt="second" />
                    <MyWorksImage img="image/first.png" alt="first" />
                    <MyWorksImage img="image/second.png" alt="second" />
                </section>

                <section className="microsoft">
                    <Image img="image/microsoft.png" alt="microsoft" />
                    <Image img="image/microsoft.png" alt="microsoft" />
                    <Image img="image/microsoft.png" alt="microsoft" />
                    <Image img="image/microsoft.png" alt="microsoft" />
                </section>
                <Contact />
            </main>
            <Footer />
        </div>

    );
}

const Header = () =>
    <header className="header">
        <div className="header-wrap">
            <a href="/#" className="logo">WD
            </a>
            <nav className="nav">
                <input type="checkbox" name="burger" id="burger"></input>
                <label htmlFor="burger" className="burger">
                    <span></span>
                </label>
                <ul className="nav-list">
                    <li className="nav-item">
                        <a href="/#" className="nav-link">ГЛАВНАЯ</a>
                    </li>
                    <li className="nav-item">
                        <a href="/#" className="nav-link">ОБ АВТОРЕ</a>
                    </li>
                    <li className="nav-item">
                        <a href="/#" className="nav-link">РАБОТА</a>
                    </li>
                    <li className="nav-item">
                        <a href="/#" className="nav-link">ПРОЦЕСС</a>
                    </li>
                    <li className="nav-item">
                        <a href="/#" className="nav-link">КОНТАКТЫ</a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>

const Design = () =>
    <section className="section-design">
        <div className="container-design">
            <div className="design-row">
                <div className="design-col-one">
                    <div className="design-bg"></div>
                </div>
                <div className="design-col-two">

                    <h1>Дизайн и верстка</h1>
                    <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum
                        является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
                    <Button name="НАПИСАТЬ МНЕ" />
                </div>
            </div>
        </div>
    </section>

const AboutMe = () =>
    <section className="about_me">
        <h1>Обо мне</h1>
        <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является
            стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
    </section>

const Project = () =>
    <ul className="group-list">
        <li className="group-item">
            <div className="group-img">
                <img src="image/group.png" alt="group"></img>
            </div>
            <div className="group-text">
                <h3>40+</h3>
                <p>Проектов</p>
            </div>
        </li>
    </ul>

const Skill = () =>
    <section className="section-skill">
        <div className="container">
            <div className="skill-row">
                <div className="skill-col">
                    <header className="sectio-header">
                        <h1 className="title">Мои навыки</h1>
                    </header>
                    <div className="skills">
                        <SkillItem />
                        <SkillItem />
                        <SkillItem />
                    </div>
                </div>
                <div className="skill-col">
                    <div className="skill-bg"></div>
                </div>
            </div>
        </div>
    </section>

const SkillItem = () =>
    <div className="skills-item">
        <span className="skill-title">Adobe Photoshop</span>
        <div className="skill-wrap">
            <div className="skill"></div>
        </div>
    </div>

const Work = () =>
    <section className="work">
        <div className="work-text">
            <h2>Как я работаю</h2>
            <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является
                стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
        </div>
        <div className="videosection">
            <video poster="image/Rectangle.png">
                <source src="video.mp4" type="video/mpeg"></source>
            </video>
            <div id="playbtn"></div>
        </div>
    </section>

const MyWorksImage = ({ img, alt }) =>
    <div className="my_works-img">
        <Image img={img} alt={alt} />
        <div className="eye-over">
            <Image img="image/eye.png" alt="eye" />
        </div>
    </div>

const Contact = () =>
    <section className="contact">
        <div className="contact-item">
            <div className="contact-text">
                <h2>Хотите веб-сайт?</h2>
                <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum
                    является
                    стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
            </div>
            <form>
                <input type="text" name="contactname" placeholder="Ваше имя"></input>
                <input type="email" name="contactmail" placeholder="Ваш e-mail"></input>
                <textarea placeholder="Сообщение"></textarea>
                <Button name="Отправить" />
            </form>
        </div>
    </section>

const Footer = () =>
    <footer className="footer">
        <div className="footer-name">
            <div className="footer-text">
                <h3>Иванов Иван</h3>
                <p>(с) 2018. Все права защищены.</p>
            </div>
        </div>
        <div className="footer-icon">
            <Image img="image/vk.png" alt="vk" />
            <Image img="image/vk.png" alt="vk" />
            <Image img="image/vk.png" alt="vk" />
        </div>
    </footer>


const Image = ({ img, alt }) => <img src={img} alt={alt}></img>

const Button = ({ name }) => <input className="btn-contact" type="submit" value={name}></input>

export default App;