Нужно создать массив и заполнить его информацией про статьи , добавляя в них данные из массива?

0

нужно создать массив и заполнить его информацией про статьи. Далее беру из него данные и создаёте html элементы, добавляя в них данные из массива. не могу понять  при нажатии на кнопку должны выодить данные из news block  не могу додуматься  ниже код я должна вывести по 2 блока с классом  news block итого 8 блоков

<div class="container">
	<div class="row">
	<div class="col-3">
			<div class="newsblock">
				<div class="photo-content">
				<img src="dfc734c1-68bf-404e-93d6-e9bc28598cef.jpg"  class="newsphoto"alt=""></div>
				<p class="newsparagraf"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </strong> Laboriosam aliquam fugit debitis eaque hic at illo deserunt asperiores nesciunt veniam. Ad libero illo recusandae natus pariatur nisi dolore delectus suscipit!</p>
				<button type="button" class="btn btn-warning ml-2 mb-3">Читать далее</button>
			</div>
		</div>
   
   <div class="col-5">
   	<div class="newsblock ml-5">
   		<div class="photo-content">
				<img src="Photo_inter.jpg"  class="newsphoto"alt=""></div>
      <p class="newsparagraf"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </strong>Laboriosam aliquam fugit debitis eaque hic at illo deserunt asperiores nesciunt veniam. Ad libero illo recusandae natus pariatur nisi dolore delectus suscipit!</p>
				<button type="button" class="btn btn-warning ml-2 mb-3">Читать далее</button>
			</div>
   </div>

 

   <div class="col-4">
   	<div class="side ml-5">
   		<p><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </strong> Nam dolorum doloremque cupiditate explicabo maxime unde velit cum minima laudantium quae!</p>
   	</div>
   	<div class="side2 mt-2 ml-5">
   		<img src="pydroid-770x270.webp" class="sidefoto" alt="">
   		<p class="sidetext">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione illum, aspernatur vitae ipsa laudantium odio assumenda quam praesentium odit delectus.</p>
   		<button type="button" class="btn btn-primary">Читать далее</button>
   	</div>
   </div>


 </div>

  </div>

  <div class="container">
  	<div class="row">
  		<div class="col-3">
  			<div class="newsblock">
   		<div class="photo-content">
				<img src="Web-Programming.jpg"  class="newsphoto"alt=""></div>
      <p class="newsparagraf"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </strong>Laboriosam aliquam fugit debitis eaque hic at illo deserunt asperiores nesciunt veniam. Ad libero illo recusandae natus pariatur nisi dolore delectus suscipit!</p>
				<button type="button" class="btn btn-warning ml-2 mb-3">Читать далее</button>
			</div>
  		</div>

  		<div class="col-5 ml-5">
  			<div class="newsblock">
   		<div class="photo-content">
				<img src="pngtree-program-development-programming-hd-background-image_161259.jpg"  class="newsphoto"alt=""></div>
      <p class="newsparagraf"><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </strong>Laboriosam aliquam fugit debitis eaque hic at illo deserunt asperiores nesciunt veniam. Ad libero illo recusandae natus pariatur nisi dolore delectus suscipit!</p>
				<button type="button" class="btn btn-warning ml-2 mb-3">Читать далее</button>
			</div>
  		</div>
  	</div>
  </div>
  <div class="container">
  	<div class="footer mt-5">
  		<div class="row">
  			<div class="col-12 mt-5">
  				<p><strong>Все права защищены &copy;</strong></p>
  			</div>
  		</div>
  	</div>
  </div>
html
css

0 ответов

Sign up or Log in to write an answer