Meu Projeto final ficou assim... | HTML5 e CSS3 parte 3: trabalhando com formulários e tabelas

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por JÔNATAS CASSIANO GOUVEIA DE ARAÚJO

| 56.8k xp | 62 posts

professor

minha page tá saindo... valeu professor, tá sendo massa aprender mais e mais! metade superior Metade inferior html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
        <title> Contatos - Peixe Personal</title>
        <link rel="stylesheet" href="reset.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <h1 class="titulo-principal">Peixe Personal LTDA.</h1>
            <div class="caixa">
                <h1><img class="pps" src="peixepersonal.png" alt="Logo Peixe Personal"></h1>
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="produtos.html">Serviços</a></li>
                        <li><a href="contato.html">Contato</a></li>
                        <li><a href="http://www.saudeemmovimento.com.br/saude/avaliation_fisica_i.htm">Avaliação Física</a></li>                
                    </ul>
                </nav>
            </div>
        </header>

        <main>
            <form action="">

                <label for="normesobrenome">Nome e Sobrenome</label>
                <input type="text" id="nomeesobrenome" class="input-padrao" required placeholder="Digite seu nome">

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

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

                <label for="mensagem">Mensagem</label>
                <textarea name="mensagem" id="mensagem" cols="70" rows="10" class="input-padrao" required placeholder="Escreva sua dúvida e quais informações deseja receber..."></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-wharsapp"><input type="radio" name="contato" value="whatsapp" id="radio-wharsapp" checked>Whatsapp</label>

                </fieldset>

                <fieldset>
                    <legend>Qual horário prefere ser atendido?</legend>
                    <select name="" id="">
                        <option value="">Manhã</option>
                        <option value="">Tarde</option>
                        <option value="">Noite</option>
                    </select>
                </fieldset>
                <label class="checkbox"><input type="checkbox" checked> Gostaria de receber nossas novidades por email?</label>
                <input type="submit" value="Enviar Formulário" class="enviar">

            </form>
            <table>
                <thead>
                    <tr>
                        <th colspan="1">Tabela de Horários </th>
                        <th> Kinesis Funcional</th>
                    </tr>
                    <tr>
                        <th class="th">Dias</th>
                        <th class="th">Horários</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Segunda-feira</td>
                        <td>17:30 - 20:30</td>
                    </tr>
                    <tr>
                        <td>Terça-feira</td>
                        <td>17:30 - 20:30</td>
                    </tr>
                    <tr>
                        <td>Quinta-feira</td>
                        <td>17:30 - 20:30</td>
                    </tr>
                    <tr>
                        <td>Sexta-feira</td>
                        <td>18:50 - 20:00</td>
                    </tr>
                </tbody>
            </table>
        </main>

        <footer>
            <img src="personalBranco.png" alt="Logo Peixe Personal">
            <p class="copyright">&copy;Copyright Peixe Personal LTDA - 2022</p>
        </footer>
    </body>
</html>

2 respostas

por JÔNATAS CASSIANO GOUVEIA DE ARAÚJO

| 56.8k xp | 62 posts

professor

26/06/2022

*{
    max-width: 100%;
}
header{
    background: linear-gradient(#BBBBBB, #ffffff) ;
    padding: 20px 0;
    background: url("logoh.png");
}
h1{
    display: flex;
    font-weight: normal;
    font-size: 16px;
}
.caixa{

    position: relative;
    width: 1280px;
    margin: 0 auto;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

nav{
    display: inline-flex;
    position: absolute;
    top: 45%;
    right: 0;

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

nav a:hover{
    transform: scale(1.1);
    transition: .2s;
    background: rgb(136, 240, 158);
}

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

.titulo-principal{
    padding-left: 20px;
}
.produtos{
    width: 1280px;
    margin: 0 auto;
    padding: 50px 0;
}
.produtos li{
    display: inline-block;
    text-align: center;
    width: 22%;
    vertical-align: top;

    margin: 0.8% 1.2%;
    padding: 30px 20px;
    box-sizing: border-box;

    border: 2px solid #000;
    border-radius: 20px;
}

#personal:hover{
    transform: scale(1.2);
    transition: .3s;
    background: #BBffbb;
}
#consultoria:hover{
    transform: scale(1.2);
    transition: .3s;
    background: #fbff06;

}
.funcional:hover{
    transform: scale(1.2);
    transition: .3s;
    background: #f5a237;
}
#avaliacao:hover{
    transform: scale(1.2);
    transition: .3s;
    background: #a186b3;
}
.produtos h2{
    font-size: 30px;
    font-weight: body;
}
.produto-descricao{
    font-size: 18px;
}
.produto-linha{
    opacity: 0%;
}
.produto-preco{
    font-size: 22px;
    font-weight: bold;
    margin-top: 10px;
}
@media (max-width: 800px){
    .pps{
        display: none;
    }
    .caixa{

        text-align: center;
        font-size: 100%;
        vertical-align: top;
        width: 100%;
        height: 150px;
    }

    .produtos li{
        margin-top: 0%;
        width: 100%;
    }
}
footer{
    text-align: center;
    background: url("logof.png");
    padding: 40px 0;
}
.copyright{
    color: #FFF;
    font-size: 13px;
    margin-top: 20px;
}
main{
    width: 1280px;
    margin: 0 auto;
}
form{
    margin: 40px 0;
    background: #eeeeee;
    padding: 2%;
}
form label, form legend{
    display: block;
    font-size: 20px;
    margin: 0 0 10px;
}
.input-padrao{
    display: block;
    margin: 0 0 20px;
    padding: 10px 25px;
    width: 50%;
}
.input-padrao:hover{
    transform: scale(1.02);
    transition: 1s transform;
}

.checkbox{
    margin: 20px 0;

}
/*form input, form textarea*/

.enviar{
    width: 40%;
    padding: 15px 0;
    background: orange;
    color: white;
    font-weight: bold;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.enviar:hover{
    background: darkorange;
    transform: scale(1.1);
    transition: 1s transform, 1s background;


}
table{
    margin: 20px 0 40px;
}
thead{
    background: black;
    color: white;
    font-weight: bold;
    border: 1px solid black;

}
.th{
    background: orange;
    font-family: roboto;
}
th{
    padding: 8px 15px ;
    font-family: roboto;
}
td, .th{
   border: 1px solid #555555; 
   padding: 8px 15px ;
}
td{
    text-align: center;
}

solução!

por Lorena Garcia

| 8288.1k xp | 12128 posts

Alura Scuba Team Suporte Educacional

27/06/2022

Oi Jônatas, tudo bem?

Parabéns por praticar com um projeto personalizado! Não deixe de publicar nas suas redes socias e marcar a Alura, amamos ver o projeto de todos os estudantes no ar. :D

Te vejo no próximo curso hein?

Abraços.

Mergulhe em programação