import logo from './logo.svg';
import './App.css';


const NavItemName = ({NavLink, NavLinkName, title}) =>
    <>
        <li className="nav-item"><a href={NavLink} className="nav-link" title={title}>{NavLinkName}</a></li>
    </>

const SkillName = ({children}) =>
    <>
        <div className="skills-item">
            <span className="skill-title">{children}</span>
            <div className="skill-wrap">
            <div className="skill"></div>
            </div>
        </div>
    </>

const ProjectName = ({value, project, classIconFont}) => 
    <>

        <li className="project-item">
            <i className={classIconFont}></i>
            <div className="project-text">
                <p className="project-num">{value}</p>
                <span>{project}</span>
            </div>
        </li>
    </>

const ImageBox = ({img}) =>
    <>
        <div className="collage-box">
            <img className=" img-item" src={img} alt="" />
            <div className="color-eye">
                <i className="icon-view"></i>
            </div>
        </div>
    </>

const PartnerCard = ({partnerLink, img}) => 
    <>
        <div className="mic-logo_img">
            <a href={partnerLink}><img src={img} alt="logo" className="mic-img"/></a>
        </div>
    </>

const App = () =>
    <div className="App">
    
    <div className="wrapper">
        <header className="header">
            <section className="section-nav">
                <div className="conteiner">
                    <div className="header-wrap">
                        <a href="#" className="text-logo">WD</a>
                        <nav className="nav">
                            <input type="checkbox" id="burger" />
                            <label htmlFor="burger" className="burger">
                                <span></span>
                            </label>
                               <ul className="nav-list">
                                    <NavItemName NavLinkName="Главная" NavLink="#" title="Главная"/>
                                    <NavItemName NavLinkName="Об авторе" NavLink="#" title="Об авторе"/>
                                    <NavItemName NavLinkName="Работы" NavLink="#" title="Работы"/>
                                    <NavItemName NavLinkName="Процесс" NavLink="#" title="Процесс"/>
                                    <NavItemName NavLinkName="Контакты" NavLink="#" title="Контакты"/>
                              </ul>
                        </nav>
                    </div>
                </div>
            </section>
        </header>
        <main className="main">
            <section className="section-design">
                <div className="conteiner">
                    <div className="design-row">
                        <div className="design-col design-frame">
                            <img src="/images/frame.svg" className="laptop" alt="frame" />
                        </div>
                        <div className="design-col">
                            <h1 className="title-design">Дизайн и верстка</h1>
                            <div className="basic-text">
                                <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и
                                    вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с
                                    начала
                                    XVI века.</p>
                            </div>
                            <div className="design-btn">
                                <a href="#" className="design-link">Написать мне</a>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <section className="section-about">
                <div className="conteiner">
                    <div className="about-text">
                        <h2 className="title">Обо мне</h2>
                        <div className="basic-text">
                            <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
                                Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
                        </div>
                    </div>
                </div>
            </section>
            <section className="section-project">
                <div className="conteiner">
                    <div className="project-row">
                        <ul className="project-list">
                            <ProjectName value="40+" project="проектов" classIconFont="icon-project"/>
                            <ProjectName value="40+" project="проектов" classIconFont="icon-project"/>
                            <ProjectName value="40+" project="проектов" classIconFont="icon-project"/>
                            <ProjectName value="40+" project="проектов" classIconFont="icon-project"/>
                            <ProjectName value="40+" project="проектов" classIconFont="icon-project"/>
                            <ProjectName value="40+" project="проектов" classIconFont="icon-project"/>
                        </ul>
                    </div>
                </div>
            </section>
            <section className="section-skill">
                <div className="conteiner">
                    <div className="skill-row">
                        <div className="skill-col skill-text">
                            <header className="section-header">
                                <h2 className="title">Мои навыки</h2>
                            </header>
                                <SkillName> 
                                Adobe Photoshop
                                </SkillName> 
                                <SkillName> 
                                Adobe Photoshop
                                </SkillName> 
                                <SkillName> 
                                Adobe Photoshop
                                </SkillName> 
                        </div>
                        <div className="skill-col-img">
                            <div className="skill-bg"></div>
                        </div>
                    </div>
                </div>
            </section>
            <section className="section-howwork">
                <div className="conteiner">
                    <div className="howwork-text">
                        <h2 className="title">Как я работаю</h2>
                        <div className="basic-text">
                            <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
                                Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
                        </div>
                    </div>
                    <div className="howwork-bg">
                        <i className="icon-Vector"></i>
                    </div>
                </div>
            </section>
            <section className="section-collage">
                <div className="conteiner-collage">
                    <div className="img-bar">
                        <ImageBox img="images/tasks.png" />
                        <ImageBox img="images/worktable.png" />
                        <ImageBox img="images/tasks.png" />
                        <ImageBox img="images/worktable.png" />
                        <ImageBox img="images/worktable.png" />
                        <ImageBox img="images/tasks.png" />
                        <ImageBox img="images/worktable.png" />
                        <ImageBox img="images/tasks.png" />
                    </div>
                    <div className="conteiner">
                        <div className="mic-logo">
                            <PartnerCard img="images/microsoft.png" partnerLink="#" />
                            <PartnerCard img="images/microsoft.png" partnerLink="#" />
                            <PartnerCard img="images/microsoft.png" partnerLink="#" />
                            <PartnerCard img="images/microsoft.png" partnerLink="#" />
                        </div>
                    </div>
                </div>
            </section>
            <section className="section-feedback">
                <div className="conteiner">
                    <div className="feedback-column">
                        <div className="feedback-text">
                            <h2 className="title">Хотите веб-сайт?</h2>
                            <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и
                                вэб-дизайне.
                                Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
                        </div>
                        <div className="feedback-form">
                            <form>
                                <div className="feedback-name ">
                                    <input className="feedback-input" type="text" placeholder="Ваше имя"/>
                                    <input className="feedback-input" type="text" placeholder="Ваш e-mail"/>
                                </div>
                                <div className="feedback-massage">
                                    <textarea className="feedback-area" placeholder="Сообщение"></textarea>
                                </div>
                                <button className="feedback-button">Отправить</button>
                            </form>
                        </div>
                    </div>
                </div>
            </section>
        </main>
        <footer className="footer">
            <section className="section-footer">
                <div className="conteiner">
                    <div className="footer-row">
                        <div className="footer-name">
                            <p className="copyrite-name">Иванов Иван</p>
                            <p className="copyrite-text">(с) 2018. Все права защищены.</p>
                        </div>
                        <ul className="footer-vk">
                            <li className="footer-item"><a href="#" className="icon-vk"></a></li>
                            <li className="footer-item"><a href="#" className="icon-vk"></a></li>
                            <li className="footer-item"><a href="#" className="icon-vk"></a></li>
                        </ul>
                    </div>
                </div>
            </section>
        </footer>
    </div>

    </div>


export default App;
