el border 2 html | HTML5 y CSS3 parte 2: Posicionamiento, listas y navegación | Alura Latam

plataforma
back end
sqk

<main>
<ul class="productos">
<li>
    <h2>bedidas</h2>
    <img src="Coca.png">
    <p>jugos,gaseosas ,vinos ,copteles</p>
    <p>desde 3000</p>

</li>
<li><h2>snacks</h2>
    <img src="fries.png">
    <p>dulces,helados,papas</p>
    <p>desde 2000.........</p>
  </li>
  <li>
  <h2>comidas</h2>
  <img src="hamb.png">
  <p>comida nacional e internacional</p>
 <p>desde 15000</p>    
  </li>

css: header{ background: darkgray; font-family:"Caribbean"; color:greenyellow; }

p{ font-family:"Armalite Rifle" ;

} nav li{ display: inline; margin:0 0 0 15 ;

} nav a{ text-transform:uppercase; color: black; font-weight: bold; font-size: 22px; text-decoration: none;

} nav { position:absolute; top: 50px; right:600px;

} .caja { position: relative; width: 1000px; margin: 0 auto; }.productos { width: 940px; margin: 0 auto; padding: 50px;

}

.productos li { display: inline-block; text-align: center; width: 30%; vertical-align: top; margin: 0 1.5%; padding: 30px 20px; box-sizing: border-box; border:2px solid rgb(240, 15, 15); border-top-left-radius:10px; border-top-right-radius:25px; border-top-right-radius:40px; border-top-left-radius:50px; background:rgb(255, 81, 0); }

.productos h2 { font-size: 30px; font-weight: bold; }

.producto-descripcion { font-size: 18px; }

.producto-precio { font-size: 20px; font-weight: bold; margin-top: 10px;

} h2{ font-family:"Armalite Rifle" ;}