ZorNet.Ru — сайт для вебмастера » HTML и CSS » Профиль пользователя сайта на HTML + CSS

Профиль пользователя сайта на HTML + CSS

Вашему вниманию простой профиль для пользователя, что зарегистрировался на сайте, где также идет вывод изображение с данными и соц.кнопками. Также называемая карта пользователя создана полностью html и css, где можете по информации добавить данные, так как по умолчанию идет только название. Все сделано в минималистическом стиле дизайна, это сам небольшой каркас, это идет вывод изображение, которое во внутри будет установлено, а немного выше, но здесь все можно выставить как нужно.

Подключены шрифтовые иконки, что установлены под ссылки. Что по мне, так они лишнее, можно что-то по факту поставить, чтоб перейти как пример, на тот материал, что был создан или залит на сайт этим пользователем. Тематически не привязана, но больше всего по своему формату можно поставить под разные наклонение тематики, что интернет магазин или игровой сайт.

Ключевая особенность:

1. Многофункциональная карта профиля;
2. Хорошо документированы;
3. Полностью отзывчивый;
4. Нет перезагрузки страницы;
5. Включает также контактную форму;
6. Используемые иконки;

Больше всего его создавали под оригинальный дизайн, где на страницу, что отведена для пользователей, можно разместить этот скрипт.

Функционал проверен на работоспособность.

Персональная страница пользователя сайта

Приступаем к установке:

HTML

Код

<figure class="kadvanta-gesotavin">
  <img src="http://zornet.ru/ABVUN/sarunolas/Gamilsatun/profile-sample6.jpg" alt="" />
  <figcaption>
  <h3>Сайт: Zornet.Ru</h3>
  <div class="dsatnem"><a href="#"><i class="fa fa-video-camera"></i></a>
  <a href="#"> <i class="fa fa-cloud-download"></i></a>
  <a href="#"> <i class="fa fa-briefcase"></i></a>
  </div>

CSS

Код

.kadvanta-gesotavin {
  position: relative;
  display: inline-block;
  margin: 35px 10px;
  min-width: 243px;
  max-width: 320px;
  width: 100%;
  color: #121213;
  text-align: left;
  font-size: 17px;
  background: #f5f5f5;
  border-radius: 3px;
}

.kadvanta-gesotavin *,
.kadvanta-gesotavin:before,
.kadvanta-gesotavin:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.kadvanta-gesotavin img {
  max-width: 37%;
  margin-top: -10px;
  margin-left: 58%;
  margin-bottom: 10px;
  backface-visibility: hidden;
  vertical-align: top;
  border-radius: 3px;
}

.kadvanta-gesotavin figcaption {
  position: absolute;
  top: 0;
  right: 38%;
  left: 0;
  bottom: 0;
  padding: 17px;
}

.kadvanta-gesotavin h3 {
  margin: 0;
  font-size: 1.3em;
  font-weight: normal;
}

.kadvanta-gesotavin .dsatnem {
  font-size: 1.3rem;
}

.kadvanta-gesotavin .dsatnem a {
  color: #6b8bbb;
}

.kadvanta-gesotavin .dsatnem a:hover {
  color: #053656;
}

Есть вероятность, что кому то потребуется увеличить, для того, чтоб поставить функций, что все можно сделать в CSS.

Демонстрация

24 Сентября 2018 Просмотров: 5858 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0