index


<div id="carousel-content">
</div>

<style>
  #carousel-content{
  display: flex;
  flex-direction: row;
  width: auto;
  overflow: scroll;
  border-radius: 20px;
  box-shadow: inset 0px 0px 29px -10px rgba(0,0,0,0.75);
  margin: 20px;
  }

  .carousel-card{
  border: 1px solid white;
  border-radius: 10px;
  padding: 10px;
  margin: 20px;
  width: calc(100% / 3);
  height: 265px;
  flex-shrink: 0;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  background: linear-gradient(90deg, #e1dffc 39%, #e1dffc 100%);
  display: flex;
  flex-direction: column;
  transition: transform 330ms ease-in-out;
  }

  .carousel-card:hover {
  transform: translateY(-5px) scale(1.005) translateZ(0);
  box-shadow: 0 24px 36px rgba(0,0,0,0.11),
    0 24px 46px var(--box-shadow-color);
}
</style>

<script>
  var content = ["profile", "mint page", "donate page", "for sale", "linktree"];
  
  document.getElementById('carousel-content').innerHTML = content.map((item, index) => {
    return `<div class="carousel-card">
    <div>image</div>
    <b>${item}</b>
    </div>`
  }).join('');
</script>


dragd comes with an array of building blocks for every kind of web3 data

"dragd is a game-changer in the web development space"

The superfast website builder for web3 projects.

Add blocks to your page and make it your own.

"dragd makes it ridiculously simple to build websites"

"making websites has never been this fun"

Choose the perfect template to get started.