<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 ---------->
<!-- forked by https://jsdo.it/teetteet/wMgk -->
<div id="card">
<h1>Go<b>o</b><b>g</b><b>l</b>e</h1>
<div class="content">
<span class="text">
<h2>HARUN PEHLİVAN <span> </span></h2>
</span>
<ul>
<li>
<span><a href="http://harunpehlivan.blogspot.com.tr"><b>TERCUMAN BİLİŞİM MERKEZİ</b></a></span>
<span><a href="http://harunpehlivan.blogspot.com.tr"><b>harunpehlivan</b>.blogspot.com</a></span>
BİLİŞİM TEKNOLOJİLERİ ONLİNE <span>EĞİTİMLER ARGE PROJELER YER ALMAKTADIR</span>
</li>
</ul>
</div>
</div>
body {
font-family: Georgia;
background-image: linear-gradient(90deg, rgba(71, 138, 248, 0.5) 50%, transparent 50%), linear-gradient(rgba(71, 138, 248, 0.5) 50%, transparent 50%);
background-image: -webkit-linear-gradient(0, rgba(71, 138, 248, 0.5) 50%, transparent 50%), -webkit-linear-gradient(rgba(71, 138, 248, 0.5) 50%, transparent 50%);
background-image: -o-linear-gradient(0, rgba(71, 138, 248, 0.5) 50%, transparent 50%), -webkit-linear-gradient(rgba(71, 138, 248, 0.5) 50%, transparent 50%);
background-size: 50px 50px;
}
#card {
background: #fff;
width: 450px;
height: 195px;
margin: 2% auto;
padding: 10px 25px 30px 25px;
-webkit-box-shadow: -1px 1px 8px 5px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.1);
-o-box-shadow: -1px 1px 8px 5px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.1);
-moz-box-shadow: -1px 1px 8px 5px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.1);
-khtml-box-shadow: -1px 1px 8px 5px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.1);
-ms-box-shadow: -1px 1px 8px 5px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.1);
box-shadow: -1px 1px 8px 5px rgba(0, 0, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.1);
text-align: center;
}
#card h1 {
color: #e31b31;
font-weight: normal;
font-size: 48px;
margin: 0 0 10px 0;
font-family: "Times New Roman", Arial, sans-serif;
}
#card h1::first-letter {
color: #184FF7;
}
#card h1 b {
color: #f8ad10;
font-weight: normal;
}
#card h1 b + b {
color: #184FF7;
}
#card h1 b + b + b {
color: #00940e;
}
.content {
text-align: left;
color: #454545;
}
.content ul {
padding: 0;
margin: 0;
font: 15px Arial;
}
.content ul li {
list-style: none;
}
.content ul li a {
color: #1122cc;
}
.content ul li span {
display: block;
width: 100%;
margin-bottom: 1px;
}
.content ul li span:nth-child(2) {
margin-bottom: 5px;
}
.content ul li span:nth-child(2) a {
color: #093;
text-decoration: none;
}
.content ul li span:nth-child(3),
.content ul li span:nth-child(4) {
font-size: 13px;
color: #6a6a6a;
margin-top: 5px;
}
.content .text {
border: 1px solid #4e90fe;
float: left;
width: 100%;
margin-bottom: 10px;
}
.content .text h2 {
position: relative;
float: left;
font-size: 100%;
font-weight: normal;
padding: 0;
margin: 5px 10px;
}
.content .text h2 span {
position: absolute;
top: 0;
right: 0;
width: 0;
background: #fff;
border-left: 0.1em solid #000;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-animation: typing 1s steps(12, end), blink-caret 1s step-end infinite;
-moz-animation: typing 1s steps(12, end), blink-caret 1s step-end infinite;
}
.fadeIn {
-webkit-animation-name: fadeIn;
-o-animation-name: fadeIn;
-moz-animation-name: fadeIn;
-khtml-animation-name: fadeIn;
-ms-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes typing {
0% {
width: 100%;
}
100% {
width: 0;
}
}
@-moz-keyframes typing {
0% {
width: 100%;
}
100% {
width: 0;
}
}
@-o-keyframes typing {
0% {
width: 100%;
}
100% {
width: 0;
}
}
@keyframes typing {
0% {
width: 100%;
}
100% {
width: 0;
}
}
/* FadeIn keyframes */
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
