Jump to content

marc

Neophyte
  • Posts

    2
  • Joined

  • Last visited

Information

  • Sex
    не скажу
  • From
    Украина

marc's Achievements

Explorer

Explorer (1/14)

0

Reputation

  1. Привет, у меня есть свёрстанный блок, но элементы(круги) не стоят друг под другом, как это исправить? <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);
  2. Привет, есть задание сверстать по макету вот эту часть, что на фото, это лучше сначала сделать общий блок, потом блок с текстом и блок с изображением? Есть такой код для текста: <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; } А как быть с изображением?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy