Профиль пользователя сайта на 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 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.
Как создать собственную страницу профиля пользователя в WP
Каждый раз когда я хочу написать какой-либо интересный мне пост, я всегда смотрю в гугле, что уже имеется по этой теме. Если интернет уже переполнен ею, то я стараюсь выбрать что-либо другое.
И мне показалось очень странным, что тема создания кастомной страницы профиля пользователей особо и не поднималась, если бегло пробежаться по результатам поиска, то можно увидеть уйму статей, которые должны помочь с произвольной формой регистрации или добавлением полей в профиль пользователя в админке, я об этом писал много лет назад здесь и здесь соответственно.
Даже на англоязычных сайтах я ничего не нашел (не знаю, может искал плохо), конечно некоторые решения имелись, но все они были плагинами.
Пример произвольной страницы профиля пользователя на одном из созданных мной сайтов.
Шаг 1. Шаблон страницы
Кое-что про шаблоны страниц я тоже уже писал, поэтому сейчас сразу перехожу к коду.
/* * Template name: Шаблон профиля пользователя */ global $user_ID; // если пользователь не авторизован, отправляем его на страницу входа if( !$user_ID ) { header('location:' . site_url() . '/wp-login.php'); exit; } else { $userdata = get_user_by( 'id', $user_ID ); } ?> // после сохранения профиля и смены пароля понадобятся уведомления // если уведомлений больше двух, то оптимальнее их будет вывести через switch if( isset($_GET['status']) ) : switch( $_GET['status'] ) : case 'ok':{ echo 'break; } case 'exist':{ echo ''; break; } case 'short':{ echo ''; break; } case 'mismatch':{ echo ''; break; } case 'wrong':{ echo ''; break; } case 'required':{ echo ''; break; } endswitch; endif; // profile-update.php - это файл, который находится в папке с темой и обрабатывает сохранение, его содержимое будет в следующем шаге ?>
Шаг 2. PHP-файл для обработки сохраняемых данных
Это и есть содержимое файла profile-update.php , который в прошлом шаге мы решили разместить прямо в папке с темой.
// $_SERVER['HTTP_REFERER'] - полный URL страницы, откуда пришел пользователь // $url[0] - без GET параметров // это нам понадобится для правильных редиректов $url = explode("?",$_SERVER['HTTP_REFERER']); // подключаем WordPress // тут указан правильный путь, если profile-update.php находится непосредственно в папке с темой require_once( dirname(__FILE__) . '/../../../wp-load.php' ); // если не авторизован, просто выходим из файла if( !is_user_logged_in() ) exit; // получаем объект пользователя с необходимыми данными $user_ID = get_current_user_id(); $user = get_user_by( 'id', $user_ID ); // сначала обработаем пароли, ведь если при сохранении пользователь ничего не указал ни в одном поле пароля, то пропускаем эту часть if( $_POST['pwd1'] || $_POST['pwd2'] || $_POST['pwd3'] ) { // при этом пользователь должен заполнить все поля if( $_POST['pwd1'] && $_POST['pwd2'] && $_POST['pwd3'] ) { // сначала проверяем соответствие нового пароля и его подтверждения if( $_POST['pwd2'] == $_POST['pwd3'] ){ // пароль из двух символов нам не нужен, минимум 8 if( strlen( $_POST['pwd2'] ) < 8 ) { // если слишком короткий - перенаправляем header('location:' . $url[0] . '?status=short'); exit; } // и самое главное - проверяем, правильно ли указан старый пароль if( wp_check_password( $_POST['pwd1'], $user->data->user_pass, $user->ID) ) { // если да, меняем на новый и заново авторизуем пользователя wp_set_password( $_POST['pwd2'], $user_ID ); $creds['user_login'] = $user->user_login; $creds['user_password'] = $_POST['pwd2']; $creds['remember'] = true; $user = wp_signon( $creds, false ); } else { // если нет, перенаправляем на ошибку header('location:' . $url[0] . '?status=wrong'); exit; } } else { // новый пароль и его подтверждение не соответствуют друг другу header('location:' . $url[0] . '?status=mismatch'); exit; } } else { // не все поля заполнены - перенеправляем header('location:' . $url[0] . '?status=required'); exit; } } // допустим, что Имя, Фамилия и Емайл - обязательные поля, Город - не обязательное if( $_POST['first_name'] && $_POST['last_name'] && is_email($_POST['email']) ) { // если пользователь указал новый емайл, а кто-то уже под ним зареган - отправляем на ошибку if( email_exists( $_POST['email'] ) && $_POST['email'] != $user->user_email ) { header('location:' . $url[0] . '?status=exist'); exit; } // обновляем данные пользователя wp_update_user( array( 'ID' => $user_ID, 'user_email' => $_POST['email'], 'first_name' => $_POST['first_name'], 'last_name' => $_POST['last_name'], 'display_name' => $_POST['first_name'] . ' ' . $_POST['last_name'] )); // ну и город не забываем обновить update_user_meta( $user_ID, 'city', $_POST['city']); } else { // не все поля заполнены - перенеправляем header('location:' . $url[0] . '?status=required'); exit; } // если выполнение кода дошло до сюда, то следовательно всё ок header('location:' . $url[0] . '?status=ok'); exit;
Если у вас есть вопросы по работе кода или предложения по его доработке, прошу вас проследовать в комментарии 🙂
Почти все функции, использованные в коде статьи
- site_url() — возвращает URL директории установки WordPress
- get_user_by() — позволяет получить информацию о пользователе, если известен или логин, или ID, или email
- get_stylesheet_directory_uri() — как узнать абсолютный URL папки с темой
- get_user_meta() — получает мета-параметры пользователя
- update_user_meta() – обновляет значения параметров пользователя
- wp_set_password() — позволяет изменить пароль пользователя
- wp_signon() — авторизует пользователя на сайте
- is_email() — функция для проверки правильности указанного email адреса
- email_exists() — существует ли на блоге пользователь, зарегистрированный под указанным email
Миша
Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.
Пишите, если нужна помощь с сайтом или разработка с нуля.
Варианты оформления блока «Наша команда» и профиля пользователя
В этой статье вы найдете подборку примеров кода с ресурса 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
See the Pen Flipping Card by Dmitry Korobov (@DmitryKorobov) on CodePen.0
Блок «Meet Magic Team» с анимацией смещения фотографий
Фото в этом блоке, скорее ассоциируются не с командой, а с друзьями, но эффект постоянного перемещения смотрится необычно на фоне остальных примеров.
Блок «Meet Team»
Интересный подход к расположению фото и информации о каждом из участников команды
Отзывчивые блоки «Наша команда» в стиле «Material Design»
Восхищает подход автора к созданию этого примера — он не только подобрал интересные фото известных американских актеров, но и добавил интересную информацию о них (на английском языке, разумеется). При клике на иконку-гамбургер мы можем прочитать о любом актере. Для разметки был использован Bootstrap 3 и Font Awesome 4.2. Есть также небольшой код на jQuery.
Интересный анимационный эффект приближения и ухода в сторону
Автор 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 Daily UI #6 — Profile by Genaro Colusso (@genarocolusso) on CodePen.18892
See the Pen User Profile (DailyUI #006) by Paraskevas Dinakis (@perry_nt) on CodePen.18892
Профиль пользователя соцсетей
В профиль подтягивается информация о количестве постов, лайков и подписчиков.
See the Pen 006 — Profile by Matthias Martin (@roydigerhund) on CodePen.18892
Профиль пользователя с пролистыванием информации в виде слайдера
See the Pen CSS Profile Card by Arafat Hussein (@rfthusn) on CodePen.18892
Профиль пользователя с информацией по клику
Вам необходимо кликнуть по фото пользователя, чтобы увидеть ряд ссылок с информацией о нем. Используются HTML, CSS, SVG и jQuery.
Разноплановая информация о пользователе в виде 3-х карточек
Выступающее фото на фоне
Интересный эффект для фото команды получился у автора Mikael Ainalem с использованием свойства clip-path — изображение человека выходит за пределы фона.
See the Pen About Us Pop-Out Effect by Mikael Ainalem (@ainalem) on CodePen.0
Все заценят: как сделать сайт-портфолио на HTML, CSS и JavaScript
Фулстек-разработчик и автор канала Modern Web опубликовал туториал по созданию сайта-портфолио с помощью HTML, CSS и JavaScript. Ссылка на исходный код проекта и видеоинструкция — в материале. Давайте приступим!
Це хороший спосіб розвитку вашої кар’єри в IT-індустрії. Після проходження курсу Mate гарантує вам офер мрії.
Панель навигации
Начнем с создания панели навигации (Navbar) для сайта. Готовый архив с файлами для проекта хранится здесь .
Для создания navbar нужно написать базовый шаблон и связать файлы style.css и app.js . Затем выполнить следующий HTML-код:
С HTML все, теперь добавим к нему немного CSS.
* < margin: 0; padding: 0; box-sizing: border-box; >body < width: 100%; max-width: 1400px; display: block; margin: auto; min-height: 100vh; background: #191919; font-family: sans-serif; >.navbar < width: 100%; position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; z-index: 9; background: #1a1a1a; >.link-group < list-style: none; display: flex; >.link a < color: #fff; opacity: 0.5; text-decoration: none; text-transform: capitalize; padding: 10px 30px; margin: 0 20px; line-height: 80px; transition: .5s; font-size: 20px; >.link a:hover, .link.active a
После выполнения этих действий должно получиться следующее:
Навигационная панель готова.
Более обстоятельно вам поможет разобраться с версткой курс от наших партнеров, школы Mate Academy и Hillel. Фронтенд разработчик востребованная и высокооплачиваемая работа, на которую стоит обратить внимание.
Главная страница
Для создания домашней страницы выполните следующий HTML-код после элемента navbar.
Курс Front-end Basic.
Оволодій навичками розробки веб-інтерфейсів та стань справжнім Front-end розробником! Заробляй від 800$ на початку карʼєри.
hello, i am
kunaal 
.home-section < width: 100%; height: 100vh; padding: 0 150px; display: flex; align-items: center; position: relative; top: 0; opacity: 0; transition: 1s; >.hero-heading < color: #fff; font-size: 120px; text-transform: capitalize; font-weight: 300; >.home-img
- Под .home-section есть свойства position: relative и top:0 . Они важны при навигации.
- Всем разделам (home, project, about, contact) задаем фиксированное значение ( position: fixed ). Благодаря этому они будут находиться друг над другом.
- Для обозначения активного раздела используем класс active со следующими свойствами position: relative и opacity: 1 .
Как только закончите с домашней страницей, убедитесь, что изменили ее положение с relative на fixed .
.home-section< /* previous styles */ position: fixed; >
Чтобы упростить навигацию, пропишите все разделы. Обозначаем активные разделы.
.home-section.active, .project-section.active, .about-section.active, .contact-section.active
Вот что должно получиться.
Страница с проектами
Создаем страницу с проектами. Для этого нужно выполнить следующий HTML-код.
some of my projects 
project 01
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Impedit vitae delectus cumque repudiandae aliquam optio accusamus natus nobis! Nam, sunt?
// +3 more cards
Курс Python.
Цю мову програмування використовують від базових концепцій до складних застосувань у сферах штучного інтелекту. Після проходження курсу гарантовано отримай роботу в ІТ.
/* project-section */ .project-section < width: 100%; min-height: 100vh; padding: 150px 100px 100px; position: fixed; top: 0; transition: 1s; opacity: 0; >.project-heading < font-size: 100px; background: #252525; text-transform: capitalize; text-align: center; margin-bottom: 50px; color: #1a1a1a; background-clip: text; -webkit-background-clip: text; -webkit-text-stroke: 8px transparent; >.project-container < display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 100px; >.project-card < height: 400px; position: relative; >.project-img < width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover; transition: .5s; >.project-content < position: relative; padding: 40px; color: #fff; transition: .5s; opacity: 0; >.project-title < font-size: 50px; text-transform: capitalize; text-align: center; font-weight: 300; >.project-info < margin: 40px; font-size: 20px; line-height: 30px; text-align: center; >.project-btn-grp < display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px; >.project-btn < height: 40px; text-transform: capitalize; font-size: 18px; border: none; background: #000; color: #fff; cursor: pointer; >.project-btn.live < background: none; border: 2px solid #fff; >.project-card:hover .project-img < filter: blur(20px); >.project-card:hover .project-content
В приведенном выше коде в project-section уже добавлена позиция fixed , а opacity установлено в значение 0 . Но для того, чтобы увидеть результат, убедитесь, что добавили класс active в секцию проекта следующим образом.
Вот что должно получиться.
Навигация
Прежде чем двигаться дальше, нужно создать систему навигации сайта. Для этого пропишите в файле app.jss следующий код.
const links = document.querySelectorAll('.link'); const sections = document.querySelectorAll('section'); let activeLink = 0; links.forEach((link, i) => < link.addEventListener('click', () => < if(activeLink != i)< links[activeLink].classList.remove('active'); link.classList.add('active'); sections[activeLink].classList.remove('active'); setTimeout(() =>< activeLink = i; sections[i].classList.add('active'); >, 1000); > >) >)
В приведенном выше коде сначала выделяются все ссылки и разделы. После этого определяется переменная activeLink , которая будет отслеживать текущий активный раздел или ссылку. После этого используется метод forEach — для перебора всех ссылок. Внутри него можно получить доступ к отдельной ссылке и ее индексу.
Сначала добавляется событие щелчка на ссылку с помощью addEventListener . Затем используется простое условие, чтобы убедиться, что пользователь не щелкает по активной ссылке. После этого удаляется активный класс из текущей активной ссылки с помощью classList.remove и добавляется класс active в нажатую ссылку с помощью classList.add . То же самое делается для удаления класса active из активного раздела.
Чтобы добавить задержку в 1 секунду для выполнения приведенных далее кодов, используется setTimeout . Внутри таймаута происходит простое добавление активного класса.
С навигацией все.
Страница «О себе»
В этом разделе About будет раздел с навыками, а также шкала опыта.
Чтобы создать страницу «О себе», пропишите этот код после project section .
Lorem ipsum.
Курс Англійської.
Онлайн-навчання англійської за методикою Кембриджу — вибір понад мільярда людей.
/* about-section */ .about-section < width: 100%; min-height: 100vh; padding: 150px 100px 0; position: fixed; top: 0; opacity: 0; transition: 1s; >.about < width: 100%; display: grid; grid-template-columns: 30% 65%; grid-gap: 40px; >.about-img-container < position: relative; >.about-info < color: #fff; opacity: 0.6; font-size: 20px; line-height: 40px; >.about-img < width: 100%; height: 100%; object-fit: cover; border-radius: 20px; >.download-cv-btn < position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); padding: 10px 20px; color: #fff; border: none; font-size: 16px; text-transform: capitalize; cursor: pointer; transition: .5s; background: rgba(0, 0, 0, 0.5); >.download-cv-btn:hover
Примечание: убедитесь, что добавили класс active в раздел «О себе» и удалили его из всех остальных разделов.
Вот что должно получиться.
Теперь создадим раздел навыков. В нем также будут индикаторы навыков. Ранее мы писали о том, почему не нужно рисовать шкалу навыков в резюме , но все же рассмотрим, как ее сделать.
skills 
98% HTML
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur, delectus!
// +4 more cards
Пропишите вышеописанный код над элементом about-section и стилизуйте его.
/* skills */ .skill-section < position: relative; margin: 100px 0; >.heading < text-align: center; font-size: 60px; color: #fff; text-transform: capitalize; font-weight: 300; margin-bottom: 100px; >.skills-container < width: 95%; margin: auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 100px; color: #fff; >.skill-card < position: relative; >.skill-img < display: block; margin: auto; height: 200px; >.skill-name < font-size: 30px; font-weight: 300; text-align: center; text-transform: capitalize; margin: 30px 0 20px; >.skill-info < text-align: center; opacity: 0.5; font-size: 18px; line-height: 30px; >.skill-level < position: absolute; top: 80px; right: 0; width: 150px; height: 150px; display: flex; justify-content: center; align-items: center; font-size: 22px; border-radius: 50%; border: 10px solid; >.skill-card:nth-child(1) .skill-level < background: #ff4f4f28; border-color: #ff4f4f; color: #ff4f4f; >.skill-card:nth-child(2) .skill-level < background: #4fa0ff28; border-color: #4fa0ff; color: #4fa0ff; >.skill-card:nth-child(3) .skill-level < background: #ffed4f28; border-color: #ffed4f; color: #ffed4f; >.skill-card:nth-child(4) .skill-level < background: #52ff4f28; border-color: #52ff4f; color: #52ff4f; >.skill-card:nth-child(5) .skill-level
Вот что получится.
Создаем временную шкалу опыта.
education and experience 2000-2002
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto sequi recusandae laborum ipsam dignissimos nostrum vitae provident officia, consectetur ab accusantium corrupti exercitationem temporibus repellat non magni cupiditate ea reprehenderit.
//+4 more cards
Не забудьте добавить коды в раздел About.
/* timeline */ .timeline < display: block; width: 80%; margin: 150px auto; >.timeline .heading < margin-bottom: 150px; >.card < width: 45%; padding: 30px; border-radius: 10px; color: #fff; display: block; margin: -80px 0; position: relative; background: #f00; >.card:nth-child(even) < margin-left: auto; >.card:nth-child(even):before < content: ''; position: absolute; left: -15%; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border: 5px solid #191919; border-radius: 50%; >.card:nth-child(even):after < content: ''; position: absolute; left: -8.5%; top: 50%; transform: translateY(-50%); width: 7%; height: 2px; background: #fff; z-index: -1; >.card:nth-child(odd):before < content: ''; position: absolute; right: -13%; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border: 5px solid #191919; border-radius: 50%; >.card:nth-child(odd):after < content: ''; position: absolute; right: -8.5%; top: 50%; transform: translateY(-50%); width: 7%; height: 2px; background: #fff; z-index: -1; >.card:nth-child(2), .card:nth-child(2):before < background: #ff4f4f; >.card:nth-child(3), .card:nth-child(3):before < background: #ffb84f; >.card:nth-child(4), .card:nth-child(4):before < background: #3dca5c; >.card:nth-child(5), .card:nth-child(5):before < background: #565252; >.card:nth-child(6), .card:nth-child(6):before < background: #4fa0ff; >.card:nth-child(even) .card-body:before < content: ''; position: absolute; left: -12%; top: 0; width: 0px; height: 100%; border: 1px dashed #fff; z-index: -1; >.card-title
Вот что должно получиться.
Страница с контактной информацией
Чтобы создать раздел «Контакты», пропишите следующий код.
В приведенном выше коде iframe — это ссылка для встраивания карты Google.
.contact-section < position: absolute; top: 0; opacity: 0; transition: 1s; padding: 100px 150px; height: 100vh; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 50px; >.contact-form input, .contact-form textarea < width: 100%; height: 40px; background: rgba(255, 255, 255, 0.2); border: 1px solid #fff; margin-bottom: 30px; border-radius: 5px; text-transform: capitalize; color: #fff; padding: 5px 10px; >::placeholder < color: #fff; >#msg < height: 280px; resize: none; font-family: sans-serif; >.form-submit-btn < background: #ff4f4f; color: #fff; text-transform: capitalize; padding: 15px 40px; display: block; margin: auto; border: none; border-radius: 10px; cursor: pointer; >.map < width: 100%; height: 100%; padding: 10px; border: 2px solid #fff; background: rgba(255, 255, 255, 0.2); border-radius: 10px; >.map iframe
Вот что должно получиться.
Вот и все. Сайт-портфолио готов. Видеоинструкцию по созданию проекта найдете ниже. Также автор разместил исходный код , но он доступен только его подписчикам на Patreon.
Це хороший спосіб розвитку вашої кар’єри в IT-індустрії. Після проходження курсу Mate гарантує вам офер мрії.