Переводчики онлайн

by pharma_nsk

HTML

<body>
<div class="box">
<header>Переводчики онлайн</header>
<div class="translator">
<span><a href="#"><img src="https://www.google.com/intl/ru/homepage/images/google_favicon_64.png"></a></span> <a href="#"><span class="name">Переводчик Google</span></a> <span class="detail">Пожалуй, самый популярный и удобный web-переводчик, имеющий множество дополнительных функций как распознавание языка и зачитывание речи.</span>
</div>
<div class="translator">
<span><a href="#"><img src="https://hsto.org/getpro/habr/comment_images/0c9/ab8/bd7/0c9ab8bd77972cb22ec497a58941eae0.png"></a></span> <a href="#"><span class="name">Яндекс.Перевод</span></a> <span class="detail">Переводчик похож на Google, также имеет все необходимые функции, как перевод страниц, распознавание языка, будет наиболее удобен пользователям этой поисковой системы, также имеет расширения для всех популярных браузеров.</span>
</div>
<div class="translator">
<span><a href="#"><img src="http://soft.mydiv.net/images/ru/android/icons/Perevodchik-Translate-Ru.gif"></a></span> <span class="name"><a href="#">translate.ru</a></span> <span class="detail">Позиционирует себя как Первый онлайн-переводчик Рунета. Есть поиск по словарям, перевод сайтов, различные грамматические правила и транскрипции.</span>
</div>
<div class="translator">
<span><a href="#"><img src="http://abali.ru/wp-content/uploads/2010/12/united-kingdom-flag.png"></a></span> <span class="name"><a href="#">META.ua</a></span> <span class="detail">онлайн переводчик, который построен на технологии машинного перевода "Trident Software", удобен, имеет проверку орфографии.</span>
</div>
<div class="url">http://www.itma*******tor.ru</div>
</div>
</body>

CSS

@import 'https://fonts.googleapis.com/css?family=Roboto+Condensed';
body {background-color:white; font-family: Arial, sans-serif; font-weight:bold;}
.box {height:auto; width:80%; margin:10px auto; background-color: white; border:5px solid  #F5F5F5;}
header {background-color: #3758BD; color:white; height:30px; text-align:center; line-height:30px; font-size:20px;font-family: 'Roboto Condensed', sans-serif;}
.translator {padding:0 5px;}
img {width:20px; position:relative; top:5px;}
span {font-size:12px;}
.detail {font-weight:normal;}
.url {font-size:10px; text-align:right;}
a {text-decoration:none; color:black;}
a:hover {color:red;}