Viper.html 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <link rel="stylesheet" href="./styles/null.css">
  8. <link rel="stylesheet" href="./styles/style_Viper.css">
  9. <script src="./script.js"></script>
  10. <title>Viper MK IV</title>
  11. </head>
  12. <body class="angled-gradient">
  13. <nav class="top_nav">
  14. <div class="navbar">
  15. <div class="navbar-logo">
  16. <img class="img-logo" src="./images/Delacy.webp">
  17. </div>
  18. <div class="nav-name">Viper MK IV</div>
  19. <ul class="navigate">
  20. <li class="nav-item-block"><button class="nav-item"> viper</button></li>
  21. <li class="nav-item-block"><button class="nav-item"> Other products</button></li>
  22. <li class="nav-item-block"><button class="nav-item"> Contacts</button></li>
  23. <li class="nav-item-block"><button class="nav-item"> About us</button></li>
  24. </ul>
  25. </div>
  26. </nav>
  27. <div class="viper_info">
  28. <div class="info-block">
  29. <img class="img-first" src="images/Viper/Viper_MK_IV_-_Profile.webp"> ipsum dolor sit amet consectetur adipisicing
  30. elit. A consequatur
  31. perspiciatis soluta dolores autem? Vel esse ex tenetur porro illo. Earum suscipit laborum voluptatibus quod
  32. molestias quam similique culpa dolorem.
  33. </div>
  34. <div class="grayline"></div>
  35. <div class="info-block">
  36. <img class="img-second" src="images/Viper/viper_mkiv_blackfriday_01.jpg"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus magni eligendi accusantium laborum aliquam! Nulla veritatis saepe quisquam, dolorum maxime doloribus animi optio, assumenda, dignissimos voluptatum ipsa nam architecto aperiam.
  37. </div>
  38. <div class="grayline"></div>
  39. <div class="info-block">
  40. <img class="img-first" src="images/Viper/9460-369bd94a-large.png"> Lorem, ipsum dolor sit amet consectetur
  41. adipisicing elit. Cumque
  42. non quia itaque consequuntur fugiat atque dolorum laboriosam? Non maiores rerum accusantium modi, blanditiis
  43. tempora, dolor eveniet voluptate dignissimos, asperiores amet. Lorem ipsum dolor sit amet consectetur adipisicing
  44. elit. Sunt, nemo ea vero nihil at consequatur molestias delectus rem cum minus expedita ad ipsa eius maxime!
  45. Praesentium quos rerum nostrum dolorem!ipsum dolor sit amet consectetur adipisicing elit. A consequatur
  46. perspiciatis soluta dolores autem? Vel esse ex tenetur porro illo. Earum suscipit laborum voluptatibus quod
  47. molestias quam similique culpa dolorem.
  48. </div>
  49. <div class="grayline"></div>
  50. <div class="info-block">
  51. <div class="videoframe">
  52. <iframe width="1200" height="600" src="https://www.youtube.com/embed/ueY1cW6ppsg?si=SKNIthNHrqekyiTe"></iframe>
  53. </div>
  54. </div>
  55. </div>
  56. <div class="viper_info">
  57. <div class="complectation">
  58. <div class="comp-btn">
  59. <input type="button" value="Midnight Black" class="black-comp" onmousedown="viewDivBlack()">
  60. <input type="button" value="Synth White" class="white-comp" onmousedown="viewDivWhite()">
  61. <input type="button" value="Cobalt" class="cobalt-comp" onmousedown="viewDivCobalt()">
  62. </div>
  63. <div id="div1"><img class="complectation-img" src="images/Viper/viper_mkiv_blackfriday_01.jpg">
  64. <div class="complectation-info">
  65. <ul class="list-comp">
  66. <li class="comp-info-item">Элегантный чёрный.</li>
  67. <li class="comp-info-item">Для важных господ.</li>
  68. <li class="comp-info-item">Отлично подходит к костюму.</li>
  69. </ul>
  70. </div>
  71. </div>
  72. <div id="div2"><img class="complectation-img" src="images/Viper/viper_mkiv_synth_white.jpg">
  73. <div class="complectation-info">
  74. <ul class="list-comp">
  75. <li class="comp-info-item">Особенный белый.</li>
  76. <li class="comp-info-item">Для того что бы сочетать.</li>
  77. <li class="comp-info-item">Красивый аксессуар и образ неповторим.</li>
  78. </ul>
  79. </div>
  80. </div></div>
  81. <div id="div3"><img class="complectation-img" src="images/Viper/viper_mkiv_tactical_blue.jpg">
  82. <div class="complectation-info">
  83. <ul class="list-comp">
  84. <li class="comp-info-item">Корпоративный синий.</li>
  85. <li class="comp-info-item">Для серьезного подхода.</li>
  86. <li class="comp-info-item">Вы создаёте условия, они выполняют.</li>
  87. </ul>
  88. </div>
  89. </div></div>
  90. </div>
  91. </div>
  92. <div class="other-products">
  93. <div class="white-space-products">
  94. Представляем другие варианты на продажу
  95. </div>
  96. <div class="row-products">
  97. <a href="main.html" class="a-products"><img class="img-products" src="images/Anaconda/first.webp"></a>
  98. <a href="Cobra.html" class="a-products"><img class="img-products" src="images/Cobra/cobramkiv_blackfriday_01.jpg"></a>
  99. <a href="Krait.html" class="a-products"><img class="img-products" src="images/Krait/krait_light_default_defaultpaintjob.jpg"></a>
  100. </div>
  101. </div>
  102. <div class="About">
  103. <div class="MKiD">
  104. <p>Добро пожаловать в "Маршалл, Картер и Дарк"
  105. </p>
  106. <p>
  107. Делаем недоступное доступным с 1808 года
  108. </p>
  109. <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
  110. <p>Ut porro, aliquid repellat minima neque,</p>
  111. iste eligendi quam quibusdam laboriosam magnam ipsam omnis impedit nostrum ipsum dolorem non totam in. Odit.</p>
  112. </div>
  113. <div class="grayline"></div>
  114. <div class="DeLacey">
  115. <p>Faulcon DeLacy</p>
  116. <p>
  117. </p>
  118. <p>
  119. Компания была основана в XXII веке как Faulcon Manspace и стала известной, выпустив оригинальный Viper, в
  120. последствии быстро расширилась за счет ряда приобретений, включая deLacy ShipWorks и Zorgon Peterson.<img
  121. class="DeLacey-logo" src="./images/Delacy.webp">
  122. <p> К XXXIV веку компания стала крупнейшим производителем кораблей многоцелевого назначения.</p>
  123. </p>
  124. </div>
  125. </div>
  126. </body>
  127. </html>