Как создать страницу Meet the Team с помощью HTML и CSS?

Опубликовано: 6 Января, 2022

Создание структуры: в этом разделе мы создадим базовую структуру для страницы встречи команды. Мы прикрепим иконку и поместим текст, который будет размещен на карточке участников, добавим кнопку.

  • Ссылки CDN для иконок из Font Awesome:

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

  • HTML-код: HTML-код используется для создания структуры страницы встречи. Поскольку он не содержит CSS, это просто базовая структура. Мы будем использовать некоторые свойства CSS, чтобы сделать его привлекательным.
    <!DOCTYPE html>
    < html >
    < head >
    < meta name = "viewport"
    content = "width=device-width, initial-scale=1" >
    <!-- linking font awesome for icons -->
    < link rel = "stylesheet" href =
    " https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css " >
    </ head >
    < body >
    < center >
    < h1 >Meet The Team Page</ h1 >
    < hr >
    <!-- First member of the team -->
    < div class = "row" >
    < div class = "column" id = "gfg" >
    < div class = "card" >
    < i class = "fa fa-user-circle"
    style = "font-size:68px;" ></ i >
    < div class = "container" >
    < h2 >Mike Tyson</ h2 >
    < p >CEO & Founder</ p >
    < p >
    Feel your customer make
    them happy
    </ p >
    < button class = "button" >View</ button >
    </ div >
    </ div >
    </ div >
    </ div >
    <!-- Other members of the team -->
    < div class = "row" >
    < div class = "column" >
    < div class = "card" >
    < i class = "fa fa-user-circle"
    style = "font-size:68px;" ></ i >
    < div class = "container" >
    < h2 >Ching Lee</ h2 >
    < p >Developer Head</ p >
    < p >
    A website should be user-friendly
    and attractive
    </ p >
    < button class = "button" >View</ button >
    </ div >
    </ div >
    </ div >
    < div class = "column" >
    < div class = "card" >
    < i class = "fa fa-user-circle"
    style = "font-size:68px;" ></ i >
    < div class = "container" >
    < h2 >Hashim Ahmed</ h2 >
    < p >Content Head</ p >
    < p >
    Content should be popular
    and trending
    </ p >
    < button class = "button" >View</ button >
    </ div >
    </ div >
    </ div >
    < div class = "column" >
    < div class = "card" >
    < i class = "fa fa-user-circle"
    style = "font-size:68px;" ></ i >
    < div class = "container" >
    < h2 >Rihana Gomez</ h2 >
    < p >Marketing Head</ p >
    < p >
    Sell the product like
    Greatest Mary Kay Ash
    </ p >
    < button class = "button" >View</ button >
    </ div >
    </ div >
    </ div >
    </ div >
    </ center >
    </ body >
    </ html >

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

  • Код CSS: код CSS используется для создания привлекательной командной страницы. Это свойство CSS позволяет сделать карточки стильными и адаптивными.
    < style >
    /* Whole html box designing */
    html {
    box-sizing: border-box;
    }
    /* Body width fixing */
    body {
    max-width: 100%;
    }
    /* Box sizing depending on parent */
    *,
    *:before,
    *:after {
    box-sizing: inherit;
    }
    /* Styling column */
    .column {
    float: left;
    width: 33%;
    margin-bottom: 16px;
    padding: 2px 10px;
    }
    /* Column width change depends
    on screen size */
    @media screen and (max-width: 670px) {
    .column {
    width: 100%;
    text-align: none;
    }
    }
    /* Card designing */
    .card {
    background-color: gray;
    border: 1px solid black;
    }
    .container {
    padding: 0 16px;
    }
    /* Icon styling */
    .fa {
    margin: 10px;
    font-size:68px;
    }
    .fa:hover {
    transform: rotateY(180deg);
    transition: transform 0.8s;
    }
    .container::after,
    .row::after {
    content: "";
    clear: both;
    display: table;
    }
    /* Button designing */
    .button {
    border: none;
    padding: 8px;
    color: white;
    background-color: #449D44;
    text-align: center;
    cursor: pointer;
    width: 100%;
    margin-bottom: 10px;
    }
    /* Hover efect on button */
    .button:hover {
    background-color: green;
    }
    /* Margin first member of team */
    #gfg {
    float: none;
    margin: auto;
    }
    </ style >

Комбинирование кода HTML и CSS: в этом примере объединены коды HTML и CSS для создания страницы встречи группы.

<!DOCTYPE html>
< html >
< head >
< meta name = "viewport"
content = "width=device-width, initial-scale=1" >
<!-- linking font awesome for icons -->
< link rel = "stylesheet" href =
" https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css " >
< style >
/* Whole html box designing */
html {
box-sizing: border-box;
}
/* Body width fixing */
body {
max-width: 100%
}
/* Box sizing depending on parent */
*,
*:before,
*:after {
box-sizing: inherit;
}
/* Styling column */
.column {
float: left;
width: 33%;
margin-bottom: 16px;
padding: 5px 10px;
}
/* Column width change depends on screen size */
@media screen and (max-width: 670px) {
.column {
width: 100%;
text-align: none;
}
}
/* Card designing */
.card {
background-color: gray;
border: 1px solid black;
}
.container {
padding: 0 16px;
}
/* Icon styling */
.fa {
margin: 10px;
font-size:68px;
}
.fa:hover {
transform: rotateY(180deg);
transition: transform 0.8s;
}
.container::after,
.row::after {
content: "";
clear: both;
display: table;
}
/* Button designing */
.button {
border: none;
padding: 8px;
color: white;
background-color: #449D44;
text-align: center;
cursor: pointer;
width: 100%;
margin-bottom: 10px;
}
/* Hover efect on button */
.button:hover {
background-color: green;
}
/* Margining first member of team */
#gfg {
float:none;
margin:auto;
}
</ style >
</ head >
< body >
< center >
< h1 >Meet The Team Page</ h1 >
< hr >
<!-- First member of the team -->
< div class = "row" >
< div class = "column" id = "gfg" >
< div class = "card" >
< i class = "fa fa-user-circle"
style = "font-size:68px;" ></ i >
< div class = "container" >
< h2 >Mike Tyson</ h2 >
< p >CEO & Founder</ p >
< p >
Feel your customer make
them happy
</ p >
< button class = "button" >View</ button >
</ div >
</ div >
</ div >
</ div >
<!-- Other members of the team -->
< div class = "row" >
< div class = "column" >
< div class = "card" >
< i class = "fa fa-user-circle"
style = "font-size:68px;" ></ i >
< div class = "container" >
< h2 >Ching Lee</ h2 >
< p >Developer Head</ p >
< p >
A website should be user-friendly
and attractive
</ p >
< button class = "button" >View</ button >
</ div >
</ div >
</ div >
< div class = "column" >
< div class = "card" >
< i class = "fa fa-user-circle"
style = "font-size:68px;" ></ i >
< div class = "container" >
< h2 >Hashim Ahmed</ h2 >
< p >Content Head</ p >
< p >
Content should be popular
and trending
</ p >
< button class = "button" >View</ button >
</ div >
</ div >
</ div >
< div class = "column" >
< div class = "card" >
< i class = "fa fa-user-circle"
style = "font-size:68px;" ></ i >
< div class = "container" >
< h2 >Rihana Gomez</ h2 >
< p >Marketing Head</ p >
< p >
Sell the product like
Greatest Mary Kay Ash
</ p >
< button class = "button" >View</ button >
</ div >
</ div >
</ div >
</ div >
</ center >
</ body >
</ html >

Выход:

Вопросы о Web технологиях HTML CSS-Misc HTML-Misc CSS

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

Trovo: Путь к звездам стриминга в новом десятилетии
31 Октября, 2023
Топ сервисов для создания чат-бота в Телеграме
15 Июня, 2023
Что такое прокси IPv4 и что он умеет
14 Июня, 2023
Создайте адаптивную скользящую форму входа и регистрации с использованием HTML CSS и JavaScript
23 Февраля, 2023
Создайте адаптивную скользящую форму входа и регистрации с использованием HTML CSS и JavaScript
23 Февраля, 2023
Как отфильтровать массив на основе пользовательского ввода в AngularJS?
23 Февраля, 2023
Разделение файлов в SASS
23 Февраля, 2023
Для чего используется директива @content?
23 Февраля, 2023