|
@@ -0,0 +1,214 @@
|
|
|
+import React from 'react';
|
|
|
+import "./style.css"
|
|
|
+
|
|
|
+
|
|
|
+const Project = ({imgSrc, alt, title, text}) =>
|
|
|
+ <div className="project">
|
|
|
+ <div className="prjct-img">
|
|
|
+ <img src={imgSrc} alt={alt} />
|
|
|
+ </div>
|
|
|
+ <div className="project-txt">
|
|
|
+ <p className="project-title">{title}</p>
|
|
|
+ <p className="project-txt">{text}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+const Arr = [
|
|
|
+ {
|
|
|
+ isPartView : true,
|
|
|
+ src: "./img/puzzle.png"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ isPartView : false,
|
|
|
+ src: "./img/dark-lap.png",
|
|
|
+ src2: "./img/view.png"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ isPartView : true,
|
|
|
+ src: "./img/puzzle.png"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ isPartView : true,
|
|
|
+ src: "./img/laptop.png"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ isPartView : true,
|
|
|
+ src: "./img/puzzle.png"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ isPartView : true,
|
|
|
+ src: "./img/laptop.png"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ isPartView : true,
|
|
|
+ src: "./img/puzzle.png"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ isPartView : true,
|
|
|
+ src: "./img/laptop.png"
|
|
|
+ },
|
|
|
+]
|
|
|
+
|
|
|
+const Puzzle = ({src, alt, isPartView, src2}) => isPartView ?
|
|
|
+ <div className="part">
|
|
|
+ <img src={src} alt={alt} />
|
|
|
+ </div> : <div className="part view" >
|
|
|
+ <img src={src} alt={alt} className="dark-lap" />
|
|
|
+ <img src={src2} className="eye" alt={alt} />
|
|
|
+ </div>
|
|
|
+
|
|
|
+const Micro = ({src, alt}) =>
|
|
|
+ <img className="micr-img" src={src} alt={alt} />
|
|
|
+
|
|
|
+const Vk = ({src, alt}) =>
|
|
|
+ <div>
|
|
|
+ <img src={src} alt={alt} />
|
|
|
+ </div>
|
|
|
+const App = () => {
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+
|
|
|
+
|
|
|
+ <div className="header-bg">
|
|
|
+ <div className="header container">
|
|
|
+ <div className="left">
|
|
|
+ <img src="img/WD.png" alt="logo" />
|
|
|
+ </div>
|
|
|
+ <div className="right">
|
|
|
+ <input className="check" type="checkbox" id="burger" />
|
|
|
+ <label htmlFor="burger" className="burger">
|
|
|
+ <span></span>
|
|
|
+ </label>
|
|
|
+ <li className="nav">
|
|
|
+ <ul className="nav-text">главная</ul>
|
|
|
+ <ul className="nav-text"><a href="#about">об авторе</a> </ul>
|
|
|
+ <ul className="nav-text"><a href="#prjckt">работы</a> </ul>
|
|
|
+ <ul className="nav-text"><a href="#work">процесс</a> </ul>
|
|
|
+ <ul className="nav-text"><a href="#footer">контакты</a> </ul>
|
|
|
+ </li>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="design container">
|
|
|
+ <div className="disp">
|
|
|
+ <img src="img/Frame.svg" alt="display" />
|
|
|
+ </div>
|
|
|
+ <div className="txt">
|
|
|
+ <p className="design-title">Дизайн и верстка</p>
|
|
|
+ <p className="design-txt">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
|
|
|
+ <a href="#" className="btn">написать мне</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="about container">
|
|
|
+ <p className="about-title" id="about">Обо мне</p>
|
|
|
+ <p className="about-txt">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
|
|
|
+ </div>
|
|
|
+ <div className="bg">
|
|
|
+ <div className="project-list container" id="prjckt">
|
|
|
+ {
|
|
|
+ new Array(6).fill(0).map(item => <Project imgSrc="img/project.png" alt="project" title="40+" text="проектов"/>)
|
|
|
+ }
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <main className="main">
|
|
|
+ <section className="section-skill">
|
|
|
+ <div className="container">
|
|
|
+ <div className="skill-row">
|
|
|
+ <div className="skill-col skill-text">
|
|
|
+ <header className="section-header">
|
|
|
+ <h1 className="title">
|
|
|
+ Мои навыки
|
|
|
+ </h1>
|
|
|
+ </header>
|
|
|
+ <div className="skills">
|
|
|
+ <div className="skills-item">
|
|
|
+ <span className="skill-title">Adobe Photoshop</span>
|
|
|
+ <div className="skill-wrap">
|
|
|
+ <div className="skill" style={{ width: '85%' }}> </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="skills-item">
|
|
|
+ <span className="skill-title">Adobe Photoshop</span>
|
|
|
+ <div className="skill-wrap">
|
|
|
+ <div className="skill" style={{ width: '85%' }}> </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="skills-item">
|
|
|
+ <span className="skill-title">Adobe Photoshop</span>
|
|
|
+ <div className="skill-wrap">
|
|
|
+ <div className="skill" style={{ width: '85%' }}> </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="skill-col">
|
|
|
+ <div className="skill-bg" style={{ backgroundImage: "url(img/Rectangle.png)" }}> </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </main>
|
|
|
+ <div className="header-bg">
|
|
|
+ <div className="work container" id="work">
|
|
|
+ <p className="design-title">Как я работаю</p>
|
|
|
+ <p className="design-txt center">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
|
|
|
+ <div className="video">
|
|
|
+ <img src="img/video.png" className="video-bg" alt="video" />
|
|
|
+ <img src="img/triangle.png" className="video-triangle" alt="triangle" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="puzzle">
|
|
|
+ {
|
|
|
+ Arr.map(item => <Puzzle src={item.src} alt="puzzle" src2={item.src2} isPartView={item.isPartView} />)
|
|
|
+ }
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div className="microsoft container">
|
|
|
+ {
|
|
|
+ new Array(4).fill(0).map(item =><Micro src="img/microsoft.png" alt="microsoft" />)
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ <div className="header-bg">
|
|
|
+ <div className="container">
|
|
|
+ <div className="textar">
|
|
|
+ <p className="design-title">Хотите веб-сайт?</p>
|
|
|
+ <p className="design-txt center">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
|
|
|
+ </div>
|
|
|
+ <div className="cont">
|
|
|
+ <div className="text-top">
|
|
|
+ <input type="text" name="username" className="inp" placeholder="Ваше имя" />
|
|
|
+ <input type="text" name="e-mail" className="inp" placeholder="Ваш e-mail" />
|
|
|
+ </div>
|
|
|
+ <div className="text-bot">
|
|
|
+ <input type="text" name="Message" className="inp-bot" placeholder="Сообщение" />
|
|
|
+ </div>
|
|
|
+ <a href="#" className="btn mid">отправить</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="bg">
|
|
|
+ <div className="container footer" id="footer">
|
|
|
+ <div className="bot-left">
|
|
|
+ <p className="bot-title">Иванов Иван</p>
|
|
|
+ <p className="bot-txt">(с) 2018. Все права защищены.</p>
|
|
|
+ </div>
|
|
|
+ <div className="bot-right">
|
|
|
+ {
|
|
|
+ new Array(3).fill(0).map(item =><Vk src="./img/vk.png" alt="microsoft"/>)
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </>
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+export default App;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|