|
|
|
|
|
Пропуск №: 1
Регистрация: 20.11.2013
Ранг: Легенда
Сообщений: 1357
|
|
| Слышу гимн зашитых ртов |
 |
|
|
|
|
 Дата: Вторник, 25.06.2019, 18:47/ Сообщение №: 1
|
|
Рипал: Бармен
Вставляем в Нижнею часть сайта:
Код
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="social-icons d-flex justify-content-center">
<a href="#" target="_blank" class="under"><i class="icons fa fa-tumblr fa-3x"></i><span class="follow">Следить</span></a>
<a href="#" target="_blank" class="under"><i class="icons fa fa-twitter fa-3x"></i><span class="follow">Следить</span></a>
<a href="#" target="_blank" class="under"><i class="icons fa fa-youtube fa-3x"></i><span class="follow">Следить</span></a>
<a href="#" target="_blank" class="under"><i class="icons fa fa-facebook fa-3x"></i><span class="follow">Следить</span></a>
<a href="#" target="_blank" class="under"><i class="icons fa fa-camera-retro fa-3x"></i><span class="follow">Следить</span></a>
</div>
CSS:
Код
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro&subset=cyrillic,cyrillic-ext');
.social-icons {
margin-top: 25px;
}
.d-flex {
display: -ms-flexbox !important;
display: flex !important;
}
.justify-content-center {
-ms-flex-pack: center !important;
justify-content: center !important;
}
.social-icons .under {
position: relative;
width: 50px;
height: 50px;
display: inline-block;
cursor: pointer;
margin: 0 2px;
text-align: center;
}
.social-icons .under .icons {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
background-color: rgba(99, 99, 99, 0.7);
border: 1px solid #FFF;
color: #FFF;
font-size: 2em;
line-height: 1.55em;
transition: all .3s ease-out;
}
.social-icons .under .follow {
opacity: 0;
font-size: 11px;
font-family: 'Source Sans Pro', sans-serif;
color: #FFF;
line-height: 81px;
}
.social-icons .under:hover:first-child .icons {
transform: translate(-18px, -18px);
}
.social-icons .under:hover:last-child .icons {
transform: translate(18px, -18px);
}
.social-icons .under:hover .icons {
background-color: #FFF;
color: #900100;
transform: translateY(-18px);
}
.social-icons .under:hover .follow {
opacity: 1;
}
.social-icons .under:hover {
background-color: #900100;
}
Тихо на улице, пусто в квартире..Спасибо реактору №4
|
|
|
|
|
|
|
|
){kind=link}