कार्ड की जानकारी

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

23 August 2025

तुर्की लॉगिन पृष्ठ HTML टेम्पलेट

22 November 2024

<div class="container">
  <div style="--clr:#89ec5b;" class="box">
    <div class="content">
      <div class="icon"></div>
      <div class="text">
        <h3>Designing</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur,
          obcaecati?
        </p>
        <a href="#">Read More</a>
      </div>
    </div>
  </div>
  <div style="--clr:#eb5ae5;" class="box">
    <div class="content">
      <div class="icon"></div>
      <div class="text">
        <h3>Development</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur,
          obcaecati?
        </p>
        <a href="#">Read More</a>
      </div>
    </div>
  </div>
  <div style="--clr:#5b98eb;" class="box">
    <div class="content">
      <div class="icon"></div>
      <div class="text">
        <h3>SEO</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur,
          obcaecati?
        </p>
        <a href="#">Read More</a>
      </div>
    </div>
  </div>
</div>

CSS

.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 60px 0;
  gap: 60px;
}
.container .box {
  position: relative;
  width: 300px;
  height: 350px;
  background: #2e2e2e;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .box::before {
  content: "";
  position: absolute;
  inset: -10px 50px;
  border-top: 4px solid var(--clr);
  border-bottom: 4px solid var(--clr);
  z-index: -1;
  transform: skewY(15deg);
  transition: 0.5s ease-in-out;
}
.container .box:hover:before {
  transform: skewY(0);
  inset: -10px 40px;
}

.container .box::after {
  content: "";
  position: absolute;
  inset: 60px -10px;
  border-left: 4px solid var(--clr);
  border-right: 4px solid var(--clr);
  z-index: -1;
  transform: skew(15deg);
  transition: 0.5s ease-in-out;
}
.container .box:hover::after {
  transform: skew(0);
  inset: 40px -10px;
}
.container .box .content {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  gap: 20px;
  padding: 0 20px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.container .box .content .icon {
  color: var(--clr);
  width: 80px;
  height: 80px;
  box-shadow:
    0 0 0 4px #2e2e2e,
    0 0 0 6px var(--clr);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.5em;
  background: #2e2e2e;
  transition: 0.5s ease-in-out;
}
.container .box:hover .content .icon {
  background: var(--clr);
  color: #2e2e2e;
  box-shadow:
    0 0 0 4px #2e2e2e,
    0 0 0 300px var(--clr);
}
.container .box .content .text h3 {
  font-size: 1.5em;
  color: #fff;
  font-weight: 500;
  transition: 0.5s ease-in-out;
}
.container .box:hover .content .text h3 {
  color: #2e2e2e;
}
.container .box .content .text p {
  color: #999;
  transition: 0.5s ease-in-out;
}
.container .box:hover .content .text p {
  color: #2e2e2e;
}
.container .box .content .text a {
  position: relative;
  background: var(--clr);
  color: #2e2e2e;
  padding: 8px 15px;
  display: inline-block;
  text-decoration: none;
  font-weight: 500;
  margin-top: 10px;
  transition: 0.5s ease-in-out;
}
.container .box:hover .content .text a {
  background: #2e2e2e;
  color: var(--clr);
}

कार्ड की जानकारी

अनुशंसित

तुर्की लॉगिन पृष्ठ HTML टेम्पलेट

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

कार्ड शैली

HTML

CSS

JS

अनुशंसित

तुर्की लॉगिन पृष्ठ HTML टेम्पलेट

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

कार्ड शैली

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS