123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311 |
- import "./App.css";
- const Header = () => (
- <header class="header">
- <div class="header_container">
- <div class="logo">
- <a href="#">
- <img src="/img/WD.png" alt="logo" />
- </a>
- </div>
- <nav class="navigation">
- <input type="checkbox" class="toggle-menu" />
- <div class="hamburger"></div>
- <ul class="menu">
- <li>
- <a href="#mainpage">Головна</a>
- </li>
- <li>
- <a href="#aboutme">Про автора</a>
- </li>
- <li>
- <a href="#process">Роботи</a>
- </li>
- <li>
- <a href="#howiwork">Процес</a>
- </li>
- <li>
- <a href="#footer">Контакти</a>
- </li>
- </ul>
- </nav>
- </div>
- </header>
- );
- const Mainpage = () => (
- <section id="mainpage">
- <div class="mainpage_container _container">
- <div class="mainpage_container__notelogo">
- <img src="/img/Notebook.png" alt="Notebook" class="notelogo_note" />
- </div>
- <div class="mainpage_container__information">
- <div class="mainpage_container__title">Дизайн та верстка</div>
- <div class="mainpage_container__description">
- <p>
- Lorem Ipsum - це текст-"риба", який часто використовують у друку та
- веб-дизайні. Lorem Ipsum є стандартною "рибою" для текстів
- латинницею з початку XVI сторіччя.
- </p>
- </div>
- <a href="https://t.me/AlekseyL2198" class="link_btn">
- Написати мені
- </a>
- </div>
- </div>
- </section>
- );
- const DescriptionInformation = ({ title, children }) => (
- <>
- <div class="description__title">{title}</div>
- <div class="description__text">
- <p>{children}</p>
- </div>
- </>
- );
- const AboutMe = () => (
- <section id="aboutme">
- <div class="aboutme_description _container">
- <DescriptionInformation title="Про мене">
- Lorem Ipsum - це текст-"риба", який часто використовують у друку та
- веб-дизайні. Lorem Ipsum є стандартною "рибою" для текстів латинницею з
- початку XVI сторіччя.
- </DescriptionInformation>
- </div>
- </section>
- );
- const Projectblock = () => (
- <>
- <div class="projects_description">
- <div
- class="projects_description__pict"
- style={{
- background:
- "url(/img/icons/projects.svg) no-repeat scroll 0% 0%, rgba(0, 0, 0, 0) none no-repeat scroll 0% 0%",
- }}
- ></div>
- <div class="projects_description__about">
- <h3 class="projects_description__title">40+</h3>
- <p class="projects_description__text">проєктів</p>
- </div>
- </div>
- </>
- );
- const Projects = () => (
- <section class="projects" id="process">
- <div class="projects_row _container">
- <Projectblock></Projectblock>
- <Projectblock></Projectblock>
- <Projectblock></Projectblock>
- <Projectblock></Projectblock>
- <Projectblock></Projectblock>
- <Projectblock></Projectblock>
- </div>
- </section>
- );
- const SkillItem = () => (
- <div class="skills-item">
- <span class="skill-title">Adobe Photoshop</span>
- <div class="skill-wrap">
- <div class="skill" style={{ width: "85%" }}></div>
- </div>
- </div>
- );
- const SkillsBlock = () => (
- <section class="section-skill">
- <div class="container">
- <div class="skill-row">
- <div class="skill-coll skill-text">
- <header class="section-header">
- <h1 class="title">Мої навички</h1>
- </header>
- <div class="skills">
- <SkillItem></SkillItem>
- <SkillItem></SkillItem>
- <SkillItem></SkillItem>
- </div>
- </div>
- <div
- class="skill-coll skill-bg"
- style={{
- background:
- "url(/img/Rectangle.png) no-repeat scroll 0% 0%, rgba(0, 0, 0, 0) none no-repeat scroll 0% 0%",
- }}
- ></div>
- </div>
- </div>
- </section>
- );
- const HowiWork = () => (
- <section id="howiwork">
- <div class="howiwork_container _container">
- <div class="howiwork_description">
- <DescriptionInformation title="Як я працюю">
- Lorem Ipsum - це текст-"риба", який часто використовують у друку та
- веб-дизайні. Lorem Ipsum є стандартною "рибою" для текстів латинницею
- з початку XVI сторіччя.
- </DescriptionInformation>
- </div>
- <div class="howiwork_video">
- <div
- class="howiwork_button"
- style={{ background: "url(/img/icons/play-button.png)" }}
- ></div>
- </div>
- </div>
- </section>
- );
- const PhotoRow1 = () => (
- <div class="photo_row1">
- <div class="photo_row__straight notes__eye">
- <div class="eye"></div>
- </div>
- <div class="photo_row__straight notebooks__eye">
- <div class="eye"></div>
- </div>
- <div class="photo_row__straight notes__eye">
- <div class="eye"></div>
- </div>
- <div class="photo_row__straight notebooks__eye">
- <div class="eye"></div>
- </div>
- </div>
- );
- const PhotoRow2 = () => (
- <div class="photo_row2">
- <div class="photo_row__straight notebooks__eye">
- <div class="eye"></div>
- </div>
- <div class="photo_row__straight notes__eye">
- <div class="eye"></div>
- </div>
- <div class="photo_row__straight notebooks__eye">
- <div class="eye"></div>
- </div>
- <div class="photo_row__straight notes__eye">
- <div class="eye"></div>
- </div>
- </div>
- );
- const Photo = () => (
- <section class="photo">
- <div class="photo_container _container">
- <PhotoRow1></PhotoRow1>
- <PhotoRow2></PhotoRow2>
- </div>
- </section>
- );
- const PartnerCard = () => (
- <>
- <a href="https://www.microsoft.com/uk-ua" class="logo_link">
- <div
- class="microsoftlogo"
- style={{ background: "url(/img/Microsoft_logo.png)" }}
- ></div>
- </a>
- </>
- );
- const Partners = () => (
- <section class="microsoft_logo">
- <div class="microsoft_logocontainer _container">
- <PartnerCard></PartnerCard>
- <PartnerCard></PartnerCard>
- <PartnerCard></PartnerCard>
- <PartnerCard></PartnerCard>
- </div>
- </section>
- );
- const Form = () => (
- <>
- <section class="form">
- <div class="formcontainer _container">
- <div class="form_description">
- <DescriptionInformation title="Хочете сайт?">
- Lorem Ipsum - це текст-"риба", який часто використовують у друку та
- веб-дизайні. Lorem Ipsum є стандартною "рибою" для текстів
- латинницею з початку XVI сторіччя.
- </DescriptionInformation>
- </div>
- <div class="forminput_container">
- <form class="form_input">
- <div class="form_input__nameemail">
- <div class="form_input__name">
- <input type="text" name="name" value="Ваше ім'я" class="name" />
- </div>
- <div class="form_input__email">
- <input
- type="text"
- name="e-mail"
- value="Ваш e-mail"
- class="email"
- />
- </div>
- </div>
- <div class="form_input__message">
- <textarea name="message" id="form_message" class="message">
- Повідомлення
- </textarea>
- </div>
- <input type="submit" value="Надіслати" class="btn" />
- </form>
- </div>
- </div>
- </section>
- </>
- );
- const Footer = () => (
- <>
- <footer id="footer">
- <div class="footer_container _container">
- <div class="footer_about">
- <div class="footer_name">Литвин Олексій</div>
- <div class="footer_year">(с) 2018. Всі права захищені.</div>
- </div>
- <div class="footer_logo">
- <a href="https://uk-ua.facebook.com/" class="logo_link">
- <img src="/img/icons/footer__soc-buttons.svg" alt="Vk" />
- </a>
- </div>
- </div>
- </footer>
- </>
- );
- const Main = () => (
- <>
- <Mainpage />
- <AboutMe />
- <Projects />
- <SkillsBlock />
- <HowiWork />
- <Photo />
- <Partners />
- <Form />
- </>
- );
- function App() {
- return (
- <div className="App">
- <Header />
- <Main />
- <Footer />
- </div>
- );
- }
- export default App;
|