<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="wrapper"> <div class="card front"> <div class="inner-wrap"> <div class="orbit"> <div class="sun"></div> <div class="p1-orbit"> <div class="p1"></div> </div> <div class="p2-orbit"> <div class="p2"></div> </div> <div class="p3-orbit"> <div class="p3"></div> </div> <div class="p4-orbit"> <div class="p4"></div> </div> </div> <div class="name-wrap"> <div class="name">HARUN PEHLİVAN IT GROUP</div> <div class="title">TEBİM 2008 TEBİTAGEM 2012</div> </div> </div> </div> <div class="card back"> <div class="inner-wrap"> <div class="orbit"> <div class="sun"> </div> <div class="p1-orbit"> <div class="p1"></div> </div> <div class="p2-orbit"> <div class="p2"></div> </div> <div class="p3-orbit"> <div class="p3"></div> </div> <div class="p4-orbit"> <div class="p4"></div> </div> </div> <div class="name-wrap"> <div class="name">HARUN PEHLİVAN</div> <div class="title">FOUNDER CEO BLOGGER</div> </div> <div class="contact"> <p> <a href="mailto:trcmnh@hotmail.com" target="_blank">trcmnh@hotmail.com</a><br> +90.350.417.62 30<br> <a href="https://harunpehlivantebimtebitagem.carrd.co" target="_blank">FOUNDER CEO BLOGGER Islamic sciences and IT computer science</a> </p> </div> </div> </div> </div> <p class="info"><a href="https://tr.gravatar.com/tebm" target="_blank">TERCUMAN INFORMATICS CENTER TERCUMAN EDUCATION, SCIENCE, TECHNICAL RESEARCH AND DEVELOPMENT CENTER</a><br> by <a href="http://harunpehlivan.blogspot.com.tr/" target="_blank">TERCUMAN BİLİŞİM MERKEZİ</a><br> </p>

@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700); body {background: #000; font-family: 'roboto slab', serif; } .wrapper {width: 427px; height: 320px; position: relative; margin: 0 auto;} .card {width: 427px; height: 320px; position: absolute; top: 0; left: 0;} .front {background: #333; color: #fafafa; text-transform: uppercase; z-index: 1; } .front .inner-wrap {width: 85%; margin: 120px auto;} /*orbit*/ .front .orbit {position: relative; top: -20px; float: left; height: 100px; width: 27%; } .front .sun {position: absolute; top: 50%; left: 50%; height: 30px; width: 30px; margin-top: -15px; margin-left: -15px; background: #d35400; border-radius: 50%; border: 2px solid #242424;} .front .p1 {position: absolute; top: 0; left: 50%; height: 10px; width: 10px; margin-left: -5px; margin-top: -5px; border-radius: 50%; background: #ecf0f1; border: 2px solid #242424; } .front .p1-orbit {position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; margin-top: -30px; margin-left: -30px; border-radius: 50%; border: 1px dotted #bdc3c7; -webkit-animation: spin-left 3.5s linear infinite; -moz-animation: spin-left 3.5s linear infinite; -ms-animation: spin-left 3.5s linear infinite; -o-animation: spin-left 3.5s linear infinite; animation: spin-left 3.5s linear infinite; } .front .p2 {position: absolute; top: 0; left: 50%; height: 20px; width: 20px; margin-left: -10px; margin-top: -10px; border-radius: 50%; background: #d35400; border: 2px solid #242424; } .front .p2-orbit {position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; margin-top: -40px; margin-left: -40px; border-radius: 50%; border: 1px dotted #bdc3c7; -webkit-animation: spin-left 3s linear infinite; -moz-animation: spin-left 3s linear infinite; -ms-animation: spin-left 3s linear infinite; -o-animation: spin-left 3s linear infinite; animation: spin-left 3s linear infinite; } .front .p3 {position: absolute; top: 0; left: 50%; height: 12px; width: 12px; margin-left: -6px; margin-top: -6px; border-radius: 50%; background: #ecf0f1; border: 2px solid #242424; } .front .p3-orbit {position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin-top: -50px; margin-left: -50px; border-radius: 50%; border: 1px dotted #bdc3c7; -webkit-animation: spin-left 4s linear infinite; -moz-animation: spin-left 4s linear infinite; -ms-animation: spin-left 4s linear infinite; -o-animation: spin-left 4s linear infinite; animation: spin-left 4s linear infinite; } .front .p4 {position: absolute; top: 0; left: 50%; height: 12px; width: 12px; margin-left: -6px; margin-top: -6px; border-radius: 50%; background: green; border: 2px solid #242424; display: none; } .front .p4-orbit {position: absolute; top: 50%; left: 50%; width: 60px; height: 110px; margin-top: -55px; margin-left: -30px; border-radius: 50%; border: 1px dotted #bdc3c7; -webkit-animation: spin-right 4s linear infinite; -moz-animation: spin-right 4s linear infinite; -ms-animation: spin-right 4s linear infinite; -o-animation: spin-right 4s linear infinite; animation: spin-right 4s linear infinite; } @-webkit-keyframes spin-left { 100% {-webkit-transform: rotate(360deg); -moz-tranform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin-left { 100% {-webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes spin-right { 100% {-webkit-transform: rotate(-360deg); -moz-tranform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } } @keyframes spin-right { 100% {-webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); } } .front .name-wrap {width: 66%; float: right;} .front .name-wrap:after {clear: both;} .front .name {font-size: 26px; font-weight: 700; letter-spacing: .03em; border-bottom: 1px solid #fafafa;} /*back*/ .back {background: #fafafa; color: #333; text-align: center; z-index: 0;} .back .inner-wrap {width: 55%; margin: 40px auto;} .back .name-wrap {text-transform: uppercase; padding-bottom: 10px; border-bottom: 1px solid #333;} .back .name {color: #d35400; font-weight: 700; font-size: 22px; font-weight: 700;} .back .title {font-weight: 700;} .contact {font-size: 14px; line-height: 18px;} a, a:visited {text-decoration: none; color: #333; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;} a:hover {color: #d35400; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;} /*orbit*/ .back .orbit {position: relative; height: 80px; margin: 0 auto;} .back .sun {position: absolute; top: 50%; left: 50%; height: 12px; width: 12px; margin-top: -6px; margin-left: -6px; background: #d35400; border-radius: 50%; border: 1px solid #242424; } .back .p1 {position: absolute; top: 0; left: 50%; height: 8px; width: 8px; margin-left: -4px; margin-top: -4px; border-radius: 50%; background: #ecf0f1; border: 1px solid #242424; } .back .p1-orbit {position: absolute; top: 50%; left: 50%; width: 30px; height:30px; margin-top: -15px; margin-left: -15px; border-radius: 50%; border: 1px dotted #333; -webkit-animation: spin-left 3.5s linear infinite; -moz-animation: spin-left 3.5s linear infinite; -ms-animation: spin-left 3.5s linear infinite; -o-animation: spin-left 3.5s linear infinite; animation: spin-left 3.5s linear infinite; } .back .p2 {position: absolute; top: 0; left: 50%; height: 10px; width: 10px; margin-left: -5px; margin-top: -5px; border-radius: 50%; background: #d35400; border: 1px solid #242424; } .back .p2-orbit {position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin-top: -20px; margin-left: -20px; border-radius: 50%; border: 1px dotted #333; -webkit-animation: spin-left 3s linear infinite; -moz-animation: spin-left 3s linear infinite; -ms-animation: spin-left 3s linear infinite; -o-animation: spin-left 3s linear infinite; animation: spin-left 3s linear infinite; } .back .p3 {position: absolute; top: 0; left: 50%; height: 6px; width: 6px; margin-left: -3px; margin-top: -3px; border-radius: 50%; background: #ecf0f1; border: 1px solid #242424; } .back .p3-orbit {position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; margin-top: -25px; margin-left: -25px; border-radius: 50%; border: 1px dotted #333; -webkit-animation: spin-left 4s linear infinite; -moz-animation: spin-left 4s linear infinite; -ms-animation: spin-left 4s linear infinite; -o-animation: spin-left 4s linear infinite; animation: spin-left 4s linear infinite; } .back .p4-orbit {position: absolute; top: 50%; left: 50%; width: 34px; height: 66px; margin-top: -33px; margin-left: -17px; border-radius: 50%; border: 1px dotted #333; -webkit-animation: spin-right 4s linear infinite; -moz-animation: spin-right 4s linear infinite; -ms-animation: spin-right 4s linear infinite; -o-animation: spin-right 4s linear infinite; animation: spin-right 4s linear infinite;} .wrapper:hover .front {opacity:0; z-index: 0; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;} .wrapper:hover .back {opacity:1; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;} .info {color: #fafafa; font-family: sans-serif; width: 427px; margin: 10px auto; font-size: 12px; line-height: 16px; text-align: right;} .info a, .info a:visited {color: #ddd; font-family: 'roboto slab', serif;} .info a:hover {color: #d35400;}