marc

Привет, у меня есть свёрстанный блок, но элементы(круги) не стоят друг под другом, как это исправить? <section id="about"> <div class="container"> <div class="title"> <h2> About Us </h2> <p> Lorem ipsum dolor sit amet, consectetur. </p> </div> <div class="timeline-holder"> <div class="box"> <div class="left"> <h3>July 2018 <span>Our humble beginnings</span></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</p> </div> <img src="img/about1.jpg" alt="" /> </div> <div class="box"> <div class="right"> <h3>January 2018 <span>Our humble beginnings</span></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</p></div> <img src="img/about2.jpg" alt="" /> </div> <div class="box"> <div class="left"> <h3>December 2018 <span>Our humble beginnings</span></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</p></div> <img src="img/about3.jpg" alt="" /> </div> <div class="box"> <div class="right"> <h3>February 2019 <span>Our humble beginnings</span></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</p></div> <img src="img/about4.jpg" alt="" /> </div> </div> </section> .about{ margin-top: 86px; } .timeline-holder { position: relative; } .box { display: flex; align-items: center; margin: 60px 0; } .box .left { flex: 1; padding: 0 20px; } .box .right { direction: rtl; flex: 1; padding: 0 20px; } .box:nth-child(even) { margin-right: calc(50% - 75px); } .box:nth-child(odd) { flex-direction: row-reverse; margin-left: calc(50% - 75px);

Привет, есть задание сверстать по макету вот эту часть, что на фото, это лучше сначала сделать общий блок, потом блок с текстом и блок с изображением? Есть такой код для текста: <section id="about"> <div class="container"> <div class="title"> <h2> About Us </h2> <p> Lorem ipsum dolor sit amet, consectetur. </p> </div> <div class="about clearfix"> <div class="about_txt"> <h3 class="left">July 2010 <span>Our humble beginnings</span></h3> <p class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente molestiae dolore sit sunt aspernatur quae.</p> <img src="img/about1.jpg" alt=""> </div> </div> </div> </section> .about{ margin-top: 86px; } .about_txt{ width: 300px; direction: rtl; } .about_txt h3{ float: right; font-size: 18px; font-weight: bold; text-transform: uppercase; } .about_txt span{ display: block; font-size: 18px; font-weight: bold; text-transform: capitalize; } .left{ margin-top: 25px; float: left; text-align: right; } .about_txt:after{ content: ''; display: table; clear: both; } А как быть с изображением?