Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Адаптивные элементы декора для фото (https://javascript.ru/forum/xhtml-html-css/86084-adaptivnye-ehlementy-dekora-dlya-foto.html)

NastyaVs 09.09.2024 23:56

Адаптивные элементы декора для фото
 
Вложений: 1
<div class="crisper__content-row content-row">
<div class="content-row__box-items">
<div class="content-row__inner-cell">
<img src="@img/about_us_page/order.png" alt="Order" class="content-row__pic-circle" width="549" height="549">
</div>
</div>
<div class="content-row__desc-textbox">
<h2 class="content-row__title-our"><strong class="content-row__word">Our</strong> restautant</h2>
<div class="content-row__box-paragraph">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>



//!BEM-Block
.advertisement {
		// .advertisement__crisper
		&__crisper {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
		}
}

//!BEM-Block
.crisper {
		// .crisper__content-row
		&__content-row {
			display: flex;
			width: 100%;
			// flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			row-gap: toRem(20);
			column-gap: toRem(40);
		}
}

//!BEM-Block
.content-row {
		// .content-row__box-items
			&__box-items{
				flex: 0 0 67%;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;

				&::before{
						position: absolute;
						content: "";
						aspect-ratio: 694 / 694;
						max-width: 694px;
						min-height: 694px;
						border-radius: 100%;
						opacity: 0.2;
						background: var(--decodeSmallCardAbout);
						z-index: -1;
						padding: 0 170px;
					}
		
						&::after{
						position: absolute;
						content: "";
						max-width: 862px;
						min-height: 862px;
						aspect-ratio: 862 / 862;
						border-radius: 100%;
						opacity: 0.1;
						background: red;
						z-index: 2;
						padding: 0 180px;
					}
			}

		// .content-row__inner-cell
		&__inner-cell {

			position: relative;
			display: block;
			aspect-ratio: 549 / 549;
			max-width: toRem(549);
			z-index: 3;
			border-radius: 100%;
		}

		// .content-row__pic-circle
		&__pic-circle {
			overflow: hidden;
			border-radius: 100%;
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
		}
		// .content-row__desc-textbox
		&__desc-textbox {
			flex: 0 0 27%;
			}
		// .content-row__title-our
		&__title-our {
			color: #311F09;
			font-family: var(--fonFamilyTinos);
			font-size: 80px;
			font-size: toRem(80);
			line-height: 1.10;
		}
		// .content-row__word
		&__word {
			color: #FF8A00;
			font-family: var(--fonFamilyTinos);
			font-size: toRem(80);
			font-weight: 700;
			line-height: 1.10;

	 }


Часовой пояс GMT +3, время: 22:01.