Coder Wrap provides free to use snippets

@import url("https://fonts.googleapis.com/css2?family=Anton&display=swap");

* {
 box-sizing: border-box;
}

body {
 margin: 0px;
}

h3 {
 font-family: "Anton", sans-serif;
 color: #aaa8a6;
 font-size: 36px;
 letter-spacing: 3px;
 text-align: center;
}

img {
 max-width: 100%;
}

.pics {
 max-width: 350px;
 margin-right: 10px;
 margin-left: 10px;
}

.pics:hover {
 box-shadow: 0 0 7px black;
}

.h-scrolling {
 width: 100%;
 padding-top: 20px;
 padding-bottom: 20px;
 position: relative;
 margin-top: 20px;
 margin-bottom: 20px;
 background-color: #151f19;
 overflow-x: scroll;
 overflow-y: hidden;
 white-space: nowrap;
 scroll-snap-type: x mandatory;
 scroll-behavior: smooth;
}

.h-scrolling::-webkit-scrollbar {
 width: 8px;
 height: 6px;
 background-color: #0b100d;
}

.h-scrolling::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
 border-radius: 10px;
}

.h-scrolling::-webkit-scrollbar-thumb {
 background-color: #20a6d2;
 -webkit-box-shadow: inset 0 0 2px black;
}

@media(max-width:767px) {
 h3 {
  font-size: 25px;
  letter-spacing: 2px;
 }

 .h-scrolling {
  padding-top: 10px;
  padding-bottom: 10px;
 }

 .pics {
  max-width: 250px;
 }

}

var item = document.getElementById("horizontally_scrolling");
window.addEventListener("wheel", function (e) {
  if (e.deltaY > 0) item.scrollLeft += 500;
  else item.scrollLeft -= 700;
});