Versão Mobile

style.css

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400&display=swap');

header {
    background-color: #BBB;
    padding: 20px 0px;
}

body { /*   */
    background: #FFF;
    font-family: 'Montserrat', sans-serif;
}

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

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

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

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

nav a:hover {
    color: #fff;
    padding: 5px;
    border-bottom: #000;
    border-width: 0  0 4px;
    border-style: solid;
    transition: 0.5s all;
}

main {
    margin: 0 auto;
}

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

.produtos 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 #000;
    border-radius:10px; 
}

.produtos li:hover h2 {
    font-size: 34px;
}

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

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

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

.produto-descricao {
    font-size: 18px;
}

.produto-preco {
    font-size: 22px;
    font-weight: bold;
    margin-top: 10px;
}

.copyright {
    color: white;
    font-size: 13px;
    padding: 40px 0;
}

footer img:hover, h1>img:hover, .lista-servicos li:hover {
    transition: 1.0s all;
    font-weight: bold;
    transform: scale(1.25);
    color:red;
}

form {
    margin: 40px 0;
}

form label, form legend {
    display: block;
    font-size: 20px;
    margin: 0 0 10px 0;
}

.input-padrao {
    display: block;
    margin: 0 0 20px 0;
    padding: 10px 25px;
    width: 50%;
}

.newsletter {
    margin: 20px 0px;
}


.enviar {
    width: 40%;
    padding: 15px 0;
    background: orange;
    color: white;
    font-weight: bold;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    transition: 1s all;
    cursor: pointer;
}

.enviar:hover{
    background: darkorange;
    transform: scale(1.05);
}

table {
    margin: 20px 0 40px 0;
}

thead {
    background: #555;
    color: white;
    font-weight: bold;
}

td, th {
    border: 1px solid #000;
    padding: 8px 15px;
}

.titulo-principal{
    text-align: center;
    font-size: 2em;
    margin: 0 0 1em;
    text-shadow: #CCC 5px 5px 5px;
}

.titulo-principal::before{
    content: "[ ";
}

.titulo-principal::after{
    content: " ]";
}

p{  
    text-align: center;
}

.missao{
    font-size: 20px;
}

em strong{
    color: red;
}

.banner{
    width: 100%;
    border-style:solid;
    border-width: 10px 0;
    border-color: #888;
}

.beneficios{
    padding: 1em 0;
    background: linear-gradient(to bottom,#FEFEFE 0 50%,#888 90% 100%);
    border-style:solid;
    border-width: 5px 0 0 0;
    border-color: #000;
}

.conteudo-servicos{
    width: 640px;
    margin: 0 auto;
}

.lista-servicos{
    width: 48%;
    display: inline-block;
    vertical-align: top;
}

.imagembeneficios{
    width: 48%;
    border-radius: 20px;
    filter:drop-shadow(12px 15px 5px rgba(92, 83, 84, 0.35));
    border-style:solid;
    border-width: 5px;
    border-color: #888;
}

.lista-servicos li{
    font-style: italic;
    line-height: 2;
}

.lista-servicos li::before{
    content: "✀ ";
}

.lista-servicos li:first-child{
    font-weight: bold;
}

.principal{
    padding: 3em 0;
    background: #FEFEFE;
    width: 940px;
    margin: 0 auto;
}

.principal p{
    margin: 0 0 1em;
}

.principal strong {
    font-weight: bold;
}

.principal em {
    font-style: italic;
}

.utensilios {
    width: 120px;
    float: left;
    margin: 0 20px 60px 0;
    border-radius: 20px;
    filter:drop-shadow(12px 15px 5px rgba(92, 83, 84, 0.35));
    border-style:solid;
    border-width: 5px;
    border-color: #888;
}

.mapa {
    padding: 3em 0;
    margin: 0 auto;
    background: linear-gradient(#FEFEFE 0,#888 50% 100%);
}

iframe {
    border-radius: 20px;
    border-style:solid;
    border-width: 5px;
    border-color: #888;
}

.mapa p{
    margin: 0 0 2em;
}

.video {
    width: 560px;
    margin: 2em auto;
}

.mapa-conteudo {
    width: 940px;
    margin: 0 auto;
}

footer {
    text-align: center;
    background: url(imgs/bg.jpg);
    padding: 40px 0; 
    border-style:solid;
    border-width: 5px 0 0 0;
    border-color: #000;   
}

mobiletarget.css

@media only screen and (max-width: 599px){

    .principal, .caixa, header, .conteudo-servicos, .mapa-conteudo, .lista-servicos, .video, .produtos{
        width: auto;
        text-align: center;
    }

    nav{
        position: static;
    }

    .titulo-principal{
        font-size: 1.5em;
    }
    .principal, .mapa, footer, .copyright{
        padding: 1em;
    }
    .utensilios{
        margin: 0 1em 1.7em;
    }
    .imagembeneficios{
        width: 80%;
    }
    iframe{
        width: 80%;
    }
    .card{
        position: inline;
        margin: 0px;
    }

    /* contato-page */
    .formulariocontato{
        position: static;
        margin: 0 auto;
        display: inline;
    }
    .horarios{
        margin: 0 auto;
        display: block;
    }
    .enviar{
        width: 15em;
    }
    #infoadicional{
        width: 80%;
        padding: 0px;
        margin: 0 auto;
    }
    #telefone, #email, #nomecompleto{
        width: 16em;
        margin: 0 auto;
    }

    form label{
        margin:1em 0 1em 1.6em;
    }
    fieldset{
        margin: 1.6em 0 1em 0;
        text-align: center;
    }
    legend{
        text-align: center;
    }
    select{
        width: 8em;
        margin: 0 auto;
    }
    .enviar{
        margin: 0 auto;
        display: block;
    }
    table{
        margin: 0 auto;
        margin-bottom: 2em;
    }
    .card{
        margin: 0 0 2em;
    }
    /* produtos page */
    .produtos li img{
        width: 80%;
    }
    .produtos li{
        width: 15em;
    }
    .produtos{
        padding: 1em;
    }
}

tablettarget.css

@media only screen and (min-width: 600px)and (max-width:900px){

    .principal, .conteudo-servicos, .caixa, .mapa-conteudo, .lista-servicos, .video, .produtos{
        width: auto;
        text-align: center;
    }
    .caixa{
        position: static;
        display: flex;
        justify-content: flex-start;
    }
    nav{
        right: 3em;
    }

    .titulo-principal{
        font-size: 1.5em;
    }
    .principal, .mapa, footer, .copyright{
        padding: 2em;
    }
    .utensilios{
        margin: 0 1em 1.7em;
    }
    .imagembeneficios{
        width: 80%;
    }
    iframe{
        width: 80%;
    }
    /* produtos page */
    .produtos li img{
        width: 80%;
    }
    .produtos li{
        width: 19em;
    }
    .produtos{
        padding: 1em;
    }
}

produtos.html

<!DOCTYPE html>
<html lang="pt-BR">
<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" type="text/css" href="reset.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" media="screen and (min-width: 600px) and (max-width:900px)" href="tablettarget.css">
    <link rel="stylesheet" type="text/css" media="screen and (max-width: 599px)" href="mobiletarget.css"> 
    <title>Produtos - Barbearia Alura</title>
</head>
<body>

    <header>
        <div class="caixa">
            <h1><img src="imgs/logo.png" alt="logomarca da barbearia alura"></h1>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="produtos.html">Produtos</a></li>
                    <li><a href="contato.html">Contato</a></li>
                </ul>
            </nav>
        </div>    
    </header>
    <main>
        <ul class="produtos">
            <li>
                <h2>Cabelo</h2>
                <img src="imgs/cabelo.jpg" alt="Corte de cabelo na tesoura ou na máquina, conforme preferência do cliente">
                <p class="produto-descricao">Na tesoura ou máquina, o cliente escolhe.</p>
                <p class="produto-preco">R$ 25,00</p>
            </li>
            <li>
                <h2>Barba</h2>
                <img src="imgs/barba.jpg" alt="Corte de cabelo e desenho profissional de barba">
                <p class="produto-descricao">Corte e desenho profissional de barba.</p>
                <p class="produto-preco">R$ 18,00</p>
            </li>
            <li>
                <h2>Premium</h2>
                <img src="imgs/cabelo+barba.jpg" alt="Oferecemos serviço completo com nosso pacote de corte de cabelo e barba.">
                <p class="produto-descricao">Pacote completo de cabelo e barba.</p>
                <p class="produto-preco">R$ 35,00</p>
            </li>
        </ul>
    </main>

    <footer>
        <img src="imgs/logo-branco.png" alt="logo branco da Barbearia Alura">
        <p class="copyright">&copy; Copyright Barbearia Alura 2022</p>
    </footer>

</body>
</html>

contato.html

<!DOCTYPE html>
<html lang="pt-BR">
<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" type="text/css" href="reset.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" media="screen and (min-width: 600px) and (max-width:900px)" href="tablettarget.css">
    <link rel="stylesheet" type="text/css" media="screen and (max-width: 599px)" href="mobiletarget.css"> 
    <title>Contato - Barbearia Alura</title>
</head>
<body>

    <header>
        <div class="caixa">
            <h1><img src="imgs/logo.png" alt="logomarca da barbearia alura"></h1>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="produtos.html">Produtos</a></li>
                    <li><a href="style.css">Contato</a></li>
                </ul>
            </nav>
        </div>    
    </header>
    <main>
    <section class="formulariocontato">    
                <form>
                    <label for="nome">Nome completo</label>
                    <input type="text" id="nomecompleto" class="input-padrao" required placeholder="nome + sobrenome">

                    <label for="email">Email</label>
                    <input type="email" id="email" class="input-padrao" required placeholder="seuemail@dominio.com.br">

                    <label for="telefone">Telefone</label>
                    <input type="tel" id="telefone" class="input-padrao" required placeholder="XX-XXXXX-XXXX">

                    <label for="infoadicional">Mensagem</label>
                    <textarea name="texto" id="infoadicional" cols="70" rows="10" class="input-padrao" maxlength="500" placeholder="Digite sua mensagem, máximo de 500 caracteres"></textarea>

                <fieldset>
                    <legend>Como prefere o nosso contato?</legend>
                    <label for="radio-email">
                        <input type="radio" name="contato" value="email" id="radio-email">Email
                    </label>

                    <label for="radio-telefone">
                        <input type="radio" name="contato" value="telefone" id="radio-telefone">Telefone
                    </label>

                    <label for="radio-whatsapp">
                        <input type="radio" name="contato" value="whatsapp" id="radio-whatsapp" checked>WhatsApp
                    </label>
                </fieldset>  

                <fieldset> 
                    <legend>Qual o horário que prefere ser atendido?</legend>   
                    <select name="horarioatendimento" id="atendimento">
                        <option value="manha">Manhã</option>
                        <option value="tarde">Tarde</option>
                        <option value="noite">Noite</option>
                    </select>
                </fieldset>

                    <label for="newsletter">
                        <input type="checkbox" name="newsletter" class="newsletter" checked>  Gostaria de receber nossas novidades por email?
                    </label>

                    <input type="submit" class="enviar" value="Enviar o formulário">
            </form>

    <div class="horarios">
        <p><img class="card" src="imgs/service1.jpg" alt=""></p>
            <table>
                <thead>
                    <tr>
                        <th>Dia</th>
                        <th>Horário</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Segunda</td>
                        <td>08h as 20h</td>
                    </tr>
                    <tr>
                        <td>Quarta</td>
                        <td>08h as 20h</td>
                    </tr>
                    <tr>
                        <td>Sexta</td>
                        <td>08h as 20h</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </section>
</main>

    <footer>
        <img src="imgs/logo-branco.png" alt="logo branco da Barbearia Alura">
        <p class="copyright">&copy; Copyright Barbearia Alura 2022</p>
    </footer>

</body>
</html>