Minha versão até o momento | HTML5 e CSS3 parte 3: trabalhando com formulários e tabelas

2
respostas

por Antonio Vinicius Veras Bandeira

| 114.9k xp | 40 posts

contato.html

<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8">
    <title>Contato - Barbearia Alura</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/style-contato.css">

</head>

<body>
    <header>
        <div class="caixa">
            <h1><a href="index.html"><img src="images/produtos/logo.png" alt="Logo da Barbearia Alura"></a></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>
        <form id="formulario">
            <label class="label-default" for="nomeSobrenome" title="Digite o seu Nome e Sobrenome">Nome e
                Sobrenome</label>
            <input class="input-default" type="text" name="nomeSobrenome" id="nomeSobrenome" required>

            <label class="label-default" for="email" title="Digite o seu Email" >Email</label>
            <input class="input-default" type="email" name="email" id="email" required placeholder="seuemail@dominio.com">

            <label class="label-default" for="telefone" title="Digite o seu Telefone">Telefone</label>
            <input class="input-default" type="tel" name="telefone" id="telefone" required placeholder="(xx) xxxxx-xxxx">

            <label class="label-default" for="mensagem" title="Digite o sua Mensagem">Mensagem</label>
            <textarea class="input-default" name="mensagem" cols="70" rows="10" name="mensagem" id="mensagem" required></textarea>

            <fieldset>

                <legend class="label-default">Como você prefere o nosso contato?</legend>

                <label class="label-default" for="radioEmail" title="Email">
                    <input type="radio" class="label" name="radioContato" id="radioEmail" value="email">
                    Email
                </label>

                <label class="label-default" for="radioTelefone" title="Telefone">
                    <input type="radio" name="radioContato" id="radioTelefone" value="telefone">
                    Telefone
                </label>


                <label class="label-default" for="radioWhatsApp" title="WhatsApp">
                    <input type="radio" name="radioContato" id="radioWhatsApp" value="whatsApp" checked>
                    WhatsApp
                </label>

            </fieldset>

            <fieldset >
                    <legend class="label-default">Gostaria de receber nossas novidades por Email? <input type="checkbox" checked></legend>                    
            </fieldset>

            <fieldset>
                <legend class="label-default">Qual horário prefere ser atendido?</legend>
                <select>
                    <option>Manhã</option>
                    <option>Tarde</option>
                    <option>Noite</option>
                </select>
            </fieldset>

            <input type="submit" value="Enviar Formulário" title="Envie os seus dados" id="botao-submit">
        </form>
    </main>

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

</body>

</html>

style-contato.css


#formulario{

    margin: 40px 0;
}

.label-default{

    display: block;
    font-size: 20px;
    margin: 0 0 10px;
}

.input-default{

    display: block;
    margin: 0 0 20px 0;
    padding: 10px;
    width: 50vw;
}

fieldset {
    margin: 0 0 10px;
}

2 respostas

por Antonio Vinicius Veras Bandeira

| 114.9k xp | 40 posts

06/07/2022

Complementando...

Separei a lógica dos arquivos css da seguinte forma:

Estilos que serão utilizados em mais do que 1 página, como por exemplo: header e footer. São inseridos no arquivo principal - style.css e para fazer o "miolo" das páginas, crio um arquivo css separado, por exemplo: style-contatos.css

style.css

header {
    background: #bbbbbb;
    padding: 10px 0;
}

.caixa{

    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;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}

a:link {
    color: #000000;
}

a:visited {
    color: #000000;
}

a:hover {
    color: #ffffff;
}

a:active {
    color: darkcyan;
}

.lista-produtos{

    width: 940px;
    margin: 0 auto;
    padding: 50px 0;
}

.lista-produtos h2{

    font-size: 30px;
    font-weight: bold;
}

.lista-produtos li {
    display: inline-block;
    text-align: center ;
    width: 30%;
    vertical-align: top;
    border: 2px solid #000000;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border-radius: 10px;
}

.lista-produtos li:hover{

    border: 4px solid red;
    cursor: pointer;
}

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


.lista-produtos li:active{

    border: 4px solid #088c19;
    cursor: pointer;
}

.produto-descricao{

    font-size: 18px;
}

.produto-preco{

    font-size: 22px;
    font-weight: bold;
    margin: 10px 0 0 0;
}

footer{

    text-align: center;
    background: url("../images/produtos/bg.jpg");
    padding: 20px;
}

.copyright{

    color: #ffffff;
    font-size: 13px;
    margin: 20px 0;

}

main{

    width: 940px;
    margin: 0 auto;

}

por Lorena Garcia

| 8219.2k xp | 12018 posts

Alura Scuba Team Suporte Educacional

11/07/2022

Oi Antonio, tudo bem?

Que massa que você está praticando e gostei do modo como você organizou seus arquivos, acho que fica mais fácil para "nos encontrarmos" depois.

Parabéns pela dedicação. (:

Bons estudos.

Mergulhe em programação