Untitled Document

Responsiivinen hevoslistaus. (Katso esimerkki)
Tallenna css-tiedosto lista-1.css ja linkitä HTML-tiedostoon
Kopioi alla oleva koodi: (Ctrl + C)
	
	
	 <div class="row">
    <div class="col-4">
      <div class="hevonen">
        <div class="hevonen-img">
          <img src="heppa.jpg">
			  <a class="btn btn-tamma" href="hevonen.htm">+</a>
		  </div>
			<p class="hevonen-nimi">Hevosen virallinen nimi</p>
        
		
        <div class="hevonen-tiedot">
			<div class="tiedot-col">
				painotus<br>
			</div>
	<div class="tiedot-col">
				käyttö<br>
			</div>
	<div class="tiedot-col">
				polvisuus
			</div>
          <p>Tähän vaikkapa lyhyt kuvaus hevosen luonteesta, historiasta, käyttötarkoituksesta tai vaikka tavoitteista. Tai sitten pois koko rimpsu.</p>
        </div>
      </div>
    </div>
		 
	  <div class="col-4">
      <div class="hevonen">
        <div class="hevonen-img">
          <img src="heppa.jpg">
			  <a class="btn btn-tamma" href="hevonen.htm">+</a>
		  </div>
			<p class="hevonen-nimi">Hevosen virallinen nimi</p>
        
		
        <div class="hevonen-tiedot">
			<div class="tiedot-col">
				painotus<br>
			</div>
	<div class="tiedot-col">
				käyttö<br>
			</div>
	<div class="tiedot-col">
				polvisuus
			</div>
          <p>Tähän vaikkapa lyhyt kuvaus hevosen luonteesta, historiasta, käyttötarkoituksesta tai vaikka tavoitteista. Tai sitten pois koko rimpsu.</p>
        </div>
      </div>
    </div>
		   <div class="col-4">
      <div class="hevonen">
        <div class="hevonen-img">
          <img src="heppa.jpg">
			  <a class="btn btn-ori" href="hevonen.htm">+</a>
		  </div>
			<p class="hevonen-nimi">Hevosen virallinen nimi</p>
        
		
        <div class="hevonen-tiedot">
			<div class="tiedot-col">
				painotus<br>
			</div>
	<div class="tiedot-col">
				käyttö<br>
			</div>
	<div class="tiedot-col">
				polvisuus
			</div>
          <p>Tähän vaikkapa lyhyt kuvaus hevosen luonteesta, historiasta, käyttötarkoituksesta tai vaikka tavoitteista. Tai sitten pois koko rimpsu.</p>
        </div>
      </div>
    </div>
		   <div class="col-4">
      <div class="hevonen">
        <div class="hevonen-img">
          <img src="heppa.jpg">
			  <a class="btn btn-ori" href="hevonen.htm">+</a>
		  </div>
			<p class="hevonen-nimi">Hevosen virallinen nimi</p>
        
		
        <div class="hevonen-tiedot">
			<div class="tiedot-col">
				painotus<br>
			</div>
	<div class="tiedot-col">
				käyttö<br>
			</div>
	<div class="tiedot-col">
				polvisuus
			</div>
          <p>Tähän vaikkapa lyhyt kuvaus hevosen luonteesta, historiasta, käyttötarkoituksesta tai vaikka tavoitteista. Tai sitten pois koko rimpsu.</p>
        </div>
      </div>
    </div>
		 
  </div>