[Proyecto] lo que hicimos - otra manera - finalizado | 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>

         <footer>
            <img src="./img/logo-blanco.png" alt="logo blanco">
            <p>&copy; Barberia alura - 2023</p>
        </footer>

    </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%;
}
nav a {
    text-transform: uppercase;
    text-decoration: none;
    margin-right: 15px;
    color: #000;
    font-weight: bold;
    transition-delay: 0.1s;
}

nav a:hover {
   color: #c78c19;
   text-decoration: underline;

}


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

section ul li {
  margin-right: 20px;
  text-align: center;
  list-style-type: none;
  padding: 20px 10px;
  border: 2px solid black;
  border-radius: 10px;
  transition-delay: 0.1s;
}

section ul li:hover {
    border-color: #c78c19;

}

section ul li:active {
    border-color: #088c19;
}

section ul li h2 {
    text-transform: capitalize;


}

section ul li:hover h2{
    font-size: 33px;
    color: #c78c19;
}

section ul li:active h2{
    font-size: 33px;
    color: #088c19;
}

.descripcion{
  font-size: 16px;
}

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


footer{
    text-align: center;
    background: url("../img/bg.jpg");
    padding: 40px;
}

footer p{
    color:  #f0f3f4;
    font-size: 0.7em;
    margin: 1.3em;
}