|
@@ -1,24 +1,282 @@
|
|
|
-import logo from './logo.svg';
|
|
|
+
|
|
|
import './App.css';
|
|
|
+import logo from './image/WD.svg';
|
|
|
+import frame from './image/Frame.svg';
|
|
|
+import group from './image/Group.svg';
|
|
|
+import video from './image/video.png';
|
|
|
+import play from './image/Play.svg';
|
|
|
+import paper from './image/img-03.png';
|
|
|
+import notebook from './image/img-04.png';
|
|
|
+import microsoft from './image/Microsoft.png';
|
|
|
+import vk from './image/VK.svg';
|
|
|
+import men from './image/men_photo.jpg';
|
|
|
+
|
|
|
+
|
|
|
+const HeaderItem = ({children ='ГЛАВНАЯ', url='#'}) =>
|
|
|
+ <li className="header-item">
|
|
|
+ <a href={url} className="header-item">{children}</a>
|
|
|
+ </li>
|
|
|
+
|
|
|
+const Header = () =>
|
|
|
+ <header className="header">
|
|
|
+ <div className="container">
|
|
|
+ <div className="header-wrap">
|
|
|
+ <a href="#" className="logo">
|
|
|
+ <img src={logo} alt="image description" />
|
|
|
+ </a>
|
|
|
+ <nav className="nav">
|
|
|
+ <input type="checkbox" id="burger" className="burger-checkbox" />
|
|
|
+ <label for="burger" className="burger">
|
|
|
+ <span></span>
|
|
|
+ </label>
|
|
|
+ <ul className="header-list">
|
|
|
+ <HeaderItem/>
|
|
|
+ <HeaderItem>ОБ АВТОРЕ</HeaderItem>
|
|
|
+ <HeaderItem>РАБОТЫ</HeaderItem>
|
|
|
+ <HeaderItem>ПРОЦЕСС</HeaderItem>
|
|
|
+ <HeaderItem>КОНТАКТЫ</HeaderItem>
|
|
|
+ </ul>
|
|
|
+ </nav>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
+
|
|
|
+const SectionBanner = () =>
|
|
|
+
|
|
|
+ <div className="section-banner">
|
|
|
+ <div className="container">
|
|
|
+ <div className="banner-wrap">
|
|
|
+ <div className="col col--img">
|
|
|
+ <img src={frame} alt="image description" />
|
|
|
+ </div>
|
|
|
+ <div className="col col--description">
|
|
|
+ <header className="section-header">
|
|
|
+ <h1 className="title">Дизайн и верстка</h1>
|
|
|
+ </header>
|
|
|
+ <div className="holder">
|
|
|
+ <p>
|
|
|
+ Lorem Ipsum - это текст-"рыба", часто используемый в печати
|
|
|
+ и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для
|
|
|
+ текстов на латинице с начала XVI века.
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <a href="#" className="btn">НАПИСАТЬ МНЕ</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+const Article = ({children='Обо мне', text_p}) =>
|
|
|
+ <div class="about-me-text">
|
|
|
+ <header class="about-me-header">
|
|
|
+ <h2 class="title">{children}</h2>
|
|
|
+ </header>
|
|
|
+ <p>
|
|
|
+ {text_p}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+const SectionAboutMe = () =>
|
|
|
+ <section className="section-about-me">
|
|
|
+ <div className="container">
|
|
|
+ <Article text_p={'Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.'}/>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+const ProjectCol = ({children='#', quantity='40+', project_name='проектов'}) =>
|
|
|
+ <div className="project-col">
|
|
|
+ <div className="project-image">
|
|
|
+ <a href={children} target="_blank">
|
|
|
+ <img src={group} alt="image description" />
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div className="project-description">
|
|
|
+ <p>{quantity}</p>
|
|
|
+ <p>{project_name}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+const SectionProjects = () =>
|
|
|
+<section className="section-projects">
|
|
|
+ <div className="container">
|
|
|
+ <div className="projects-wrap">
|
|
|
+ <ProjectCol />
|
|
|
+ <ProjectCol />
|
|
|
+ <ProjectCol />
|
|
|
+ <ProjectCol />
|
|
|
+ <ProjectCol />
|
|
|
+ <ProjectCol />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+const SkillsThis = ({children='Adobe Photoshop'}) =>
|
|
|
+ <div className="skill-this">
|
|
|
+ <span className="skill-label">{children}</span>
|
|
|
+ <div className="skill-loader">
|
|
|
+ <div className="skill-load" style="width: 75%"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+const SectionSkill = () =>
|
|
|
+<section className="section-skill">
|
|
|
+ <div className="container">
|
|
|
+ <div className="skill-row">
|
|
|
+ <div className="skill-col skill-descr">
|
|
|
+ <header className="section-header">
|
|
|
+ <h2 className="title">Мои навыки</h2>
|
|
|
+ </header>
|
|
|
+ <div className="skill-box">
|
|
|
+ <SkillsThis/>
|
|
|
+ <SkillsThis/>
|
|
|
+ <SkillsThis/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="skill-col skill-img"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+const SectionVideo = () =>
|
|
|
+ <section className="section-video">
|
|
|
+ <div className="container">
|
|
|
+ <div className="video-wrap">
|
|
|
+ <Article text_p={'Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.'}> Как я работаю </Article>
|
|
|
+ <div className="video-img">
|
|
|
+ <img src={video} alt="image desription" />
|
|
|
+ <div className="video-play">
|
|
|
+ <a href="#">
|
|
|
+ <img src={play} alt="image description"
|
|
|
+ /></a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+const PaperImg = () =>
|
|
|
+ <a
|
|
|
+ href="#"
|
|
|
+ target="_blank"
|
|
|
+ className="col"
|
|
|
+ style={{ backgroundImage: `url(${paper})` }}
|
|
|
+ ></a>
|
|
|
+
|
|
|
+ const NotebookImg = () =>
|
|
|
+ <a
|
|
|
+ href="#"
|
|
|
+ target="_blank"
|
|
|
+ className="col"
|
|
|
+ style={{ backgroundImage: `url(${notebook})`}}
|
|
|
+ ></a>
|
|
|
+
|
|
|
+const SectionGallery = () =>
|
|
|
+<section className="section-gallery">
|
|
|
+ <div className="row">
|
|
|
+ <PaperImg/>
|
|
|
+ <NotebookImg/>
|
|
|
+ <PaperImg/>
|
|
|
+ <NotebookImg/>
|
|
|
+ <NotebookImg/>
|
|
|
+ <PaperImg/>
|
|
|
+ <NotebookImg/>
|
|
|
+ <PaperImg/>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+const MicrosoftImg = () =>
|
|
|
+ <div className="microsoft-img">
|
|
|
+ <a href="#" target="_blank">
|
|
|
+ <img src={microsoft} alt="image description"
|
|
|
+ /></a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+const SectionMicrosoft = () =>
|
|
|
+ <section className="section-microsoft">
|
|
|
+ <div className="container">
|
|
|
+ <div className="microsoft-wrap">
|
|
|
+ <MicrosoftImg/>
|
|
|
+ <MicrosoftImg/>
|
|
|
+ <MicrosoftImg/>
|
|
|
+ <MicrosoftImg/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+const SectionForm = () =>
|
|
|
+ <section className="section-form">
|
|
|
+ <div className="container">
|
|
|
+ <div className="form-wrap">
|
|
|
+ <Article text_p={'Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.'}> Хотите вэб-сайт? </Article>
|
|
|
+ <form action="#" className="form">
|
|
|
+ <div className="form-contacts">
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ name=""
|
|
|
+ id="name"
|
|
|
+ placeholder="Ваше имя"
|
|
|
+ />
|
|
|
+ <input
|
|
|
+ type="email"
|
|
|
+ name=""
|
|
|
+ id="email"
|
|
|
+ placeholder="Ваш e-mail"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <textarea
|
|
|
+ className="form-message"
|
|
|
+ placeholder="Сообщение"
|
|
|
+ name=""
|
|
|
+ id=""
|
|
|
+ cols="30"
|
|
|
+ rows="10"
|
|
|
+ ></textarea>
|
|
|
+ <div className="form-btn">
|
|
|
+ <button href="#" type="submit" className="btn">Отправить</button>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+const Icon = () =>
|
|
|
+ <a href="#" target="_blank">
|
|
|
+ <img src={vk} alt="image description" />
|
|
|
+ </a>
|
|
|
+
|
|
|
+const Footer = () =>
|
|
|
+<footer class="footer">
|
|
|
+ <div class="container">
|
|
|
+ <div class="footer-wrap">
|
|
|
+ <div class="footer-contacts">
|
|
|
+ <p>Иванов Иван</p>
|
|
|
+ <p><sub>(с)</sub> 2018. Все права защищены.</p>
|
|
|
+ </div>
|
|
|
+ <div class="social-networks">
|
|
|
+ <Icon/>
|
|
|
+ <Icon />
|
|
|
+ <Icon />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </footer>
|
|
|
|
|
|
function App() {
|
|
|
return (
|
|
|
- <div className="App">
|
|
|
- <header className="App-header">
|
|
|
- <img src={logo} className="App-logo" alt="logo" />
|
|
|
- <p>
|
|
|
- Edit <code>src/App.js</code> and save to reload.
|
|
|
- </p>
|
|
|
- <a
|
|
|
- className="App-link"
|
|
|
- href="https://reactjs.org"
|
|
|
- target="_blank"
|
|
|
- rel="noopener noreferrer"
|
|
|
- >
|
|
|
- Learn React
|
|
|
- </a>
|
|
|
- </header>
|
|
|
- </div>
|
|
|
+ <>
|
|
|
+ <Header />
|
|
|
+ <SectionBanner />
|
|
|
+ <SectionAboutMe />
|
|
|
+ <SectionProjects />
|
|
|
+ {/* <SectionSkill /> */}
|
|
|
+ <SectionVideo />
|
|
|
+ <SectionGallery />
|
|
|
+ <SectionMicrosoft />
|
|
|
+ <SectionForm />
|
|
|
+ <Footer />
|
|
|
+ </>
|
|
|
);
|
|
|
}
|
|
|
|