<div class="container">
        <div class="father">
            <div class="front">
                <header>
                    <div class="bkg"></div>
                    <img src="https://image.ibb.co/kCYMBz/img.png" alt="Picture">
                    <h3>Ahmed Magdy</h3>
                </header>
                <div class="experience">
                    <h3>Experience</h3>
                    <h3>Project Manger</h3>
                    <p>- Give technical support and practice for customers.</p>
                    <p>- Translate data with SQ L language into server.</p>
                    <p>- Maintain and monitored system. </p>
                </div>
                <div class="skills">
                    <h3>Skills</h3>
                    <div class="grid-3">
                        <h3>Web Design</h3>
                        <p>- Photoshop</p>
                        <p>- HTML / CSS</p>
                        <p>- Javascript</p>
                    </div>
                    <div class="grid-3">
                        <h3>Programing</h3>
                        <p>- PHP / MYSQL</p>
                        <p>- laravel</p>
                        <p>- Ajax</p>
                    </div>
                    <div class="grid-3">
                        <h3>Security</h3>
                        <p>- Kali Linux</p>
                        <p>- PHP Security</p>
                        <p>- Python Security</p>
                    </div>
                </div>
            </div>
            <div class="back">
                <header>
                    <div class="bkg"></div>
                    <img src="https://image.ibb.co/kCYMBz/img.png" alt="Picture">
                    <h3>Ahmed Magdy</h3>
                </header>
                <h3>Contact Me</h3>
                <div class="social">
                    <h3 class="facebook">Facebook</h3>
                    <a href="https://facebook.com/username">https://facebook.com/username</a>
                </div>
                <div class="social">
                    <h3 class="twitter">Twitter</h3>
                    <a href="https://twitter.com/username">https://twitter.com/username</a>
                </div>
                <div class="social">
                    <h3 class="youtube">Youtube</h3>
                    <a href="https://www.youtube.com/username">https://www.youtube.com/username</a>
                </div>
                <div class="social">
                    <h3 class="linkedin">Linkedin</h3>
                    <a href="https://www.linkedin.com/username">https://www.linkedin.com/username</a>
                </div>
            </div>
        </div>
    </div>
.container {
  background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
  background-repeat: no-repeat;
  font-family: "Roboto", sans-serif;
  background-size: cover;
  perspective: 1000px;
  height: 100vh;
}
.father {
  text-align: center;
  width: 400px;
  height: 450px;
  margin: auto;
  top: 20%;
  position: relative;
  transition: all 1s ease-in-out;
  transform-style: preserve-3d;
}
.father:hover {
  transform: rotatey(180deg);
}
.father > div {
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.father .front {
  z-index: 2;
  background-color: #f7fafa;
  backface-visibility: hidden;
  /* display: none; */
}

.father .front header .bkg {
  background-color: #2bde73;
  height: 80px;
  border-radius: 10px 10px 0 0;
}
.father .front header img {
  display: block;
  margin: -15% auto 0;
}
.father .front header h3 {
  font-size: 18px;
  color: #0f2105;
  margin-top: 10px;
}
.father .front .experience {
  text-align: left;
  margin-left: 38px;
}
.father .front .experience h3:first-of-type {
  font-size: 16px;
  padding: 6px 6px;
  background-color: #00a0ff;
  color: #f7fafa;
  font-weight: 700;
  border-radius: 5px;
  width: 23%;
  margin-bottom: 10px;
}
.father .front .experience h3:nth-of-type(2) {
  color: #0f2105;
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
}
.father .front .experience p {
  line-height: 5px;
  font-size: 12px;
  font-weight: 400;
}

.father .front .skills {
  text-align: left;
  overflow: hidden;
  margin-left: 38px;
}
.father .front .skills > h3 {
  font-size: 16px;
  padding: 5px 6px;
  background-color: #00a0ff;
  color: #f7fafa;
  font-weight: 700;
  border-radius: 5px;
  width: 10%;
  margin-bottom: 10px;
  margin-top: 15px;
}
.father .front .skills .grid-3 {
  width: 33.3333%;
  float: left;
  margin: 0 auto;
}
.father .front .skills .grid-3 h3 {
  color: #0f2105;
  margin-top: 0;
  margin-top: 5px;
  margin-bottom: 10px;
  font-size: 16px;
}
.father .front .skills .grid-3 p {
  line-height: 5px;
  font-size: 12px;
  font-weight: 400;
}

.father .back {
  background-color: blue;
  z-index: 1;
  transform: rotatey(180deg);
  background-color: #f7fafa;
  backface-visibility: hidden;
  text-align: left;
}
.father .back header .bkg {
  background-color: #fe2370;
  height: 80px;
  border-radius: 10px 10px 0 0;
}
.father .back header img {
  display: block;
  margin: -15% auto 0;
}
.father .back header h3 {
  font-size: 18px;
  color: #0f2105;
  margin-top: 10px;
  text-align: center;
}
.father .back > h3 {
  padding: 6px;
  color: #f7fafa;
  background-color: #00a0ff;
  width: 25%;
  border-radius: 5px;
  margin: 20px 0 20px;
}
.father .back > h3,
.father .back .social {
  margin-left: 38px;
}
.father .back .social h3 {
  margin: 10px 0 5px;
  font-size: 16px;
}
.father .back .social h3::first-letter {
  color: #f7fafa;
  padding: 2px 7px;
  border-radius: 3px;
  margin-right: 2px;
}
.father .back .social .facebook::first-letter {
  background-color: #4267b2;
}
.father .back .social .twitter::first-letter {
  background-color: #1da1f2;
}
.father .back .social .youtube::first-letter {
  background-color: #ff0000;
}
.father .back .social .linkedin::first-letter {
  background-color: #0077b5;
}
.father .back .social a {
  color: #2c2c2c;
  text-decoration: none;
  font-size: 16px;
  margin-top: 3px;
}

External CSS

  1. https://fonts.googleapis.com/css?family=Roboto:400,700

External JavaScript

This Pen doesn't use any external JavaScript resources.