उत्तरदायी कार्ड

संपादक में खोलें अपना कोड प्रकाशित करें क्या आपको एक वेबसाइट चाहिए?

अनुशंसित

20 August 2024

फ़्लिपिंग कार्ड का मूल्य निर्धारण

22 November 2024

.card {
  width: 190px;
  height: 120px;
  padding: 0.5rem;
  background: rgba(198, 198, 198, 0.34);
  border-radius: 8px;
  backdrop-filter: blur(5px);
  border-bottom: 3px solid rgba(255, 255, 255, 0.440);
  border-left: 2px  rgba(255, 255, 255, 0.545) outset;
  box-shadow: -40px 50px 30px rgba(0, 0, 0, 0.280);
  transform: skewX(10deg);
  transition: .4s;
  overflow: hidden;
  color: white;
}

.card:hover {
  height: 254px;
  transform: skew(0deg);
}

.align {
  padding: 1rem;
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-self: flex-start;
}

.red {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ff605c;
  box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.280);
}

.yellow {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ffbd44;
  box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.280);
}

.green {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #00ca4e;
  box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.280);
}

.card h1 {
  text-align: center;
  margin: 1.3rem;
  color: rgb(218, 244, 237);
  text-shadow: -10px 5px 10px rgba(0, 0, 0, 0.573);
}

उत्तरदायी कार्ड

अनुशंसित

फ़्लिपिंग कार्ड का मूल्य निर्धारण

ऐप कार्ड डाउनलोड करें

कार्ड प्रभाव

HTML

CSS

JS

अनुशंसित

फ़्लिपिंग कार्ड का मूल्य निर्धारण

ऐप कार्ड डाउनलोड करें

कार्ड प्रभाव

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS