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

HTML CSS OTP Form

CSS Animated Loading Screen HTML Example

CSS Card Glow

index.html

styles.css

main.js

Recommended

HTML CSS OTP Form

CSS Animated Loading Screen HTML Example

CSS Card Glow

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js