Как создать адаптивную карточку профиля с помощью HTML и CSS?

Опубликовано: 27 Августа, 2022

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

Подход:

Во-первых, мы создаем файл HTML, в котором мы делаем следующие вещи:
- Создайте контейнер, который содержит всю информацию.
- Добавьте изображение профиля пользователя.
- Добавьте ссылки на разные дескрипторы социальных сетей.
- Добавьте кнопку для обмена сообщениями.
Затем мы создаем файл CSS, в котором применяем различные типы свойств стиля для наших тегов HTML.
Наконец, мы связываем наш файл CSS с файлом HTML, используя тег ссылки в разделе заголовка HTML.

HTML-код:

Сначала мы создаем файл HTML (index.html).
После создания HTML-файла мы дадим заголовок нашей веб-странице с помощью тега <title>. Так должно быть
размещается между тегом <head>.
Затем мы связываем файл css, обеспечивающий все эффекты анимации, с нашим html. Это также помещается между тегом <head>.
Теперь мы добавляем ссылку из Google Fonts, чтобы использовать другой тип семейства шрифтов в нашем проекте.
Переходим к разделу body нашего HTML-кода.
1. Создайте div, в котором мы можем хранить все изображения, ссылки, кнопки, заголовки и абзацы.
2. Затем создаем div, в который добавляем изображение пользователя.
3. Создается еще один div, в который мы должны добавить следующие теги:
  1. Тег заголовка добавляется для хранения имени пользователя.
  2. Тег абзаца добавляется для хранения имени пользователя.
  3. Затем мы добавили несколько ссылок на социальные сети, чтобы можно было связаться с указанным пользователем.
  4. Наконец-то мы создали ссылку для подключения друг друга с помощью службы обмена сообщениями.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect"
        href="https://fonts.gstatic.com">
    <link href=
"https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap"
        rel="stylesheet">
</head>
 
<body>
    <div class="container">
        <div class="user-image">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210223165952/gfglogo.png"
            alt="this image contains user-image">
        </div>
 
        <div class="content">
            <h3 class="name">Geeks-For-Geeks</h3>
            <p class="username">@geeks_for_geeks</p>
 
 
            <div class="links">
                <a class="facebook" href=
"https://www.facebook.com/geeksforgeeks.org/"
                    target="_blank" title="GFG_facebook">
                    <i class="fab fa-facebook"></i>
                </a>
 
                <a class="git" href=
"https://github.com/topics/geeksforgeeks"
                    title="GFG_github" target="_blank">
                    <i class="fab fa-github-square"></i>
                </a>
 
                <a class="linkedin" href=
"https://www.geeksforgeeks.org/tag/linkedin/"
                    title="GFG_linkedin" target="_blank">
                    <i class="fab fa-linkedin"></i>
                </a>
                 
                <a class="insta" href=
"https://www.instagram.com/geeks_for_geeks/?hl=en"
                    target="_blank" title="GFG_instagram">
                    <i class="fab fa-instagram-square"></i>
                </a>
            </div>
 
            <p class="details">
                A Computer Science portal for geeks
            </p>
 
 
            <a class="effect effect-4" href="#">
                Message
            </a>
        </div>
    </div>
     
    <!-- This is link of adding small images
         which are used in the link section  -->
    <script src="https://kit.fontawesome.com/704ff50790.js"
        crossorigin="anonymous">
    </script>
</body>
 
</html>

Код CSS: CSS используется для придания нашей HTML-странице различных типов анимации и эффектов, чтобы она выглядела интерактивной для всех пользователей.

В CSS мы должны напомнить следующие моменты:

Восстановите все эффекты браузера.
Используйте классы и идентификаторы, чтобы придать эффекты элементам HTML.
Использование селектора nth-child в CSS для вызова разных ссылок.

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
/* Assigning all the same properties to the body */
body{
    height: 100vh;
    display: flex;
    justify-content: center;
    background-color: rgb(0, 0, 0);
    align-items: center;
}
 
.container{
    width: 20em;
    background-color: rgb(255, 255, 255);
    overflow: hidden;
    border-radius: 1em;
    text-align: center;
    font-family: "Open Sans Condensed", sans-serif;
    font-size: 1em;
}
 
.user-image{
    padding: 3em 0;
    background-image: linear-gradient(70deg,#61A1DD,#0083FD);
}
 
.user-image img{
    width: 7em;
    height: 7em;
    border-radius: 50%;
    box-shadow:  0 0.6em 1.8em ;
    object-fit: cover;
}
 
.content{
    color: #565656;
    padding: 2.2em;
}
 
.name{
    font-size: 1.5em;
    text-transform: uppercase;
}
 
.username{
    font-size: 1em;
    color: #9e9e9e;
}
 
.links{
    display: flex;
    justify-content: center;
    margin: 1.5em 0;
}
 
a{
    text-decoration: none;
    color: #565656;
    transition: all 0.3s;
    font-size: 2em;
    margin-right: 1.2em;
}
 
a:last-child{
    margin: 0;
}
 
.insta:hover{
    color:rgb(255, 70, 101);
    transform: scale(2,2);
}
 
.git:hover{
    color:rgb(0, 0, 0);
    transform: scale(2,2);
}
 
.linkedin:hover{
    color:rgba(4, 0, 253, 0.842);
    transform: scale(2,2);
}
 
.facebook:hover{
    color:rgb(4, 0, 255);
    transform: scale(2,2);
}
 
.details{
    margin-bottom: 1.8em;
}
 
 
/* CSS for messagin link */
 
.effect {
    text-align: center;
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: rgb(48, 41, 41);
    text-transform: capitalize;
    width: 100%;
    background-image: linear-gradient(60deg,#0083FD,#61A1DD);
    font-size: 1.2em;
    padding: 1em 3em;
    border-radius: 5em;
    overflow: hidden;
}
   
.effect.effect-4:before {
    content: "f2b6";
    font-family: FontAwesome;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 1.8em;
    transform: scale(0, 1);
}
.effect.effect-4:hover {
    text-indent: -9999px;
}
     
.effect.effect-4:hover:before {
transform: scale(1, 1);
text-indent: 0;
}

Выход:

Technical Scripter HTML CSS

Как создать адаптивную карточку профиля с помощью HTML и CSS?

HTML

CSS

РЕКОМЕНДУЕМЫЕ СТАТЬИ