123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223 |
- 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;
|