Informatică, întrebare adresată de emilio231982, 8 ani în urmă

Salutare tuturor,
Va rog sa ma ajutati si pe mine cu aceasta tema si anume cu un cod html si daca nu cer prea mult si cel de css . Am de facut o structura de pagina tip magazin online ( gen EMAG). Urmez un curs de front end si am lipsit de la ultimul curs cand s-a predat aceasta tehnica si imi cam prind urechile. Va multumesc!

Anexe:

andriesboss92: Voi folosi bootstrap. E o librarie cu clase speciale si predefinite care, doar prin apelul lor, le poti folosi fara a scrie codul css.
emilio231982: Multumesc frumos, Andries! ;)
andriesboss92: Cu drag :)
emilio231982: Andries, ma poti ajuta te rog cu aceeasi tema dar sa-mi dai codurile scriese separat? adica codul de html si separat codul de css. M-ar ajuta mult mai mult asa ca sa inteleg cum functioneaza.Multumesc :D

Răspunsuri la întrebare

Răspuns de andriesboss92
1

<html>

<head>

<title>Pagina magazin online</title>

</head>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<style>

.row > div {

 border: 1px solid black;

 width:5px;

}

img {

       width:250px;

height:250px;

}

div button{

margin-top:10px;  

}

</style>

<body>

<div class="container">

 <h1>Nume categorie</h1>

 <h2>Nume subcategorie</h2>

 <div class="row mx-auto text-center">

  <div class="col-6 col-md-4">

   <div class="col align-self-center">

    <img class="img-thumbnail" src="img1.jpg"/>

   </div>

   <h3>Produs 1</h3>

   <p>DESCRIEREA</p>

   <span>100 lei</span>

   <div class="col align-self-center">

    <button type="button" class="btn btn-warning">BUY</button>

   </div>

  </div>

   

  <div class="col-6 col-md-4">

   <div class="col align-self-center">

    <img class="img-thumbnail" src="img1.jpg"/>

   </div>

   <h3>Produs 2</h3>

   <p>DESCRIEREA</p>

   <span>100 lei</span>

   <div class="col align-self-center">

    <button type="button" class="btn btn-warning">BUY</button>

   </div>

  </div>

   

  <div class="col-6 col-md-4">

   <div class="col align-self-center">

    <img class="img-thumbnail" src="img1.jpg"/>

   </div>

   <h3>Produs 2</h3>

   <p>DESCRIEREA</p>

   <span>100 lei</span>

   <div class="col align-self-center">

    <button type="button" class="btn btn-warning">BUY</button>

   </div>

  </div>

 </div>

</div>

</body>

</html>

-------------------

P.s. Descarca imaginea de mai jos pentru a vedea efectul codului.

Anexe:
Alte întrebări interesante