<video muted playsinline>
, то просто может не работать. Такое вот оно яблоко.<video muted="true" playsinline="true">
<source type="video/webm" src="video.webm">
<source type="video/mp4" src="video.mp4">
</video>
body {
background: var(--color-background);
}
.main {
display: grid;
gap: 30px;
min-height: 100vh;
grid-auto-rows: auto 1fr auto;
padding: 30px;
}
.header {}
.header__rows {
display: grid;
grid-auto-flow: column;
justify-content: start;
align-items: center;
gap: 10px;
}
.camera {
display: grid;
justify-items: center;
align-items: center;
}
.pyramid {
display: grid;
justify-content: center;
}
.row {
display: grid;
grid-auto-flow: column;
grid-auto-columns: auto;
justify-content: center;
width: 100%;
height: 32px;
}
.brick {
display: flex;
align-items: center;
justify-content: center;
font-family: sans-serif;
background: var(--color-backround-second);
color: var(--color-main);
min-width: 62px;
height: 100%;
}
display: flex
используется align-items: flex-start
, при этом все элементы будут сбиваться к верху своего контейнера.display: grid
используется align-items: start
, тут элементы будут прибиваться к верху своей ячейки. @mixin mobile {
@media (max-width: 767.98px) {
@content;
}
}
@mixin tablet {
@media (min-width: 768px) and (max-width: 1139.98px) {
@content;
}
}
@mixin desktop {
@media (min-width: 1140px) {
@content;
}
}
h1 {
@include desktop {
font-size: 52px
}
@include tablet {
font-size: 42px
}
@include mobile {
font-size: 32px
}
}
<div class="roadmap">
<div class="map-item">
<div class="item-text">
<h3>What is Lorem Ipsum?</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
<img class="item-image" src="https://picsum.photos/100">
</div>
<div class="map-item">
<img class="item-image" src="https://picsum.photos/100">
<div class="item-text">
<h3>What is Lorem Ipsum?</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
<div class="map-item">
<div class="item-text">
<h3>What is Lorem Ipsum?</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
<img class="item-image" src="https://picsum.photos/100">
</div>
<div class="map-item">
<img class="item-image" src="https://picsum.photos/100">
<div class="item-text">
<h3>What is Lorem Ipsum?</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
</div>
.roadmap {
width: 70%;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 30px;
.map-item {
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-areas: "text-left image text-right";
gap: 30px;
align-items: center;
&:nth-child(odd) {
.item-text {
grid-area: text-left;
text-align: right;
}
}
&:nth-child(even) {
.item-text {
grid-area: text-right;
}
}
.item-image {
grid-area: image;
}
}
}