<svg viewBox="0 0 230 170" width="230" height="170">
<!-- красный прямоугольник. все просто: его координаты, размер и цвет. -->
<rect x="25.787" y="24.356" width="86.676" height="70.201" style="fill: red; stroke: black;"/>
<!-- оранжевая фигура. тоже все просто: М - передвинуть курсор в стартовую точку. L - линия к следующей точке. Z - вернуться к стартовой точке -->
<path style="fill: orange; stroke: rgb(0, 0, 0);" d="M 180.515 41.547 L 237.821 14.327 L 219.197 58.74 L 258.595 58.023 L 254.297 106.733 L 188.395 92.407 L 151.862 111.748 L 180.515 41.547 Z"/>
<!-- зеленая фигура - тут все сложнее, множество кривых -->
<path style="fill: green; stroke: rgb(0, 0, 0);" d="M 48.71 167.622 C 50.051 166.281 51.028 163.24 52.292 162.608 C 57.371 160.068 73.586 162.932 75.931 167.622 C 77.241 170.243 78.035 175.457 80.229 177.651 C 83.99 181.412 92.17 181.949 98.137 181.949 C 112.297 181.949 116.317 171.648 124.641 163.324 C 126.493 161.473 128.677 164.495 128.939 164.757 C 130.374 166.192 133.649 165.733 135.386 168.338 C 138.074 172.37 141.312 183.208 146.131 184.814 C 151.308 186.54 156.094 181.103 159.742 178.367 C 165.987 173.683 170.882 171.204 178.366 171.204 C 177.805 169.522 178.375 166.208 177.65 164.757 C 172.743 154.943 154.156 155.875 146.131 151.863 C 139.792 148.693 129.294 154.13 122.492 151.863 C 107.921 147.006 91.9 141.834 75.931 141.834 C 67.335 141.834 58.739 141.834 50.143 141.834 C 49.192 141.834 42.335 141.046 41.547 141.834 C 39.738 143.643 35.013 144.874 33.667 147.565 C 27.725 159.449 37.784 167.622 48.71 167.622 Z"/>
</svg>
.section {
padding: 10px;
background-color: #010915;
height: 90vh;
}
.section-block-one {
height: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #1c344b;
}
.section-block-two {
width: 200px;
height: 200px;
background-color: white;
}
В codepen я нашел интересный проект...
galleryThumbs.slick({
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: gallerySlides,
arrows: true,
vertical: false,
dots: false,
focusOnSelect: true,
mobileFirst: true,
appendArrows:'.slider-arrows',
nextArrow: slickNextGallery,
prevArrow: slickPrevGallery,
variableWidth: true,
infinite: false,
responsive: [{
breakpoint: 380,
settings: {
infinite: true,
}
},{
breakpoint: 768,
settings: {
infinite: false,
}
},{
breakpoint: 991,
settings: {
vertical: true,
variableWidth: false
}
}]
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input class="input" type="text" />
</body>
<script src="./index.js"></script>
</html>const input = document.querySelector('.input');
input.addEventListener('focus', (e) => {
navigator.clipboard.writeText(e.target.value);
});
Как...?
