|
@@ -93,9 +93,9 @@ const Main = () =>
|
|
|
<section className="section-skill">
|
|
|
<div className ="container"><SkillRow /> </div>
|
|
|
</section>
|
|
|
- <section className = "container-work"></section>
|
|
|
- <section></section>
|
|
|
- <section></section>
|
|
|
+ <section className = "container-work"> <Work/> </section>
|
|
|
+ <section> <Blok5/> </section>
|
|
|
+ <section> <ContainerPole/> </section>
|
|
|
</>
|
|
|
|
|
|
const SkillRow = () =>
|
|
@@ -111,36 +111,120 @@ const SkillRow = () =>
|
|
|
</div>
|
|
|
|
|
|
<div class="skill-col">
|
|
|
- <div class="skill-bg" style="background: url(img/Rectangle.jpg);"></div>
|
|
|
+ <div class="skill-bg"></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="skills">
|
|
|
+ <div class="skills-item">
|
|
|
+ <span class="skill-title">Adobe Photoshop</span>
|
|
|
<div class="skill-wrap">
|
|
|
- <div class="skill" style={"width: 85%;"}></div>
|
|
|
+ <div class="skill" ></div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div class="skills-item">
|
|
|
+ <span class="skill-title">Adobe Photoshop</span>
|
|
|
+ <div class="skill-wrap">
|
|
|
+ <div class="skill" ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="skills-item">
|
|
|
+ <span class="skill-title">Adobe Photoshop</span>
|
|
|
+ <div class="skill-wrap">
|
|
|
+ <div class="skill" ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+const Work = () =>
|
|
|
+
|
|
|
+ <div class="work">
|
|
|
+ <div class="work-text">
|
|
|
+ <h2 class="work-h2">Как я работаю</h2>
|
|
|
+ <p class="work-p">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для
|
|
|
+ текстов на латинице с начала XVI века.</p>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="work-img"> <img src="img/Rectangle-text.png" alt="" class="work-liters"/> <img src="img/play-button.png" class="img-buttom" alt=""/></div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+const Blok5 = () =>
|
|
|
+ <div class="blok5">
|
|
|
+ <div class="img-2strochki">
|
|
|
+ <ul class="img-spisok">
|
|
|
+ <li class="img-list"> <img src="img/list.png" alt=""/> </li>
|
|
|
+ <li class="img-list"> <img src="img/comps.png" alt=""/> </li>
|
|
|
+ <li class="img-list"> <img src="img/list.png" alt=""/> </li>
|
|
|
+ <li class="img-list"> <img src="img/comps.png" alt=""/> </li>
|
|
|
+
|
|
|
+ <li class="img-list"> <img src="img/comps.png" alt=""/> </li>
|
|
|
+ <li class="img-list"> <img src="img/list.png" alt=""/> </li>
|
|
|
+ <li class="img-list"> <img src="img/comps.png" alt=""/> </li>
|
|
|
+ <li class="img-list"> <img src="img/list.png" alt=""/> </li>
|
|
|
+ /
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="img-microsoft">
|
|
|
+ <ul class="img-spisok-microsoft">
|
|
|
+ <li class="img-list-microsoft"> <img src="img/microsoft.png" alt=""/> </li>
|
|
|
+ <li class="img-list-microsoft"> <img src="img/microsoft.png" alt=""/> </li>
|
|
|
+ <li class="img-list-microsoft"> <img src="img/microsoft.png" alt=""/> </li>
|
|
|
+ <li class="img-list-microsoft"> <img src="img/microsoft.png" alt=""/> </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+const ContainerPole = () =>
|
|
|
+ <div class="container-pole">
|
|
|
+ <div class="pole">
|
|
|
+ <h2 class="work-h2">Хотите веб-сайт?</h2>
|
|
|
+ <p class="work-p">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для
|
|
|
+ текстов на латинице с начала XVI века.</p>
|
|
|
+ <div class="container-polya-2">
|
|
|
+ <form class="polya-2">
|
|
|
+ <input class="vashe-ime" type="text" id="#" placeholder="Ваше имя" />
|
|
|
+ <input class="vash-email" type="email" id="p" placeholder="Ваш e-mail" />
|
|
|
+
|
|
|
+ </form>
|
|
|
+
|
|
|
+ <form action="#" >
|
|
|
+ <input class="message" type="text" placeholder="Сообщение" />
|
|
|
+ </form>
|
|
|
+ <button class="button-2" >Отправить</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+const Footer = () =>
|
|
|
+<footer class="footer">
|
|
|
+ <div class="footer-div">
|
|
|
+ <div class="footer-Ivan">
|
|
|
+ <h3 class="footer-Ivan-text-ivan">Иванов Иван</h3>
|
|
|
+ <p class="footer-Ivan-text-2018">(с) 2018. Все права защищены.</p>
|
|
|
+ </div>
|
|
|
+ <div class="footer-vk">
|
|
|
+ <img src="img/footer__soc-buttons.png" alt="" class="footer-vk-img"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </footer>
|
|
|
+
|
|
|
+
|
|
|
|
|
|
|
|
|
const App = () =>
|
|
|
<div className="App" >
|
|
|
+ <div className="wrapper">
|
|
|
<Header />
|
|
|
<Main />
|
|
|
-
|
|
|
+ <Footer />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
export default App;
|