<body>
        <div class="card">
            <div class="front">
                <header>
                    <img src="https://s-media-cache-ak0.pinimg.com/originals/ab/8c/ce/ab8ccee643ce846b9b72466936394c8b.jpg">
                </header>
                <h3 style="color:black ; margin-bottom:5px;">  Nader </h3>
                <p>
                    This course will help me greatly , because ..after i finish this course i can be a good web designer (front-end developer) so i can work as a freelancer .. and i can also learn the programming languages for the websites as Php & mysql for the databases ...to make the back-end of the website and be a full-stack web developer ..ooh this a far dream but with your help it will me be more clear and near to be a real truth .
                </p>
                <span>See What is in the back!</span>
            </div>
            <div class="back">
                <ul>
                    <li>Gmail:nadernabil</li>
                    <li>Facebook:Nader Nabil</li>
                    <li>CodePen:Nadern96</li>
                    <li>Codeacademy:nadernabil</li>
                    <li>Coursera:nader nabil</li>
                  <p style="color:#831828; line-height:20px; font-family:Arial;">Did you expect more interesting thing ? :D<br>
If you liked the card Send it to someOne else </p>
                </ul>
            </div>
        </div>
    </body>

*
{
    -webkit-box-sizing:border-box;   
    -moz-box-sizing:border-box;
    box-sizing: border-box;
}
body 
{
    background-image:url("https://images3.alphacoders.com/853/thumb-1920-85305.jpg");
    perspective: 800px;
}
.card
{
    width:300px;
    height: 500px;
    margin: 50px auto;
    position: relative;
    transform-style: preserve-3d;
    transition: all 2s ease-in-out;
}
.card > div 
{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-color: #EEE;
    color: #777;
    border-radius: 10px;
    border: 1px solid #CCC;
    font-family: Arial,Tahoma;
    text-align: center;
}
.card:hover 
{
    transform:rotateY(180deg);
}
.card .front 
{
    z-index: 2;
    backface-visibility: hidden;
}
.card .front header
{
    background-color: #444;
    width:100%;
    height: 80px;
    margin-bottom: 40px;
    border-radius: 10px 10px 0 0; 
}
.card .front header img 
{
    width:100px;
    height: 100px;
    border-radius: 50%;
    position: relative;
    top:15px;
}
.card .front p  
{
    margin:auto;
    width:90%;
    line-height: 1.6;
}
.card .front span 
{
    font-weight: bold;
    margin-top:10px;
    display:inline-block;
    color:#831828;
}
.card .back
{
    z-index:1;
    transform:rotateY(180deg);
    backface-visibility: hidden;
    color:darkcyan;
    font-size: 20px;
    font-family: Arial;
}
.card .back ul 
{
    list-style: none;
    padding:none;
    line-height: 1.8;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.