Bootstrap Snippet CSS Google Business Card using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"CSS Google Business Card"
Bootstrap 3.0.0 Snippet by harunpehlivan

Related: See More

Questions / Comments:

"CSS Google Business Card" Bootstrap 3.0.0 Snippet by harunpehlivan

Related: See More

Questions / Comments:

"CSS Google Business Card"
Bootstrap 3.0.0 Snippet by harunpehlivan