Разметка элементов

[marc 0]

Привет, есть задание сверстать по макету вот эту часть, что на фото, это лучше сначала сделать общий блок, потом блок с текстом и блок с изображением? Есть такой код для текста:

<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;
}

А как быть с изображением?

[DivMan 102]

код не смотрел, но делить надо так 

 

[Колхозник деревенский 2]

Я бы так сделал. 
Ну а картинку блоком так и ставите:
 

<div>
  <div class="about_txt"> // <— тут 35%
    <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>
  </div>
  <div class="image-block"> <— тут 30%
    <img src="img/about1.jpg" alt="">
  </div>
  <div class="class"></div> <— тут 35%
</div>

 

 

ps: проценты сами подберете...

 

 

Изменено 9 мая 2018 пользователем Колхозник деревенский