Denis
/
student


			
				
					
						
						
							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">О&nbspнас</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>