HTML5 Y CSS3 2 COMPLETO

• HTML:

  <header>
      <div class="caja">
          <h1> <img src="imagenesProductos/logo.png"> </h1>
          <nav>
              <ul>
                  <li> <a href="index.html"> HOME </a>  </li>
                  <li> <a href="Productos.html"> PRODUCTOS </a> </li>
                  <li> <a href="https:www.google.com.co"> CONTACTOS </a> </li>
              </ul>
          </nav>  
      </div>

  </header>

  <main>
      <ul class="servicios">
          <li>
              <h2>Cabello</h2>
              <img src="imagenesProductos/cabello.jpg">
              <p class="producto-descripcion"> Con tijera o máquina, a gusto del cliente </p>
              <p class="producto-precio"> $ 10.00</p>

          </li>
          <li>
              <h2>Barba</h2>
              <img src="imagenesProductos/barba.jpg">
              <p class="producto-descripcion"> Corte y diseño profecional de barba</p>
              <p class="producto-precio"> $ 08.00</p>

          </li>
          <li>
              <h2>Cabello y Barba</h2>
              <img src="imagenesProductos/cabello+barba.jpg">
              <p class="producto-descripcion"> Paquete conpleto de cabello y barba </p>
              <p class="producto-precio"> $ 15.00</p>             
          </li>
      </ul>           
  </main>

  <footer>
      <img src="imagenesProductos/logo-blanco.png">
      <p class="copyrigth"> &copy Copyright Barbería Alura - 2022</p>
  </footer>

*CSS: header{ background-color: #BBBBBB; padding: 20px; }

.caja{ width: 940px; position: relative; margin: 0 auto; }

nav{ position: absolute; top: 110px; right: 0; }

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

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

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

.servicios{ width: 940px; padding: 50px; margin: 0 auto; }

.servicios 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 #000000; border-radius:20px; text-decoration: underline;}

.servicios li:hover{ border-color: #c78c19; }

.servicios li:active{ border-color: #088c19; }

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

.servicios li:hover h2{ font-size:33px; }

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

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

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

.copyrigth{ color: #FFFFFF; font-size: 13px; margin: 20px; }