|
@@ -0,0 +1,228 @@
|
|
|
+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;
|