Как сверстать эти блоки на чистом html и css?
*{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.wrapper{
max-width: 900px;
margin: auto;
background-color: tomato;
padding-left: 20px;
padding-right: 20px;
}
.block{
background-color: tomato;
text-align: center;
}
.span{
display: block;
color: #fff;
padding-top: 20px;
}
.text{
font-size: 20px;
text-transform: uppercase;
position: relative;
display: inline-block;
color: #fff;
padding-top: 20px;
}
.text:before{
content: '';
display: block;
width: 30px;
height: 2px;
background-color: blue;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -10px;
}
.block2{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.block2-gl{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.block2-circle{
width: 50px;
height: 50px;
border-radius: 50%;
background-color: gray;
margin-right: 20px;
}
.block2-text{
width: 300px;
}
.block2-span{
font-size: 20px;
color: #fff;
}
.block2-span2{
color: yellow;
display: block;
}
<div class="wrapper">
<div class="block">
<p class="text">Lorem ipsum dolor sit amet.</p>
<span class='span'>Lorem ipsum dolor</span>
</div>
<div class="block2-gl">
<div class="block2">
<div class="block2-circle"></div>
<div class="sd">
<p class="block2-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, facere libero vitae, dolorum magnam itaque accusantium. Perspiciatis officiis quasi optio.
</p>
<span class="block2-span">Lorem ipsum.</span>
<span class="block2-span2">Lorem ipsum.</span>
</div>
</div>
<div class="block2">
<div class="block2-circle"></div>
<div class="sd">
<p class="block2-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, facere libero vitae, dolorum magnam itaque accusantium. Perspiciatis officiis quasi optio.
</p>
<span class="block2-span">Lorem ipsum.</span>
<span class="block2-span2">Lorem ipsum.</span>
</div>
</div>
<div class="block2">
<div class="block2-circle"></div>
<div class="sd">
<p class="block2-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, facere libero vitae, dolorum magnam itaque accusantium. Perspiciatis officiis quasi optio.
</p>
<span class="block2-span">Lorem ipsum.</span>
<span class="block2-span2">Lorem ipsum.</span>
</div>
</div>
<div class="block2">
<div class="block2-circle"></div>
<div class="sd">
<p class="block2-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, facere libero vitae, dolorum magnam itaque accusantium. Perspiciatis officiis quasi optio.
</p>
<span class="block2-span">Lorem ipsum.</span>
<span class="block2-span2">Lorem ipsum.</span>
</div>
</div>
</div>
</div>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Всем привет:) Не могу фон сделать под размер страницы, постоянно фон как бы не помещается на страницуВсе говорят про background-size: cover; Но он у меня...
У меня есть скрипт для анимации текста при наведении на елемент: