123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
- <link rel="stylesheet" href="./css/styles.css">
- <title>Document</title>
- </head>
- <body>
- <form action="">
- <label>
- <input name="name" placeholder="Введите имя" type="text">
- </label>
- <input id="email" type="email">
- <select name="">
- <option value=""> Option 1</option>
- <option value=""> Option 2</option>
- <option value=""> Option 3</option>
- </select>
- <div>
- <label class="custom-checkbox">
- <input type="checkbox" name="variant">
- <div class="custom-checkbox__box">
- <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">
- <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"/>
- <g style="opacity:0.1;">
- <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"/>
- </g>
- <g>
- </g>
- <g>
- </g>
- <g>
- </g>
- <g>
- </g>
- <g>
- </g>
- <g>
- </g>
- <g>
- </g>
- <g>
- </g>
- <g>
- </g>
- <g>
- </g>
- <g>
- </g>
- <g>
- </g>
- <g>
- </g>
- <g>
- </g>
- <g>
- </g>
- </svg>
- </div>
- <div class="custom-checkbox__label">
- Вариант выбора
- </div>
- </label>
- </div>
- <button type="submit">Submit</button>
- </form>
- <div class="slider">
- <div class="item">
- <img src="img2.jpg" width="310" height="396" alt="">
- <div class="title">
- Lorem ipsum dolor sit amet consectetur adipisicing
- </div>
- </div>
- <div class="item">
- <img src="img2.jpg" width="310" height="396" alt="">
- <div class="title">
- Lorem ipsum dolor sit amet consectetur adipisicing
- </div>
- </div>
- <div class="item">
- <img src="img2.jpg" width="310" height="396" alt="">
- <div class="title">
- Lorem ipsum dolor sit amet consectetur adipisicing
- </div>
- </div>
- <div class="item">
- <img src="img2.jpg" width="310" height="396" alt="">
- <div class="title">
- Lorem ipsum dolor sit amet consectetur adipisicing
- </div>
- </div>
- <div class="item">
- <img src="img2.jpg" width="310" height="396" alt="">
- <div class="title">
- Lorem ipsum dolor sit amet consectetur adipisicing
- </div>
- </div>
- </div>
-
- <script
- src="https://code.jquery.com/jquery-3.5.1.min.js"
- integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
- crossorigin="anonymous"></script>
- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
- <script>
- $('.slider').slick({
- slidesToShow: 4
- })
- </script>
- </body>
- </html>
|