Форма входа

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

    Вы здесь: Главная страница » Файлы » Персональная страница
    Уважаемые друзья и пользователи сайта ART-UCOZ!

    Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!

    Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
    Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.

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

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

    Дата добавления: 05.03.2017 - 10:41
    Добавил: Buger
    Количество просмотров: 2.4k
    Количество комментариев: 0
    Размер файла: 3.8 Kb
    Рейтинг материала: 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/
    Добавлять комментарии могут только зарегистрированные пользователи.


    Поделись с друзьями: