123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309 |
- <!DOCTYPE html>
- <html lang="ru">
- <head>
- <meta charset="UTF-8" />
- <meta
- content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
- name="viewport"
- />
- <meta content="ie=edge" http-equiv="X-UA-Compatible" />
- <title>Веб-Магнат</title>
- <!--!!! Fonts HERE !!!-->
- <!-- FavIcon-->
- <link href="./img/favicon.svg" rel="icon" />
- <!-- Styles-->
- <link href="./css/index.css" rel="stylesheet" />
- <!-- JS-->
- <script defer src="./js/player.js"></script>
- <script defer src="./js/carousel.js"></script>
- <script defer src="./js/accordion.js"></script>
- </head>
- <body>
- <header class="container">
- <section class="top-nav">
- <a href="/"
- ><img draggable="false" alt="logo" src="./img/logo.svg"
- /></a>
- <input id="menu-toggle" type="checkbox" />
- <label class="menu-button-container" for="menu-toggle">
- <div class="menu-button"></div>
- </label>
- <ul class="menu">
- <li>
- <a href="#about">О нас</a>
- </li>
- <li>
- <a href="#services">Услуги</a>
- </li>
- <li>
- <a href="#portfolio">Портфолио</a>
- </li>
- <li>
- <a href="#contacts">Контакты</a>
- </li>
- </ul>
- </section>
- </header>
- <main>
- <section class="container">
- <h1>Веб-Магнат</h1>
- <p>Команда Frontend-разработчиков</p>
- </section>
- <section>
- <div class="video">
- <video
- autoplay
- id="player"
- loop
- muted
- src="video/video-1080p.mp4"
- ></video>
- <div class="video__content">
- <div class="video__content_inner">
- <div class="container">
- <p>
- "Мы команда талантливых студентов, стремящихся создавать
- уникальные <br />
- веб-сайты. С нашими навыками веб-разработки и творческим
- подходом <br />
- мы готовы превратить ваши идеи в реальность. Доверьте нам ваш
- проект!"
- </p>
- <button>
- <img
- alt="PlayPause.svg"
- id="videoBtn"
- onclick="PlayPause()"
- src="img/pause.svg"
- />
- </button>
- </div>
- </div>
- </div>
- </div>
- <div class="container description" id="about">
- <div class="notebook">
- <img draggable="false" alt="notebook" src="./img/notebook.png" />
- <p>У нас есть мощные технические инструменты</p>
- </div>
- <div class="keyboard">
- <p>
- Мы специализируемся на веб-разработке, создании функциональных и
- привлекательных веб-сайтов. Нас вдохновляет стремление к
- инновациям и желание создавать новое. Наша цель — не просто
- разрабатывать сайты, но создавать уникальные и эффективные
- онлайн-пространства, которые будут помогать нашим клиентам достичь
- успеха в своей сфере. Мы полагаем, что качественные веб-решения
- имеют огромное значение для успешного онлайн-проекта, поэтому мы
- постоянно совершенствуемся, изучая новые технологии и стремясь к
- лучшему в нашей области.
- </p>
- <img draggable="false" alt="keyboard" src="./img/keyboard.png" />
- </div>
- </div>
- </section>
- <section class="container our-skills">
- <h2>Наши навыки</h2>
- <div class="our-skills-content">
- <button class="our-skills-btn skills-btn-prev">
- <img alt="arr_left" src="./img/arr_left.png" />
- </button>
- <div class="carousel">
- <p class="carousel-item">HTML</p>
- <p class="carousel-item">CSS</p>
- <p class="carousel-item">JavaScript</p>
- <p class="carousel-item">Git</p>
- <p class="carousel-item">Bootstrap</p>
- <p class="carousel-item">React</p>
- <p class="carousel-item">SASS</p>
- <p class="carousel-item">Figma</p>
- <p class="carousel-item">PHP</p>
- <p class="carousel-item">Photoshop</p>
- <p class="carousel-item">Illustrator</p>
- </div>
- <button class="our-skills-btn skills-btn-next">
- <img alt="arr_right" src="./img/arr_right.png" />
- </button>
- </div>
- </section>
- <section class="services" id="services">
- <h2>Услуги</h2>
- <div class="accordion">
- <article class="first__article">
- <input checked id="article1" name="articles" type="radio" />
- <label for="article1">
- <h3>Веб-Дизайн</h3>
- </label>
- <div>
- <p>От 2.000 — 10.000 руб</p>
- <ul>
- <li>Одностраничные и многостраничные сайты</li>
- <li>Разработка прототипа и макета в Figma</li>
- <li>Подборка изображений на фотостоках</li>
- <li>Подборка шрифтов</li>
- <li>Дизайн под мобильное устройство</li>
- <li>Разработка логотипа в AdobeIllustrartor</li>
- </ul>
- <a href="#contacts">Связаться</a>
- </div>
- </article>
- <article class="second__article">
- <input id="article2" name="articles" type="radio" />
- <label for="article2">
- <h3>Оптимизация готового сайта</h3>
- </label>
- <div>
- <p>От 2.000 — 6.000 руб</p>
- <ul>
- <li>Минимизация CSS, JavaScript и HTML</li>
- <li>Асинхронная загрузка ресурсов</li>
- <li>Адаптивная и оптимизированная верстка</li>
- <li>Тестирование и оптимизация производительности</li>
- <li>Оптимизация изображений</li>
- </ul>
- <a href="#contacts">Связаться</a>
- </div>
- </article>
- <article class="third__article">
- <input id="article3" name="articles" type="radio" />
- <label for="article3">
- <h3>Верстка сайта</h3>
- </label>
- <div>
- <p>От 2.000 — 15.000 руб</p>
- <ul>
- <li>Одностраничные и многостраничные сайты</li>
- <li>Создание HTML-разметки</li>
- <li>Стилизация с помощью CSS</li>
- <li>Cоздание адаптива</li>
- <li>Кроссбраузерность</li>
- <li>Добавление интерактивных элементов(JavaScript)</li>
- </ul>
- <a href="#contacts">Связаться</a>
- </div>
- </article>
- <article class="fourth__article">
- <input id="article4" name="articles" type="radio" />
- <label for="article4">
- <h3>Разработка на React</h3>
- </label>
- <div>
- <p>От 5.000 — 20.000 руб</p>
- <ul>
- <li>Создание интерактивных пользовательских интерфейсов</li>
- <li>Разработка компонентов для повторного использования</li>
- <li>Оптимизация производительности приложения</li>
- <li>Интеграция с внешними API и библиотеками</li>
- <li>
- Обеспечение совместимости с различными браузерами и
- устройствами
- </li>
- </ul>
- <a href="#contacts">Связаться</a>
- </div>
- </article>
- </div>
- </section>
- <section id="portfolio" class="portfolio container">
- <h2>Портфолио</h2>
- <div class="portfolio__list">
- <hr />
- <div class="portfolio__item">
- <a
- target="_blank"
- href="https://www.figma.com/file/bBG1E3BnYnjdun969M9EiD/%D0%98%D0%BD%D1%84%D0%BE%D1%80%D0%BC%D0%B8%D1%80%D1%83%D1%8E%D1%89%D0%B5%D0%B9-%D1%81%D0%B0%D0%B9%D1%82-%D0%BE-%D0%BF%D1%80%D0%BE%D1%84%D0%B5%D1%81%D1%81%D0%B8%D0%B8-%D0%B2%D0%B5%D0%B1-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA?type=design&node-id=14%3A3&mode=design&t=tPPUltV2x17QLkCv-1"
- >Дизайн лэндинга "Кто такой <br />веб-разработчик"</a
- >
- <div>
- <p>Ph</p>
- <p>AI</p>
- <p>Figma</p>
- </div>
- </div>
- <hr />
- <div class="portfolio__item">
- <a target="_blank" href="https://galaevas.github.io/Ride-sharing/"
- >Сайт для приложения отслеживания поездок</a
- >
- <div>
- <p>Bootstrap</p>
- <p>HTML</p>
- <p>CSS</p>
- </div>
- </div>
- <hr />
- <div class="portfolio__item">
- <a target="_blank" href="https://galaevas.github.io/supboard/"
- >Сайт для компании продающей сапы</a
- >
- <div>
- <p>Кроссбраузерность</p>
- <p>Адаптив</p>
- <p>HTML</p>
- <p>CSS</p>
- </div>
- </div>
- <hr />
- <div class="portfolio__item">
- <a target="_blank" href="https://flory143.github.io/WeatherApp/"
- >Приложение - погода</a
- >
- <div>
- <p>Кроссбраузерность</p>
- <p>Адаптив</p>
- <p>HTML</p>
- <p>CSS</p>
- <p>JavaScript</p>
- </div>
- </div>
- <hr />
- <div class="portfolio__item">
- <a
- target="_blank"
- href="https://flory143.github.io/frontend-challenge/"
- >"Кошачий пинтрест"</a
- >
- <div>
- <p>JavaScript</p>
- <p>Адаптив</p>
- <p>HTML</p>
- <p>CSS</p>
- <p>Кроссбраузерность</p>
- </div>
- </div>
- <hr />
- <div class="portfolio__item">
- <a
- target="_blank"
- href="https://www.figma.com/file/SqWGWYQdoEp5F6syOc6afv/Sleepty?type=design&node-id=0%3A1&mode=design&t=WCBlbZca1jZM9rrZ-1"
- >Дизайн сайта "Sleepty"</a
- >
- <div>
- <p>Ph</p>
- <p>AI</p>
- <p>Figma</p>
- </div>
- </div>
- <hr />
- </div>
- </section>
- </main>
- <footer id="contacts">
- <div>
- <p>Email</p>
- <div>
- <a href="mailto:web-magnat@bk.ru">WEB-MAGNAT@BK.RU</a>
- <a href="mailto:web-magnatik@gmail.com">WEB-MAGNATIK@gmail.COM</a>
- </div>
- </div>
- <div>
- <p>Телефон</p>
- <div>
- <a href="tel:+74565674556">+7 456 567 45 56</a>
- <a href="tel:+74565674556">+7 456 567 45 56</a>
- </div>
- </div>
- </footer>
- </body>
- </html>
|