Información de la tarjeta

2,086 0 AmirAliAkrami Seguir

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Recomendado

24 July 2024

Plantilla de sitio web de aplicaciones

16 May 2026

Código fuente del juego HTML5 Idle Miner Tycoon

6 November 2024

Un sitio web donde puedes reproducir canciones.

HTML

<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);
}

Comments 0

…