CSS Cards Carousel

Publish Your Code

styles.css

body {
  margin: 0;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  height: 100vh;
}
.cards-container {
  position: relative;
  margin-top: 30px;
}
.cards-container h2 {
  font-size: 30px;
  text-align: center;
  color: #333;
  margin-bottom: 50px;
}
.card-body{
  text-align: center;
  margin: 30px;
}
.cards-container .owl-stage-outer {
  padding: 30px 0;
}
.cards-container .owl-nav {
  display: none;
}
.cards-container .owl-dots {
  text-align: center;
}
.cards-container .owl-dots span {
  position: relative;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  display: block;
  background: #fff;
  border: 2px solid #01b0f8;
  margin: 0 5px;
}
.cards-container .owl-dots .active {
  box-shadow: none;
}
.cards-container .owl-dots .active span {
  background: #01b0f8;
  box-shadow: none;
  height: 12px;
  width: 12px;
  margin-bottom: -1px;
}
.cards-container .card {
  background: #fff;
  box-shadow: 0 8px 30px -7px #c9dff0;
  margin: 0 20px;
  padding: 0 10px;
  border-radius: 20px;
  border: 0;
}
.cards-container .card .card-img-top {
  max-width: 100px;
  border-radius: 50%;
  margin: 15px auto 0;
  box-shadow: 0 8px 20px -4px #95abbb;
  width: 100px;
  height: 100px;
}
.cards-container .card h5 {
  color: #01b0f8;
  font-size: 21px;
  line-height: 1.3;
}
.cards-container .card h5 span {
  font-size: 18px;
  color: #666;
}
.cards-container .card p {
  font-size: 14px;
  color: #555;
  padding-bottom: 15px;
}
.cards-container .active {
  opacity: 0.5;
  transition: all 0.3s;
}
.cards-container .center {
  opacity: 1;
}
.cards-container .center h5 {
  font-size: 24px;
}
.cards-container .center h5 span {
  font-size: 20px;
}
.cards-container .center .card-img-top {
  max-width: 100%;
  height: 120px;
  width: 120px;
}
@media (max-width: 767px) {
  .cards-container {
    margin-top: 20px;
 }
}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev {
  outline: 0;
}
.owl-carousel button.owl-dot {
  outline: 0;
}

CSS Cards Carousel

Recommended

CSS Toggle Switch HTML Code

CSS Aurora

CSS Room Door Animation HTML Snippet

index.html

styles.css

main.js

Recommended

CSS Toggle Switch HTML Code

CSS Aurora

CSS Room Door Animation HTML Snippet

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js