UI ПРОФИЛЬ ПОЛЬЗОВАТЕЛЯ для uCoz
Описание:
Красивый вид профиля пользователя в UI стиле. Фон страницы, а также сама табличка пользователя имеет градиентный вид, который написан на css. Легко отредактировать его под свои нужды и очень простой и тривиальный к установке. Все что вам понадобится, это установить указанный нижний код и отредактировать его, прописав нужные системные теги.
Установка.
Для отображения шрифтовых иконок, нам нужно подключить библиотеку FontAwesome. Давайте ее подключим.
Теперь нужно ставить HTML:
Теперь надо ставить стили между тегами:
Ставим этот стили:
Стили можно подключить отдельным ваш.css , через файловый менеджер, указав путь к ней.
Вот и всё!
Turbo-S - Если будет вопросы пишите в комментариях, Если нужен помощь по установке тогда создайте тему форуме.
Красивый вид профиля пользователя в UI стиле. Фон страницы, а также сама табличка пользователя имеет градиентный вид, который написан на css. Легко отредактировать его под свои нужды и очень простой и тривиальный к установке. Все что вам понадобится, это установить указанный нижний код и отредактировать его, прописав нужные системные теги.
Установка.
Для отображения шрифтовых иконок, нам нужно подключить библиотеку FontAwesome. Давайте ее подключим.
Код
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
Теперь нужно ставить HTML:
Код
<div class="wrapper">
<div class="image-wrapper">
<img src="http://cdn0.iconfinder.com/data/icons/user-pictures/100/male-256.png" alt="" />
<h1 class="name">Sтранник</h1>
<p class="description">Веб-разработчик | Дизайнер | Мечтатель</p>
<ul class="social-media">
<a href="http://turbo-s.ucoz.ru/"><i class="fa fa-behance" target="_blank"></i></a>
<a href="http://turbo-s.ucoz.ru/"><i class="fa fa-instagram" target="_blank"></i></a>
<a href="http://turbo-s.ucoz.ru/" target="_blank"><i class="fa fa-vk"></i></a>
<a href="http://turbo-s.ucoz.ru/" target="_blank"><i class="fa fa-odnoklassniki"></i></a>
</ul>
<a href="http://turbo-s.ucoz.ru/" target="_blank" class="follow">Следить</a>
</div>
</div>
<div class="image-wrapper">
<img src="http://cdn0.iconfinder.com/data/icons/user-pictures/100/male-256.png" alt="" />
<h1 class="name">Sтранник</h1>
<p class="description">Веб-разработчик | Дизайнер | Мечтатель</p>
<ul class="social-media">
<a href="http://turbo-s.ucoz.ru/"><i class="fa fa-behance" target="_blank"></i></a>
<a href="http://turbo-s.ucoz.ru/"><i class="fa fa-instagram" target="_blank"></i></a>
<a href="http://turbo-s.ucoz.ru/" target="_blank"><i class="fa fa-vk"></i></a>
<a href="http://turbo-s.ucoz.ru/" target="_blank"><i class="fa fa-odnoklassniki"></i></a>
</ul>
<a href="http://turbo-s.ucoz.ru/" target="_blank" class="follow">Следить</a>
</div>
</div>
Теперь надо ставить стили между тегами:
Код
<head>.....</head>
Ставим этот стили:
Код
<style class="cp-pen-styles">
@import url("https://fonts.googleapis.com/css?family=PT+Sans");
::selection {
background: #272838;
}
* {
margin: 0;
padding: 0;
font-family: "PT Sans", sans-serif;
text-align: center;
text-decoration: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
img {
max-width: 100%;
}
body {
background: linear-gradient(to right, #E75A7C, #141B41);
}
.wrapper {
max-width: 600px;
position: relative;
background: linear-gradient(to left, #306BAC, #141B41);
color: #fff;
margin: 0 auto;
margin-top: 30px;
padding: 30px;
border-radius: 20px;
box-shadow: 0px 0px 80px 1px #212129;
}
.wrapper .image-wrapper img {
width: 225px;
border-radius: 50%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.wrapper .name {
font-size: 2.2em;
}
.wrapper .description {
color: #A1A2AD;
text-transform: uppercase;
margin-top: 10px;
}
.wrapper .social-media a i {
color: #fff;
font-size: 2em;
margin-left: 10px;
margin-top: 10px;
padding: 15px;
transition: 300ms;
}
.wrapper .social-media a i:hover {
color: #A1A2AD;
transition: 300ms;
}
.wrapper .follow {
background: #fff;
color: #212129;
text-transform: uppercase;
font-size: 1.2em;
letter-spacing: 0.1em;
padding: 10px 45px;
border-radius: 30px;
transition: 300ms;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin-top: 15px;
display: inline-block;
}
.wrapper .follow:hover {
background: #212129;
color: #fff;
transition: 300ms;
}
.wrapper .follow .fa-twitter {
margin-right: 5px;
margin-top: 15px;
}
</style>
@import url("https://fonts.googleapis.com/css?family=PT+Sans");
::selection {
background: #272838;
}
* {
margin: 0;
padding: 0;
font-family: "PT Sans", sans-serif;
text-align: center;
text-decoration: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
img {
max-width: 100%;
}
body {
background: linear-gradient(to right, #E75A7C, #141B41);
}
.wrapper {
max-width: 600px;
position: relative;
background: linear-gradient(to left, #306BAC, #141B41);
color: #fff;
margin: 0 auto;
margin-top: 30px;
padding: 30px;
border-radius: 20px;
box-shadow: 0px 0px 80px 1px #212129;
}
.wrapper .image-wrapper img {
width: 225px;
border-radius: 50%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.wrapper .name {
font-size: 2.2em;
}
.wrapper .description {
color: #A1A2AD;
text-transform: uppercase;
margin-top: 10px;
}
.wrapper .social-media a i {
color: #fff;
font-size: 2em;
margin-left: 10px;
margin-top: 10px;
padding: 15px;
transition: 300ms;
}
.wrapper .social-media a i:hover {
color: #A1A2AD;
transition: 300ms;
}
.wrapper .follow {
background: #fff;
color: #212129;
text-transform: uppercase;
font-size: 1.2em;
letter-spacing: 0.1em;
padding: 10px 45px;
border-radius: 30px;
transition: 300ms;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin-top: 15px;
display: inline-block;
}
.wrapper .follow:hover {
background: #212129;
color: #fff;
transition: 300ms;
}
.wrapper .follow .fa-twitter {
margin-right: 5px;
margin-top: 15px;
}
</style>
Стили можно подключить отдельным ваш.css , через файловый менеджер, указав путь к ней.
Вот и всё!
Turbo-S - Если будет вопросы пишите в комментариях, Если нужен помощь по установке тогда создайте тему форуме.
Файлы для скачивания отсутствуют.
Поблагодарить автора
Автор: SТРАННИК
ИсточникМатериал взят с другого сайта
Комментарии (0)