Deck cards with css only

Asked

Viewed 59 times

-2

Good morning I was trying to make a deck of cards all grouped together and when you do Hover with the mouse the card stands up 50px and up and forward z-index to come forward.

My problem is that when I do Hover, all the other cards on the deck go down 50px instead of just being the card that’s on Hover go up, you can tell me what I’m doing wrong?

#treinadores {
  position: relative;
  width: 80vw;
  margin: auto;
  padding-left: 150px;
  display: block;
  height: 700px;
}

.scene {
  width: 300px;
  height: 300px;
  perspective: 600px;
  /* margin: auto; */
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  transition: all 0.5s;
  position: relative;
  /* margin-top: 75px; */
  display: inline-block;
  margin-left: -150px;
  border: 10px solid black;
  /* margin-bottom: 50px; */
}

.scene:hover {
  cursor: pointer;
  z-index: 10;
  margin-bottom: 50px;
}

.card1 {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
}

.card2 {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
}

.card3 {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
}

.card4 {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
}

.card5 {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
}

.card6 {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card__face--front {
  background-color: #bbb;
  color: black;
  -webkit-clip-path: url(#svgPath);
  clip-path: url(#svgPath);
}

.card__face--back {
  background-color: #2980b9;
  color: white;
  width: 300px;
  height: 480px;
  transform: rotateY(180deg);
  -webkit-clip-path: url(#svgPath);
  clip-path: url(#svgPath);
}

.card1.is-flipped {
  transform: rotateY(180deg);
}

.card2.is-flipped {
  transform: rotateY(180deg);
}

.card3.is-flipped {
  transform: rotateY(180deg);
}

.card4.is-flipped {
  transform: rotateY(180deg);
}

.card5.is-flipped {
  transform: rotateY(180deg);
}

.card6.is-flipped {
  transform: rotateY(180deg);
}

#imgid {
  background-image: url(/img/Ronaldo-teste.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 300px;
  height: 300px;
}

#status {
  background-color: gray;
  position: relative;
  display: flow-root;
  width: 300px;
  height: 180px;
}

svg {
  position: absolute;
}
<div id="treinadores">
  <!-- scene 1 -->
  <div class="scene">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 480">
        <clipPath id="svgPath">
          <path d="M297.07,61.27c-7.09-0.11-14.01-2.25-19.93-6.16c-8.6-5.91-14.2-15.27-15.34-25.64c-0.22-1.23-0.45-2.58-0.45-3.81
    c0-1.46-1.12-1.68-2.02-2.13c-11.1-5.5-22.73-9.85-34.71-12.99C200.19,4.06,175,0.83,149.72,0.92c-25.37-0.11-50.63,3.17-75.13,9.74
    c-11.97,3.19-23.59,7.54-34.71,12.99c-0.9,0.45-2.02,0.67-2.02,2.13c0,1.23-0.22,2.58-0.45,3.81c-1.19,10.35-6.78,19.69-15.34,25.64
    c-5.92,3.82-12.78,5.91-19.82,6.05c-1.68,0.11-2.35,0.45-2.24,2.24v329.08c0,3.7,0,7.39,0.45,11.09c0.76,6.32,3.93,12.09,8.85,16.12
    c4.25,3.58,9.29,5.93,14.56,7.61c13.88,4.37,27.77,8.4,41.65,12.88c19.14,5.94,37.85,13.2,55.99,21.72
    c10.23,4.19,19.69,10.05,27.99,17.36v0.11v-0.11c8.06-7.84,18.03-12.65,27.99-17.36c18.19-8.41,36.89-15.66,55.99-21.72l41.65-12.88
    c5.26-1.68,10.19-3.92,14.56-7.61c5.04-4.25,8.06-9.52,8.85-16.12c0.45-3.7,0.45-7.39,0.45-11.09V260.24V68.66v-5.15
    C299.42,61.72,298.64,61.38,297.07,61.27z" />
        </clipPath>
      </svg>
    <div class="card1">
      <div class="card__face card__face--front">
        <div id="imgid"></div>
        <div id="status">
          <h1>texto</h1>
          <h3>texto</h1>
            <h3>texto</h1>
        </div>
      </div>
      <div class="card__face card__face--back">
        <h1>John Doe</h1>
        <p>Architect & Engineer</p>
        <p>We love that guy</p>
      </div>
    </div>
  </div>
  <!-- scene 2 -->
  <div class="scene">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 480">
        <clipPath id="svgPath">
          <path d="M297.07,61.27c-7.09-0.11-14.01-2.25-19.93-6.16c-8.6-5.91-14.2-15.27-15.34-25.64c-0.22-1.23-0.45-2.58-0.45-3.81
    c0-1.46-1.12-1.68-2.02-2.13c-11.1-5.5-22.73-9.85-34.71-12.99C200.19,4.06,175,0.83,149.72,0.92c-25.37-0.11-50.63,3.17-75.13,9.74
    c-11.97,3.19-23.59,7.54-34.71,12.99c-0.9,0.45-2.02,0.67-2.02,2.13c0,1.23-0.22,2.58-0.45,3.81c-1.19,10.35-6.78,19.69-15.34,25.64
    c-5.92,3.82-12.78,5.91-19.82,6.05c-1.68,0.11-2.35,0.45-2.24,2.24v329.08c0,3.7,0,7.39,0.45,11.09c0.76,6.32,3.93,12.09,8.85,16.12
    c4.25,3.58,9.29,5.93,14.56,7.61c13.88,4.37,27.77,8.4,41.65,12.88c19.14,5.94,37.85,13.2,55.99,21.72
    c10.23,4.19,19.69,10.05,27.99,17.36v0.11v-0.11c8.06-7.84,18.03-12.65,27.99-17.36c18.19-8.41,36.89-15.66,55.99-21.72l41.65-12.88
    c5.26-1.68,10.19-3.92,14.56-7.61c5.04-4.25,8.06-9.52,8.85-16.12c0.45-3.7,0.45-7.39,0.45-11.09V260.24V68.66v-5.15
    C299.42,61.72,298.64,61.38,297.07,61.27z" />
        </clipPath>
      </svg>
    <div class="card2">
      <div class="card__face card__face--front">
        <div id="imgid"></div>
        <div id="status">
          <h1>texto</h1>
          <h3>texto</h1>
            <h3>texto</h1>
        </div>
      </div>
      <div class="card__face card__face--back">
        <h1>John Doe</h1>
        <p>Architect & Engineer</p>
        <p>We love that guy</p>
      </div>
    </div>
  </div>
  <!-- scene 3 -->
  <div class="scene">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 480">
        <clipPath id="svgPath">
          <path d="M297.07,61.27c-7.09-0.11-14.01-2.25-19.93-6.16c-8.6-5.91-14.2-15.27-15.34-25.64c-0.22-1.23-0.45-2.58-0.45-3.81
    c0-1.46-1.12-1.68-2.02-2.13c-11.1-5.5-22.73-9.85-34.71-12.99C200.19,4.06,175,0.83,149.72,0.92c-25.37-0.11-50.63,3.17-75.13,9.74
    c-11.97,3.19-23.59,7.54-34.71,12.99c-0.9,0.45-2.02,0.67-2.02,2.13c0,1.23-0.22,2.58-0.45,3.81c-1.19,10.35-6.78,19.69-15.34,25.64
    c-5.92,3.82-12.78,5.91-19.82,6.05c-1.68,0.11-2.35,0.45-2.24,2.24v329.08c0,3.7,0,7.39,0.45,11.09c0.76,6.32,3.93,12.09,8.85,16.12
    c4.25,3.58,9.29,5.93,14.56,7.61c13.88,4.37,27.77,8.4,41.65,12.88c19.14,5.94,37.85,13.2,55.99,21.72
    c10.23,4.19,19.69,10.05,27.99,17.36v0.11v-0.11c8.06-7.84,18.03-12.65,27.99-17.36c18.19-8.41,36.89-15.66,55.99-21.72l41.65-12.88
    c5.26-1.68,10.19-3.92,14.56-7.61c5.04-4.25,8.06-9.52,8.85-16.12c0.45-3.7,0.45-7.39,0.45-11.09V260.24V68.66v-5.15
    C299.42,61.72,298.64,61.38,297.07,61.27z" />
        </clipPath>
      </svg>
    <div class="card3">
      <div class="card__face card__face--front">
        <div id="imgid"></div>
        <div id="status">
          <h1>texto</h1>
          <h3>texto</h1>
            <h3>texto</h1>
        </div>
      </div>
      <div class="card__face card__face--back">
        <h1>John Doe</h1>
        <p>Architect & Engineer</p>
        <p>We love that guy</p>
      </div>
    </div>
  </div>
  <!-- scene 4 -->
  <div class="scene">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 480">
        <clipPath id="svgPath">
          <path d="M297.07,61.27c-7.09-0.11-14.01-2.25-19.93-6.16c-8.6-5.91-14.2-15.27-15.34-25.64c-0.22-1.23-0.45-2.58-0.45-3.81
    c0-1.46-1.12-1.68-2.02-2.13c-11.1-5.5-22.73-9.85-34.71-12.99C200.19,4.06,175,0.83,149.72,0.92c-25.37-0.11-50.63,3.17-75.13,9.74
    c-11.97,3.19-23.59,7.54-34.71,12.99c-0.9,0.45-2.02,0.67-2.02,2.13c0,1.23-0.22,2.58-0.45,3.81c-1.19,10.35-6.78,19.69-15.34,25.64
    c-5.92,3.82-12.78,5.91-19.82,6.05c-1.68,0.11-2.35,0.45-2.24,2.24v329.08c0,3.7,0,7.39,0.45,11.09c0.76,6.32,3.93,12.09,8.85,16.12
    c4.25,3.58,9.29,5.93,14.56,7.61c13.88,4.37,27.77,8.4,41.65,12.88c19.14,5.94,37.85,13.2,55.99,21.72
    c10.23,4.19,19.69,10.05,27.99,17.36v0.11v-0.11c8.06-7.84,18.03-12.65,27.99-17.36c18.19-8.41,36.89-15.66,55.99-21.72l41.65-12.88
    c5.26-1.68,10.19-3.92,14.56-7.61c5.04-4.25,8.06-9.52,8.85-16.12c0.45-3.7,0.45-7.39,0.45-11.09V260.24V68.66v-5.15
    C299.42,61.72,298.64,61.38,297.07,61.27z" />
        </clipPath>
      </svg>
    <div class="card4">
      <div class="card__face card__face--front">
        <div id="imgid"></div>
        <div id="status">
          <h1>texto</h1>
          <h3>texto</h1>
            <h3>texto</h1>
        </div>
      </div>
      <div class="card__face card__face--back">
        <h1>John Doe</h1>
        <p>Architect & Engineer</p>
        <p>We love that guy</p>
      </div>
    </div>
  </div>
  <!-- scene 5 -->
  <div class="scene">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 480">
        <clipPath id="svgPath">
          <path d="M297.07,61.27c-7.09-0.11-14.01-2.25-19.93-6.16c-8.6-5.91-14.2-15.27-15.34-25.64c-0.22-1.23-0.45-2.58-0.45-3.81
    c0-1.46-1.12-1.68-2.02-2.13c-11.1-5.5-22.73-9.85-34.71-12.99C200.19,4.06,175,0.83,149.72,0.92c-25.37-0.11-50.63,3.17-75.13,9.74
    c-11.97,3.19-23.59,7.54-34.71,12.99c-0.9,0.45-2.02,0.67-2.02,2.13c0,1.23-0.22,2.58-0.45,3.81c-1.19,10.35-6.78,19.69-15.34,25.64
    c-5.92,3.82-12.78,5.91-19.82,6.05c-1.68,0.11-2.35,0.45-2.24,2.24v329.08c0,3.7,0,7.39,0.45,11.09c0.76,6.32,3.93,12.09,8.85,16.12
    c4.25,3.58,9.29,5.93,14.56,7.61c13.88,4.37,27.77,8.4,41.65,12.88c19.14,5.94,37.85,13.2,55.99,21.72
    c10.23,4.19,19.69,10.05,27.99,17.36v0.11v-0.11c8.06-7.84,18.03-12.65,27.99-17.36c18.19-8.41,36.89-15.66,55.99-21.72l41.65-12.88
    c5.26-1.68,10.19-3.92,14.56-7.61c5.04-4.25,8.06-9.52,8.85-16.12c0.45-3.7,0.45-7.39,0.45-11.09V260.24V68.66v-5.15
    C299.42,61.72,298.64,61.38,297.07,61.27z" />
        </clipPath>
      </svg>
    <div class="card5">
      <div class="card__face card__face--front">
        <div id="imgid"></div>
        <div id="status">
          <h1>texto</h1>
          <h3>texto</h1>
            <h3>texto</h1>
        </div>
      </div>
      <div class="card__face card__face--back">
        <h1>John Doe</h1>
        <p>Architect & Engineer</p>
        <p>We love that guy</p>
      </div>
    </div>
  </div>
  <!-- scene 6 -->
  <div class="scene">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 480">
        <clipPath id="svgPath">
          <path d="M297.07,61.27c-7.09-0.11-14.01-2.25-19.93-6.16c-8.6-5.91-14.2-15.27-15.34-25.64c-0.22-1.23-0.45-2.58-0.45-3.81
    c0-1.46-1.12-1.68-2.02-2.13c-11.1-5.5-22.73-9.85-34.71-12.99C200.19,4.06,175,0.83,149.72,0.92c-25.37-0.11-50.63,3.17-75.13,9.74
    c-11.97,3.19-23.59,7.54-34.71,12.99c-0.9,0.45-2.02,0.67-2.02,2.13c0,1.23-0.22,2.58-0.45,3.81c-1.19,10.35-6.78,19.69-15.34,25.64
    c-5.92,3.82-12.78,5.91-19.82,6.05c-1.68,0.11-2.35,0.45-2.24,2.24v329.08c0,3.7,0,7.39,0.45,11.09c0.76,6.32,3.93,12.09,8.85,16.12
    c4.25,3.58,9.29,5.93,14.56,7.61c13.88,4.37,27.77,8.4,41.65,12.88c19.14,5.94,37.85,13.2,55.99,21.72
    c10.23,4.19,19.69,10.05,27.99,17.36v0.11v-0.11c8.06-7.84,18.03-12.65,27.99-17.36c18.19-8.41,36.89-15.66,55.99-21.72l41.65-12.88
    c5.26-1.68,10.19-3.92,14.56-7.61c5.04-4.25,8.06-9.52,8.85-16.12c0.45-3.7,0.45-7.39,0.45-11.09V260.24V68.66v-5.15
    C299.42,61.72,298.64,61.38,297.07,61.27z" />
        </clipPath>
      </svg>
    <div class="card6">
      <div class="card__face card__face--front">
        <div id="imgid"></div>
        <div id="status">
          <h1>texto</h1>
          <h3>texto</h1>
            <h3>texto</h1>
        </div>
      </div>
      <div class="card__face card__face--back">
        <h1>John Doe</h1>
        <p>Architect & Engineer</p>
        <p>We love that guy</p>
      </div>
    </div>
  </div>
</div>

Note, see the whole page for the example below.

html css

1 answer

1


The problem is you’re trying to add a lower margin when in fact just adjust the top of <div> pointed at the :hover.

.scene {
   top: 50px;       /*Defina onde estará o inicialmente o topo das cartas*/
}

.scene:hover {  
  top: 0px;      /*Defina para onde o topo da carta selecionada irá*/
}

In your code:

#treinadores {
  position: relative;
  width: 80vw;
  margin: auto;
  padding-left: 150px;
  display: block;
  height: 700px;
}

.scene {
  width: 300px;
  height: 300px;
  perspective: 600px;
  /* margin: auto; */
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  transition: all 0.5s;
  position: relative;
  top: 50px;       /*Defina onde estará o inicialmente o topo das cartas*/
  display: inline-block;
  margin-left: -150px;
  border: 10px solid black;
  /* margin-bottom: 50px; */
}

.scene:hover {
  cursor: pointer;
  z-index: 10;
  top: 0px;      /*Defina para onde o topo da carta selecionada irá*/
}

.card1 {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
}

.card2 {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
}

.card3 {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
}

.card4 {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
}

.card5 {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
}

.card6 {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card__face--front {
  background-color: #bbb;
  color: black;
  -webkit-clip-path: url(#svgPath);
  clip-path: url(#svgPath);
}

.card__face--back {
  background-color: #2980b9;
  color: white;
  width: 300px;
  height: 480px;
  transform: rotateY(180deg);
  -webkit-clip-path: url(#svgPath);
  clip-path: url(#svgPath);
}

.card1.is-flipped {
  transform: rotateY(180deg);
}

.card2.is-flipped {
  transform: rotateY(180deg);
}

.card3.is-flipped {
  transform: rotateY(180deg);
}

.card4.is-flipped {
  transform: rotateY(180deg);
}

.card5.is-flipped {
  transform: rotateY(180deg);
}

.card6.is-flipped {
  transform: rotateY(180deg);
}

#imgid {
  background-image: url(/img/Ronaldo-teste.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 300px;
  height: 300px;
}

#status {
  background-color: gray;
  position: relative;
  display: flow-root;
  width: 300px;
  height: 180px;
}

svg {
  position: absolute;
}
<div id="treinadores">
  <!-- scene 1 -->
  <div class="scene">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 480">
        <clipPath id="svgPath">
          <path d="M297.07,61.27c-7.09-0.11-14.01-2.25-19.93-6.16c-8.6-5.91-14.2-15.27-15.34-25.64c-0.22-1.23-0.45-2.58-0.45-3.81
    c0-1.46-1.12-1.68-2.02-2.13c-11.1-5.5-22.73-9.85-34.71-12.99C200.19,4.06,175,0.83,149.72,0.92c-25.37-0.11-50.63,3.17-75.13,9.74
    c-11.97,3.19-23.59,7.54-34.71,12.99c-0.9,0.45-2.02,0.67-2.02,2.13c0,1.23-0.22,2.58-0.45,3.81c-1.19,10.35-6.78,19.69-15.34,25.64
    c-5.92,3.82-12.78,5.91-19.82,6.05c-1.68,0.11-2.35,0.45-2.24,2.24v329.08c0,3.7,0,7.39,0.45,11.09c0.76,6.32,3.93,12.09,8.85,16.12
    c4.25,3.58,9.29,5.93,14.56,7.61c13.88,4.37,27.77,8.4,41.65,12.88c19.14,5.94,37.85,13.2,55.99,21.72
    c10.23,4.19,19.69,10.05,27.99,17.36v0.11v-0.11c8.06-7.84,18.03-12.65,27.99-17.36c18.19-8.41,36.89-15.66,55.99-21.72l41.65-12.88
    c5.26-1.68,10.19-3.92,14.56-7.61c5.04-4.25,8.06-9.52,8.85-16.12c0.45-3.7,0.45-7.39,0.45-11.09V260.24V68.66v-5.15
    C299.42,61.72,298.64,61.38,297.07,61.27z" />
        </clipPath>
      </svg>
    <div class="card1">
      <div class="card__face card__face--front">
        <div id="imgid"></div>
        <div id="status">
          <h1>texto</h1>
          <h3>texto</h1>
            <h3>texto</h1>
        </div>
      </div>
      <div class="card__face card__face--back">
        <h1>John Doe</h1>
        <p>Architect & Engineer</p>
        <p>We love that guy</p>
      </div>
    </div>
  </div>
  <!-- scene 2 -->
  <div class="scene">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 480">
        <clipPath id="svgPath">
          <path d="M297.07,61.27c-7.09-0.11-14.01-2.25-19.93-6.16c-8.6-5.91-14.2-15.27-15.34-25.64c-0.22-1.23-0.45-2.58-0.45-3.81
    c0-1.46-1.12-1.68-2.02-2.13c-11.1-5.5-22.73-9.85-34.71-12.99C200.19,4.06,175,0.83,149.72,0.92c-25.37-0.11-50.63,3.17-75.13,9.74
    c-11.97,3.19-23.59,7.54-34.71,12.99c-0.9,0.45-2.02,0.67-2.02,2.13c0,1.23-0.22,2.58-0.45,3.81c-1.19,10.35-6.78,19.69-15.34,25.64
    c-5.92,3.82-12.78,5.91-19.82,6.05c-1.68,0.11-2.35,0.45-2.24,2.24v329.08c0,3.7,0,7.39,0.45,11.09c0.76,6.32,3.93,12.09,8.85,16.12
    c4.25,3.58,9.29,5.93,14.56,7.61c13.88,4.37,27.77,8.4,41.65,12.88c19.14,5.94,37.85,13.2,55.99,21.72
    c10.23,4.19,19.69,10.05,27.99,17.36v0.11v-0.11c8.06-7.84,18.03-12.65,27.99-17.36c18.19-8.41,36.89-15.66,55.99-21.72l41.65-12.88
    c5.26-1.68,10.19-3.92,14.56-7.61c5.04-4.25,8.06-9.52,8.85-16.12c0.45-3.7,0.45-7.39,0.45-11.09V260.24V68.66v-5.15
    C299.42,61.72,298.64,61.38,297.07,61.27z" />
        </clipPath>
      </svg>
    <div class="card2">
      <div class="card__face card__face--front">
        <div id="imgid"></div>
        <div id="status">
          <h1>texto</h1>
          <h3>texto</h1>
            <h3>texto</h1>
        </div>
      </div>
      <div class="card__face card__face--back">
        <h1>John Doe</h1>
        <p>Architect & Engineer</p>
        <p>We love that guy</p>
      </div>
    </div>
  </div>
  <!-- scene 3 -->
  <div class="scene">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 480">
        <clipPath id="svgPath">
          <path d="M297.07,61.27c-7.09-0.11-14.01-2.25-19.93-6.16c-8.6-5.91-14.2-15.27-15.34-25.64c-0.22-1.23-0.45-2.58-0.45-3.81
    c0-1.46-1.12-1.68-2.02-2.13c-11.1-5.5-22.73-9.85-34.71-12.99C200.19,4.06,175,0.83,149.72,0.92c-25.37-0.11-50.63,3.17-75.13,9.74
    c-11.97,3.19-23.59,7.54-34.71,12.99c-0.9,0.45-2.02,0.67-2.02,2.13c0,1.23-0.22,2.58-0.45,3.81c-1.19,10.35-6.78,19.69-15.34,25.64
    c-5.92,3.82-12.78,5.91-19.82,6.05c-1.68,0.11-2.35,0.45-2.24,2.24v329.08c0,3.7,0,7.39,0.45,11.09c0.76,6.32,3.93,12.09,8.85,16.12
    c4.25,3.58,9.29,5.93,14.56,7.61c13.88,4.37,27.77,8.4,41.65,12.88c19.14,5.94,37.85,13.2,55.99,21.72
    c10.23,4.19,19.69,10.05,27.99,17.36v0.11v-0.11c8.06-7.84,18.03-12.65,27.99-17.36c18.19-8.41,36.89-15.66,55.99-21.72l41.65-12.88
    c5.26-1.68,10.19-3.92,14.56-7.61c5.04-4.25,8.06-9.52,8.85-16.12c0.45-3.7,0.45-7.39,0.45-11.09V260.24V68.66v-5.15
    C299.42,61.72,298.64,61.38,297.07,61.27z" />
        </clipPath>
      </svg>
    <div class="card3">
      <div class="card__face card__face--front">
        <div id="imgid"></div>
        <div id="status">
          <h1>texto</h1>
          <h3>texto</h1>
            <h3>texto</h1>
        </div>
      </div>
      <div class="card__face card__face--back">
        <h1>John Doe</h1>
        <p>Architect & Engineer</p>
        <p>We love that guy</p>
      </div>
    </div>
  </div>
  <!-- scene 4 -->
  <div class="scene">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 480">
        <clipPath id="svgPath">
          <path d="M297.07,61.27c-7.09-0.11-14.01-2.25-19.93-6.16c-8.6-5.91-14.2-15.27-15.34-25.64c-0.22-1.23-0.45-2.58-0.45-3.81
    c0-1.46-1.12-1.68-2.02-2.13c-11.1-5.5-22.73-9.85-34.71-12.99C200.19,4.06,175,0.83,149.72,0.92c-25.37-0.11-50.63,3.17-75.13,9.74
    c-11.97,3.19-23.59,7.54-34.71,12.99c-0.9,0.45-2.02,0.67-2.02,2.13c0,1.23-0.22,2.58-0.45,3.81c-1.19,10.35-6.78,19.69-15.34,25.64
    c-5.92,3.82-12.78,5.91-19.82,6.05c-1.68,0.11-2.35,0.45-2.24,2.24v329.08c0,3.7,0,7.39,0.45,11.09c0.76,6.32,3.93,12.09,8.85,16.12
    c4.25,3.58,9.29,5.93,14.56,7.61c13.88,4.37,27.77,8.4,41.65,12.88c19.14,5.94,37.85,13.2,55.99,21.72
    c10.23,4.19,19.69,10.05,27.99,17.36v0.11v-0.11c8.06-7.84,18.03-12.65,27.99-17.36c18.19-8.41,36.89-15.66,55.99-21.72l41.65-12.88
    c5.26-1.68,10.19-3.92,14.56-7.61c5.04-4.25,8.06-9.52,8.85-16.12c0.45-3.7,0.45-7.39,0.45-11.09V260.24V68.66v-5.15
    C299.42,61.72,298.64,61.38,297.07,61.27z" />
        </clipPath>
      </svg>
    <div class="card4">
      <div class="card__face card__face--front">
        <div id="imgid"></div>
        <div id="status">
          <h1>texto</h1>
          <h3>texto</h1>
            <h3>texto</h1>
        </div>
      </div>
      <div class="card__face card__face--back">
        <h1>John Doe</h1>
        <p>Architect & Engineer</p>
        <p>We love that guy</p>
      </div>
    </div>
  </div>
  <!-- scene 5 -->
  <div class="scene">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 480">
        <clipPath id="svgPath">
          <path d="M297.07,61.27c-7.09-0.11-14.01-2.25-19.93-6.16c-8.6-5.91-14.2-15.27-15.34-25.64c-0.22-1.23-0.45-2.58-0.45-3.81
    c0-1.46-1.12-1.68-2.02-2.13c-11.1-5.5-22.73-9.85-34.71-12.99C200.19,4.06,175,0.83,149.72,0.92c-25.37-0.11-50.63,3.17-75.13,9.74
    c-11.97,3.19-23.59,7.54-34.71,12.99c-0.9,0.45-2.02,0.67-2.02,2.13c0,1.23-0.22,2.58-0.45,3.81c-1.19,10.35-6.78,19.69-15.34,25.64
    c-5.92,3.82-12.78,5.91-19.82,6.05c-1.68,0.11-2.35,0.45-2.24,2.24v329.08c0,3.7,0,7.39,0.45,11.09c0.76,6.32,3.93,12.09,8.85,16.12
    c4.25,3.58,9.29,5.93,14.56,7.61c13.88,4.37,27.77,8.4,41.65,12.88c19.14,5.94,37.85,13.2,55.99,21.72
    c10.23,4.19,19.69,10.05,27.99,17.36v0.11v-0.11c8.06-7.84,18.03-12.65,27.99-17.36c18.19-8.41,36.89-15.66,55.99-21.72l41.65-12.88
    c5.26-1.68,10.19-3.92,14.56-7.61c5.04-4.25,8.06-9.52,8.85-16.12c0.45-3.7,0.45-7.39,0.45-11.09V260.24V68.66v-5.15
    C299.42,61.72,298.64,61.38,297.07,61.27z" />
        </clipPath>
      </svg>
    <div class="card5">
      <div class="card__face card__face--front">
        <div id="imgid"></div>
        <div id="status">
          <h1>texto</h1>
          <h3>texto</h1>
            <h3>texto</h1>
        </div>
      </div>
      <div class="card__face card__face--back">
        <h1>John Doe</h1>
        <p>Architect & Engineer</p>
        <p>We love that guy</p>
      </div>
    </div>
  </div>
  <!-- scene 6 -->
  <div class="scene">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 480">
        <clipPath id="svgPath">
          <path d="M297.07,61.27c-7.09-0.11-14.01-2.25-19.93-6.16c-8.6-5.91-14.2-15.27-15.34-25.64c-0.22-1.23-0.45-2.58-0.45-3.81
    c0-1.46-1.12-1.68-2.02-2.13c-11.1-5.5-22.73-9.85-34.71-12.99C200.19,4.06,175,0.83,149.72,0.92c-25.37-0.11-50.63,3.17-75.13,9.74
    c-11.97,3.19-23.59,7.54-34.71,12.99c-0.9,0.45-2.02,0.67-2.02,2.13c0,1.23-0.22,2.58-0.45,3.81c-1.19,10.35-6.78,19.69-15.34,25.64
    c-5.92,3.82-12.78,5.91-19.82,6.05c-1.68,0.11-2.35,0.45-2.24,2.24v329.08c0,3.7,0,7.39,0.45,11.09c0.76,6.32,3.93,12.09,8.85,16.12
    c4.25,3.58,9.29,5.93,14.56,7.61c13.88,4.37,27.77,8.4,41.65,12.88c19.14,5.94,37.85,13.2,55.99,21.72
    c10.23,4.19,19.69,10.05,27.99,17.36v0.11v-0.11c8.06-7.84,18.03-12.65,27.99-17.36c18.19-8.41,36.89-15.66,55.99-21.72l41.65-12.88
    c5.26-1.68,10.19-3.92,14.56-7.61c5.04-4.25,8.06-9.52,8.85-16.12c0.45-3.7,0.45-7.39,0.45-11.09V260.24V68.66v-5.15
    C299.42,61.72,298.64,61.38,297.07,61.27z" />
        </clipPath>
      </svg>
    <div class="card6">
      <div class="card__face card__face--front">
        <div id="imgid"></div>
        <div id="status">
          <h1>texto</h1>
          <h3>texto</h1>
            <h3>texto</h1>
        </div>
      </div>
      <div class="card__face card__face--back">
        <h1>John Doe</h1>
        <p>Architect & Engineer</p>
        <p>We love that guy</p>
      </div>
    </div>
  </div>
</div>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.