Videotyan.html 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Videotyan</title>
  5. <meta charset="UTF-8">
  6. <link rel="shortcut icon" href="icon.ico" type="image/x-icon">
  7. <link rel="stylesheet" href="Beauty.css">
  8. <style>
  9. .tab {
  10. overflow: hidden;
  11. background-color: #f1f1f1;
  12. }
  13. .tab button {
  14. background-color: inherit;
  15. border: none;
  16. outline: none;
  17. cursor: pointer;
  18. padding: 14px 16px;
  19. transition: 0.3s;
  20. font-size: 17px;
  21. }
  22. .tab button:hover {
  23. background-color: #ddd;
  24. }
  25. .tab button.active {
  26. background-color: #ccc;
  27. }
  28. .tabcontent {
  29. display: none;
  30. padding: 6px 12px;
  31. border: 1px solid #ccc;
  32. border-top: none;
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. <div class="tab">
  38. <button class="tablinks" onclick="openTab(event, 'home')">Главная</button>
  39. <button class="tablinks" onclick="openTab(event, 'about')">О компании</button>
  40. </div>
  41. <div id="home" class="tabcontent">
  42. <h3>Добро пожаловать на главную страницу сайта ВидеоТян</h3>
  43. <p>Наше приложение поможет найти нужных специалистов, чтобы написать сценарий, снять и смонтировать видео различной степени сложности *(например, видео о путешествиях, рекламные видео, трейлер для сериала и многое другое)*.
  44. Всё что от вас нужно - это наличие идеи для видео. Наше приложение подберет для вас специалистов под ваши задачи
  45. (съемка локации, озвучка текста, монтаж видеоролика и т.д).</p>
  46. <h4>Оставьте заявку</h4>
  47. <form>
  48. <label for="name">ФИО:</label>
  49. <input type="text" id="name" name="name" required>
  50. <label for="phone">Контактный телефон:</label>
  51. <input type="tel" id="phone" name="phone" required>
  52. <label for="email">Адрес почты:</label>
  53. <input type="email" id="email" name="email" required>
  54. <label for="company">Название компании:</label>
  55. <input type="text" id="company" name="company" required>
  56. <label for="project-description">Описание проекта:</label>
  57. <textarea id="project-description" name="project-description" rows="4" cols="50" required></textarea>
  58. <label for="budget">Бюджет проекта:</label>
  59. <input type="number" id="budget" name="budget" required>
  60. <label for="deadline">Сроки реализации:</label>
  61. <input type="date" id="deadline" name="deadline" required>
  62. <input type="submit" value="Отправить">
  63. </form>
  64. </div>
  65. <div id="about" class="tabcontent">
  66. <h3>О нашей компании</h3>
  67. <p>Мы - команда студентов, создавшая это приложение в рамках учебного проекта.
  68. Наша цель - помочь людям в создании видео различной сложности, будь то рекламные ролики или видео о путешествиях.
  69. Мы собрали команду лучших специалистов, готовых помочь вам в создании видео - от съемки до монтажа. Наше приложение поможет
  70. вам легко и быстро найти идеальных специалистов для вашего проекта. С нами ваше видео будет выглядеть профессионально и качественно!</p>
  71. <h4>Партнеры компании</h4>
  72. <p>Мы являемся готовыми сотрудничать с различными компаниями и организациями,
  73. чтобы предоставлять нашим клиентам еще больше возможностей. Ниже приведены некоторые из наших партнеров:
  74. - Фотостудия "Кадр"
  75. - Агентство контента "Contento"
  76. - Туроператор "Путешествуй с нами"
  77. - Медиа-агентство "ProMotion"</p>
  78. <h4>Контакты</h4>
  79. <p> - Адрес: ул. Пушкина, д. 10, офис 15
  80. - Электронная почта: [info@videoteam.ru](mailto:info@videoteam.ru)
  81. - Телефон: +7 (495) 123-45-67</p>
  82. </div>
  83. <script>
  84. function openTab(evt, tabName) {
  85. let i, tabcontent, tablinks;
  86. tabcontent = document.getElementsByClassName("tabcontent");
  87. for (i = 0; i < tabcontent.length; i++) {
  88. tabcontent[i].style.display = "none";
  89. }
  90. tablinks = document.getElementsByClassName("tablinks");
  91. for (i = 0; i < tablinks.length; i++) {
  92. tablinks[i].className = tablinks[i].className.replace(" active", "");
  93. }
  94. document.getElementById(tabName).style.display = "block";
  95. evt.currentTarget.className += " active";
  96. }
  97. </script>
  98. </body>
  99. </html>