|
|
@@ -1,25 +1,215 @@
|
|
|
import logo from './logo.svg';
|
|
|
import './App.css';
|
|
|
|
|
|
+const Header = () =>
|
|
|
+ <header className="header">
|
|
|
+ <img src="svg/WD.svg" className="logo" alt="logo" /><a href="#"> </a>
|
|
|
+ <nav className="main-nav hamburger-menu">
|
|
|
+ <input id="menu__toggle" type="checkbox"/>
|
|
|
+ <label className="menu__btn" htmlFor="menu__toggle">
|
|
|
+ <span></span>
|
|
|
+ </label>
|
|
|
+ <ul className="menu_box">
|
|
|
+ <NavItem url="/"> Главная </NavItem>
|
|
|
+ <NavItem url="/about"> Об авторе </NavItem>
|
|
|
+ <NavItem url="/work"> Работы </NavItem>
|
|
|
+ <NavItem url="/process"> Процесс </NavItem>
|
|
|
+ <NavItem url="/contact"> Контакты </NavItem>
|
|
|
+ </ul>
|
|
|
+ </nav>
|
|
|
+ </header>
|
|
|
+
|
|
|
+const NavItem = ({children, url}) =>
|
|
|
+ <li>
|
|
|
+ <a className="nav" href={url}> {children} </a>
|
|
|
+ </li>
|
|
|
+
|
|
|
+const Icon = () =>
|
|
|
+ <div className="icon-block">
|
|
|
+ <img src="svg/Group(1).svg" alt="icon" className="icon-block-pic" />
|
|
|
+ <div className="amount">
|
|
|
+ <p> 40+ <br/> проектов </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+const SkillItem = () =>
|
|
|
+ <div className="skill-item">
|
|
|
+ <p className="skill-text">Adobe Photoshop</p>
|
|
|
+ <div className="skill-load">
|
|
|
+ <div className="skill-progress"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+const MicrosoftImg = () =>
|
|
|
+ <div>
|
|
|
+ <img src="svg/microsoft.svg" alt="microsoft" className="microsoft-img" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+const View = () =>
|
|
|
+ <div className="view">
|
|
|
+ <img src="svg/view.svg" className="view-pic" alt="view" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+const ImgLaptop = () =>
|
|
|
+ <div className="gallery-img-sticky">
|
|
|
+ <img src="img/Rectangle7.3.jpg" className="gallery-item" alt="gallery" />
|
|
|
+ <View />
|
|
|
+ </div>
|
|
|
+
|
|
|
+const ImgHand = () =>
|
|
|
+ <div className="gallery-img">
|
|
|
+ <img src="img/Rectangle7.jpg" className="gallery-item" alt="gallery" />
|
|
|
+ <View />
|
|
|
+ </div>
|
|
|
+
|
|
|
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 className="page-wrapper">
|
|
|
+ <section className="container_banner">
|
|
|
+ <div className="wrapper-banner">
|
|
|
+ <Header />
|
|
|
+
|
|
|
+ <section className="banner">
|
|
|
+ <div className="banner-img banner-block">
|
|
|
+ <img src="svg/Frame.svg" alt="computer" />
|
|
|
+ </div>
|
|
|
+ <div className="banner-text banner-block">
|
|
|
+ <h1 className="banner-title"> Дизайн и верстка </h1>
|
|
|
+ <p className="banner-text"> Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
|
|
|
+ Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.
|
|
|
+ </p>
|
|
|
+ <a href="#" className="btn"> Написать мне </a>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <main>
|
|
|
+ <section className="container_about">
|
|
|
+ <div className="wrapper">
|
|
|
+ <section className="about-block">
|
|
|
+ <h2 className="title"> Обо мне </h2>
|
|
|
+ <p className="text">
|
|
|
+ Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является
|
|
|
+ стандартной
|
|
|
+ "рыбой" для текстов на латинице с начала XVI века.
|
|
|
+ </p>
|
|
|
+ </section>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section className="container_icon">
|
|
|
+ <div className="wrapper-icon">
|
|
|
+ <section className="icon-project">
|
|
|
+ <Icon />
|
|
|
+ <Icon />
|
|
|
+ <Icon />
|
|
|
+ <Icon />
|
|
|
+ <Icon />
|
|
|
+ <Icon />
|
|
|
+ </section>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section className="container_skill">
|
|
|
+ <div className="wrapper">
|
|
|
+ <section className="skill-block">
|
|
|
+ <div className="skill">
|
|
|
+ <div className="skill-list">
|
|
|
+ <h2 className="skill-title title"> Мои навыки </h2>
|
|
|
+ <SkillItem />
|
|
|
+ <SkillItem />
|
|
|
+ <SkillItem />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="my-photo">
|
|
|
+ <img src="img/photo.jpg" alt="photo" />
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section className="container_video">
|
|
|
+ <div className="wrapper">
|
|
|
+ <section className="video-block">
|
|
|
+ <h2 className="title"> Как я работаю </h2>
|
|
|
+ <p className="text video-text">
|
|
|
+ Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является
|
|
|
+ стандартной
|
|
|
+ "рыбой" для текстов на латинице с начала XVI века.
|
|
|
+ </p>
|
|
|
+ <div className="video-pic">
|
|
|
+ <img src="svg/Rectangle%205.svg" className="video" alt="video" />
|
|
|
+ <img src="svg/play-button.svg" className="play_button" alt="play" />
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section className="container_gallery">
|
|
|
+ <div className="wrapper_gallery">
|
|
|
+ <section className="section-gallery">
|
|
|
+ <div className="gallery-list">
|
|
|
+ <ImgLaptop />
|
|
|
+ <ImgHand />
|
|
|
+ <ImgLaptop />
|
|
|
+ <ImgHand />
|
|
|
+ <ImgHand />
|
|
|
+ <ImgLaptop />
|
|
|
+ <ImgHand />
|
|
|
+ <ImgLaptop />
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <div className="container_microsoft">
|
|
|
+ <div className="wrapper-microsoft">
|
|
|
+ <section className="microsoft-block">
|
|
|
+ <MicrosoftImg />
|
|
|
+ <MicrosoftImg />
|
|
|
+ <MicrosoftImg />
|
|
|
+ </section>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="container_form">
|
|
|
+ <div className="wrapper_form">
|
|
|
+ <section className="form-block">
|
|
|
+ <h2 className="title"> Хотите веб-сайт? </h2>
|
|
|
+ <p className="text"> Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
|
|
|
+ Lorem Ipsum является
|
|
|
+ стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
|
|
|
+ <div className="form">
|
|
|
+ <form>
|
|
|
+ <div className="block-name">
|
|
|
+ <input name="name" placeholder="Ваше имя" className="name" />
|
|
|
+ <input name="email" type="email" placeholder="Ваш E-Mail" className="email" />
|
|
|
+ </div>
|
|
|
+ <p><textarea name="message"> </textarea></p>
|
|
|
+ <div><a href="#" className="btn btn-form"> Отправить </a></div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </main>
|
|
|
+ <footer className="footer">
|
|
|
+ <div className="footer-wrapper">
|
|
|
+ <section className="footer-block">
|
|
|
+ <div className="footer-name">
|
|
|
+ <p> Иван Иванов </p>
|
|
|
+ <p> (с) 2018. Все права защищены.</p>
|
|
|
+ </div>
|
|
|
+ <div className="footer-icon">
|
|
|
+ <img src="svg/icon.svg" className="footer-pic" alt="icon" />
|
|
|
+ <img src="svg/icon.svg" className="footer-pic" alt="icon" />
|
|
|
+ <img src="svg/icon.svg" className="footer-pic" alt="icon" />
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </div>
|
|
|
+ </footer>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
);
|
|
|
}
|
|
|
-
|
|
|
export default App;
|
