UI ПРОФИЛЬ ПОЛЬЗОВАТЕЛЯ для uCoz
15.03.2017 59 0 SТРАННИК

UI ПРОФИЛЬ ПОЛЬЗОВАТЕЛЯ для uCoz

Описание:

Красивый вид профиля пользователя в 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>

Теперь надо ставить стили между тегами:

Код
<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 , через файловый менеджер, указав путь к ней.

Вот и всё!

Turbo-S - Если будет вопросы пишите в комментариях, Если нужен помощь по установке тогда создайте тему форуме.
Файлы для скачивания отсутствуют.
Поблагодарить автора Автор: SТРАННИК
ИсточникМатериал взят с другого сайта
Комментарии (0)
Добавить комментарий
Прокомментировать