123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212 |
- <!DOCTYPE html>
- <html lang="ru">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Визитка - Личный портфолио</title>
- <!--
- - иконка
- -->
- <link rel="shortcut icon" href="./assets/images/logo.ico" type="image/x-icon">
- <!--
- - ссылка на пользовательские стили CSS
- -->
- <link rel="stylesheet" href="./assets/css/style.css">
- <!--
- - ссылка на гугл-шрифты
- -->
- <link rel="preconnect" href="https://fonts.googleapis.com">
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
- </head>
- <body>
- <!--
- - #ОСНОВНОЙ
- -->
- <main>
- <!--
- - #БОКОВАЯ_ПАНЕЛЬ
- -->
- <aside class="sidebar" data-sidebar>
- <div class="sidebar-info">
- <figure class="avatar-box">
- <img src="./assets/images/mz6xafoyeIc.png" alt="Иванцов Никита" width="80">
- </figure>
- <div class="info-content">
- <h1 class="name" title="Иванцов Никита">Иванцов Никита</h1>
- <p class="title">Программист</p>
- </div>
- <button class="info_more-btn" data-sidebar-btn>
- <span>Показать контакты</span>
- <ion-icon name="chevron-down"></ion-icon>
- </button>
- </div>
- <div class="sidebar-info_more">
- <div class="separator"></div>
- <ul class="contacts-list">
- <li class="contact-item">
- <div class="icon-box">
- <ion-icon name="mail-outline"></ion-icon>
- </div>
- <div class="contact-info">
- <p class="contact-title">Email</p>
- <a href="mailto:text@gmail.com" class="contact-link">text@gmail.com</a>
- </div>
- </li>
- <li class="contact-item">
- <div class="icon-box">
- <ion-icon name="phone-portrait-outline"></ion-icon>
- </div>
- <div class="contact-info">
- <p class="contact-title">Телефон</p>
- <a href="tel:+88032222332" class="contact-link">+8 (880)322 223 322</a>
- </div>
- </li>
- <li class="contact-item">
- <div class="icon-box">
- <ion-icon name="calendar-outline"></ion-icon>
- </div>
- <div class="contact-info">
- <p class="contact-title">День рождения</p>
- <time datetime="2005-10-27">27 Октября 2005</time>
- </div>
- </li>
- <li class="contact-item">
- <div class="icon-box">
- <ion-icon name="location-outline"></ion-icon>
- </div>
- <div class="contact-info">
- <p class="contact-title">Местоположение</p>
- <address>Россия, Москва</address>
- </div>
- </li>
- </ul>
- <div class="separator"></div>
- <ul class="social-list">
- <li class="social-item">
- <a href="#" class="social-link">
- <ion-icon name="logo-facebook"></ion-icon>
- </a>
- </li>
- <li class="social-item">
- <a href="#" class="social-link">
- <ion-icon name="logo-twitter"></ion-icon>
- </a>
- </li>
- <li class="social-item">
- <a href="#" class="social-link">
- <ion-icon name="logo-instagram"></ion-icon>
- </a>
- </li>
- </ul>
- </div>
- </aside>
- <!--
- - #основной-контент
- -->
- <div class="main-content">
- <!--
- - #НАВИГАЦИОННОЕ_МЕНЮ
- -->
- <nav class="navbar">
- <ul class="navbar-list">
- <li class="navbar-item">
- <button class="navbar-link active" data-nav-link>Обо мне</button>
- </li>
- <li class="navbar-item">
- <button class="navbar-link" data-nav-link>Резюме</button>
- </li>
- <li class="navbar-item">
- <button class="navbar-link" data-nav-link>Портфолио</button>
- </li>
- <li class="navbar-item">
- <button class="navbar-link" data-nav-link>Блог</button>
- </li>
- <li class="navbar-item">
- <button class="navbar-link" data-nav-link>Контакты</button>
- </li>
- </ul>
- </nav>
- <!--
- - #ОБО_МНЕ
- -->
- <article class="about active" data-page="about">
- <header>
- <h2 class="h2 article-title">Обо мне</h2>
- </header>
- <section class="about-text">
- <p>
- Я программист и разработчик из Москвы. Занимаюсь веб-разработкой, машинным обучением и другими направлениями IT. Мне нравится решать сложные задачи простыми и элегантными способами, создавая понятные и удобные программные решения.
- </p>
- <p>
- Моя задача - разработать для вас качественный и удобный программный продукт, будь то веб-сайт, приложение, программа 1С или другое ПО. Я стремлюсь создать понятный и привлекательный интерфейс, учитывая при этом ваши индивидуальные требования. Владею разработкой на 1С: Предприятие 8 и 1С: Бухгалтерия, программированием на Python и машинным обучением, веб-программированием (HTML, CSS, JavaScript), а также разработкой различного ПО, профессиональным видеомонтажом и работой в Adobe Photoshop. Моя цель - воплотить вашу идею наиболее оптимальным и креативным способом с использованием современных технологий. Я имею большой опыт создания программных решений для крупных компаний и известных брендов.
- </p>
- </section>
- <!--
- - сервис
- -->
- <section class="service">
- <h3 class="h3 service-title">Что я делаю</h3>
- <ul class="service-list">
- <li class="service-item">
- <div class="service-icon-box">
- <img src="./assets/images/icon-design.svg
- " alt="иконка дизайна" width="40">
- </div>
- <div class="service-content-box">
- <h4 class="h4 service-item-title">Photoshop</h4>
- <p class="service-item-text">
- Самый современная и качественная обработка фото, созданный на продвинутом уровне.
- </p>
- </div>
- </li>
- <li class="service-item">
- <div class="service-icon-box">
- <img src="./assets/images/icon-dev.svg" alt="иконка веб-разработки" width="40">
- </div>
- <div class="service-content-box">
- <h4 class="h4 service-item-title">Веб-разработка</h4>
- <p class="service-item-text">
- Высококачественная разработка сайтов на профессиональном уровне.
- </p>
- </div>
- </li>
- <li class="service-item">
- <div class="service-icon-box">
- <img src="./assets/images/icon-app.svg" alt="иконка мобильного приложения" width="40">
- </div>
- <div class="service-content-box">
- <h4 class="h4 service-item-title">Приложения</h4>
- <p class="service-item-text">
- Разработка приложений для Windows на Python.
- </p>
- </div>
- </li>
- <li class="service-item">
- <div class="service-icon-box">
- <img src="./assets/images/icon-robot-1.png" alt="иконка камеры" width="40">
- </div>
- <div class="service-content-box">
- <h4 class="h4 service-item-title">Нейросеть</h4>
- <p class="service-item-text">
- Я делаю высококачественную нейросеть которая поможет вам в бизнесе и так далее
- </p>
- </div>
- </li>
- </ul>
- </section>
- <!--
- - отзывы
- -->
- <section class="testimonials">
- <h3 class="h3 testimonials-title">Отзывы</h3>
- <ul class="testimonials-list has-scrollbar">
- <li class="testimonials-item">
- <div class="content-card" data-testimonials-item>
- <figure class="testimonials-avatar-box">
- <img src="./assets/images/avatar-1.png" alt="Даниэль Льюис" width="60" data-testimonials-avatar>
- </figure>
- <h4 class="h4 testimonials-item-title" data-testimonials-title>Даниэль Льюис</h4>
- <div class="testimonials-text" data-testimonials-text>
- <p>
- Я привлек Никиту для разработки корпоративного программного обеспечения. Его работа полностью оправдала мои ожидания. Никита - опытный разработчик, который хорошо разбирается в требованиях заказчика. Он учел все наши пожелания и создал качественный продукт с современным интерфейсом и необходимым функционалом, оптимизированным под специфику нашего бизнеса. Взаимодействие с ним было продуктивным и профессиональным на всех этапах.
- </p>
- </div>
- </div>
- </li>
- <li class="testimonials-item">
- <div class="content-card" data-testimonials-item>
- <figure class="testimonials-avatar-box">
- <img src="./assets/images/avatar-2.png" alt="Джессика Миллер" width="60" data-testimonials-avatar>
- </figure>
- <h4 class="h4 testimonials-item-title" data-testimonials-title>Джессика Миллер</h4>
- <div class="testimonials-text" data-testimonials-text>
- <p>
- Я привлекла Никиту для разработки корпоративного программного обеспечения. Его работа полностью оправдала мои ожидания. Никита - опытный разработчик, который хорошо разбирается в требованиях заказчика. Он учел все наши пожелания и создал качественный продукт с современным интерфейсом и необходимым функционалом, оптимизированным под специфику нашего бизнеса. Взаимодействие с ним было продуктивным и профессиональным на всех этапах.
- </p>
- </div>
- </div>
- </li>
- <li class="testimonials-item">
- <div class="content-card" data-testimonials-item>
- <figure class="testimonials-avatar-box">
- <img src="./assets/images/avatar-3.png" alt="Эмили Эванс" width="60" data-testimonials-avatar>
- </figure>
- <h4 class="h4 testimonials-item-title" data-testimonials-title>Эмили Эванс</h4>
- <div class="testimonials-text" data-testimonials-text>
- <p>
- Я нанял Никиту для разработки комплексного программного решения, включающего веб-сайт, мобильное приложение и учетную систему на базе 1С:Предприятие. Работой Никиты я полностью доволен. Он опытный специалист, досконально изучивший наши потребности. Никита продемонстрировал глубокие знания веб-программирования, языков Python и JavaScript, а также конфигурирования 1С. Созданные им продукты отличаются современным дизайном, удобным интерфейсом и полной адаптацией под специфику нашей деятельности. Помимо программирования, Никита хорошо поработал над видеоматериалами и графикой, задействовав свои навыки видеомонтажа и Adobe Photoshop. Сотрудничество с таким компетентным и клиентоориентированным разработчиком было продуктивным и беспроблемным.
- </p>
- </div>
- </div>
- </li>
- <li class="testimonials-item">
- <div class="content-card" data-testimonials-item>
- <figure class="testimonials-avatar-box">
- <img src="./assets/images/avatar-4.png" alt="Генри Уильям" width="60" data-testimonials-avatar>
- </figure>
- <h4 class="h4 testimonials-item-title" data-testimonials-title>Генри Уильям</h4>
- <div class="testimonials-text" data-testimonials-text>
- <p>
- Я нанял Никиту для разработки комплексного программного решения, включающего веб-сайт, мобильное приложение и учетную систему на базе 1С:Предприятие. Работой Никиты я полностью доволен. Он опытный специалист, досконально изучивший наши потребности. Никита продемонстрировал глубокие знания веб-программирования, языков Python и JavaScript, а также конфигурирования 1С. Созданные им продукты отличаются современным дизайном, удобным интерфейсом и полной адаптацией под специфику нашей деятельности. Помимо программирования, Никита хорошо поработал над видеоматериалами и графикой, задействовав свои навыки видеомонтажа и Adobe Photoshop. Сотрудничество с таким компетентным и клиентоориентированным разработчиком было продуктивным и беспроблемным.
- </p>
- </div>
- </div>
- </li>
- </ul>
- </section>
- <!--
- - модальное окно отзывов
- -->
- <div class="modal-container" data-modal-container>
- <div class="overlay" data-overlay></div>
- <section class="testimonials-modal">
- <button class="modal-close-btn" data-modal-close-btn>
- <ion-icon name="close-outline"></ion-icon>
- </button>
- <div class="modal-img-wrapper">
- <figure class="modal-avatar-box">
- <img src="./assets/images/avatar-1.png" alt="Даниэль Льюис" width="80" data-modal-img>
- </figure>
- <img src="./assets/images/icon-quote.svg" alt="иконка цитаты">
- </div>
- <div class="modal-content">
- <h4 class="h3 modal-title" data-modal-title>Даниэль Льюис</h4>
- <time datetime="2021-06-14">14 Июня, 2021</time>
- <div data-modal-text>
- <p>
- Никита был нанят для создания фирменного стиля. Мы остались очень довольны проделанной работой. У него большой опыт и она очень заботится о потребностях клиента.
-
-
- <!--
- - testimonials modal
- -->
- <div class="modal-container" data-modal-container>
- <div class="overlay" data-overlay></div>
- <section class="testimonials-modal">
- <button class="modal-close-btn" data-modal-close-btn>
- <ion-icon name="close-outline"></ion-icon>
- </button>
- <div class="modal-img-wrapper">
- <figure class="modal-avatar-box">
- <img src="./assets/images/avatar-1.png" alt="Daniel lewis" width="80" data-modal-img>
- </figure>
- <img src="./assets/images/icon-quote.svg" alt="quote icon">
- </div>
- <div class="modal-content">
- <h4 class="h3 modal-title" data-modal-title>Daniel lewis</h4>
- <time datetime="2021-06-14">14 June, 2021</time>
- <div data-modal-text>
- <p>
- Richard was hired to create a corporate identity. We were very pleased with the work done. She has a
- lot of experience
- and is very concerned about the needs of client. Lorem ipsum dolor sit amet, ullamcous cididt
- consectetur adipiscing
- elit, seds do et eiusmod tempor incididunt ut laborels dolore magnarels alia.
- </p>
- </div>
- </div>
- </section>
- </div>
- <!--
- - clients
- -->
- <section class="clients">
- <h3 class="h3 clients-title">Clients</h3>
- <ul class="clients-list has-scrollbar">
- <li class="clients-item">
- <a href="#">
- <img src="./assets/images/logo-1-color.png" alt="client logo">
- </a>
- </li>
- <li class="clients-item">
- <a href="#">
- <img src="./assets/images/logo-2-color.png" alt="client logo">
- </a>
- </li>
- <li class="clients-item">
- <a href="#">
- <img src="./assets/images/logo-3-color.png" alt="client logo">
- </a>
- </li>
- <li class="clients-item">
- <a href="#">
- <img src="./assets/images/logo-4-color.png" alt="client logo">
- </a>
- </li>
- <li class="clients-item">
- <a href="#">
- <img src="./assets/images/logo-5-color.png" alt="client logo">
- </a>
- </li>
- <li class="clients-item">
- <a href="#">
- <img src="./assets/images/logo-6-color.png" alt="client logo">
- </a>
- </li>
- </ul>
- </section>
- </article>
- <!--
- - #RESUME
- -->
- <article class="resume" data-page="resume">
- <header>
- <h2 class="h2 article-title">Resume</h2>
- </header>
- <section class="timeline">
- <div class="title-wrapper">
- <div class="icon-box">
- <ion-icon name="book-outline"></ion-icon>
- </div>
- <h3 class="h3">Education</h3>
- </div>
- <ol class="timeline-list">
- <li class="timeline-item">
- <h4 class="h4 timeline-item-title">University school of the arts</h4>
- <span>2007 — 2008</span>
- <p class="timeline-text">
- Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et
- quas molestias
- exceptur.
- </p>
- </li>
- <li class="timeline-item">
- <h4 class="h4 timeline-item-title">New york academy of art</h4>
- <span>2006 — 2007</span>
- <p class="timeline-text">
- Ratione voluptatem sequi nesciunt, facere quisquams facere menda ossimus, omnis voluptas assumenda est
- omnis..
- </p>
- </li>
- <li class="timeline-item">
- <h4 class="h4 timeline-item-title">High school of art and design</h4>
- <span>2002 — 2004</span>
- <p class="timeline-text">
- Duis aute irure dolor in reprehenderit in voluptate, quila voluptas mag odit aut fugit, sed consequuntur
- magni dolores
- eos.
- </p>
- </li>
- </ol>
- </section>
- <section class="timeline">
- <div class="title-wrapper">
- <div class="icon-box">
- <ion-icon name="book-outline"></ion-icon>
- </div>
- <h3 class="h3">Experience</h3>
- </div>
- <ol class="timeline-list">
- <li class="timeline-item">
- <h4 class="h4 timeline-item-title">Creative director</h4>
- <span>2015 — Present</span>
- <p class="timeline-text">
- Nemo enim ipsam voluptatem blanditiis praesentium voluptum delenit atque corrupti, quos dolores et qvuas
- molestias
- exceptur.
- </p>
- </li>
- <li class="timeline-item">
- <h4 class="h4 timeline-item-title">Art director</h4>
- <span>2013 — 2015</span>
- <p class="timeline-text">
- Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et
- quas molestias
- exceptur.
- </p>
- </li>
- <li class="timeline-item">
- <h4 class="h4 timeline-item-title">Web designer</h4>
- <span>2010 — 2013</span>
- <p class="timeline-text">
- Nemo enims ipsam voluptatem, blanditiis praesentium voluptum delenit atque corrupti, quos dolores et
- quas molestias
- exceptur.
- </p>
- </li>
- </ol>
- </section>
- <section class="skill">
- <h3 class="h3 skills-title">My skills</h3>
- <ul class="skills-list content-card">
- <li class="skills-item">
- <div class="title-wrapper">
- <h5 class="h5">Web design</h5>
- <data value="80">80%</data>
- </div>
- <div class="skill-progress-bg">
- <div class="skill-progress-fill" style="width: 80%;"></div>
- </div>
- </li>
- <li class="skills-item">
- <div class="title-wrapper">
- <h5 class="h5">Graphic design</h5>
- <data value="70">70%</data>
- </div>
- <div class="skill-progress-bg">
- <div class="skill-progress-fill" style="width: 70%;"></div>
- </div>
- </li>
- <li class="skills-item">
- <div class="title-wrapper">
- <h5 class="h5">Branding</h5>
- <data value="90">90%</data>
- </div>
- <div class="skill-progress-bg">
- <div class="skill-progress-fill" style="width: 90%;"></div>
- </div>
- </li>
- <li class="skills-item">
- <div class="title-wrapper">
- <h5 class="h5">WordPress</h5>
- <data value="50">50%</data>
- </div>
- <div class="skill-progress-bg">
- <div class="skill-progress-fill" style="width: 50%;"></div>
- </div>
- </li>
- </ul>
- </section>
- </article>
- <!--
- - #PORTFOLIO
- -->
- <article class="portfolio" data-page="portfolio">
- <header>
- <h2 class="h2 article-title">Portfolio</h2>
- </header>
- <section class="projects">
- <ul class="filter-list">
- <li class="filter-item">
- <button class="active" data-filter-btn>All</button>
- </li>
- <li class="filter-item">
- <button data-filter-btn>Web design</button>
- </li>
- <li class="filter-item">
- <button data-filter-btn>Applications</button>
- </li>
- <li class="filter-item">
- <button data-filter-btn>Web development</button>
- </li>
- </ul>
- <div class="filter-select-box">
- <button class="filter-select" data-select>
- <div class="select-value" data-selecct-value>Select category</div>
- <div class="select-icon">
- <ion-icon name="chevron-down"></ion-icon>
- </div>
- </button>
- <ul class="select-list">
- <li class="select-item">
- <button data-select-item>All</button>
- </li>
- <li class="select-item">
- <button data-select-item>Web design</button>
- </li>
- <li class="select-item">
- <button data-select-item>Applications</button>
- </li>
- <li class="select-item">
- <button data-select-item>Web development</button>
- </li>
- </ul>
- </div>
- <ul class="project-list">
- <li class="project-item active" data-filter-item data-category="web development">
- <a href="#">
- <figure class="project-img">
- <div class="project-item-icon-box">
- <ion-icon name="eye-outline"></ion-icon>
- </div>
- <img src="./assets/images/project-1.jpg" alt="finance" loading="lazy">
- </figure>
- <h3 class="project-title">Finance</h3>
- <p class="project-category">Web development</p>
- </a>
- </li>
- <li class="project-item active" data-filter-item data-category="web development">
- <a href="#">
- <figure class="project-img">
- <div class="project-item-icon-box">
- <ion-icon name="eye-outline"></ion-icon>
- </div>
- <img src="./assets/images/project-2.png" alt="orizon" loading="lazy">
- </figure>
- <h3 class="project-title">Orizon</h3>
- <p class="project-category">Web development</p>
- </a>
- </li>
- <li class="project-item active" data-filter-item data-category="web design">
- <a href="#">
- <figure class="project-img">
- <div class="project-item-icon-box">
- <ion-icon name="eye-outline"></ion-icon>
- </div>
- <img src="./assets/images/project-3.jpg" alt="fundo" loading="lazy">
- </figure>
- <h3 class="project-title">Fundo</h3>
- <p class="project-category">Web design</p>
- </a>
- </li>
- <li class="project-item active" data-filter-item data-category="applications">
- <a href="#">
- <figure class="project-img">
- <div class="project-item-icon-box">
- <ion-icon name="eye-outline"></ion-icon>
- </div>
- <img src="./assets/images/project-4.png" alt="brawlhalla" loading="lazy">
- </figure>
- <h3 class="project-title">Brawlhalla</h3>
- <p class="project-category">Applications</p>
- </a>
- </li>
- <li class="project-item active" data-filter-item data-category="web design">
- <a href="#">
- <figure class="project-img">
- <div class="project-item-icon-box">
- <ion-icon name="eye-outline"></ion-icon>
- </div>
- <img src="./assets/images/project-5.png" alt="dsm." loading="lazy">
- </figure>
- <h3 class="project-title">DSM.</h3>
- <p class="project-category">Web design</p>
- </a>
- </li>
- <li class="project-item active" data-filter-item data-category="web design">
- <a href="#">
- <figure class="project-img">
- <div class="project-item-icon-box">
- <ion-icon name="eye-outline"></ion-icon>
- </div>
- <img src="./assets/images/project-6.png" alt="metaspark" loading="lazy">
- </figure>
- <h3 class="project-title">MetaSpark</h3>
- <p class="project-category">Web design</p>
- </a>
- </li>
- <li class="project-item active" data-filter-item data-category="web development">
- <a href="#">
- <figure class="project-img">
- <div class="project-item-icon-box">
- <ion-icon name="eye-outline"></ion-icon>
- </div>
- <img src="./assets/images/project-7.png" alt="summary" loading="lazy">
- </figure>
- <h3 class="project-title">Summary</h3>
- <p class="project-category">Web development</p>
- </a>
- </li>
- <li class="project-item active" data-filter-item data-category="applications">
- <a href="#">
- <figure class="project-img">
- <div class="project-item-icon-box">
- <ion-icon name="eye-outline"></ion-icon>
- </div>
- <img src="./assets/images/project-8.jpg" alt="task manager" loading="lazy">
- </figure>
- <h3 class="project-title">Task Manager</h3>
- <p class="project-category">Applications</p>
- </a>
- </li>
- <li class="project-item active" data-filter-item data-category="web development">
- <a href="#">
- <figure class="project-img">
- <div class="project-item-icon-box">
- <ion-icon name="eye-outline"></ion-icon>
- </div>
- <img src="./assets/images/project-9.png" alt="arrival" loading="lazy">
- </figure>
- <h3 class="project-title">Arrival</h3>
- <p class="project-category">Web development</p>
- </a>
- </li>
- </ul>
- </section>
- </article>
- <!--
- - #BLOG
- -->
- <article class="blog" data-page="blog">
- <header>
- <h2 class="h2 article-title">Blog</h2>
- </header>
- <section class="blog-posts">
- <ul class="blog-posts-list">
- <li class="blog-post-item">
- <a href="#">
- <figure class="blog-banner-box">
- <img src="./assets/images/blog-1.jpg" alt="Design conferences in 2022" loading="lazy">
- </figure>
- <div class="blog-content">
- <div class="blog-meta">
- <p class="blog-category">Design</p>
- <span class="dot"></span>
- <time datetime="2022-02-23">Fab 23, 2022</time>
- </div>
- <h3 class="h3 blog-item-title">Design conferences in 2022</h3>
- <p class="blog-text">
- Veritatis et quasi architecto beatae vitae dicta sunt, explicabo.
- </p>
- </div>
- </a>
- </li>
- <li class="blog-post-item">
- <a href="#">
- <figure class="blog-banner-box">
- <img src="./assets/images/blog-2.jpg" alt="Best fonts every designer" loading="lazy">
- </figure>
- <div class="blog-content">
- <div class="blog-meta">
- <p class="blog-category">Design</p>
- <span class="dot"></span>
- <time datetime="2022-02-23">Fab 23, 2022</time>
- </div>
- <h3 class="h3 blog-item-title">Best fonts every designer</h3>
- <p class="blog-text">
- Sed ut perspiciatis, nam libero tempore, cum soluta nobis est eligendi.
- </p>
- </div>
- </a>
- </li>
- <li class="blog-post-item">
- <a href="#">
- <figure class="blog-banner-box">
- <img src="./assets/images/blog-3.jpg" alt="Design digest #80" loading="lazy">
- </figure>
- <div class="blog-content">
- <div class="blog-meta">
- <p class="blog-category">Design</p>
- <span class="dot"></span>
- <time datetime="2022-02-23">Fab 23, 2022</time>
- </div>
- <h3 class="h3 blog-item-title">Design digest #80</h3>
- <p class="blog-text">
- Excepteur sint occaecat cupidatat no proident, quis nostrum exercitationem ullam corporis suscipit.
- </p>
- </div>
- </a>
- </li>
- <li class="blog-post-item">
- <a href="#">
- <figure class="blog-banner-box">
- <img src="./assets/images/blog-4.jpg" alt="UI interactions of the week" loading="lazy">
- </figure>
- <div class="blog-content">
- <div class="blog-meta">
- <p class="blog-category">Design</p>
- <span class="dot"></span>
- <time datetime="2022-02-23">Fab 23, 2022</time>
- </div>
- <h3 class="h3 blog-item-title">UI interactions of the week</h3>
- <p class="blog-text">
- Enim ad minim veniam, consectetur adipiscing elit, quis nostrud exercitation ullamco laboris nisi.
- </p>
- </div>
- </a>
- </li>
- <li class="blog-post-item">
- <a href="#">
- <figure class="blog-banner-box">
- <img src="./assets/images/blog-5.jpg" alt="The forgotten art of spacing" loading="lazy">
- </figure>
- <div class="blog-content">
- <div class="blog-meta">
- <p class="blog-category">Design</p>
- <span class="dot"></span>
- <time datetime="2022-02-23">Fab 23, 2022</time>
- </div>
- <h3 class="h3 blog-item-title">The forgotten art of spacing</h3>
- <p class="blog-text">
- Maxime placeat, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- </p>
- </div>
- </a>
- </li>
- <li class="blog-post-item">
- <a href="#">
- <figure class="blog-banner-box">
- <img src="./assets/images/blog-6.jpg" alt="Design digest #79" loading="lazy">
- </figure>
- <div class="blog-content">
- <div class="blog-meta">
- <p class="blog-category">Design</p>
- <span class="dot"></span>
- <time datetime="2022-02-23">Fab 23, 2022</time>
- </div>
- <h3 class="h3 blog-item-title">Design digest #79</h3>
- <p class="blog-text">
- Optio cumque nihil impedit uo minus quod maxime placeat, velit esse cillum.
- </p>
- </div>
- </a>
- </li>
- </ul>
- </section>
- </article>
- <!--
- - #CONTACT
- -->
- <article class="contact" data-page="contact">
- <header>
- <h2 class="h2 article-title">Contact</h2>
- </header>
- <section class="mapbox" data-mapbox>
- <figure>
- <iframe
- src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d199666.5651251294!2d-121.58334177520186!3d38.56165006739519!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x809ac672b28397f9%3A0x921f6aaa74197fdb!2sSacramento%2C%20CA%2C%20USA!5e0!3m2!1sen!2sbd!4v1647608789441!5m2!1sen!2sbd"
- width="400" height="300" loading="lazy"></iframe>
- </figure>
- </section>
- <section class="contact-form">
- <h3 class="h3 form-title">Contact Form</h3>
- <form action="#" class="form" data-form>
- <div class="input-wrapper">
- <input type="text" name="fullname" class="form-input" placeholder="Full name" required data-form-input>
- <input type="email" name="email" class="form-input" placeholder="Email address" required data-form-input>
- </div>
- <textarea name="message" class="form-input" placeholder="Your Message" required data-form-input></textarea>
- <button class="form-btn" type="submit" disabled data-form-btn>
- <ion-icon name="paper-plane"></ion-icon>
- <span>Send Message</span>
- </button>
- </form>
- </section>
- </article>
- </div>
- </main>
- <!--
- - custom js link
- -->
- <script src="./assets/js/script.js"></script>
- <!--
- - ionicon link
- -->
- <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
- <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
- </body>
- </html>
|