|
@@ -0,0 +1,146 @@
|
|
|
|
+// import logo from './logo.svg';
|
|
|
|
+import './App.css'
|
|
|
|
+
|
|
|
|
+/* const fg = () =>
|
|
|
|
+
|
|
|
|
+ <header className="App-header">
|
|
|
|
+ <img src={logo} className="App-logo" alt="logo" />
|
|
|
|
+
|
|
|
|
+ </header> */
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+const Header = () =>
|
|
|
|
+ <div className = "Container-1">
|
|
|
|
+ <Page1></Page1>
|
|
|
|
+ <Obomne></Obomne>
|
|
|
|
+ <Project40></Project40>
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+const Page1 = () =>
|
|
|
|
+ <section className="page-1">
|
|
|
|
+ <Stranica1></Stranica1>
|
|
|
|
+ </section>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+const Stranica1 = () =>
|
|
|
|
+ <div >
|
|
|
|
+ <Navigation> </Navigation>
|
|
|
|
+ <CompText> </CompText>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+const Navigation = () =>
|
|
|
|
+ <div className = "navigation">
|
|
|
|
+ <span class="wb">WD</span>
|
|
|
|
+ <ul class="navigation-list">
|
|
|
|
+ <li class="nav-item">ГЛАВНАЯ</li>
|
|
|
|
+ <li class="nav-item">ОБ АВТОРЕ</li>
|
|
|
|
+ <li class="nav-item">РАБОТЫ</li>
|
|
|
|
+ <li class="nav-item">ПРОЦЕСС</li>
|
|
|
|
+ <li class="nav-item">КОНТАКТЫ</li>
|
|
|
|
+ </ul>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+const CompText = () =>
|
|
|
|
+ <div className="comp-text">
|
|
|
|
+ <div class="comp"> <img src="img/comp.png" alt="computer"/></div>
|
|
|
|
+ <div class="text-lorem">
|
|
|
|
+ <h1 class="design">Дизайн и верстка</h1>
|
|
|
|
+ <p class="lorem-ruba">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для
|
|
|
|
+ текстов на латинице с начала XVI века.</p>
|
|
|
|
+ <button class="button-1">НАПИСАТЬ МНЕ</button>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+const Obomne = () =>
|
|
|
|
+ <div className="obo-mne">
|
|
|
|
+ <h2 class="obo-mne-1">Обо мне</h2>
|
|
|
|
+ <p class="obo-mne-lorem">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной
|
|
|
|
+ "рыбой" для
|
|
|
|
+ текстов на латинице с начала XVI века</p>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+const Li = () =>
|
|
|
|
+
|
|
|
|
+ <li class="progect-li"><img src="numbers__item.png" alt=""/>
|
|
|
|
+ </li>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+const Project40 = () =>
|
|
|
|
+
|
|
|
|
+ <div className="project-40">
|
|
|
|
+ <ul className="progect-list" >
|
|
|
|
+ <Li></Li>
|
|
|
|
+ <Li></Li>
|
|
|
|
+ <Li></Li>
|
|
|
|
+ <Li></Li>
|
|
|
|
+ <Li></Li>
|
|
|
|
+ <Li></Li>
|
|
|
|
+ </ul>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ // Main
|
|
|
|
+
|
|
|
|
+const Main = () =>
|
|
|
|
+<>
|
|
|
|
+ <section className="section-skill">
|
|
|
|
+ <div className ="container"><SkillRow /> </div>
|
|
|
|
+ </section>
|
|
|
|
+ <section className = "container-work"></section>
|
|
|
|
+ <section></section>
|
|
|
|
+ <section></section>
|
|
|
|
+</>
|
|
|
|
+
|
|
|
|
+const SkillRow = () =>
|
|
|
|
+
|
|
|
|
+ <>
|
|
|
|
+ <div className ="skill-row">
|
|
|
|
+ <div className="skill-col skill-text">
|
|
|
|
+ <header class="section-header">
|
|
|
|
+ <h1 class="title">Мои навыки</h1>
|
|
|
|
+ </header>
|
|
|
|
+ <Skills />
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div class="skill-col">
|
|
|
|
+ <div class="skill-bg" style="background: url(img/Rectangle.jpg);"></div>
|
|
|
|
+ </div>
|
|
|
|
+</div>
|
|
|
|
+ </>
|
|
|
|
+
|
|
|
|
+/*const SkillBg = () =>
|
|
|
|
+ " background: url(img/Rectangle.jpg) "
|
|
|
|
+*/
|
|
|
|
+
|
|
|
|
+const Skills = () =>
|
|
|
|
+ <div className = "skills">
|
|
|
|
+ <SkillsItem />
|
|
|
|
+ <SkillsItem />
|
|
|
|
+ <SkillsItem />
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+const SkillsItem = () =>
|
|
|
|
+ <div className = "skills-item">
|
|
|
|
+ <span class="skill-title">Adobe Photoshop</span>
|
|
|
|
+ <div class="skill-wrap">
|
|
|
|
+ <div class="skill" style={"width: 85%;"}></div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+const App = () =>
|
|
|
|
+ <div className="App" >
|
|
|
|
+ <Header />
|
|
|
|
+ <Main />
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+export default App;
|