window.addEventListener("wheel", function(event) {
event.preventDefault();
let scrollAmount = 0;
const scrollStep = 30; // Шаг скролла за один раз
const scrollInterval = 10; // Скорость прокрутки
const scroll = setInterval(function() {
if (scrollAmount < Math.abs(event.deltaY)) {
window.scrollBy(0, event.deltaY > 0 ? scrollStep : -scrollStep);
scrollAmount += scrollStep;
} else {
clearInterval(scroll);
}
}, scrollInterval);
}, { passive: false });
<div class="box">
<div class="round">
<img src="https://domcomputer.ru/wp-content/uploads/2014/10/radeon-hd-7950_520x337.png" />
<div class="price">35000 Р</div>
</div>
<div class="round">
<img src="https://domcomputer.ru/wp-content/uploads/2014/10/radeon-hd-7950_520x337.png" />
<div class="price">35000 Р</div>
</div>
<div class="round">
<img src="https://domcomputer.ru/wp-content/uploads/2014/10/radeon-hd-7950_520x337.png" />
<div class="price">35000 Р</div>
</div>
<div class="round">
<img src="https://domcomputer.ru/wp-content/uploads/2014/10/radeon-hd-7950_520x337.png" />
<div class="price">35000 Р</div>
</div>
</div>body{
background: #070707;
margin: 0px;
color:#fff;
}
.box {
display: flex;
justify-content: space-around;
padding: 100px;
}
.round {
position:relative;
display: flex;
align-items: center;
width: 180px;
height: 180px;
background: linear-gradient(173.98deg, #5465FF -16.91%, #D662FF 180.35%);
border-radius: 130px;
}
.round img {max-width:220px;}
.price {
border-radius: 25px;
min-width: 100px;
padding: 10px 15px;
bottom: 0;
position: absolute;
background: linear-gradient(173.98deg, #5465FF -16.91%, #D662FF 180.35%);}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#f88301" fill-opacity="1" d="M0,288L80,261.3C160,235,320,181,480,149.3C640,117,800,107,960,90.7C1120,75,1280,53,1360,42.7L1440,32L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path></svg><div class="container">
</div>.container{
width: 200px;
height: 200px;
background-color: red;
position: relative;
}
.container:after{
content:"";
position: absolute;
top: 45%;
left: 0px;
transform: translateX(-20%);
transform: rotate(-90deg);
border:15px solid;
border-color: #fff transparent transparent transparent;
}
.container:before{
content:"";
position: absolute;
top: 45%;
right: 0px;
transform: translateX(-20%);
transform: rotate(90deg);
border:15px solid;
border-color: #fff transparent transparent transparent;
}<form>
<div class="search">
<input type="search" name="q">
<input type="submit" value="Subscribe">
</div>
</form>.search {
border: 1px solid #000;
min-height: 20px;
padding:4px;
border-radius:8px;
display: flex;
justify-content: space-between;
}
input[type="search"] {
border: none;
outline: none;
-webkit-appearance: none;
flex-grow: 2;
}
input[type="submit"] {
border: none;
height:40px;
background: #2e6eff;
border-radius: 8px;
}