Как сделать профиль пользователя html
Как сделать страницу пользователя
Время от времени ко мне приходят вопросы с просьбой рассказать, как сделать страницу пользователя, то есть чтобы каждый зарегистрированный посетитель имел свою собственную страницу на сайте. В этой статье я постараюсь ответить на этот вопрос.
Первым делом, Вам необходимо сделать авторизацию. Если не знаете, как это сделать, то читайте это: как сделать авторизацию пользователей на сайте. После авторизации у каждого пользователя сохраняется в сессии информация о его логине и пароле. Теперь можно заняться страницей пользователя, итак, алгоритм следующий:
Всё, теперь все авторизованные пользователи, заходящие на user.php будут видеть свои собственные данные. Что это за данные (ФИО, аватарка, дата рождения и тому подобное) не имеет никакого значения, то есть мы создали самую обычную страницу пользователя.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.
Профиль пользователя сайта на HTML + CSS
Подключены шрифтовые иконки, что установлены под ссылки. Что по мне, так они лишнее, можно что-то по факту поставить, чтоб перейти как пример, на тот материал, что был создан или залит на сайт этим пользователем. Тематически не привязана, но больше всего по своему формату можно поставить под разные наклонение тематики, что интернет магазин или игровой сайт.
1. Многофункциональная карта профиля;
2. Хорошо документированы;
3. Полностью отзывчивый;
4. Нет перезагрузки страницы;
5. Включает также контактную форму;
6. Используемые иконки;
Больше всего его создавали под оригинальный дизайн, где на страницу, что отведена для пользователей, можно разместить этот скрипт.
Функционал проверен на работоспособность.
Приступаем к установке:
Сайт: Zornet.Ru
.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 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;
>
Есть вероятность, что кому то потребуется увеличить, для того, чтоб поставить функций, что все можно сделать в CSS.
Мега-Учебник Flask, Часть 6: Страница профиля и аватарка
Это шестая статья в серии, где я буду документировать мой опыт написания веб-приложения на Python, используя микрофреймворк Flask.
Цель данного руководства — разработать довольно функциональное приложение-микроблог, которое я за полным отсутствием оригинальности решил назвать microblog.
Краткое повторение
В прошлой статье мы создали систему авторизации, сейчас пользователи могут авторизоваться на сайте используя OpenID.
Сегодня мы будем работать с профилем пользователя. Сперва, создадим страницу профиля, на которой будет показываться информация о пользователе, и его постах, так же мы научимся показывать аватарку. А потом мы создадим форму редактирования личных данных.
Страница профиля.
На самом деле, создание страницы профиля не требует никаких новых концепций. Мы просто создадим новое представление и HTML-шаблон к ней.
Функция в представлении. (файл app.views.py):
Реализация функции должна пройти без сюрпризов. Сперва мы попробуем загрузить пользователя из базы данных, используя nickname который мы приняли в качестве аргумента. Если это не сработает, то сделаем перенаправление на главную страницу с сообщением об ошибке, так же как мы делали в предыдущей главе.
Как только у нас появится пользователь, мы вызываем render_template, вместе с тестовым сообщением. Обращаю ваше внимание, что на странице пользователя нужно показываться только сообщения этого пользователя, поэтому нужно правильно заполнить поле author.
Наш первоначальный шаблон выглядит достаточно просто (файл app/templates/user.html):
Мы закончили со страницей профиля, но на неё нигде нет ссылки. Что бы пользователю было легко добраться до своего профиля, мы добавим ссылку на него в верхней панели навигации (файл app/templates/base.html ):
Обращаю ваше внимание, что в функцию url_for мы добавили обязательный параметр nickname.
Посмотрим что у нас получилось. Нажав на You Profile мы должны перейти на страницу пользователя. Так как у нас нет ни одной ссылки на страницы других пользователей, вам придётся ввести URL вручную, что бы посмотреть на профиль другого пользователя. Например, наберите http://localhost:5000/user/miguel что бы посмотреть профиль пользователя Miguel.
Аватарки.
Сейчас наши страницы с профилем, достаточно унылые. Давайте добавим аватарку, что бы сделать их более интересными.
Теперь напишем метод, который будет возвращать аватарку, и положим его в класс (app/models.py)
Метод avatar вернёт путь до аватарки, сжатой до указанных размеров.
Gravatar поможет сделать это очень легко. Вам просто нужно создать MD5-хэш от емейла, а затем добавить его в специально сформированный URL, который был выше. После хэша добавим в URL другие параметры. d=mm указывает, что нужно вернуть изображение по умолчанию, когда пользователь не имеет Gravatar аккаунт. Параметр mm возвращает изображение с серым силуэтом человека. Параметр s = N указывает до каких размеров следует масштабировать аватарку.
Теперь класс User знает как вернуть изображение, мы можем добавить его на страницу профиля (файл app/templates/user.html):
Примечательно, что класс User отвечает за возвращение аватарки, и если в один прекрасный момент мы решили что Gravatar не то что мы хотим, мы просто перепишем метод avatar, так что он будет возвращать другой путь (даже те которые укажем на нашем собственном сервере), все наши шаблоны будут представлены с новыми аватарками автоматически.
Мы добавили аватарку в верхнюю часть страницы профиля, но в нижней части страницы у нас есть сообщения, рядом с которыми хорошо бы показывать аватарку маленького размера. Для страницы профиля мы, конечно, будем показывать ту же самую аватарку для всех сообщений, но потом, когда мы переведём эту функциональность на главную страницу мы будем иметь каждое сообщение украшенное аватаркой автора сообщения, и это будет действительно хорошо.
Для показа аватарки для поста мы внесём небольшие изменения в шаблон (файл app/templates/user.html):
Теперь наш профиль будет выглядеть так: 
Повторное использование подшаблонов ( sub-template)
Мы разработали страницу профиля, что бы показывать сообщения написанные пользователем. Наша главная страница, также показывает сообщения, но любого пользователя. Теперь у нас есть два вида шаблонов которые будут показывать сообщения написанные пользователями. Мы могли бы просто скопировать/вставить часть шаблона, которая отвечает за отображение сообщения, но это не самая лучшая идея, потому что когда нужено будет внеси изменения в дизайн сообщения, мы должны помнить о всех шаблонах которые умеют отображать сообщения.
Вместо этого мы создадим подшаблон который будет генерировать сообщениея, потом просто подключим подшаблон так где он нужен (файл /app/templates/post.html):
Дл начала, мы создадить, подшаблон сообщения, который ничем не отличается от обычного шаблона. Берём HTML-код для показа сообщения из нашего шаблона.
Потом вызовем подшаблон из нашего шаблона используя Jinja2 командой include (файл app/templates/user.html):
Как только мы сделаем работающую главную страницу, мы будем ссылать на тот же подшаблон, пока мы не готовы к этому, поэтому оставим для следующей главы.
Более интересные профили
Теперь когда у нас есть хорошая страница профиля, нам не хватает информации для показа. Пользователи любят добавлять на свои страницы немного информации о себе, поэтому мы дадим им эту возножость, и так же будем отображать на странице профиля. Ещё будем отслеживать когда пользователь заходил последний раз най сайт и тоже будем показывать на странице профиля.
Что бы сделать задуманное, мы должны изменить базу данных. Нужно добавить два новых поля для нашего класса User (файл app/models.py):
Каждый раз когда мы изменяем базу данных, мы создаём новую миграцию. Помните как в части про базы данных мы прошли через муки для настройки миграционной системы БД. Теперь мы пожинаем плоды этих усилий. Для добавления новых полей в нашу БД, просто выполняем сценарий:
New migration saved as db_repository/versions/003_migration.py
Current database version: 3
И наши два новых поля добавлены в БД. Не забыли, что если вы на Windows то путь запуска скрипта разные.
Если мы не имеем миграционной системы, вам необходимо редактировать БД в ручную, или хуже того, удалить её и создать заново.
Теперь давайте изменим шаблон профиля, с учетом этих полей (файл app/templates/user.html):
Как вы могли заметить, мы используем Jijna2 что бы показывать эти поля, потому что мы будем их показывать, только когда в них есть данные.
Сейчас два новых поля пустые для всех пользователей, так что ничего не отобразится.
Поле Last_seen легко поддерживать. Помните, как в предыдущей главе мы создали обработчик before_request. Хорошее место для добавленя времени входа пользователя (файл app/views.py):
Если вы войдёте на ваше страницу профиля, то увидите когда последний раз заходили на сайт и каждый раз, обновляя страницу, время будет обновлятся, потому что каждый раз, когда браузер делает запрос breforerequest, обработчик будет обновлять время в БД.
Обратите внимание, что мы пишем время в стандартном часовом поясе UTC. Мы обсуждали это в предыдущей главе, что мы пишем все временные метки в UTC, что бы они соответствовали друг другу. Есть побочный эффект, время на странице профиля то же отображается в UTC. Мы исправим это в одной из следующих глав, которая будет посвещенна временным меткам.
Теперь нужно выделить место, для показа поля «обо мне», и правильней было бы разместить его в странице редактирования профиля.
Редактирование профиля.
Добавить форму редактирования профиля на удивление легко. Начнём с создания веб-формы (файл app/forms.py)
И шаблон (файл app/templates/edit.html):
И наконец напишем функцию обработчик (файл app/views.py):
Так же добавим ссылку на него со страницы профиля пользователя, что бы можно было легко добраться до редактирования (файл app/templates/user.html):
Мы используем условные операторы, что убедится что ссылки на редактировния профиля не появлялись когда вы читаете чужой профиль.
Вот так выглядит новый скриншот страницы пользователя, с небольшим описанием о себе.
Заключение… и домашнее задание!
Мы проделали большую работу с профилем пользователя, не так ли?
Но у нас есть одна неприятная ошибка и мы должны её исправить.
Подсказка. Мы допустили ошибку в предыдущей главе, когда делали авторизацию. И сегодня мы написали новый кусок кода, который имеет ту же ошибку.
Попробуйте её найти, и если найдёте, то не стесняйтесь и пишите в комментариях. Я обьясню ошибку и как её исправть в следующей главе.
Как всегда вот ссылка для загрузки приложения с сегодняшними изменениями.
Я не включил базу данных в архив. Если у вас есть база данных предыдущей главы, просто положите её в нужное место и запустите db_upgrade.py. Ну а если у вас нет предыдущей базы данных, слздайте новую с помощью db_create.py.
Спасибо что читаете мой учебник.
Надеюсь увидеть вас в следующем выпуске.
Мега-Учебник Flask, Часть 6: Страница профиля и аватары (издание 2018)
Miguel Grinberg
Эта статья является переводом шестой части нового издания учебника Мигеля Гринберга, выпуск которого автор планирует завершить в мае 2018.Прежний перевод давно утратил свою актуальность.
Я, со своей стороны, постараюсь не отставать с переводом.
Это шестой выпуск серии Flask Mega-Tutorial, в котором я расскажу вам, как создать страницу профиля пользователя.
Для справки ниже приведен список статей этой серии.
Примечание 1: Если вы ищете старые версии данного курса, это здесь.
Примечание 2: Если вдруг Вы хотели бы выступить в поддержку моей(Мигеля) работы в этом блоге, или просто не имеете терпения дожидаться неделю статьи, я (Мигель Гринберг)предлагаю полную версию данного руководства упакованную электронную книгу или видео. Для получения более подробной информации посетите learn.miguelgrinberg.com.
Эта глава будет посвящена добавлению страниц профилей пользователей в приложение. Страница профиля пользователя-это страница, на которой представлена информация о пользователе, как правило, введенной самими пользователями. Я покажу вам, как создавать страницы профилей для всех пользователей динамически, а затем я добавлю небольшой редактор профилей, который пользователи могут использовать для ввода своей информации.
Страница профиля пользователя
Чтобы создать страницу профиля пользователя, давайте сначала напишем новую функцию просмотра, которая будет отображаться в /user/ URL.
Шаблон user.html показан ниже:
Страница профиля завершена, но ссылка на нее не существует нигде на веб-сайте. Чтобы пользователям было проще проверить собственный профиль, я добавлю ссылку на него в панели навигации вверху:
Попробуйте! Нажав ссылку «Профиль» вверху страницы, вы попадете на свою страницу пользователя. На этом этапе нет ссылок, которые будут отображаться на странице профиля других пользователей, но если вы хотите получить доступ к этим страницам, вы можете ввести URL-адрес вручную в адресной строке браузера. Например, если у вас есть пользователь с именем «john», зарегистрированный в вашем приложении, вы можете просмотреть соответствующий профиль пользователя, введя http://localhost:5000/user/ john в адресной строке.
Аватары
Я уверен, вы согласитесь с тем, что страницы профиля, которые я только что построил, довольно скучны. Чтобы сделать их более интересными, я собираюсь добавить пользовательские аватары, но вместо того, чтобы иметь дело с возможно большой коллекцией загруженных изображений на сервере, я собираюсь использовать сервис Gravatar для предоставления изображений для всех пользователей.
Сервис Gravatar очень прост в использовании. Чтобы запросить изображение для данного пользователя, URL-адрес с форматом https://www.gravatar.com/avatar/, где — хеш MD5 адреса электронной почты пользователя. Ниже вы можете увидеть, как получить URL-адрес Gravatar для пользователя с адресом электронной почты john@example.com :
Если вы хотите увидеть фактический пример, можно использовать мой собственный URL-адрес Gravatar — https://www.gravatar.com/avatar/729e26a2a2c7ff24a71958d4aa4e5f35 ( ‘https://www.gravatar.com/avatar/4f3699b436c12996ae54771200f21888’ ). Вот что Gravatar возвращает для этого URL:
По умолчанию возвращенный размер изображения составляет 80×80 пикселей, но другой размер можно запросить, добавив аргумент s в строку запроса URL. Например, чтобы получить мой собственный аватар в виде изображения размером 128×128, URL-адрес: https://www.gravatar.com/avatar/729e26a2a2c7ff24a71958d4aa4e5f35?s=128.
Обратите внимание, что некоторые расширения веб-браузера, такие как Ghostery, блокируют изображения Gravatar, поскольку они считают, что Automattic (владельцы Gravatar) могут определять, какие сайты вы посещаете, на основе запросов, которые они получают для вашего аватара. Если вы не видите аватары в своем браузере, скорее всего проблема в расширениях браузера.
Поскольку аватары связаны с пользователями, имеет смысл добавить логику, которая генерирует URL-адреса аватара для пользовательской модели.
Если вы заинтересованы в ознакомлении с другими вариантами, предлагаемыми службой Gravatar, посетите их сайт документации.
Следующий шаг — вставить изображения аватара в шаблон профиля пользователя:
У меня есть хороший большой аватар в верхней части страницы профиля пользователя, но на самом деле нет причин останавливаться на достигнутом. У меня есть несколько сообщений от пользователя внизу, в которых каждый может иметь маленький аватар. Конечно, для страницы профиля пользователя все сообщения будут иметь один и тот же аватар, но тогда я могу реализовать ту же функциональность на главной странице, а затем каждый пост будет украшен аватаром автора, и это будет выглядеть очень красиво.
Чтобы показать аватары для отдельных сообщений, мне просто нужно сделать еще одно небольшое изменение в шаблоне:
Вот так у Сьюзен, которой нет
(Прим. переводчика) А вот так с реальным аккаунтом Gravatar.
Использование sub-templates Jinja2
Я разработал страницу профиля пользователя, чтобы отображать сообщения, написанные пользователем, вместе со своими аватарами. Теперь я хочу, чтобы страница индекса также отображала сообщения с похожим расположением. Я мог бы просто закопипастить часть шаблона, которая касается рендеринга сообщения, но это не правильно, потому что позже, если я решу внести изменения в этот макет, мне придется помнить об обновлении обоих шаблонов.
Вместо этого я собираюсь сделать подшаблон, который просто отображает одно сообщение, а затем я буду ссылаться на него как с шаблонов user.html, так и с index.html. Для начала я могу создать подшаблон, с разметкой HTML для одного сообщения. Назову, пожалуй, это шаблонное нечто app/templates/_post.html. Префикс `_’ — это просто соглашение об именах, которое помогает распознавать, какие файлы шаблонов являются подшаблонами.
Чтобы вызвать этот подшаблон из шаблона user.html, я использую оператор include Jinja2:
Страница index приложения на самом деле еще не сформирована, поэтому я пока не собираюсь добавлять эту функциональность.
Более интересные профили
Одна из проблем, с которой сталкиваются новые страницы профиля пользователя, заключается в том, что они на самом деле многого не показывают. Пользователи любят рассказывать о чем то на этих страницах, поэтому я позволю им написать что-то о себе, чтобы показать здесь.
Я также буду следить за тем, когда последний раз каждый пользователь обращался к сайту, а также показывать его на странице своего профиля.
Первое, что мне нужно сделать для поддержки всей этой дополнительной информации, — это расширить таблицу пользователей в базе данных двумя новыми полями:
Каждый раз, когда база данных изменяется, необходимо создать миграцию базы данных. В главе 4 я показал вам, как настроить приложение для отслеживания изменений базы данных с помощью сценариев миграции. Теперь у меня есть два новых поля, которые я хочу добавить в базу данных, поэтому первым шагом будет создание сценария миграции:
Прим. переводчика: советую команды, да и тексты набирать самому. Получать ошибки/опечатки. Исправлять их. Все это процесс обучения, который сильно поможет в будущем.
Результат команды migrate выглядит хорошо, поскольку он показывает, что были обнаружены два новых поля в классе User. Теперь я могу применить это изменение к базе данных:
Надеюсь, вы понимаете, насколько полезно работать с инфраструктурой миграции. Любые пользователи, которые находились в базе данных, все еще существуют, структура миграции оперативно применяет изменения в сценарии миграции, не разрушая никаких данных.
На следующем шаге я собираюсь добавить эти два новых поля в шаблон профиля пользователя:
Обратите внимание, что я обертываю эти два поля в условных выражениях Jinja2, потому что хочу, чтобы они были видимыми, если они заполнены. На этом этапе эти два новых поля пусты для всех пользователей, поэтому вы не увидите эти поля, если запустите приложение прямо сейчас.
Запись последнего времени посещения для пользователя
Если вы просмотрите страницу своего профиля после внесения этого изменения, вы увидите строку «Last seen on» (Последнее посещение) с временем, близким к текущему.
И если вы перейдете от страницы профиля и затем вернетесь, вы увидите, что время постоянно обновляется.
Тот факт, что я храню эти временные метки в часовом поясе UTC, делает время, отображаемое на странице профиля, также в формате UTC. До кучи ко всему этому, формат времени — это не то, что вы ожидаете, поскольку видим отображение внутреннего представление объекта datetime Python. На данный момент я не буду беспокоиться об этих двух проблемах, так как я расскажу о теме обработки дат и времени в веб-приложении в следующей главе.
Редактор профиля
По хорошему пользователям нужно предоставить форму, в которой они могут ввести некоторую информацию о себе. Форма позволит пользователям изменить свой логин и другие данные, а также написать что-то о себе, чтобы быть сохраненным в новом поле about_me. Давайте напишем класс для такой формы:
Шаблон, который отображает эту форму, показан ниже:
И, наконец, вот функция, которая связывает все вместе:
Чтобы пользователи могли получить доступ к странице редактора профилей, следует добавить ссылку на страницу профиля:
Обратите внимание на хитрый условный код, который я использую, чтобы убедиться, что ссылка «Редактировать» появляется, когда вы просматриваете свой собственный профиль, но не когда кто то просматриваете ваш. Или вы профиль кого-то другого.
Варианты оформления блока «Наша команда» и профиля пользователя
В этой статье вы найдете подборку примеров кода с ресурса codepen.io, которые предлагают интересные решения с точки зрения дизайна и кода для таких блоков вашего сайта (одной из страниц), как «Наша команда» («Our Teams») и профиль пользователя или автора статьи.
Блок «Наши профессионалы»
Блок с эффектом появления прямоугольника с ссылками на соцсети
See the Pen meet our team by shamim khan (@shamim539) on CodePen.18892
Фото в профиль + социконки
Изначально на странице можно увидеть только фото, причем в профиль. При наведении картинка поднимается вверх или разворачивается в другую сторону, и мы видим имя и должность человека, а также ссылки на соцсети в виде квадратных или круглых иконок.
See the Pen UI Profile Cards by neil pearce (@2975) on CodePen.18892
Фото команды с интересным hover-эффектом
Разметка строится на основе Bootstrap 4.1.2 и иконках Font Awesome 4.7.0, которые мы видим при наведении на блок.
Блок «Наша команда» с затемнением
При наведении на фото все остальные затемняются. Пример сделан на Vue.js, информация о пользователях подтягивается из JavaScript.
See the Pen our team showcase by Mert Cukuren (@knyttneve) on CodePen.18892
Блок «Meet Our Team»
Вариант, ставший почти классическим, т.к. довольно часто встречается. При наведении на фото мы видим затемненный фон с соц. иконками и информацией.
Второй вариант оформления с несколько иным эффектом при наведении.
See the Pen Meet our team by Aashima (@Aashima) on CodePen.18892
Белые прямоугольники вместо черных.
И еще один подобный вариант, но с красным фоном при наведении и забавными фото.
Векторные фото вместо изображений и прикольный hover-эффект.
See the Pen Our Team by Baahubali (@anupkumar92) on CodePen.18892
И еще один подобный блок от того же автора Baahubali:
See the Pen Our Team by Baahubali (@anupkumar92) on CodePen.18892
Вариант для профиля моделей
Переворачивающиеся при наведении карточки
See the Pen CSS Flip Cards by Pop Razvan (@roppazvan) on CodePen.18892
Блок «Meet Magic Team» с анимацией смещения фотографий
Фото в этом блоке, скорее ассоциируются не с командой, а с друзьями, но эффект постоянного перемещения смотрится необычно на фоне остальных примеров.
Блок «Meet Team»
Интересный подход к расположению фото и информации о каждом из участников команды
Отзывчивые блоки «Наша команда» в стиле «Material Design»
Интересный анимационный эффект приближения и ухода в сторону
Автор P использовал также фото актеров в черно-белом варианте, что и в примере выше, но с другими эффектами.
Информация о команде (пользователях) с несколькими вариантами пролистывания
Каждый пользователь как отдельный слайд с 4-мя эффектами появления. Прокрутите пример вниз, чтобы увидеть все варианты.
Команда (профиль пользователей) в виде карточек
Блок «Наша команда» в виде чередующихся блоков
Адаптивный вариант для блока «Наша команда», сверстанный с помощью сетки (Grid) с чередованием блоков с информацией и изображений.
Профиль пользователя в светлой и темной теме
Одни и те же данные реализованы на темном и светлом фоне.
See the Pen Profile-card-ui by Wanderson Jackson (@Wandersonjack) on CodePen.18892
Профиль пользователя с градиентным фоном и скошенным углом
Очень приятное решение для профиля активного пользователя Dribble, Twitter и Instagram. Вверху есть иконки, которые оставляют место для добавления кода, позволяющего отправить сообщение или посмотреть более подробную информацию. Фото затенено градиентным фоном-оверлеем с помощью псевдоэлемента ::after.
Несколько вариантов профиля пользователя со скосом
Профиль с кнопкой для фильтрации данных. Хорош для мобильного приложения.
See the Pen Filter Menu by Arjun Amgain (@arjunamgain) on CodePen.18892
Профиль актера с видео-фоном и прокручиваемыми постерами от того же автора.
See the Pen User Profile by Travis Williamson (@travisw) on CodePen.18892
Здесь тоже использован градиент в качестве оверлея, но фото не сверху, а слева + добавлена анимация появления блока с профилем.
See the Pen User Profile (DailyUI #006) by Paraskevas Dinakis (@perry_nt) on CodePen.18892
Профиль пользователя соцсетей
В профиль подтягивается информация о количестве постов, лайков и подписчиков.
Профиль пользователя с пролистыванием информации в виде слайдера
See the Pen CSS Profile Card by Arafat Hussein (@rfthusn) on CodePen.18892
Профиль пользователя с информацией по клику
Вам необходимо кликнуть по фото пользователя, чтобы увидеть ряд ссылок с информацией о нем. Используются HTML, CSS, SVG и jQuery.
Разноплановая информация о пользователе в виде 3-х карточек
Выступающее фото на фоне
See the Pen About Us Pop-Out Effect by Mikael Ainalem (@ainalem) on CodePen.0