В этой статье вы найдете подборку примеров кода с ресурса codepen.io, которые предлагают интересные решения с точки зрения дизайна и кода для таких блоков вашего сайта (одной из страниц), как "Наша команда" ("Our Teams") и профиль пользователя или автора статьи.
Блок "Наша команда" с угловыми рамками с градиентом
Автор Kristen.
See the Pen Team section #grid #scss by Kristen (@kristen17) on CodePen.
И еще один вариант от этого же автора со смещением информационного блока и иконки соцсети.
See the Pen Another team section #grid #scss by Kristen (@kristen17) on CodePen.
Фото в профиль + социконки
Изначально на странице можно увидеть только фото, причем в профиль. При наведении картинка поднимается вверх или разворачивается в другую сторону, и мы видим имя и должность человека, а также ссылки на соцсети в виде квадратных или круглых иконок.
Автор neil pearce
See the Pen UI Profile Cards by neil pearce (@2975) on CodePen.
Фото команды с интересным hover-эффектом
Разметка строится на основе Bootstrap 4.1.2 и иконках Font Awesome 4.7.0, которые мы видим при наведении на блок.
Автор FrankieDoodie
See the Pen Profile Card UI Design Cool Hover Effect by FrankieDoodie (@FrankieDoodie) on CodePen.
Вывод фото команды с отображением имени при наведении от Sparshcodes. Требует достаточного количества места по высоте.
See the Pen Team Profile Hover Effect by Sparshcodes (@sparshgupta007) on CodePen.
Блок "Наши профессионалы"
Блок с эффектом появления прямоугольника с ссылками на соцсети
Автор shamim khan
See the Pen meet our team by shamim khan (@shamim539) on CodePen.
Блок "Наша команда" с затемнением
При наведении на фото все остальные затемняются. Пример сделан на Vue.js, информация о пользователях подтягивается из JavaScript.
Автор Mert Cukuren
See the Pen our team showcase by Elen (@ambassador) on CodePen.
Блок "Meet Our Team"
Вариант, ставший почти классическим, т.к. довольно часто встречается. При наведении на фото мы видим затемненный фон с соц. иконками и информацией.
Автор Aly
See the Pen Meet Our Team by Elen (@ambassador) on CodePen.
Второй вариант оформления с несколько иным эффектом при наведении.
Автор Aashima
See the Pen Meet our team by Aashima (@Aashima) on CodePen.
Белые прямоугольники вместо черных.
Автор Nodws
See the Pen Team page hover profiles by Elen (@ambassador) on CodePen.
И еще один подобный вариант, но с красным фоном при наведении и забавными фото.
Автор Mauritius D'Silva
See the Pen Team member profile display by Elen (@ambassador) on CodePen.
Векторные фото вместо изображений и прикольный hover-эффект.
Автор Baahubali
See the Pen Our Team by Baahubali (@anupkumar92) on CodePen.
И еще один подобный блок от того же автора Baahubali:
See the Pen Our Team by Baahubali (@anupkumar92) on CodePen.
Команда с векторными изображениями на основе массива объекта и кода на JavaScript.
See the Pen Reviews in dark mood by Abdelrahman (@Abdelrahman-Abdullah) on CodePen.
Векторные иконки в качестве фото для команды от Daya Shankar.
See the Pen Meet Our Team Section - Responsive by Daya Shankar (@daya_s) on CodePen.
Вариант для профиля моделей
Автор Aashima
See the Pen Pure Css Team Showcase by Aashima (@Aashima) on CodePen.
Переворачивающиеся при наведении карточки
Автор Pop Razvan
See the Pen CSS Flip Cards by Pop Razvan (@roppazvan) on CodePen.
Автор Anton Rikhnovets
See the Pen This is our awesome team by Anton Rikhnovets (@rikhnovets) on CodePen.
Автор Mark Murray
See the Pen Flippable CSS3 Business Card by Mark Murray (@markmurray) on CodePen.
Автор Dmitry Korobov
See the Pen Flipping Card by Dmitry Korobov (@DmitryKorobov) on CodePen.
Блок "Meet Magic Team" с анимацией смещения фотографий
Фото в этом блоке, скорее ассоциируются не с командой, а с друзьями, но эффект постоянного перемещения смотрится необычно на фоне остальных примеров.
Автор Paulina Hetman
See the Pen Meet our team by Elen (@ambassador) on CodePen.
Блок "Meet Team"
Интересный подход к расположению фото и информации о каждом из участников команды
Автор shamim khan
See the Pen Meet our team by Elen (@ambassador) on CodePen.
Отзывчивые блоки "Наша команда" в стиле "Material Design"
Восхищает подход автора к созданию этого примера - он не только подобрал интересные фото известных американских актеров, но и добавил интересную информацию о них (на английском языке, разумеется). При клике на иконку-гамбургер мы можем прочитать о любом актере. Для разметки был использован Bootstrap 3 и Font Awesome 4.2. Есть также небольшой код на jQuery.
Автор David Foliti
See the Pen Material Design - Responsive card by David Foliti (@marlenesco) on CodePen.
Слайдер с фото и подписями
Автор NIDAL
See the Pen Card Carousel by NIDAL (@Nidal95) on CodePen.
Интересный анимационный эффект приближения и ухода в сторону
Автор P использовал также фото актеров в черно-белом варианте, что и в примере выше, но с другими эффектами.
See the Pen Profile Card Hover Effect by P (@petegarvin1) on CodePen.
Информация о команде (пользователях) с несколькими вариантами пролистывания
Каждый пользователь как отдельный слайд с 4-мя эффектами появления. Прокрутите пример вниз, чтобы увидеть все варианты.
Автор Arafat Hussein
See the Pen Pure CSS Sliders by Elen (@ambassador) on CodePen.
Команда (профиль пользователей) в виде карточек
Вы пролистываете карточки, которые выглядывают друг из под друга, чтобы посмотреть информацию о каждом из пользователей. Управление - белыми стрелками справа и слева от карточек.
Автор Tobias
See the Pen Daily UI #006 User Profile by Tobias (@Tbgse) on CodePen.
Карточки, которые можно перелистать на основе Swiper slider. Автор Avin Dev.
See the Pen Team Card Slider/Swiper by Avin Dev (@avindev) on CodePen.
Блок "Наша команда" в виде чередующихся блоков
Адаптивный вариант для блока "Наша команда", сверстанный с помощью сетки (Grid) с чередованием блоков с информацией и изображений.
See the Pen Grid Teams Section by Elen (@ambassador) on CodePen.
Профиль пользователя в светлой и темной теме
Одни и те же данные реализованы на темном и светлом фоне.
Автор Wanderson Jackson
See the Pen Profile-card-ui by Wanderson Jackson (@Wandersonjack) on CodePen.
Профиль пользователя с градиентным фоном и скошенным углом
Очень приятное решение для профиля активного пользователя Dribble, Twitter и Instagram. Вверху есть иконки, которые оставляют место для добавления кода, позволяющего отправить сообщение или посмотреть более подробную информацию. Фото затенено градиентным фоном-оверлеем с помощью псевдоэлемента ::after.
Автор Arafat Hussein
See the Pen Profile Card with Slanted Edge by Codeshape (@codeshape) on CodePen.
Несколько вариантов профиля пользователя со скосом
Профиль с кнопкой для фильтрации данных. Хорош для мобильного приложения.
Автор Arjun Amgain
See the Pen Filter Menu by Arjun Amgain (@arjunamgain) on CodePen.
Профиль актера с видео-фоном и прокручиваемыми постерами от того же автора.
Автор Arjun Amgain
See the Pen User Profile by Travis Williamson (@travisw) on CodePen.
Здесь тоже использован градиент в качестве оверлея, но фото не сверху, а слева + добавлена анимация появления блока с профилем.
Автор Gabrielle Wee
See the Pen #dailyui 006: User Profile by Gabrielle Wee (@gabriellewee) on CodePen.
Автор Genaro Colusso
See the Pen Daily UI #6 - Profile by Genaro Colusso (@genarocolusso) on CodePen.
Автор Paraskevas Dinakis
See the Pen User Profile (DailyUI #006) by Paraskevas Dinakis (@perry_nt) on CodePen.
Профиль пользователя соцсетей
В профиль подтягивается информация о количестве постов, лайков и подписчиков.
Автор Matthias Martin
See the Pen 006 - Profile by Matthias Martin (@roydigerhund) on CodePen.
Профиль пользователя с пролистыванием информации в виде слайдера
Автор Stas Melnikov
See the Pen CSS Profile Card by Elen (@ambassador) on CodePen.
Профиль пользователя с информацией по клику
Вам необходимо кликнуть по фото пользователя, чтобы увидеть ряд ссылок с информацией о нем. Используются HTML, CSS, SVG и jQuery.
Автор Gerry
See the Pen User Profile by HTML-plus (@ambassador) on CodePen.
Разноплановая информация о пользователе в виде 3-х карточек
Автор Rosa
See the Pen User Profile Cards by Rosa (@RRoberts) on CodePen.
Выступающее фото на фоне
Интересный эффект для фото команды получился у автора Mikael Ainalem с использованием свойства clip-path - изображение человека выходит за пределы фона.
See the Pen About Us Pop-Out Effect by Mikael Ainalem (@ainalem) on CodePen.
Круговая диаграмма
Кликните на любое фото, чтобы отобразить его в центре.
Автор Chris Bolson
See the Pen Tailwind - Team Profiles rotation with Theme Toggle by Chris Bolson (@cbolson) on CodePen.
