|
@@ -0,0 +1,258 @@
|
|
|
+import './App.css';
|
|
|
+import wd from './img/WD.svg';
|
|
|
+import frame from './img/Frame.svg'
|
|
|
+import group from './img/Group.png'
|
|
|
+import imgSkill from './img/skills.png'
|
|
|
+import code from './img/code.jpg'
|
|
|
+import vector from './img/Vector.png'
|
|
|
+import img1 from './img/img1.jpg'
|
|
|
+import img2 from './img/img2.jpg'
|
|
|
+import microsoft from './img/microsoft.svg'
|
|
|
+import vk from './img/vk.svg'
|
|
|
+
|
|
|
+const HeaderItem = ({children = 'Главная', url = '#'}) =>
|
|
|
+ <li class="header-item">
|
|
|
+ <a href={url}>{children}</a>
|
|
|
+ </li>
|
|
|
+
|
|
|
+const Header = () =>
|
|
|
+ <header class="header">
|
|
|
+ <div class="container">
|
|
|
+ <div class="header-wrap">
|
|
|
+ <a class="logo" href="#">
|
|
|
+ <img class="wd" src={wd} alt="logo" />
|
|
|
+ </a>
|
|
|
+ <nav class="nav">
|
|
|
+ <input type="checkbox" id="burger" class="burger-checkbox" />
|
|
|
+ <label for="burger" class="burger">
|
|
|
+ <span></span>
|
|
|
+ </label>
|
|
|
+ <ul class="header-list">
|
|
|
+ <HeaderItem>
|
|
|
+ Главная
|
|
|
+ </HeaderItem>
|
|
|
+ <HeaderItem>
|
|
|
+ Об Авторе
|
|
|
+ </HeaderItem>
|
|
|
+ <HeaderItem>
|
|
|
+ Работы
|
|
|
+ </HeaderItem>
|
|
|
+ <HeaderItem>
|
|
|
+ Процесс
|
|
|
+ </HeaderItem>
|
|
|
+ <HeaderItem>
|
|
|
+ Контакты
|
|
|
+ </HeaderItem>
|
|
|
+ </ul>
|
|
|
+ </nav>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
+
|
|
|
+const Main = () =>
|
|
|
+ <main class="main">
|
|
|
+ <SectionBanner />
|
|
|
+ <SectionLorem />
|
|
|
+ <SectionProject />
|
|
|
+ <SectionSkill />
|
|
|
+ <SectionWork />
|
|
|
+ <SectionGallery />
|
|
|
+ <SectionBrand />
|
|
|
+ <SectionInput />
|
|
|
+ </main>
|
|
|
+
|
|
|
+const SectionBanner = () =>
|
|
|
+ <section class="section-banner">
|
|
|
+ <div class="container">
|
|
|
+ <div class="banner-wrap">
|
|
|
+ <div class="col col--img">
|
|
|
+ <img src={frame} alt="image description" />
|
|
|
+ </div>
|
|
|
+ <div class="col col--discription">
|
|
|
+ <header class="section-header">
|
|
|
+ <h1 class="tittle">Дизайн и верстка</h1>
|
|
|
+ </header>
|
|
|
+ <div class="holder">
|
|
|
+ <p class="lorem-banner">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является
|
|
|
+ стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
|
|
|
+ <a href="#" class="btn">НАПИСАТЬ МНЕ</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+const SectionLorem = () =>
|
|
|
+ <section class="section-lorem">
|
|
|
+ <div class="banner">
|
|
|
+ <h2 class="about-me">Обо мне</h2>
|
|
|
+ <p class="lorem">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum
|
|
|
+ является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+const SectionProject = () =>
|
|
|
+ <section class="section-project">
|
|
|
+ <Project />
|
|
|
+ <Project />
|
|
|
+ <Project />
|
|
|
+ <Project />
|
|
|
+ <Project />
|
|
|
+ <Project />
|
|
|
+ </section>
|
|
|
+
|
|
|
+const Project = () =>
|
|
|
+ <div class="project">
|
|
|
+ <div class="img-project">
|
|
|
+ <img src={group} alt="image description" />
|
|
|
+ </div>
|
|
|
+ <div class="text-project">
|
|
|
+ <h3>40+</h3>
|
|
|
+ <p class="proj">проектов</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+const SectionSkill = () =>
|
|
|
+ <section class="section-skill">
|
|
|
+ <div class="container">
|
|
|
+ <div class="skill-row">
|
|
|
+ <div class="skill-col skill-descr">
|
|
|
+ <header class="section-header">
|
|
|
+ <h2 class="tittle">Мои Навыки</h2>
|
|
|
+ </header>
|
|
|
+ <div class="skill-box">
|
|
|
+ <SkillBox />
|
|
|
+ <SkillBox />
|
|
|
+ <SkillBox />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="skill-col skill-img">
|
|
|
+ <img src={imgSkill} alt="image description" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+const SkillBox = () =>
|
|
|
+ <div class="skill-this">
|
|
|
+ <span class="skill-label">Adobe Photoshop</span>
|
|
|
+ <div class="skill-loader">
|
|
|
+ <div class="skill-load" /* style="width: 75%;" */></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+const SectionWork = () =>
|
|
|
+ <section class="section-work">
|
|
|
+ <div class="work">
|
|
|
+ <div class="text-work">
|
|
|
+ <h2 class="present">Как я работаю</h2>
|
|
|
+ <p class="lorem">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum
|
|
|
+ является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
|
|
|
+ </div>
|
|
|
+ <div class="img-work">
|
|
|
+ <img src={code} alt="image description" class="code-img" />
|
|
|
+ <img src={vector} alt="image description" class="play" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+const SectionGallery = () =>
|
|
|
+ <section class="section-gallery">
|
|
|
+ <div class="row">
|
|
|
+ <Gallery1>
|
|
|
+ {img1}
|
|
|
+ </Gallery1>
|
|
|
+ <Gallery1>
|
|
|
+ {img2}
|
|
|
+ </Gallery1>
|
|
|
+ <Gallery1>
|
|
|
+ {img1}
|
|
|
+ </Gallery1>
|
|
|
+ <Gallery1>
|
|
|
+ {img2}
|
|
|
+ </Gallery1>
|
|
|
+ <Gallery1>
|
|
|
+ {img2}
|
|
|
+ </Gallery1>
|
|
|
+ <Gallery1>
|
|
|
+ {img1}
|
|
|
+ </Gallery1>
|
|
|
+ <Gallery1>
|
|
|
+ {img2}
|
|
|
+ </Gallery1>
|
|
|
+ <Gallery1>
|
|
|
+ {img1}
|
|
|
+ </Gallery1>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+const Gallery1 = ({children = {img1}, url = '#'}) =>
|
|
|
+ <a href={url} class="gal">
|
|
|
+ <img src={children} alt="image description" class="play" />
|
|
|
+ </a>
|
|
|
+
|
|
|
+const SectionBrand = () =>
|
|
|
+ <section class="section-brand">
|
|
|
+ <MicrososftImg />
|
|
|
+ <MicrososftImg />
|
|
|
+ <MicrososftImg />
|
|
|
+ <MicrososftImg />
|
|
|
+ </section>
|
|
|
+
|
|
|
+const MicrososftImg = () =>
|
|
|
+ <img src={microsoft} alt="image description" class="img-label" />
|
|
|
+
|
|
|
+const SectionInput = () =>
|
|
|
+ <section class="section-input">
|
|
|
+ <div class="form">
|
|
|
+ <div class="text-form">
|
|
|
+ <h2 class="present-form">Хотите веб-сайт?</h2>
|
|
|
+ <p class="lorem">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum
|
|
|
+ является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
|
|
|
+ </div>
|
|
|
+ <div class="input-form">
|
|
|
+ <input class="input-name" type="text" placeholder="Ваше имя" />
|
|
|
+ <input class="input-mail" type="text" placeholder="Ваш e-mail" />
|
|
|
+ </div>
|
|
|
+ <div class="message-form">
|
|
|
+ <textarea class="textarea" name="#" id="text-mail" cols="30" rows="10" placeholder="Сообщение"></textarea>
|
|
|
+ </div>
|
|
|
+ <div class="btn-form">
|
|
|
+ <a href="#" class="btn">Отправить</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+const Footer = () =>
|
|
|
+ <footer class="footer">
|
|
|
+ <div class="footer-name">
|
|
|
+ <h3>Иван Иванов</h3>
|
|
|
+ <h4>(с) 2018. Все права защищены.</h4>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="footer-logo">
|
|
|
+ <Logo />
|
|
|
+ <Logo />
|
|
|
+ <Logo />
|
|
|
+ </div>
|
|
|
+ </footer>
|
|
|
+
|
|
|
+const Logo = ({url = '#'}) =>
|
|
|
+ <a class="logo-vk" href={url}>
|
|
|
+ <img class="vk" src={vk} alt="image description" />
|
|
|
+ </a>
|
|
|
+
|
|
|
+const Wrapper = () =>
|
|
|
+ <div class="wrapper">
|
|
|
+ <Header />
|
|
|
+ <Main />
|
|
|
+ <Footer />
|
|
|
+ </div>
|
|
|
+
|
|
|
+function App() {
|
|
|
+ return (
|
|
|
+ <Wrapper />
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+export default App;
|