Bymas | Нужна помощь!

Тема закрыта by

NA MILLION
Причина: Всем спасибо!

Нужно повторить вот этот блок
Стилями CSS
Чтобы текст также стоял на против блока
Напишите код кто прям разбирается в этом. Спасибо ;)

Изображение

------

85462_6BDA240CD66B4DC59622324A703CEC4F.jpeg (49.0 Kb)
Скачиваний: 116

https://codepen.io/galtsevt/pen/wvEzKML

Galtsev.T , нету у меня денег

NA MILLION (24 фев 2023, в 17:45)

Galtsev.T , нету у меня денег

Не нужны мне твои деньги)

Открой исходник, посмотри код и стили, скопируй себе

Largo , Я зашёл надел на css ничего не происходит

Largo , Не показывает исходник

NA MILLION (24 фев 2023, в 18:15)

Largo , Не показывает исходник

Изображение

------

85464_Screenshot_20230224_173658.jpg (292.0 Kb)
Скачиваний: 115

NA MILLION (24 фев 2023, в 17:09)
Нужно повторить вот этот блок
Стилями CSS
Чтобы текст также стоял на против блока
Напишите код кто прям разбирается в этом. Спасибо ;)

html

<div class="containerBackground">

	<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="img">

	<div class="containerInformation">

		Название<br/>

		Цена<br/>

		Стоимость<br/>

	</div>

</div>



<style>

	.containerBackground {

		display: flex;

		background-color: #cc9;

		padding: 10px;

	}

	.containerBackground img {

		width: 50px;

		vertical-align: middle;

		height: 50px;

		border-radius: 10px;

	}

	.containerInformation {

		margin-left: 10px;

	}

</style>

если что я сам писал
________
посл. ред. 24.02.2023 в 19:11; всего 1 раз(а); by MIN_MAX

NA MILLION , Я бы так сделал, хотя я не дизайнер

html

<div class="container">

  <div class="image">

    <img src="ссылка на картинку" alt="image">

  </div>

  <div class="links">

    <a href="#">

      <img src="ссылка на иконку" alt="..."> Текст ссылки

    </a>

    <a href="#">

      <img src="ссылка на иконку" alt="..."> Текст ссылки

    </a>

    <a href="#">

      <img src="ссылка на иконку" alt="..."> Текст ссылки

    </a>

  </div>

</div>

css

.container {

display: flex;

align-items: center;

}



.image {

border-radius: 16%;

overflow: hidden;

width: 100px;

height: 100px;

margin-right: 20px;

}



.image img {

width: 100%;

height: 100%;

object-fit: cover;

}



.links {

display: flex;

flex-direction: column;

}



.links a {

display: flex;

align-items: center;

margin-bottom: 10px;

}



.links a img {

margin-right: 10px;

width: 18px;

height: 18px;

}