|
@@ -0,0 +1,193 @@
|
|
|
|
+
|
|
|
|
+import './App.css';
|
|
|
|
+
|
|
|
|
+const Li = ({url, text}) =>
|
|
|
|
+<li class="header-nav__item">
|
|
|
|
+ <a href={url}>{text}</a>
|
|
|
|
+</li>
|
|
|
|
+
|
|
|
|
+const Banner_text = ({ id, text}) =>
|
|
|
|
+<div>
|
|
|
|
+ <span id={id} class="banner__text" >{text}
|
|
|
|
+ </span>
|
|
|
|
+ <span class="banner__lorem" >Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.
|
|
|
|
+ </span>
|
|
|
|
+</div>
|
|
|
|
+
|
|
|
|
+const Banner_box = ({ projects, text}) =>
|
|
|
|
+<div class="box">
|
|
|
|
+ <img src="img/analytics.svg" class="img__analytics" alt=""/>
|
|
|
|
+ <span class="projects__text">{projects}<br/>{text}</span>
|
|
|
|
+</div>
|
|
|
|
+
|
|
|
|
+const Skills = ({text}) =>
|
|
|
|
+<div class="skills-item">
|
|
|
|
+ <span class="skills-title">{text}</span>
|
|
|
|
+ <div class="skill-wrap">
|
|
|
|
+ <div class="skill" ></div>
|
|
|
|
+ </div>
|
|
|
|
+</div>
|
|
|
|
+
|
|
|
|
+const Img__box = ({src}) =>
|
|
|
|
+<div class="img__box">
|
|
|
|
+ <img src={src} alt=""/>
|
|
|
|
+ <img class="eye__img" src="img/eye.png" alt=""/>
|
|
|
|
+</div>
|
|
|
|
+
|
|
|
|
+function App() {
|
|
|
|
+ return (
|
|
|
|
+ <body>
|
|
|
|
+ <header>
|
|
|
|
+ <div class="conteiner">
|
|
|
|
+ <div class="header">
|
|
|
|
+ <div class="header__title" ></div>
|
|
|
|
+ <nav class="header-nav">
|
|
|
|
+ <ul>
|
|
|
|
+ <Li url="#" text="ГЛАВНАЯ"/>
|
|
|
|
+ <Li url="index.html#me" text="ОБ АВТОРЕ"/>
|
|
|
|
+ <Li url="index.html#my__work" text="РАБОТЫ"/>
|
|
|
|
+ <Li url="index.html#proces" text="ПРОЦЕСС"/>
|
|
|
|
+ <Li url="index.html#contats" text="КОНТАКТЫ"/>
|
|
|
|
+ </ul>
|
|
|
|
+ </nav>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </header>
|
|
|
|
+ <main class="main1">
|
|
|
|
+ <div class="banner-wrap" >
|
|
|
|
+ <div class="conteiner">
|
|
|
|
+ <div class="flex__box">
|
|
|
|
+ <div class="conteiner__images__pc">
|
|
|
|
+ <img src="img/Frame.svg" alt=""/>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="banner">
|
|
|
|
+ <Banner_text text='Дизайн и верстка'/>
|
|
|
|
+ <div class="banner-link-wrap">
|
|
|
|
+ <a href="#" class="banner__link btn-primary">НАПИСАТЬ МНЕ</a>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </main>
|
|
|
|
+ <main>
|
|
|
|
+ <div class="conteiner">
|
|
|
|
+ <div class="banner_me">
|
|
|
|
+ <Banner_text text='Обо мне' id='me'/>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </main>
|
|
|
|
+ <main class="main2">
|
|
|
|
+ <div class="conteiner">
|
|
|
|
+ <div class="projects">
|
|
|
|
+ <Banner_box projects='40+' text='Проектов'/>
|
|
|
|
+ <Banner_box projects='40+' text='Проектов'/>
|
|
|
|
+ <Banner_box projects='40+' text='Проектов'/>
|
|
|
|
+ <Banner_box projects='40+' text='Проектов'/>
|
|
|
|
+ <Banner_box projects='40+' text='Проектов'/>
|
|
|
|
+ <Banner_box projects='40+' text='Проектов'/>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </main>
|
|
|
|
+ <main class="main">
|
|
|
|
+ <section class="section-skill">
|
|
|
|
+ <div class="conteiner">
|
|
|
|
+ <div class="skill-row">
|
|
|
|
+ <div class="skill-col skill-text">
|
|
|
|
+ <span class="section-header">
|
|
|
|
+ <h1 class="title">Мои навыки</h1>
|
|
|
|
+ </span>
|
|
|
|
+ <div class="skills">
|
|
|
|
+ <Skills text='Adobe photoshop'/>
|
|
|
|
+ <Skills text='Adobe photoshop'/>
|
|
|
|
+ <Skills text='Adobe photoshop'/>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="skill-col">
|
|
|
|
+ <div class="skill-bg" ></div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </section>
|
|
|
|
+ </main>
|
|
|
|
+ <main class="main3">
|
|
|
|
+ <div class="conteiner">
|
|
|
|
+ <div class="banner_me">
|
|
|
|
+ <Banner_text id='my__work' text='Как я работаю'/>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="img__box__work">
|
|
|
|
+ <div class="img__work">
|
|
|
|
+ <img src="img/Rectangle 5.png" class="style123" alt=""/>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="img__play">
|
|
|
|
+ <img src="#" alt=""/>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </main>
|
|
|
|
+ <main id="proces" class="main4">
|
|
|
|
+ <div class="conteiner2">
|
|
|
|
+ <Img__box src="img/img1.png"/>
|
|
|
|
+ <Img__box src="img/img2.png"/>
|
|
|
|
+ <Img__box src="img/img1.png"/>
|
|
|
|
+ <Img__box src="img/img2.png"/>
|
|
|
|
+ <Img__box src="img/img2.png"/>
|
|
|
|
+ <Img__box src="img/img1.png"/>
|
|
|
|
+ <Img__box src="img/img2.png"/>
|
|
|
|
+ <Img__box src="img/img1.png"/>
|
|
|
|
+ </div>
|
|
|
|
+ </main>
|
|
|
|
+ <main>
|
|
|
|
+ <div class="conteiner">
|
|
|
|
+ <div class="microsoft__box">
|
|
|
|
+ <img src="img/microsoft.png" alt=""/>
|
|
|
|
+ <img src="img/microsoft.png" alt=""/>
|
|
|
|
+ <img src="img/microsoft.png" alt=""/>
|
|
|
|
+ <img src="img/microsoft.png" alt=""/>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </main>
|
|
|
|
+ <main class="main5">
|
|
|
|
+ <div class="conteiner">
|
|
|
|
+ <div class="banner_me">
|
|
|
|
+ <Banner_text id='contats' text='Хотите веб сайт?'/>
|
|
|
|
+ </div>
|
|
|
|
+ <section class="contact__form">
|
|
|
|
+ <div class="conteiner">
|
|
|
|
+ <form>
|
|
|
|
+ <div class="form__inputs">
|
|
|
|
+ <input class="input" placeholder="Ваше имя" type="text"/>
|
|
|
|
+ <input class="input" placeholder="Ваш e-mail" type="text"/>
|
|
|
|
+ <input class="last__input" placeholder="Сообщение" type="text"/>
|
|
|
|
+ </div>
|
|
|
|
+ </form>
|
|
|
|
+ <div class="form__inputs">
|
|
|
|
+ <a href="#" class="btn__form">О Т П Р А В И Т Ь</a>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </section>
|
|
|
|
+ </div>
|
|
|
|
+ </main>
|
|
|
|
+ <footer class="footer">
|
|
|
|
+ <main class="mainfooter">
|
|
|
|
+ <div class="conteiner">
|
|
|
|
+ <div class="footer__box">
|
|
|
|
+ <div class="footer__name__rights">
|
|
|
|
+ <span class="myname__text">Попович Антон</span>
|
|
|
|
+ <span class="rights__text">(с)2018. Все права защищены</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="vk__box">
|
|
|
|
+ <img src="img/VK.png" alt=""/>
|
|
|
|
+ <img src="img/VK.png" alt=""/>
|
|
|
|
+ <img src="img/VK.png" alt=""/>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </main>
|
|
|
|
+ </footer>
|
|
|
|
+ </body>
|
|
|
|
+
|
|
|
|
+ );
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+export default App;
|