anton123
/
Homework_react


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
							
import './App.css';

const Li = ({url, text}) => 
<li class="header-nav__item">
  <a href={url}>{text}</a>
</li>

const Banner_text = ({ id, text}) =>
<div>
  <span id={id} class="banner__text" >{text}
  </span>
  <span class="banner__lorem" >Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.
  </span>
</div>
    
const Banner_box = ({ projects, text}) =>   
<div class="box">
  <img src="img/analytics.svg" class="img__analytics" alt=""/>
  <span class="projects__text">{projects}<br/>{text}</span>
</div>  

const Skills = ({text}) =>
<div class="skills-item">
  <span class="skills-title">{text}</span>
  <div class="skill-wrap">
    <div class="skill" ></div>
  </div>
</div>

const Img__box = ({src}) =>
<div class="img__box">
  <img src={src} alt=""/>
  <img class="eye__img" src="img/eye.png" alt=""/>
</div>

function App() {
  return (
    <body>
      <header>
      <div class="conteiner">
        <div class="header">
        <div class="header__title"  ></div>
          <nav class="header-nav">
            <ul>
              <Li url="#" text="ГЛАВНАЯ"/>
              <Li url="index.html#me" text="ОБ АВТОРЕ"/>
              <Li url="index.html#my__work" text="РАБОТЫ"/>
              <Li url="index.html#proces" text="ПРОЦЕСС"/>
              <Li url="index.html#contats" text="КОНТАКТЫ"/>
            </ul>
          </nav>
        </div>
      </div>
    </header>
    <main class="main1">
        <div class="banner-wrap" >
          <div class="conteiner">
            <div class="flex__box">
              <div class="conteiner__images__pc">
                <img src="img/Frame.svg" alt=""/>
              </div>
              <div class="banner">
                <Banner_text text='Дизайн и верстка'/>
                <div class="banner-link-wrap">
                  <a href="#" class="banner__link btn-primary">НАПИСАТЬ МНЕ</a>
                </div>
               </div>
            </div>
          </div>
        </div>
    </main>
    <main>
      <div class="conteiner">
        <div class="banner_me">
        <Banner_text text='Обо мне' id='me'/>
        </div>
      </div>
    </main>
    <main class="main2">
      <div class="conteiner">
        <div class="projects">
        <Banner_box projects='40+' text='Проектов'/>
        <Banner_box projects='40+' text='Проектов'/>
        <Banner_box projects='40+' text='Проектов'/>
        <Banner_box projects='40+' text='Проектов'/>
        <Banner_box projects='40+' text='Проектов'/>
        <Banner_box projects='40+' text='Проектов'/>
        </div>
      </div>
    </main>
    <main class="main">
      <section class="section-skill">
        <div class="conteiner">
          <div class="skill-row">
            <div class="skill-col skill-text">
              <span class="section-header">
                <h1 class="title">Мои навыки</h1>
              </span>
              <div class="skills">
              <Skills text='Adobe photoshop'/>
              <Skills text='Adobe photoshop'/>
              <Skills text='Adobe photoshop'/>
              </div>
            </div>
            <div class="skill-col">
            <div class="skill-bg"  ></div>
          </div>
          </div>
        </div>
      </section>
    </main>
    <main class="main3">
      <div class="conteiner">
        <div class="banner_me">
        <Banner_text id='my__work' text='Как я работаю'/>
          </div>
        <div class="img__box__work">
          <div class="img__work">
            <img src="img/Rectangle 5.png" class="style123" alt=""/>
          </div>
            <div class="img__play">
              <img src="#" alt=""/>
          </div>
        </div>
        </div>
    </main>
    <main id="proces" class="main4">
      <div class="conteiner2">
        <Img__box src="img/img1.png"/>
        <Img__box src="img/img2.png"/>
        <Img__box src="img/img1.png"/>
        <Img__box src="img/img2.png"/>
        <Img__box src="img/img2.png"/>
        <Img__box src="img/img1.png"/>
        <Img__box src="img/img2.png"/>
        <Img__box src="img/img1.png"/>
      </div>
    </main>
    <main>
      <div class="conteiner">
        <div class="microsoft__box">
          <img src="img/microsoft.png" alt=""/>
          <img src="img/microsoft.png" alt=""/>
          <img src="img/microsoft.png" alt=""/>
          <img src="img/microsoft.png" alt=""/>
        </div>
      </div>
    </main>
    <main class="main5">
      <div class="conteiner">
        <div class="banner_me">
        <Banner_text id='contats' text='Хотите веб сайт?'/>
          </div>
        <section class="contact__form">
          <div class="conteiner">
            <form>
              <div class="form__inputs">
                <input class="input" placeholder="Ваше имя" type="text"/>
                <input class="input" placeholder="Ваш e-mail" type="text"/>
                <input class="last__input" placeholder="Сообщение" type="text"/>
              </div>
            </form>
            <div class="form__inputs">
              <a href="#" class="btn__form">О Т П Р А В И Т Ь</a>
            </div>
          </div>
        </section>
      </div>
    </main>
    <footer class="footer">
      <main class="mainfooter">
        <div class="conteiner">
          <div class="footer__box">
            <div class="footer__name__rights">
              <span class="myname__text">Попович Антон</span>
              <span class="rights__text">(с)2018. Все права защищены</span>
            </div>
            <div class="vk__box">
              <img src="img/VK.png" alt=""/>
              <img src="img/VK.png" alt=""/>
              <img src="img/VK.png" alt=""/>
            </div>
          </div>
        </div>
      </main>
    </footer>
    </body>
    
  );
}

export default App;