|
|
@@ -0,0 +1,222 @@
|
|
|
+import logo from './logo.svg';
|
|
|
+import './App.css';
|
|
|
+
|
|
|
+const Header = () =>(
|
|
|
+ <header class="header">
|
|
|
+ <div class="container">
|
|
|
+ <div class="header-wrap">
|
|
|
+ <a href="#" class="logo">
|
|
|
+ <img src="img\WD.png" alt="WD-logo" />
|
|
|
+ </a>
|
|
|
+ <nav class="nav">
|
|
|
+ <input type="checkbox" id="burger" class="hidden" />
|
|
|
+ <label for="burger" class="burger">
|
|
|
+ <span></span>
|
|
|
+ </label>
|
|
|
+ <ul class="nav-list">
|
|
|
+ <li class="nav-item">
|
|
|
+ <a href="index.html" class="nav-link">ГЛАВНАЯ</a></li>
|
|
|
+ <li class="nav-item">
|
|
|
+ <a href="#" class="nav-link"> ОБ АВТОРЕ</a></li>
|
|
|
+ <li class="nav-item">
|
|
|
+ <a href="#" class="nav-link"> РАБОТЫ</a></li>
|
|
|
+ <li class="nav-item">
|
|
|
+ <a href="#" class="nav-link"> ПРОЦЕСС</a></li>
|
|
|
+ <li class="nav-item"> <a href="#" class="nav-link">КОНТАКТЫ</a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </nav>
|
|
|
+ </div>
|
|
|
+ <div class="header-info">
|
|
|
+ <img class="image-info" src="/img/Frame.png" alt="Frame-img" />
|
|
|
+ <div class="info-item">
|
|
|
+ <h1>Дизайн и верстка</h1>
|
|
|
+ <p>
|
|
|
+ Lorem Ipsum - это текст-"рыба", часто используемый в печати и
|
|
|
+ вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на
|
|
|
+ латинице с начала XVI века.
|
|
|
+ </p>
|
|
|
+ <div class="info-bottom">
|
|
|
+ <a href="#" class="btn-head">НАПИСАТЬ МНЕ
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
+);
|
|
|
+
|
|
|
+const Main = () =>
|
|
|
+(
|
|
|
+ <main>
|
|
|
+ <section class="about">
|
|
|
+ <div class="container">
|
|
|
+ <h2>Обо мне</h2>
|
|
|
+ <p>
|
|
|
+ Lorem Ipsum - это текст-"рыба", часто используемый в печати и
|
|
|
+ вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на
|
|
|
+ латинице с начала XVI века.
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <section class="about-item">
|
|
|
+ <div class="container img-item">
|
|
|
+ <img class="numbers-item" src="/img/Project.png" alt="about-item" />
|
|
|
+ <img class="numbers-item" src="/img/Project.png" alt="about-item" />
|
|
|
+ <img class="numbers-item" src="/img/Project.png" alt="about-item" />
|
|
|
+ <img class="numbers-item" src="/img/Project.png" alt="about-item" />
|
|
|
+ <img class="numbers-item" src="/img/Project.png" alt="about-item" />
|
|
|
+ <img class="numbers-item" src="/img/Project.png" alt="about-item" />
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <section className="skill">
|
|
|
+ <div className="container">
|
|
|
+ <div className="row">
|
|
|
+ <div className="col col-description">
|
|
|
+ <header className="skill-header">
|
|
|
+ <h2>Мои навыки</h2>
|
|
|
+ </header>
|
|
|
+ <div className="skill-box">
|
|
|
+ <div className="skill-item">
|
|
|
+ <span class="skill-label">Adobe Photoshop</span>
|
|
|
+ <div className="skill-loader">
|
|
|
+ <div className="skill-load"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="skill-item">
|
|
|
+ <span class="skill-label">Adobe Photoshop</span>
|
|
|
+ <div className="skill-loader">
|
|
|
+ <div className="skill-load"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div className="skill-item">
|
|
|
+ <span class="skill-label">Adobe Photoshop</span>
|
|
|
+ <div className="skill-loader">
|
|
|
+ <div className="skill-load"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col col-img">
|
|
|
+ <img
|
|
|
+ src="/img/Man.png"
|
|
|
+ alt="image-description "
|
|
|
+ className="img-man"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <section class="media">
|
|
|
+ <div class="container">
|
|
|
+ <h3>Как я работаю</h3>
|
|
|
+ <p>
|
|
|
+ Lorem Ipsum - это текст-"рыба", часто используемый в печати и
|
|
|
+ вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на
|
|
|
+ латинице с начала XVI века.
|
|
|
+ </p>
|
|
|
+ <div class="media-img">
|
|
|
+ <img src="/img/Code.png" width="1110" height="600" alt="media-img" />
|
|
|
+ <img
|
|
|
+ class="play-button"
|
|
|
+ src="/img/play-button.png"
|
|
|
+ alt="play-button"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section className="gallery">
|
|
|
+ <div className="gallery-row">
|
|
|
+ <a href="#" className="gallery-cols"></a>
|
|
|
+ <a href="#" className="gallery-colf"></a>
|
|
|
+ <a href="#" className="gallery-cols"></a>
|
|
|
+ <a href="#" className="gallery-colf"></a>
|
|
|
+ <a href="#" className="gallery-cols"></a>
|
|
|
+ <a href="#" className="gallery-colf"></a>
|
|
|
+ <a href="#" className="gallery-cols"></a>
|
|
|
+ <a href="#" className="gallery-colf"></a>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <section>
|
|
|
+ <div class="microsoft">
|
|
|
+ <img
|
|
|
+ class="microsoft logo_1"
|
|
|
+ src="/img/Microsoft.png"
|
|
|
+ alt="microsoft-logo"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ class="microsoft logo_2"
|
|
|
+ src="/img/Microsoft.png"
|
|
|
+ alt="microsoft-logo"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ class="microsoft logo_3"
|
|
|
+ src="/img/Microsoft.png"
|
|
|
+ alt="microsoft-logo"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ class="microsoft logo_4"
|
|
|
+ src="/img/Microsoft.png"
|
|
|
+ alt="microsoft-logo"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </main>
|
|
|
+);
|
|
|
+const Footer = () =>
|
|
|
+(
|
|
|
+ <footer class="footer">
|
|
|
+ <div class="container">
|
|
|
+ <div class="footer-list">
|
|
|
+ <h4>Хотите веб-сайт?</h4>
|
|
|
+ <p>
|
|
|
+ Lorem Ipsum - это текст-"рыба", часто используемый в печати и
|
|
|
+ вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на
|
|
|
+ латинице с начала XVI века.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <form class="footer-form" action="#" method="post" name="info-client ">
|
|
|
+ <input class="form-name" type="text" placeholder="Ваше имя" />
|
|
|
+ <input class="form-mail" type="text" placeholder="Ваш e-mail" />
|
|
|
+ <input class="form-textarea" type="text" placeholder="Cообщение" />
|
|
|
+
|
|
|
+ <button class="btn-form" type="submit" form="form" value="Submit">
|
|
|
+ Отправить
|
|
|
+ </button>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <section class="bottom-section">
|
|
|
+ <div class="container">
|
|
|
+ <div class="bottom-area">
|
|
|
+ <div class="contact">
|
|
|
+ <p>Иванов Иван</p>
|
|
|
+ <span>(с) 2018. Все права защищены.</span>
|
|
|
+ </div>
|
|
|
+ <div class="logo-bottom">
|
|
|
+ <a href="#">
|
|
|
+ <img src="/img/Vk.png" alt="vk-logo" />
|
|
|
+ </a>
|
|
|
+ <a href="#">
|
|
|
+ <img src="/img/Vk.png" alt="vk-logo" />
|
|
|
+ </a>
|
|
|
+ <a href="#">
|
|
|
+ <img src="/img/Vk.png" alt="vk-logo" />
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </footer>
|
|
|
+);
|
|
|
+
|
|
|
+const App = () =>
|
|
|
+ <div className="wrapper">
|
|
|
+ <Header/>
|
|
|
+ <Main/>
|
|
|
+ <Footer/>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+export default App;
|
Анатолий Пивоварский
