index.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
  7. <link rel="stylesheet" href="./css/styles.css">
  8. <title>Document</title>
  9. </head>
  10. <body>
  11. <form action="">
  12. <label>
  13. <input name="name" placeholder="Введите имя" type="text">
  14. </label>
  15. <input id="email" type="email">
  16. <select name="">
  17. <option value=""> Option 1</option>
  18. <option value=""> Option 2</option>
  19. <option value=""> Option 3</option>
  20. </select>
  21. <div>
  22. <label class="custom-checkbox">
  23. <input type="checkbox" name="variant">
  24. <div class="custom-checkbox__box">
  25. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
  26. <path d="M433.139,67.108L201.294,298.953c-6.249,6.249-16.381,6.249-22.63,0L78.861,199.15L0,278.011 l150.547,150.549c10.458,10.458,24.642,16.333,39.431,16.333l0,0c14.788,0,28.973-5.876,39.43-16.333L512,145.968L433.139,67.108z"/>
  27. <g style="opacity:0.1;">
  28. <path d="M485.921,119.888L187.59,418.22c-8.254,8.253-18.633,13.882-29.847,16.391c9.363,6.635,20.608,10.28,32.235,10.28l0,0 c14.788,0,28.973-5.876,39.43-16.333L512,145.966L485.921,119.888z"/>
  29. </g>
  30. <g>
  31. </g>
  32. <g>
  33. </g>
  34. <g>
  35. </g>
  36. <g>
  37. </g>
  38. <g>
  39. </g>
  40. <g>
  41. </g>
  42. <g>
  43. </g>
  44. <g>
  45. </g>
  46. <g>
  47. </g>
  48. <g>
  49. </g>
  50. <g>
  51. </g>
  52. <g>
  53. </g>
  54. <g>
  55. </g>
  56. <g>
  57. </g>
  58. <g>
  59. </g>
  60. </svg>
  61. </div>
  62. <div class="custom-checkbox__label">
  63. Вариант выбора
  64. </div>
  65. </label>
  66. </div>
  67. <button type="submit">Submit</button>
  68. </form>
  69. <div class="slider">
  70. <div class="item">
  71. <img src="img2.jpg" width="310" height="396" alt="">
  72. <div class="title">
  73. Lorem ipsum dolor sit amet consectetur adipisicing
  74. </div>
  75. </div>
  76. <div class="item">
  77. <img src="img2.jpg" width="310" height="396" alt="">
  78. <div class="title">
  79. Lorem ipsum dolor sit amet consectetur adipisicing
  80. </div>
  81. </div>
  82. <div class="item">
  83. <img src="img2.jpg" width="310" height="396" alt="">
  84. <div class="title">
  85. Lorem ipsum dolor sit amet consectetur adipisicing
  86. </div>
  87. </div>
  88. <div class="item">
  89. <img src="img2.jpg" width="310" height="396" alt="">
  90. <div class="title">
  91. Lorem ipsum dolor sit amet consectetur adipisicing
  92. </div>
  93. </div>
  94. <div class="item">
  95. <img src="img2.jpg" width="310" height="396" alt="">
  96. <div class="title">
  97. Lorem ipsum dolor sit amet consectetur adipisicing
  98. </div>
  99. </div>
  100. </div>
  101. <script
  102. src="https://code.jquery.com/jquery-3.5.1.min.js"
  103. integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  104. crossorigin="anonymous"></script>
  105. <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  106. <script>
  107. $('.slider').slick({
  108. slidesToShow: 4
  109. })
  110. </script>
  111. </body>
  112. </html>