Skip to content

Instantly share code, notes, and snippets.

@cyb3rD
Created June 10, 2015 05:36
Show Gist options
  • Select an option

  • Save cyb3rD/0850c443f43d9b056c3f to your computer and use it in GitHub Desktop.

Select an option

Save cyb3rD/0850c443f43d9b056c3f to your computer and use it in GitHub Desktop.
Sample contacts
<html>
<head>
<title>Контакты, шаг 3</title>
<meta charset="utf-8">
<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700&subset=cyrillic' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="contacts">
<div class="title">Наш адрес</div>
<div class="item">
<div class="icon icon-location"></div>
Россия, Санкт-Петербург,<br>
Невский пр., дом 1
</div>
<div class="item">
<div class="icon icon-phone"></div>
+7 (921) 555-33-22
</div>
<div class="item">
<div class="icon icon-email"></div>
<a href="mailto:mail@htmlacademy.ru">mail@htmlacademy.ru</a>
</div>
</div>
</body>
</html>
body{
font-family:"PT Sans", sans-serif;
font-size:14px;
color:#777777;
}
.contacts{
width:250px;
margin:0 auto;
margin-top:80px;
}
.contacts .title{
font-size:20px;
color:#7f8c8c;
font-weight:bold;
margin-bottom:20px;
}
.contacts .item{
position:relative;
padding-left:30px;
margin-bottom:10px;
}
.contacts .icon{
position:absolute;
top:3px;
left:0;
width:22px;
height:32px;
background:url('http://htmlacademy.ru/assets/course14/contacts.png');
background-repeat:no-repeat 0 0;
}
.contacts .icon-location{
background-position: 0 0;
}
.contacts .icon-phone{
background-position: -30px 0;
}
.contacts .icon-email{
background-position: -60px 1px;
}
.contacts a{
color: #e2534b;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment