123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214 |
- 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;
|