123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296 |
- import './App.css';
- import logo from './image/WD.svg';
- import laptop from './image/img-01.svg';
- import numberItems from './image/numbers__item.svg'
- import MyWorkPlay from './image/play.svg'
- import myWork from './image/my_work.png'
- import GalleryPicture from './image/img-04.jpg'
- import GalleryPicture1 from './image/img-03.jpg'
- import SectionSkillImage from './image/img-02.png'
- import Microsoft from './image/microsoft.svg'
- import socialImage from './image/social_vk.svg'
- const Header = () =>
- <header class="header">
- <div class="header-wrap">
- <a href="#" class="logo">
- <img src={logo} alt="logo">
- </img>
- </a>
- <nav class="nav">
- <input type="checkbox" id="burger" class="burger-checkbox"></input>
- <label for="burger" class="burger">
- <span></span>
- </label>
- <ul class="header-list">
- <HeaderItem>
- ГЛАВНАЯ
- </HeaderItem>
-
- <HeaderItem url='https://google.com'>
- Об Авторе
- </HeaderItem>
- <HeaderItem>работы</HeaderItem>
- <HeaderItem>Процесс</HeaderItem>
- <HeaderItem>контакты</HeaderItem>
- </ul>
- </nav>
- </div>
- </header>
- const HeaderItem = ({children='Главная', url='#'}) =>
- <li><a href={url} class="header-item">{children}</a></li>
- const SectionBanner = ({children='SectionBanner'}) =>
- <section className="section-banner">
- <div class="container">
- <div class="banner-wrap">
- <div class="col col--img">
- <img src={laptop} alt="image description"></img>
- </div>
- <div class="col col--description">
- <header class="section-header">
- <h1 class="title">Дизайн и верстка</h1>
- </header>
- <div class="holder">
- <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
- </div>
- <a href="#" class="btn">НАПИСАТЬ МНЕ</a>
- </div>
- </div>
- </div>
- </section>
- const SectionHowWork = ({children='SectionHowWork'}) =>
- <section class="my_work">
- <div class="my_work__text">
- <h2>Как я работаю</h2>
- <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
- </div>
- <div class="my_work__video">
- <img src={myWork} alt="my_work"></img>
- <div class="play">
- <img src={MyWorkPlay}alt=""></img>
- </div>
- </div>
- </section>
- const SectionBlueBox = ({children='SectionBlueBox'}) =>
- <>
- <div class="blue_box">
- <div class="blue_box__images">
-
- <img src={numberItems} alt="number_item"></img>
- <img src={numberItems} alt="number_item"></img>
- <img src={numberItems} alt="number_item"></img>
- <img src={numberItems} alt="number_item"></img>
- <img src={numberItems} alt="number_item"></img>
- <img src={numberItems} alt="number_item"></img>
- </div>
- </div>
- </>
- const SectionImage = ({children='SectionImage'}) =>
- <>
- <div class="row">
- <a href="#" class="col"><img src={GalleryPicture}></img></a>
- <a href="#" class="col"><img src={GalleryPicture1}></img></a>
- <a href="#" class="col"><img src={GalleryPicture}></img></a>
- <a href="#" class="col"><img src={GalleryPicture1}></img></a>
- <a href="#" class="col"><img src={GalleryPicture}></img></a>
- <a href="#" class="col"><img src={GalleryPicture1}></img></a>
- <a href="#" class="col"><img src={GalleryPicture}></img></a>
- <a href="#" class="col"><img src={GalleryPicture1}></img></a>
- </div>
- </>
- const SectionSkill = ({children='SectionSkill'}) =>
- <>
- <section class="section-skill">
- <div class="container">
- <div class="skill-row">
- <div class="skill-col skill-descr">
- <header class="section-header">
- <h2 class="title">Мои навыки</h2>
- </header>
- <div class="skill-box">
- <div class="skill-this">
- <span class="skill-label">Adobe Photoshop</span>
- <div class="skill-loader">
- <div class="skill-load"></div>
- </div>
- </div>
- <div class="skill-this">
- <span class="skill-label">Adobe Photoshop</span>
- <div class="skill-loader">
- <div class="skill-load"></div>
- </div>
- </div>
- <div class="skill-this">
- <span class="skill-label">Adobe Photoshop</span>
- <div class="skill-loader">
- <div class="skill-load"></div>
- </div>
- </div>
- </div>
- </div>
- <div class="skill-col skill-img"><img src={SectionSkillImage}></img></div>
- </div>
- </div>
- </section>
- </>
- const SectionGallery = ({children='SectionGallery'}) =>
- <section class="section-gellary">
- <SectionImage>
- </SectionImage>
- </section>
- const MicrosoftBox = ({children='MicrosoftBox'}) =>
- <>
- <section class="microsoft_box">
- <div class="microsoft">
- <img src={Microsoft} alt="microsoft"></img>
- <img src={Microsoft} alt="microsoft"></img>
- <img src={Microsoft} alt="microsoft"></img>
- <img src={Microsoft} alt="microsoft"></img>
- </div>
- </section>
- </>
- const FeedBack = ({children='FeedBack'}) =>
- <>
- <section class="feedback">
- <div class="feedback__col">
- <h2>Хотите веб-сайт?</h2>
- <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
- </div>
- <form class="form_action">
- <input type="text" name="name" placeholder="Ваше имя"></input>
- <input type="email" name="e-mail" placeholder="Ваш e-mail"></input>
- <input type="text" name="text" placeholder="Сообщение"></input>
- <a href="#" class="btn btn_send">Отправить</a>
- </form>
- </section>
- </>
- const Main = () =>
- <main class="main">
- <div class="wrapper">
- <SectionBanner>
-
- </SectionBanner>
- <div class="box_text_second">
- <div class="about_me">
- <h1>Обо мне</h1>
- <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
- </div>
- </div>
-
-
- <SectionBlueBox>
- </SectionBlueBox>
- <SectionSkill>
-
- </SectionSkill>
- <SectionHowWork>
- </SectionHowWork>
- <SectionGallery>
-
- </SectionGallery>
- <MicrosoftBox>
- </MicrosoftBox>
- <FeedBack>
- </FeedBack>
-
- </div>
-
-
- </main>
- const SocialCol = ({children='SocialCol'}) =>
- <div class="social_col">
- <img src={socialImage} alt="social_link"></img>
- <img src={socialImage} alt="social_link"></img>
- <img src={socialImage} alt="social_link"></img>
- </div>
- const Footer = () =>
- <footer class="footer">
- <div class="footer_col">
- <h3>Иванов Иван</h3>
- <p>(с) 2018. Все права защищены.</p>
- </div>
- <SocialCol>
-
- </SocialCol>
- </footer>
- function App() {
- return (
- <>
- <Header />
- <Main />
- <Footer />
- </>
- );
- }
- export default App;
|