123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283 |
- import './App.css';
- import logo from './image/WD.svg';
- import frame from './image/Frame.svg';
- import group from './image/Group.svg';
- import video from './image/video.png';
- import play from './image/Play.svg';
- import paper from './image/img-03.png';
- import notebook from './image/img-04.png';
- import microsoft from './image/Microsoft.png';
- import vk from './image/VK.svg';
- import men from './image/men_photo.jpg';
- const HeaderItem = ({children ='ГЛАВНАЯ', url='#'}) =>
- <li className="header-item">
- <a href={url} className="header-item">{children}</a>
- </li>
- const Header = () =>
- <header className="header">
- <div className="container">
- <div className="header-wrap">
- <a href="#" className="logo">
- <img src={logo} alt="image description" />
- </a>
- <nav className="nav">
- <input type="checkbox" id="burger" className="burger-checkbox" />
- <label for="burger" className="burger">
- <span></span>
- </label>
- <ul className="header-list">
- <HeaderItem/>
- <HeaderItem>ОБ АВТОРЕ</HeaderItem>
- <HeaderItem>РАБОТЫ</HeaderItem>
- <HeaderItem>ПРОЦЕСС</HeaderItem>
- <HeaderItem>КОНТАКТЫ</HeaderItem>
- </ul>
- </nav>
- </div>
- </div>
- </header>
-
- const SectionBanner = () =>
-
- <div className="section-banner">
- <div className="container">
- <div className="banner-wrap">
- <div className="col col--img">
- <img src={frame} alt="image description" />
- </div>
- <div className="col col--description">
- <header className="section-header">
- <h1 className="title">Дизайн и верстка</h1>
- </header>
- <div className="holder">
- <p>
- Lorem Ipsum - это текст-"рыба", часто используемый в печати
- и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для
- текстов на латинице с начала XVI века.
- </p>
- </div>
- <a href="#" className="btn">НАПИСАТЬ МНЕ</a>
- </div>
- </div>
- </div>
- </div>
- const Article = ({children='Обо мне', text_p}) =>
- <div class="about-me-text">
- <header class="about-me-header">
- <h2 class="title">{children}</h2>
- </header>
- <p>
- {text_p}
- </p>
- </div>
- const SectionAboutMe = () =>
- <section className="section-about-me">
- <div className="container">
- <Article text_p={'Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.'}/>
- </div>
- </section>
- const ProjectCol = ({children='#', quantity='40+', project_name='проектов'}) =>
- <div className="project-col">
- <div className="project-image">
- <a href={children} target="_blank">
- <img src={group} alt="image description" />
- </a>
- </div>
- <div className="project-description">
- <p>{quantity}</p>
- <p>{project_name}</p>
- </div>
- </div>
- const SectionProjects = () =>
- <section className="section-projects">
- <div className="container">
- <div className="projects-wrap">
- <ProjectCol />
- <ProjectCol />
- <ProjectCol />
- <ProjectCol />
- <ProjectCol />
- <ProjectCol />
- </div>
- </div>
- </section>
- const SkillsThis = ({children='Adobe Photoshop'}) =>
- <div className="skill-this">
- <span className="skill-label">{children}</span>
- <div className="skill-loader">
- <div className="skill-load" style="width: 75%"></div>
- </div>
- </div>
- const SectionSkill = () =>
- <section className="section-skill">
- <div className="container">
- <div className="skill-row">
- <div className="skill-col skill-descr">
- <header className="section-header">
- <h2 className="title">Мои навыки</h2>
- </header>
- <div className="skill-box">
- <SkillsThis/>
- <SkillsThis/>
- <SkillsThis/>
- </div>
- </div>
- <div className="skill-col skill-img"
- ></div>
- </div>
- </div>
- </section>
-
- const SectionVideo = () =>
- <section className="section-video">
- <div className="container">
- <div className="video-wrap">
- <Article text_p={'Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.'}> Как я работаю </Article>
- <div className="video-img">
- <img src={video} alt="image desription" />
- <div className="video-play">
- <a href="#">
- <img src={play} alt="image description"
- /></a>
- </div>
- </div>
- </div>
- </div>
- </section>
- const PaperImg = () =>
- <a
- href="#"
- target="_blank"
- className="col"
- style={{ backgroundImage: `url(${paper})` }}
- ></a>
-
- const NotebookImg = () =>
- <a
- href="#"
- target="_blank"
- className="col"
- style={{ backgroundImage: `url(${notebook})`}}
- ></a>
- const SectionGallery = () =>
- <section className="section-gallery">
- <div className="row">
- <PaperImg/>
- <NotebookImg/>
- <PaperImg/>
- <NotebookImg/>
- <NotebookImg/>
- <PaperImg/>
- <NotebookImg/>
- <PaperImg/>
- </div>
- </section>
- const MicrosoftImg = () =>
- <div className="microsoft-img">
- <a href="#" target="_blank">
- <img src={microsoft} alt="image description"
- /></a>
- </div>
- const SectionMicrosoft = () =>
- <section className="section-microsoft">
- <div className="container">
- <div className="microsoft-wrap">
- <MicrosoftImg/>
- <MicrosoftImg/>
- <MicrosoftImg/>
- <MicrosoftImg/>
- </div>
- </div>
- </section>
- const SectionForm = () =>
- <section className="section-form">
- <div className="container">
- <div className="form-wrap">
- <Article text_p={'Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.'}> Хотите вэб-сайт? </Article>
- <form action="#" className="form">
- <div className="form-contacts">
- <input
- type="text"
- name=""
- id="name"
- placeholder="Ваше имя"
- />
- <input
- type="email"
- name=""
- id="email"
- placeholder="Ваш e-mail"
- />
- </div>
- <textarea
- className="form-message"
- placeholder="Сообщение"
- name=""
- id=""
- cols="30"
- rows="10"
- ></textarea>
- <div className="form-btn">
- <button href="#" type="submit" className="btn">Отправить</button>
- </div>
- </form>
-
- </div>
- </div>
- </section>
- const Icon = () =>
- <a href="#" target="_blank">
- <img src={vk} alt="image description" />
- </a>
- const Footer = () =>
- <footer class="footer">
- <div class="container">
- <div class="footer-wrap">
- <div class="footer-contacts">
- <p>Иванов Иван</p>
- <p><sub>(с)</sub> 2018. Все права защищены.</p>
- </div>
- <div class="social-networks">
- <Icon/>
- <Icon />
- <Icon />
- </div>
- </div>
- </div>
- </footer>
- function App() {
- return (
- <>
- <Header />
- <SectionBanner />
- <SectionAboutMe />
- <SectionProjects />
- {/* <SectionSkill /> */}
- <SectionVideo />
- <SectionGallery />
- <SectionMicrosoft />
- <SectionForm />
- <Footer />
- </>
- );
- }
- export default App;
|