Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

UI Профиль пользователя

Дата добавления: 05.03.2017 - 10:41
Добавил: Buger
Количество просмотров: 248
Количество комментариев: 0
Размер файла: 3.8Kb
Рейтинг материала: 5.0 / 1
UI Профиль пользователя
рейтинг 5.0
/
голосов 1
Красивый вид профиля пользователя в UI стиле. Фон страницы, а также сама табличка пользователя имеет градиентный вид, который написан на css. Легко отредактировать его под свои нужды и очень простой и тривиальный к установке. Все что вам понадобится, это установить указанный нижний код и отредактировать его, прописав нужные системные теги.

Демонстрацию вы сможете увидеть в скачанном файле.

И так, давайте приступим к установке.
Для отображения шрифтовых иконок, нам нужно подключить библиотеку FontAwesome. Давайте ее подключим. Подключать будем из CDN
Код
<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">Buger</h1>
  <p class="description">Веб-разработчик | Дизайнер | Мечтатель</p>

  <ul class="social-media">
  <a href="http://art-ucoz.ru/"><i class="fa fa-behance" target="_blank"></i></a>
  <a href="http://art-ucoz.ru/"><i class="fa fa-instagram" target="_blank"></i></a>
  <a href="http://art-ucoz.ru/" target="_blank"><i class="fa fa-vk"></i></a>
  <a href="http://art-ucoz.ru/" target="_blank"><i class="fa fa-odnoklassniki"></i></a>
  </ul>
  <a href="http://art-ucoz.ru/" target="_blank" class="follow">Следить</a>
  </div>
  </div>

Ну и теперь подключим стили CSS между тегами
Код
<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>

Стили можно подключить отдельным .css файлом, указав путь до этого файла.
На этом все. Если появятся вопросы, то задавайте их в комментариях.

Источник: http://art-ucoz.ru/
Добавлять комментарии могут только зарегистрированные пользователи.