Сервис и помощь

by pharma_nsk

HTML

<body>
<div class="container">
<h1>Сервис и помощь</h1>
<div class="centre">
<p>
<a href="#">Пункты самовывоза</a></p>
<div class="img"></div>
</div>
<div class="list">
<ul>
<li><a href="#">Как сделать заказ</a></li>
<li><a href="#">Способы оплаты</a></li>
<li><a href="#">Возврат</a></li>
<li><a href="#">Правила продажи</a></li>
<li><a href="#">Публичная оферта</a></li>
<li><a href="#">Ткани и уход за ними</a></li>
<li><a href="#">Доставка</a></li>
<li><a href="#">Вопросы и ответы</a></li>
</ul>
</div>
</div>
</body>

CSS

body{background-color:white; font-family:sans-serif;}
.container {width:80%; margin: 20px auto; height:170px; position:relative;}
h1 {font-size:20px;}
.centre {display:inline-block; width:130px; height:90px; border: 2px solid #F1CFFF;border-radius:5px; font-size:20px; padding-left:80px; float:left; margin-right:10px; margin-top:5px;}
.centre a {color:#8C58A1;}
.centre a:hover, ul a:hover {color:green; text-decoration:underline;}
.img {display:block; width:50px; height:40px; background-image: url('https://img-fotki.yandex.ru/get/6/136164467.9/0_f9646_7374fd3d_orig.jpg'); background-position:-31px -75px; position:absolute; top:70px; left:22px;}
.list {height:100px;}
ul  {column-count:2; -moz-column-count:2; margin-top:0px; vertical-align:top; }
li {color:#8C58A1; padding:2px 0;}
a{color:#666; text-decoration:none; }