"contacts"
Bootstrap 3.0.0 Snippet by KeryX

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 ---------->
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="myphoto"></div>
<div class="name-text">
<p> Hello! My name is</p>
<h2>Alexandra Tikhova</h2>
</div>
<div class="social-buttons">
<p><span class="vk"></span><a href="https://vk.com/tikhova_photography">tikhova_photography</a></p>
<p><span class="instagram"></span><a href="
http://www.instagram.com/tikhova_photography">tikhova_photography</a></p>
<p><span class="vk"></span><a href="https://vk.com/tikhova_photography">tikhova_photography</a></p>
</div>
</div>
</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
div {
outline: 1px solid red;
}
.myphoto {
margin: 20px auto;
height: 200px;
width: 200px;
border-radius: 50%;
background-image: url('https://pp.userapi.com/c619822/v619822306/14fe1/PRaCaYsUEqc.jpg');
background-color: #000;
background-position: 50% 30%;
}
.name-text {
text-align: center;
}
.social-buttons {
text-align: center;
position: relative;
}
.social-buttons p {
line-height: 25px;
}
.vk:before {
content:"";
display: block;
position: absolute;
top: -5px;
left: 45px;
width: 30px;
height:30px;
background-image: url('https://cdn.iconscout.com/public/images/icon/free/png-256/vk-social-media-30e7c557bc2ab7f2-256x256.png');
background-size: cover;
background-color: #000;
}
.instagram:before {
content:"";
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: