Bootstrap Snippet Business Cards 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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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 ---------->
<html >
  <head>
    <meta charset="UTF-8">
    <title>Business Card ~ Alex K</title>
    
        <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Lato:300,400'>
        <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
        <link rel="stylesheet" href="css/style.css">
    
  </head>
  <body>
    <aside class="profile-card">
      
      <header>
        <a href="//codepen.io/harunpehlivan/"target="_blank">
          <img src="http://www.doyoubuzz.com/var/users/_/2016/11/15/18/1300826/avatar/1253797/avatar_cp_630.jpg?t=1505286021">
        </a>
        <h1>HARUN PEHLİVAN</h1>
        
        <h2>FOUNDER| CEO | BLOGGER</h2>
        
      </header>
      
      <div class="profile-bio">
        
        <p>HTML, CSS, Python, PHP, VB.NET, some C++, Java.</p>
      <p><a href="https://harunpehlivantebimtebitagem.carrd.co" target="_blank"> FOUNDER,CEO BLOGGER</a>
      </p>
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
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  height: 100vh;
  width: 100vw;
  background: url('http://static-cache.tr.uaprom.net/image/se/busines_head_42.jpg?r=143818') no-repeat center center / cover;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 16px;
}
img{
  max-width: 100%;
}
label{
  display: inline-block;
  background-color: rgb(42,169,224);
  padding: 10px 20px;
  margin: 20px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transition: all .3s;
          transition: all .3s;
}
label:hover{
  box-shadow: 5px 5px 10px rgba(0,0,0, .1);
  background-color: rgb(32,159,214);
}
input{
  display: none;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Business Cards"
Bootstrap 3.0.0 Snippet by harunpehlivan

Related: See More

Questions / Comments:

"Business Cards" Bootstrap 3.0.0 Snippet by harunpehlivan

Related: See More

Questions / Comments:

"Business Cards"
Bootstrap 3.0.0 Snippet by harunpehlivan