2
respostas

Acrescentando algumas técnicas ao Código.

HTML

<link rel="preconnect" href="https://fonts.googleapis.com">

    <nav>
        <ul>
            <li> <a href="index.html">Home</a> </li>
            <li> <a href="produtos"> Produtos </a> </li>
            <li> <a href="contato"> Contatos </a> </li>
        </ul>
        </nav>
    </div>
  • Cabelo

    Na tesoura ou máquina, com o clinte preferir

    R$ 25.00

  • Barba

    Corte e desenho profissional de barba

    R$ 18.00

  • Cabelo & Barba

    Pacote completo de cabelo e barba

    R$ 35.00

Barbearia Alura © 2022

CSS

body{
margin: 0%;
background:linear-gradient(rgba(69, 69, 70, 10), rgba(194, 131, 131, 0.3));

}

header{ background: lightslategray; padding: 20px 0; }

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

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

nav li{ display: inline-flex; padding: 10px;

} nav a{ text-transform: uppercase; text-decoration: none; color: #000; font-weight: bold; font-size: 22px; font-family: 'Aboreto', cursive;

}

nav a:hover{ color: beige; }

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

}

.produtos li{ display: inline-block; text-align: center; width: 30%; vertical-align: top;

}

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

.descricao{ font-size:18px; } .produto-preco{ font-size: 22px; font-weight: bold; }

footer{ background: #000; color: white ; font-family: 'Aboreto', cursive; padding: 20px; width: 100%; text-align: center; }

2 respostas

Show de bola, vou usar

Parabéns meu caro, continue assim.