Ответы Mail
Программирование
Android
C/C++
C#
iOS
Java
JavaScript
jQuery
SQL
Perl
PHP
Python
Веб-дизайн
Верстка, CSS, HTML, SVG
Системное администрирование
Другие языки и технологии
Лидеры категории
Лена-пена
М.И.
Y.Nine
•••
Искусственный Интеллект
Искусственный Интеллект
Искусственный Интеллект
Люди разбирающиеся в html и css помогите плиз
hyght
(437),
на голосовании
6 месяцев назад
Дополнен 7 месяцев назад
CSS
.advantages__title{
color: 603809;
font-weight: Bold;
font-size: 54px;
font-family: "Playfair Display", serif;
display: flex;
alight-items: center;
}
.advantages__desc{
font-size: 20px;
font-family: "Playfair Display", serif;
color: #707070;
display: flex;
alight-items: center;
}
.advantages__item-title{
font-weight: Bold;
font-size: 28px;
color:#603809;
font-family: "Playfair Display", serif;
display: flex;
justify-content: center;
}
.advantages__item-desc{
font-size: 20px;
font-weight: regular;
color: #707070;
font-family: "Playfair Display", serif;
display: flex;
justify-content: center;
}
img{
width: 88px;
height: 88px;
display: flex;
justify-content: space-between;
}
.advantages__items{
display: flex;
gap: 20px;
margin-top: 32px;
}
.advantages__items{
width: 280px;
height: 284px;
background-color: rgba(255, 249, 241, 100%);
border: 1px solid rgba(249, 192, 106, 42%);
display: flex;
justify-content: center;
flex-direction: row;
transition: .2s;
}
.advantages__items:hover{
transition: .2s;
background-color: rgb(249, 192, 106, 42%);
}
.advantages__title{
color: 603809;
font-weight: Bold;
font-size: 54px;
font-family: "Playfair Display", serif;
display: flex;
alight-items: center;
}
.advantages__desc{
font-size: 20px;
font-family: "Playfair Display", serif;
color: #707070;
display: flex;
alight-items: center;
}
.advantages__item-title{
font-weight: Bold;
font-size: 28px;
color:#603809;
font-family: "Playfair Display", serif;
display: flex;
justify-content: center;
}
.advantages__item-desc{
font-size: 20px;
font-weight: regular;
color: #707070;
font-family: "Playfair Display", serif;
display: flex;
justify-content: center;
}
img{
width: 88px;
height: 88px;
display: flex;
justify-content: space-between;
}
.advantages__items{
display: flex;
gap: 20px;
margin-top: 32px;
}
.advantages__items{
width: 280px;
height: 284px;
background-color: rgba(255, 249, 241, 100%);
border: 1px solid rgba(249, 192, 106, 42%);
display: flex;
justify-content: center;
flex-direction: row;
transition: .2s;
}
.advantages__items:hover{
transition: .2s;
background-color: rgb(249, 192, 106, 42%);
}
Голосование за лучший ответ
Sahaprof
(8372)
7 месяцев назад
HTML-код, который вы предоставили, представляет собой разметку веб-страницы с использованием языка разметки HTML и стилей CSS. Давайте проанализируем его и я постараюсь объяснить, почему элементы располагаются колонками.
HTML-разметка:
html
</head>
<body>
<section class="advantages">
<div class="advantages__title">Why are we different?</div>
<div class="advantages__desc">We don’t just make your coffee, we make your day!</div>
<div class="advantages__items"></div>
<!-- Ваши элементы с классом advantages__item -->
</div>
</section>
</body>
</html>
CSS-стили:
css
.advantages__title {
/* Стили для заголовка */
}
.advantages__desc {
/* Стили для описания */
}
.advantages__item-title {
/* Стили для заголовка элементов */
}
.advantages__item-desc {
/* Стили для описания элементов */
}
img {
/* Стили для изображений */
}
.advantages__items {
/* Стили для контейнера с элементами */
}
.advantages__items:hover {
/* Стили для контейнера с элементами при наведении */
}
Сам по себе HTML-код описывает структуру элементов, но не определяет их расположение на странице. Для управления расположением элементов используется CSS. В данном случае, стили для контейнера с элементами .advantages__items указывают на использование flexbox-модели, которая позволяет располагать элементы горизонтально (колонками). Это видно в коде CSS:
css
.advantages__items {
display: flex;
flex-direction: row;
/* Другие стили */
}
Если вы хотите изменить расположение элементов, можете попробовать другие свойства CSS, такие как grid или float. Например, для расположения элементов в строку можно использовать свойство float: left; для элементов класса .advantages__item.
Надеюсь, это поможет вам разобраться. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.
HTML-разметка:
html
</head>
<body>
<section class="advantages">
<div class="advantages__title">Why are we different?</div>
<div class="advantages__desc">We don’t just make your coffee, we make your day!</div>
<div class="advantages__items"></div>
<!-- Ваши элементы с классом advantages__item -->
</div>
</section>
</body>
</html>
CSS-стили:
css
.advantages__title {
/* Стили для заголовка */
}
.advantages__desc {
/* Стили для описания */
}
.advantages__item-title {
/* Стили для заголовка элементов */
}
.advantages__item-desc {
/* Стили для описания элементов */
}
img {
/* Стили для изображений */
}
.advantages__items {
/* Стили для контейнера с элементами */
}
.advantages__items:hover {
/* Стили для контейнера с элементами при наведении */
}
Сам по себе HTML-код описывает структуру элементов, но не определяет их расположение на странице. Для управления расположением элементов используется CSS. В данном случае, стили для контейнера с элементами .advantages__items указывают на использование flexbox-модели, которая позволяет располагать элементы горизонтально (колонками). Это видно в коде CSS:
css
.advantages__items {
display: flex;
flex-direction: row;
/* Другие стили */
}
Если вы хотите изменить расположение элементов, можете попробовать другие свойства CSS, такие как grid или float. Например, для расположения элементов в строку можно использовать свойство float: left; для элементов класса .advantages__item.
Надеюсь, это поможет вам разобраться. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.
hyghtЗнаток (437)
7 месяцев назад
спс, сработало
Sahaprof
Мыслитель
(8372)
hyght,
https://t.me/lama_channel_gpt пользуйся, это она решила.
Похожие вопросы
</head>
<body>
<section class="advantages">
<div class="advantages__title">Why are we different?</div>
<div class="advantages__desc">We don’t just make your coffee, we make your day!</div>
<div class="advantages__items"></div>
Почему всё ставиться колонками хотя в коде не прописано :_(
<div class="advantages__item">
<div class="advantages__item-icon"><img src="https://avatars.mds.yandex.net/i?id=b21679cd50dcb2bd498377f38475d8959d7816f4-7215189-images-thumbs&n=13" alt=""></div>
<div class="advantages__item-title">Supreme Beans</div>
<div class="advantages__item-desc">Beans that provides great taste</div>
</div>
<div class="advantages__item">
<div class="advantages__item-icon"><img src=" https://cdn-icons-png.flaticon.com/512/7601/7601005.png " alt=""></div>
<div class="advantages__item-title">High Quality</div>
<div class="advantages__item-desc">We provide the highest quality</div>
</div>
<div class="advantages__item">
<div class="advantages__item-icon"><img src=" https://cdn.onlinewebfonts.com/svg/download_58083.png " alt=""></div>
<div class="advantages__item-title">Extraordinary</div>
<div class="advantages__item-desc">Coffee like you have never tasted</div>
</div>
<div class="advantages__item">
<div class="advantages__item-icon"><img src="https://avatars.mds.yandex.net/i?id=5fe55934c730ae1172c7fc885b3f34de6c9ee627-9095175-images-thumbs&n=13" alt=""></div>
<div class="advantages__item-title">Affordable Price</div>
<div class="advantages__item-desc">Our Coffee prices are easy to afford</div>
</div>
</div>
</section>
</body>
</html>