import React from 'react';
import "./App.css";


const Main_Header_List = ({ children }) =>
  <>
    <div class="main_header_list">
      {children}
    </div>
  </>

const Numbers_Link = ({ img = "img/numbers_item.png", className }) =>
  <>
    <img src={img} className={`numbers_link ${className}`} />
  </>
const Nl1 = ({ }) => <Numbers_Link className='nl1'></Numbers_Link>
const Nl2 = ({ }) => <Numbers_Link className='nl2'></Numbers_Link>
const Nl = ({ }) => <Numbers_Link className='nl'></Numbers_Link>

const Fsh_Navlist = ({ children }) =>
  <>
    <ul className="fsh_navlist">
      {children}
    </ul>
  </>


const Fsh_item = ({ children, href }) =>
  <>
    <li className="fsh_item"><a className="fsh_link" href={href}>{children}</a></li>
  </>

const Skills = ({ children }) =>
  <>
    <div className="skills">
      {children}
    </div>
  </>

const Skills_Link = ({ }) =>
  <>
    <div className="skills-link">
      <span className="skill-title">adobe photoshop</span>
      <div className="skill-wrap">
        <div className="skill" style={{ width: '85%' }}  ></div>
      </div>
    </div>
  </>

const Projects = ({ children }) =>
  <>
    <div className="projects">
      {children}
    </div>
  </>

const Projects_Top = ({ children }) =>
  <>
    <div className="projects_top">
      {children}
    </div>
  </>

const Projects_Bottom = ({ children }) =>
  <>
    <div className="projects_top">
      {children}
    </div>
  </>

const Dash = ({ }) =>
  <>
    <div className="image "><img src="img/dashboard1.png" alt="dash" /></div>
  </>

const Laptop = ({ }) =>
  <>
    <div className="image"><img src="img/laptop.png" alt="laptop" /></div>
  </>

const Laptop2 = ({ }) =>
  <>
    <div className="image1 " style={{ backgroundImage: "url(img/laptop.png)" }}>
      <img className="image2 " src="img/laptop2.png" alt="laptop2" />
      <img className="eye " src="img/eye.png" alt="eye" />
    </div>
  </>
const Logo = ({ children }) =>
  <>
    <div className="logo">
      {children}
    </div>
  </>

const Img_Logo_Container = ({ children }) =>
  <>
    <div className="img_logo_container">
      {children}
    </div>
  </>

const Img_Logo = ({ className }) =>
  <>
    <a href="https://www.microsoft.com/">
      <i className={className} ><img src="img/microsoft.png" alt="microsoft" /></i>
    </a>
  </>

const Last_Logo = ({ children }) =>
  <>
    <div className="last_logo">
      {children}
    </div>
  </>

const Last_Logo_Link = ({ }) =>
  <>
    <a href="vk.com">
      <i className="last_logo_link"><img src="img/vk.png" alt="vk" /></i>
    </a>
  </>



const App = () => {
  return (
    <>
      < div className="wrapper" >

        <div className="container_header">
          <header className="header" id="top">
            <div className="first_header_top"><i className="fsh_logo">wd</i>
              <nav className="burger_menu">
                <input id="menu_toogle" type="checkbox" />
                <label className="menu_btn" htmlFor="menu_toogle">
                  <span></span>
                </label>
                <Fsh_Navlist>
                  <Fsh_item href="#top">главная</Fsh_item >
                  <Fsh_item href="#2">об авторе</Fsh_item >
                  <Fsh_item href="#3">работы</Fsh_item >
                  <Fsh_item href="#4">процесс</Fsh_item>
                  <Fsh_item href="#5">контакты</Fsh_item >

                </Fsh_Navlist >


              </nav>
            </div>

          </header>
          <div className="first_header_bottom">
            <div className="header_bottom_left">
              <div className="first_screen_block1">
                <img className="svg" src="img/desktop.svg" alt="desktop" />

              </div>
            </div>

            <div className="header_bottom_right">
              <div className="first_screen_block2">
                <div className="first_sentence">Дизайн и вёрстка</div>
                <div className="first_text">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
                  Lorem
                  Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</div>
                <div>
                  <span className="first_button"><a href="#" className="button_link">написать мне</a></span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="about_me">
          <div className="about_me_first">
            <h2>Обо мне</h2>
            <a href="#" id="2"></a>
          </div>
          <div className="about_me_second">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
            Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</div>
        </div>
        <div className="main">
          <div className="main_header">
            <Main_Header_List>
              <Nl1></Nl1>
              <Nl2></Nl2>
              <Nl></Nl>
              <Nl></Nl>
              <Nl2></Nl2>
              <Nl1></Nl1>
            </Main_Header_List>
          </div>
          <div className="section-skill" id="3">
            <div className="container">
              <div className="skill-row">
                <div className="skill-col skill-text">
                  <header className="section-header">
                    <h2 className="title">Мои навыки</h2>
                  </header>
                  <Skills>
                    <Skills_Link></Skills_Link>
                    <Skills_Link></Skills_Link>
                    <Skills_Link></Skills_Link>
                  </Skills>
                </div>
                <div className="skill-col ">
                  <div className="skill-bg " style={{ backgroundImage: "url(img/img.jpg)" }}></div>
                </div>

              </div>
            </div>
          </div>
          <div className="work_demonstration">
            <div className="work_text">
              <div className="work_text_first" id="4">
                <h2>Как я работаю</h2>
              </div>
              <div className="work_text_second">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне.
                Lorem Ipsum является стандартной 'рыбой' для текстов на латинице с начала XVI века.</div>

            </div>
            <div className="work_video">
              <div className="video"><img src="img/video.png" alt="video" /><img className="button_play" src="img/Vector.png"
                alt="play" /></div>
            </div>
          </div>
          <Projects>
            <Projects_Top>
              <Dash></Dash>
              <Laptop2></Laptop2>
              <Dash></Dash>
              <Laptop></Laptop>
            </Projects_Top>
            <Projects_Bottom>
              <Laptop></Laptop>
              <Dash></Dash>
              <Laptop></Laptop>
              <Dash></Dash>
            </Projects_Bottom>
          </Projects>
        </div>
        <div className="footer">
          <Logo>
            <Img_Logo_Container>
              <Img_Logo className="img_logo nl1"></Img_Logo>
              <Img_Logo className="img_logo"></Img_Logo>
              <Img_Logo className="img_logo"></Img_Logo>
              <Img_Logo className="img_logo nl1"></Img_Logo>
            </Img_Logo_Container>
          </Logo>
          <div className="section_input_form" id="5">
            <div className="section_input_text">
              <div className="first_input_sentence">
                <h2>
                  Хотите веб-сайт?
                </h2>
              </div>

              <div className="second_input_sentence">Lorem Ipsum - это текст-"рыба", часто используемый в печати и
                вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</div>
            </div>
            <div className="textarea">
              <div className="textarea_top">
                <div className="textarea_top_left"><textarea className="textarea1" placeholder="Ваше имя" name="textarea1"
                  id="textarea1" cols="30" rows="10"></textarea></div>
                <div className="textarea_top_right"><textarea className="textarea2" placeholder="Ваш e-mail" name="textarea2"
                  id="textarea2" cols="30" rows="10"></textarea></div>
              </div>
              <div className="textarea_bottom"><textarea className="textarea3" placeholder="Сообщение" name="textarea3"
                id="textarea3" cols="30" rows="10"></textarea></div>

            </div>
            <a href="#" className="button_link"><span className="second_button">отправить</span></a>
          </div>
          <div className="footer_section">
            <div className="footer_container">
              <div className="author">
                <h1 className="name">Ровенский Марк</h1>
                <h5 className="rights">(с) 2022. Все права защищены.</h5>
              </div>
              <Last_Logo>
                <Last_Logo_Link></Last_Logo_Link>
                <Last_Logo_Link></Last_Logo_Link>
                <Last_Logo_Link></Last_Logo_Link>
              </Last_Logo>
            </div>

          </div>
        </div>

      </div >


    </>)
}


export default App;
