lo que hicimos - otra manera | HTML5 y CSS3 parte 2: Posicionamiento, listas y navegación | Alura Latam

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/style.css">
    <title>Productos</title>
</head>
<body>
   <main>

         <header class="row_items">
             <h1>
                <img src="./img/logo.png" alt="logo">
             </h1>
             <nav>
                <a href="index.html">Home</a> 
                <a href="productos.html">Productos</a>
                <a href="contacto.html">Contacto</a>
             </nav>
         </header>
         <section>
          <ul class="row_items">
            <li>
                <h2>cabello</h2>
                <img src="./img/cabello.jpg" alt="cabello">
                <p class="descripcion">Corte a tijeras o maquina a gusto del cliente</p>
                <p class="precio">$10.00</p>
            </li>
            <li>
                <h2>barba</h2>
                <img src="./img/barba.jpg" alt="barba">
                <p class="descripcion">Corte y diseño profecional de barba</p>
                <p class="precio">$08.00</p>
            </li>
            <li>
                <h2>cabello + barba</h2>
                <img src="./img/cabello+barba.jpg" alt="cabello+barba">
                <p class="descripcion">Paquete completo de cabello y barba</p>
                <p class="precio">$15.00</p>
            </li>
          </ul>
         </section>

    </main>
</body>
</html>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

main{
    display: flex;
    flex-flow: column nowrap; 
    width: 100%;
}

.row_items{
    display: flex;
    flex-flow: row nowrap;

}

header{
    justify-content: space-around;
    padding: 10px 0;
    background-color:  #f0f3f4;
}

header nav{
    margin-top: 8%;
}
header nav a {
    text-transform: uppercase;
    text-decoration: none;
    margin-right: 15px;
    color: #000;
    font-weight: bold;
}


section{
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

section ul li {
  margin-right: 20px;
  text-align: center;
  list-style-type: none;
  padding: 30px 20px;
}

section ul li h2 {
    text-transform: capitalize;

}

.descripcion{
  font-size: 16px;
}

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