Flip Card Profile

flip-card-profile.markdown

Flip Card Profile

A Pen by guilherme daniel on CodePen.

License.

index.html

<div class="container">
  <div class="card-container">
    <div class="card">
      <div class="front inner">
        <div class="content front-content">
          <img src="https://avatars.githubusercontent.com/u/22924376?v=4" alt="foto">
          <p>Guilherme Daniel...</p>
        </div>
      </div>
      <div class="back inner">
        <div class="content back-content">
          <p>...and where to find him!</p>
          <div class="link-group">
            <a href="https://github.com/guidani">Github</a>
            <a href="https://www.linkedin.com/in/guilherme-daniel/">Linkedin</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

style.scss

@import url("https://fonts.googleapis.com/css2?family=Oswald&family=Pushster&display=swap");

// reset
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

a {
  color: #000;
  text-decoration: none;
}
//
.card-container {
  width: 25em;
  height: 15em;
  margin-top: 20px;
  background-color: transparent;
  perspective: 1000px;
}

.card-container:hover .card {
  transform: rotatey(180deg);
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transition: 0.5s;
  transform-style: preserve-3d;
  box-shadow: 0px 0px 15px 5px rgb(174, 255, 216);
}

.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 0.5em;
}

.front {
  background-color: #0a66c2;
}

.content {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;
}

.back {
  background-color: rgb(55, 114, 255);
  transform: rotateY(180deg);
}

.back-content {
  flex-direction: column;
  p {
    flex-shrink: 1;
  }
  a {
    padding: 0.8em 2em;
    background-color: #fff;
    font-family: "Oswald", coursive, sans-serif;
    border-radius: 0.5em;
    margin: 0 1em;
    transition: 0.5s;
    &:hover {
      background-color: #000;
      color: #fff;
    }
  }
}

/*  */
.inner {
  text-align: center;
  h1 {
    margin-bottom: 0.6em;
  }
  img {
    width: 10em;
    aspect-ratio: 1/1;
    border-radius: 50%;
    border: 5px solid rgb(55, 114, 255);
  }

  p {
    font-family: "Pushster", cursive, sans-serif;
    font-size: 1.4em;
    color: #fff;
  }
}