Luiz_Augusto_Silveira

Estou tendo problemas em alinhar o primeiro link do menu igual aos outros e também estou com um problema de alinhamento entre um campo de email e um botão da minha newsletter. Alguém poderia me ajudar a arrumar esses problemas. <!-- Topo do site --> <section class="topodosite"> <div class="logomarca"> <img src="_imagens/logomarcaempresa.jpg" alt="LogoMarcadaempresa"> </div> <nav class="menu"> <a href="#" id="botaomenu" class="btn-menu"><i class="faz fa-bars fa-lg"></i></a> <ul class="menunavegacaoprincipal"> <li><a href="">Home</a></li> <li><a href="">Empresa</a></li> <li><a href="">Serviços</a></li> <li><a href="">Blog</a></li> <li><a href="">Projeto</a></li> <li><a href=""><span>Nossos</span> Produtos</a></li> <li><a href="">Contato</a></li> </ul> </nav> </section> <!-- Newsletter do site --> <div class="newsletter"> <h1>Newsletter</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p> <form action=""> <input type="email" placeholder="Digite seu email!"> <button type="submit"><i class="faz fa-paper-plane"></i></button> </form> </div> /* Código css visitando um aparelho que possua um laergura de 320px*/ /* Topo do site */ .topodosite{ width:100%; height:160px; margin:0 auto; background-color: #f8f8f8; display: flex; flex-direction: row; flex-wrap:wrap; justify-content: space-between; align-items: center; position: relative; } .logomarca{ width:60%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; float: left; margin-left: 20px; } /* Menu de navegação principal do topo do site*/ /*Mostra o botão de abrir e fechar o menu do mouse na menor versão de dispositivo possível*/ .btn-menu{ width:46px; height:46px; font-size: 1.2em; border: 1px solid rgba(0,0,0,0.50); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; margin-bottom: 4%; color: #45c4e9; background-color: rgba(255,255,255,1); margin-right: 20px; float: right; } .menunavegacaoprincipal{ width:100%; height:auto; display:none; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; position:absolute; top:160px; left:0; padding: 5% 5%; background-color:#f8f8f8; overflow: auto; z-index: 999; } .menunavegacaoprincipal li{ width:100%; height: auto; border:0.5px solid rgba(255,255,255,1); } .menunavegacaoprincipal li a{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 100%; color: rgba(0,0,0,1); background-color:#45c4e9; padding: 3%; font-size: 1.7em; } .menunavegacaoprincipal li a:hover{ color:rgb(255,255,255); } /* Newsletter do site */ .newsletter{ width:100%; height:auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-line-pack: center; align-content: center; } .newsletter h1{ width:100%; font-size:36px; } .newsletter form{ width:100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 10% 0; text-align: left; } .newsletter form input{ width:80%; height:46px; background-color: rgb(255,255,255); } .newsletter form button{ width:20%; height:46px; color:rgb(255,255,255); background-color: #45c4e9; border:none; font-size: 14px; } .newsletter form button:hover{ width:20%; height:46px; color:rgb(255,255,255); background-color: #424141; border:none; font-size: 14px; cursor: pointer; } @media only screen and (min-width: 1024px) { /* Topo do site */ .topodosite{ width:90%; height: 100px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; } .logomarca{ width:200px; margin-left: 10px; } .logomarca img{ width: 100%; } .menu{ height: 100%; } .menunavegacaoprincipal{ height:100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: none; align-items: center; } .menunavegacaoprincipal li { height: 100px; width: auto; } .menunavegacaoprincipal li:first-child { margin-left: 0; } .menunavegacaoprincipal li:last-child { margin-right:0; } .menunavegacaoprincipal li a{ width: auto; height: 100px; } .menunavegacaoprincipal li a:first-child{ margin: none; } }

Eu uso sublimeText 3. Mas acho que foi mais falta de atenção minha e inexperiência. (Sou novo na programação web).

Você poderia me informar onde eu fechei incorretamente as minhas tags HTML?

Eu comecei contruindo um site para celular utilizando um @media only screen and (max-device-width:320px){ } para smartphones. Quando fui desenvolver para Desktop ele continuou aplicando alguns dos efeitos do media queria acima, mesmo a resolução do dispositivo sendo maior. (Eu utilizei a ferramenta de desenvolvedor do Google Chhrome para testar a resolução da tela). Quando tentava adaptar o site para o Desketop alguns efeitos eram aplicados e outros não(ficou uma bagunça). Alguém poderia me ajudar? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Página Inicial do site</title> <!-- Estilo da página inicial do site --> <!--<link rel="stylesheet" href="_css/index.css">--> <link rel="stylesheet" href="_css/index.css"> <!-- Ícones usados no site --> <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"> <!-- Biblioteca JS w3.js --> <script src="https://www.w3schools.com/lib/w3.js"></script> <!-- Biblioteca Jquery --> <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script> </head> <body> <!--================== CORPO DOCUMENTO HTML ==================--> <!-- ÂNCORA PARA TRAZER ATÉ O TOPO DA PÁGINA --> <a name="topo"></a> <!-- Div que conterá todas as partes do site --> <div id="layout"> <header class="header"> <p> <span><i class="far fa-envelope"></i></span>[email protected] </p> <p> <span><i class="faz fa-phone-volume"> </i></span>Telefone: (00) 0000-0000 </p> <p class="destaque"> Fique conectado conosco: <span class="icones_header"> <a href=""><i class="fab fa-twitter"></i></a> <a href=""><i class="fab fa-facebook-f"></i></a> <a href=""><i class="fab fa-google-plus-g"></i></a> <a href=""><i class="fab fa-linkedin-in"></i></a> </span> </p> </header> <section class="topodosite"> <div class="logomarca"> <h1>Logo Marca</h1> </div> <nav class="menu"> <a href="#" id="botaomenu" class="btn-menu"><i class="faz fa-bars fa-lg"></i></a> <ul id="imenu"> <li><a href="">Home</a></li> <li><a href="">Empresa</a></li> <li><a href="">Serviços</a></li> <li><a href="">Blog</a></li> <li><a href="">Projeto</a></li> <li><a href="">Nossos Produtos</a></li> <li><a href="">Contato</a></li> </ul> </nav> </section> <section class="slideimagens"> <img class="slide" src="https://cdn.pixabay.com/photo/2017/01/16/23/10/snow-leopard-1985510_1280.jpg" alt="Legenda da primeira imagem"> <img class="slide" src="https://cdn.pixabay.com/photo/2018/02/16/22/08/bird-3158784_1280.jpg" alt="Legenda da segundo imagem"> <img class="slide" src="https://cdn.pixabay.com/photo/2018/02/09/21/46/rose-3142529_1280.jpg" alt="Legenda da terceira imagem"> <div class="botoesslideshow"> <button class="esquerdo" onclick="meuslideshow.previous()"><</button> <button class="direito" onclick="meuslideshow.next()">></button> </div> <!-- Efeito de SlideShow com biblioteca w3.js--> <script> var meuslideshow = w3.slideshow(".slide", 0); </script> </section> <section class="conteudo"> <div class="mensagem-boas-vindas bg-white"> <article> <header> <h1>Bem-Vindos</h1> </header> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </article> </div> <!--Artigos Empresa--> <section class="artigos_empresa bg-white"> <article class="artigo"> <img src="https://cdn.pixabay.com/photo/2017/01/16/23/10/snow-leopard-1985510_1280.jpg" alt=""> <div> <a><h1>titulo1</h1></a> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> </article> <article class="artigo"> <img src="https://cdn.pixabay.com/photo/2017/01/16/23/10/snow-leopard-1985510_1280.jpg" alt=""> <div> <h1>titulo2</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> </article> <article class="artigo"> <img src="https://cdn.pixabay.com/photo/2017/01/16/23/10/snow-leopard-1985510_1280.jpg" alt=""> <div> <h1>titulo2</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> </article> </section> </section> <!-- Área de slides dos serviços oferecidos pela empresa --> <section class="slideservicos"> <h1>Nossos Serviços <div class="controles_slide_servicos"> <button onclick="slideshowservicos.previous()"><</button> <button onclick="slideshowservicos.next()">></button> </div> </h1> <hr> <div class="servicos"> <article class="servico"> <header> <span><i class="far fa-chart-bar"></i></span> <h1>Nome Serviço</h1> </header> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <a href="">Leia Mais</a> </article> <article class="servico"> <header> <span><i class="fab fa-accusoft"></i> </span> <h1>Nome Serviço2</h1> </header> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <a href="">LEIA MAIS</a> </article> </div> <script> /* Efeito que cria o slide show com todos os elementos que possuem a classe .servico */ var slideshowservicos = w3.slideshow(".servico", ); </script> </div> </section> <section class="nossaempresa BGwhite"> <article> <h1>Sobre nossa empresa</h1> <img src="https://cdn.pixabay.com/photo/2018/03/06/21/09/easter-3204589_1280.jpg" alt=""> <h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <h3 class="diferente">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <a href="#" title="informações sobre a empresa"> READ MORE</a> <div class="vantagens_empresa"> <article class="vantagem"> <header> <span><i class="faz fa-rocket"></i></span> <h3>Muita Experiência</h3> </header> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </article> <article class="vantagem"> <header> <span><i class="faz fa-rocket"></i></span> <h3>Trabalhos Inovadores</h3> </header> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </article> <article class="vantagem"> <header> <span><i class="faz fa-rocket"></i></span> <h3>Empresa Certificada</h3> </header> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </article> </div> </article> </section> <!-- Informações de contato da empresa --> <section class="detalhesdecontato bg-black"> <div class="infocontato"> <h1>Detalhes de Contato</h1> <p class="cordiferente">Escolha uma das formas de contato abaixo e por favor entre em contato conosco.</p> <p><span><i class="faz fa-phone-volume"></i></span>Telefone: (00) 0000-0000</p> <p><span><i class="faz fa-at"></i></span>[email protected]</p> <p><span><i class="faz fa-compass"></i></span>Rua, Cidade, pais</p> </div> <form action="#" method="POST" class="formulariocontatoprincipal"> <h1>Esclareça alguma dúvida conosco.</h1> <input type="text" placeholder="Nome*" required id="nomecliente"/> <input type="tel" id="numerotelefonecliente" placeholder="Telefone*" required/> <input type="email" placeholder="Email*" id="emailcliente" required/> <input type="text" placeholder="Assunto*" required id="escolhaassuntocliente" list="listaassuntos"/> <datalist id="listaassuntos"> <option value="Assunto1"></option> <option value="Assunto2"></option> <option value="Assunto3"></option> <option value="Assunto4"></option> <option value="Assunto5"></option> </datalist> <input type="submit" id="botaoenviarmensagem" value="Enviar Agora"/> </form> </section> <!-- úLTIMAS POSTAGENS DO BLOG--> <section class="ultimas_postagens_blog BGwhite"> <h1>últimas postagem do blog</h1> <div class="conteiner_ultimas_postagens_blog"> <article class="ultima_postagem_blog"> <header><img src="https://cdn.pixabay.com/photo/2018/01/31/09/42/people-3120717_1280.jpg" alt=""> <h5 class="data_postagem">17 Março</h5> </header> <div><h3>By Admin | Categoria</h3></div> <a href=""><h3>Título da postagem</h3></a> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <footer class="rodape_ultima_postagem_blog"> <a href="#" title="Leia mais...">Leia Mais</a> <a href="#" title="comentários da postagem"><span><i class="far fa-comments"></i></span>Comentários</a> </footer> </article> <article class="ultima_postagem_blog"> <header><img src="https://cdn.pixabay.com/photo/2018/01/31/09/42/people-3120717_1280.jpg" alt=""> <h5 class="data_postagem">17 Março</h5> </header> <div><h3>By Admin | Categoria</h3></div> <a href=""><h3>Título da postagem</h3></a> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <footer class="rodape_ultima_postagem_blog"> <a href="#" title="Leia mais...">Leia Mais</a> <a href="#" title="comentários da postagem"><span><i class="far fa-comments"></i></span>Comentários</a> </footer> </article> <article class="ultima_postagem_blog"> <header><img src="https://cdn.pixabay.com/photo/2018/01/31/09/42/people-3120717_1280.jpg" alt=""> <h5 class="data_postagem">17 Março</h5> </header> <div><h3>By Admin | Categoria</h3></div> <a href=""><h3>Título da postagem</h3></a> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <footer class="rodape_ultima_postagem_blog"> <a href="#" title="Leia mais...">Leia Mais</a> <a href="#" title="comentários da postagem"><span><i class="far fa-comments"></i></span>Comentários</a> </footer> </article> </div> </section> <!-- últimos projetos feitos pela empresa --> <section class="ultimos_projetos_empresa BGcinzaclaro"> <h1>últimos Projetos</h1> <div class="galeria_ultimos_projetos_empresa"> <a href=""><img src="https://cdn.pixabay.com/photo/2018/03/10/09/45/businessman-3213659_1280.jpg" alt=""></a> <a href=""><img src="https://cdn.pixabay.com/photo/2018/03/10/09/49/city-3213676_1280.jpg" alt=""></a> <a href=""><img src="https://cdn.pixabay.com/photo/2017/10/27/00/53/ghost-2892905_1280.jpg" alt=""></a> <a href=""><img src="https://cdn.pixabay.com/photo/2018/03/10/09/45/businessman-3213659_1280.jpg" alt=""></a> <a href=""><img src="https://cdn.pixabay.com/photo/2017/10/27/00/53/ghost-2892905_1280.jpg" alt=""></a> <a href=""><img src="https://cdn.pixabay.com/photo/2018/03/10/09/45/businessman-3213659_1280.jpg" alt=""></a> </div> <!-- Questões Frequentes sobre a empresa --> <section class="perguntasfrequentes BGcinzaclaro"> <h1>Perguntas Frequentes</h1> <hr> <div onclick="efeitosanfona(1);"> <h4 onclick="efeitosanfona(1);" ><span onclick="efeitosanfona(1);"><i class="faz fa-plus-circle"></i></span> Título Pergunta Frequ</h4> <div id="divalvo1"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> </div> <div onclick="efeitosanfona(2);"> <h4 onclick="efeitosanfona(2);"><span onclick="efeitosanfona(2);" ><i class="faz fa-plus-circle"></i></span> Título Pergunta Frequ</h4> <div id="divalvo2"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> </div> <div onclick="efeitosanfona(3);"> <h4 onclick="efeitosanfona(3);"><span onclick="efeitosanfona(3);"><i class="faz fa-plus-circle"></i></span> Título Pergunta Frequ</h4> <div id="divalvo3"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> </div> <script> /* Efeito sanfona nas perguntas frequentes */ function efeitosanfona(FAQ){ switch(FAQ){ case 1: $("#divalvo1").toggle(); break; case 2: $("#divalvo2").toggle(); break; case 3: $("#divalvo3").toggle(); break; } </script> </section> </section> <section class="slide_parceiros"> <h1> Parceiros <div class="controles_slide_parceiros"> <button onclick="slideParceiros.previous()"><</button> <button onclick="slideParceiros.next()">></button> </div> </h1> <hr> <div class="banner_parceiro"> <a href="" class="parceiro_empresa"><img src="https://cdn.pixabay.com/photo/2018/03/13/02/43/eye-3221498_1280.jpg" alt="" class="bannerparceiro"></a> <a href="" class="parceiro_empresa"><img src="https://pixabay.com/pt/coruja-neve-coruja-da-neve-bird-3184032/" alt="" class="bannerparceiro"></a> <a href="" class="parceiro_empresa"><img src="https://cdn.pixabay.com/photo/2018/03/08/04/18/waters-3207802__480.jpg" alt="" class="bannerparceiro"></a> </div> <script> var slideParceiros = w3.slideshow(".bannerparceiro", 0); </script> </section> <!-- Rodape do site --> <footer class="rodapedosite"> <img src="" alt="LogoMarcaEmpresa"> <p>Um pouco sobre a experiência da empresa.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <div class="linksuteis"> <h1>Links úteis</h1> <ul> <li><span><i class="faz fa-angle-right"></i></span><a href="">Link1</a></li> <li><span><i class="faz fa-angle-right"></i></span><a href="">Link2</a></li> <li><span><i class="faz fa-angle-right"></i></span><a href="">Link3</a></li> <li><span><i class="faz fa-angle-right"></i></span><a href="">Link4</a></li> <li><span><i class="faz fa-angle-right"></i></span><a href="">Link5</a></li> <li><span><i class="faz fa-angle-right"></i></span><a href="">Link6</a></li> <li><span><i class="faz fa-angle-right"></i></span><a href="">Link7</a></li> <li><span><i class="faz fa-angle-right"></i></span><a href="">Link8</a></li> </ul> </div> <!-- Newsletter do site --> <div class="newsletter"> <h1>Newsletter</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p> <form action=""> <input type="email" placeholder="Digite seu email!"> <button type="submit"><i class="faz fa-paper-plane"></i></button> </form> </div> <div class="redessociais"> <h1>Siga-nos:</h1> <ul class="menu_redes_sociais"> <li><a href=""><i class="fab fa-facebook-f"></i></a></li> <li><a href=""><i class="fab fa-twitter"></i></a></li> <li><a href=""><i class="fab fa-google-plus-g"></i></a></li> <li><a href=""><i class="fab fa-linkedin-in"></i></a></li> </ul> </div> <div class="menu_fim_rodape"> <p> Copyright &copy 2018 Todos os direitos Reservados</p> <ul> <li><a href="">Home</a></li> <li><a href="">Serviços</a></li> <li><a href="">Blog</a></li> <li><a href="">Produtos</a></li> <li><a href="">Contato</a></li> </ul> </div> </footer> </div> <script > /* Efeito de abrir e fechar menu do site */ var botaomenu = document.getElementById("botaomenu"); botaomenu.onclick = function(){ $("#imenu").toggle(); } </script> </body> @charset "UTF-8"; *{ margin:0; padding:0; outline: none; box-sizing: border-box; } h1{ font-size:36px; } h3{ font-size: 20px; } ul{ list-style: none; } a{ text-decoration: none; color:rgb(0,0,0); } body{ font-size: 16px; } .bg-white{ background-color: rgb(255,255,255); } .bg-black{ background-color: rgb(0,0,0); } #layout{ width:999px; height:auto; background-color: rgb(242,242,242); } /* Header do site*/ .header{ width:100%; height:50px; background-color: rgb(0,0,0); color:rgb(255,255,255); display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: center; } .header p{ width: auto; height:auto; } .header p span{ margin-right: 8px; } .header p:last-child span{ margin-right: 0; margin-left: 10px; } .header p:last-child span a{ color:white; margin-left: 10px; } .header p:last-child span a:first-child{ color:white; margin-left: 0; } .header p:last-child span a:hover{ color:#45c4e9; } /* Topo do site */ .topodosite{ width:90%; margin:0 auto; background-color: #f8f8f8; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; } .logomarca{ width:35%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; } /* Esconder o botão de abrir e fechar menu nessa versão */ .btn-menu{ display: none; } /* Estilizando e configurando menu do topo do site */ .menu { width:70%; height:100px; } .menu ul{ width:100%; height:100%; list-style: none; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: center; } .menu ul li { display: inline-block; border-bottom: 3px solid inherit; height:100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; } .menu ul li a{ width:auto; height: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; } .menu ul li a:hover{ border-bottom: 3px solid #45c4e9; transition: all 200ms ease-in 0; color: rgb(69, 193, 233); } /* EStilo para o slideshow abaixo do topo */ .slideimagens{ display: none; } /*===========Conteúdo do site===============*/ .conteudo{ width:100%; height:auto; padding: 0 5%; } /* Mensagem de boas-vindas do site */ .mensagem-boas-vindas{ width:100%; height:auto; text-align: center; padding: 4%; } /* Artigos do blog da empresa na página principal do site */ .artigos_empresa{ width:100%; height:auto; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: flex-start; padding: 0 5%; padding-bottom: 30%; } /*Configuração de cada artigo */ .artigo{ width:auto; height:auto; display: flex; flex-direction: row; flex-wrap: wrap; position: relative; margin-left: 4%; } .artigo img{ width:100%; height:195px; } .artigo div{ width:90%; background-color: rgb(255,255,255); border: 1px solid rgba(0,0,0, 0.20); border-top: 4px solid rgb(0,0,0); padding: 4%; text-align: center; position: absolute; top:160px; } .artigo:hover div{ border-top: 4px solid rgb(61,193,233); transition: border-top 200ms ease-in-out 0; } .artigo:hover h1{ color: rgb(61,193,233); transition: color 200ms ease-in-out 0; } .slideservicos{ display: none; } /*Informações sobre a empresa */ .nossaempresa{ width:100%; height:auto; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; } .nossaempresa article{ width:90%; margin:0 auto; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-content: center; } .nossaempresa article h1,img,h3,p,a{ margin:15px 0; } .nossaempresa h1{ width:100%; text-align: center; } .nossaempresa img{ width:100%; height:auto; } .nossaempresa article h3{ width:100%; text-align: left; } .nossaempresa article h3.diferente{ color: rgb(61,193, 233); } .nossaempresa article p{ width:100%; text-align: justify; line-height: 25px; } .nossaempresa article a{ width:193px; height:40px; background-color: #45c4e9; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; border-radius: 50px; padding: 3% 0; color: rgb(255,255,255); cursor: pointer; border: 3px solid rgb(61, 193, 233); } .nossaempresa article a:hover{ background-color: rgb(255,255,255); color: rgb(61,193,233); } /* VANTAGENS DA EMPRESA */ .vantagens_empresa{ width:100%; height:auto; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; margin: 15px 0; } .vantagem{ width: 25%; height:auto; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; margin-left: 3%; border: 1px solid rgba(0,0,0,0.20); padding: 2.5%; } .vantagem:first-child{ margin-left: 0; } .vantagem header{ width:100%; height:auto; display: flex; flex-direction: row; flex-wrap:nowrap; justify-content: space-between; align-items: center; } .vantagem header span{ font-size: 2em; margin: 0 10px; color:rgb(61,193,233); } .vantagem header h3{ width:80%; margin-left: 10px; font-size: 20px; } .vantagem p{ width:100%; height:auto; text-align: justify; } .vantagem:hover{ border: 1px solid rgba(61,193,233); } /* Detalhes de contato da empresa */ .detalhesdecontato{ width:100%; height:auto; padding: 5% 5%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; color:white; } .infocontato{ width:35%; height:auto; background-color: rgba(0,0,0, 0.80); padding:4%; } .infocontato h1{ } .infocontato p{ line-height: 25px; width:100%; } .cordiferente{ color:#848484; } .infocontato p span{ margin-right: 15px; color:rgb(61,193,233); } .formulariocontatoprincipal{ width:70%; height:auto; display:flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: center; } .formulariocontatoprincipal h1{ margin-bottom: 45px; } .formulariocontatoprincipal input[type="text"],input[type="email"],input[type="tel"]{ width:45%; margin-top: 35px; height:40px; padding:0 2.5%; border:1px solid rgba(230,230,230,0.40); background-color: rgb(0,0,0); color:rgb(255,255,255); font-weight: 700; } .formulariocontatoprincipal input:focus{ border: 1px solid rgb(61,193,233); } .formulariocontatoprincipal input[type="submit"]{ width:165px; height:auto; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; background-color: rgb(61,193,233); color:rgb(255,255,255); border: 3px solid #45c4e9; border-radius: 50px; cursor: pointer; padding:2.3%; font-size: 1em; font-weight: 700; margin-top: 25px; } .formulariocontatoprincipal input[type="submit"]:hover{ background-color:rgb(255,255,255); color: rgb(61,193,233); } /* Últimas postagens do blog na página principal*/ .ultimas_postagens_blog{ width:100%; height:auto; padding:0 5%; } .ultimas_postagens_blog h1{ width:100%; text-align: center; margin-bottom:25px; } .conteiner_ultimas_postagens_blog{ width:100%; height:auto; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; } .ultima_postagem_blog{ width:30%; border:1px solid rgba(0,0,0,0.20); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; text-align: justify; } .ultima_postagem_blog div{ width:100%; } .ultima_postagem_blog div h3{ width:100%; padding-left: 5%; color:rgb(0,0,0); } .ultima_postagem_blog a{ width:100%; padding-left:5%; } .ultima_postagem_blog a:hover h3{ color:rgb(61,193,233); } .ultima_postagem_blog p{ width:100%; padding:2% 5%; } .rodape_ultima_postagem_blog{ width:100%; height:auto; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: :space-around; align-items: center; } .rodape_ultima_postagem_blog a{ width: 50%; text-align: center; } .rodape_ultima_postagem_blog a:first-child:hover{ color:#45c4e9; } /* Últimos projetos realizados pela empresa */ .ultimos_projetos_empresa{ width:100%; height:auto; display: flex; flex-direction: row; flex-wrap: wrap; } .ultimos_projetos_empresa h1{ display: block; width:100%; text-align: left; } .galeria_ultimos_projetos_empresa{ width:100%; height:auto; display: flex; flex-direction: row; flex-wrap:wrap; justify-content: space-between; align-content: center; } .galeria_ultimos_projetos_empresa a{ width:30%; height:auto; } @media only screen and (max-width: 320px) { /*---- RESET---- */ *{ margin:0; padding:0; -webkit-box-sizing: border-box; box-sizing: border-box; } ul{ list-style: none; } a{ text-decoration: none; } h1{font-weight: 400; color:rgba(0,0,0,1);line-height: 40px;} h3{font-size: 20px; color:rgba(0,0,0,1); font-weight: 500;} body{ color:#848484; font-size: 16px; line-height: 26px; font-weight: 300; } /* Div que conterá todas as partes do site */ #layout{ width:100%; height: auto; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: justify; align-content: space-between; text-align: center; } /* Header do site */ .header { width:100%; height:auto; background-color: black; color:rgba(255,255,255,1); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-direction:row; flex-direction:row; -ms-flex-wrap: wrap; flex-wrap: wrap; font-size: 1.2em; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; text-align: center; padding: 4% 2%; } .header div{ width: 100%; height:auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-pack: distribute; justify-content: space-around; -ms-flex-line-pack: center; align-content: center; max-width: 100%; margin-top: 4%; } .header div span{ width:100%; font-size: 1em; } .header div p{ width:100%; } .header div p span{ margin-right: 7px; } .icones_header{ margin-left: 7px; margin-right: 0; } .icones_header a{ color: rgba(255,255,255,1); } /* Topo do site */ .topodosite{ width:100%; height:150px; background-color: rgba(230,230,230,1); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 2%; position: relative; } .logomarca { width:100%; height:80px; } .menu{ width:100%; height: 70px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow:auto; z-index: 999; } .btn-menu{ width:46px; height:46px; font-size: 1.2em; border: 1px solid rgba(0,0,0,0.50); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; margin-bottom: 4%; color: #45c4e9; background-color: rgba(255,255,255,1); margin-right: 2.5%; } .menu ul{ width:100%; height:auto; display:none; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; position:absolute; top:150px; left:0; padding: 5% 5%; background-color: rgba(230,230,230,1); } .menu ul li{ width:100%; height: auto; border:0.5px solid rgba(255,255,255,1); } .menu ul li a{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 100%; color: rgba(0,0,0,1); background-color:#45c4e9; padding: 3%; font-size: 1.7em; } .menu ul li a:hover{ display: -webkit-box; display: -ms-flexbox; display: flex; color: rgba(255,255,255,1); cursor: pointer; } /* Slideshow onde aparecerá algumas imagens relacionada a empresa */ .slideimagens{ width:100%; height:213px; background-color:rgba(0, 0, 0, 1); position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .slideimagens img{ width: 100%; height:100%; } .botoesslideshow{ position: absolute; width:100%; height:auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 4%; } .botoesslideshow button{ width: 40px; height:40px; border:2px solid rgba(255,255,255,1); background: rgba(201,201,201,0.75); font-size: 1.5em; color: rgba(255,255,255,1); outline: none; } .botoesslideshow button:hover{ border:2px solid #45c4e9; background: rgba(0,0,0,1); font-size: 1.5em; cursor: pointer; } /*Conteúdo do site */ .conteudo{ width:100%; height:auto; padding: 0 5%; } .mensagem-boas-vindas{ width:100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack:center; align-content:center; text-align: center; padding-top: 20 height:200px; max-width: 100%; margin-top: 65%; }%; } .mensagem-boas-vindas header{ width:100%; } .mensagem-boas-vindas header h1{ font-size: 32px; font-weight: 400; } .mensagem-boas-vindas p{ width:100%; font-size: 1.5em; margin-top: 10%; } .artigo{ width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; position: relative; margin-top: 15%; } .artigo img{ width: 100%; .artigo div{ width:90%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; text-align: center; border: 1px solid rgba(0,0,0,0.20); position: absolute; top:328px; background-color: rgba(255,255,255,1); padding: 4% 0; margin-top: 3px solid rgba(0,0,0,0.50); } .artigo h1{ width:100; margin: 0 0 10px; font-size: 36px; } .artgio p{ width:100%; margin: 0 0 10px; } /* Slides dos serviços oferecidos pela empresa */ .slideservicos{ width:100%; height: auto; margin-top: 40%; display: -webkit-box; display: -ms-flexbox; display: flex; padding-top: 20%; background-color: rgba(230,230,230,0.50); } .slideservicos h1{ width:100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size:36px; padding: 0 3%; } .controles_slide_servicos{ } .controles_slide_servicos a{ font-size: 22px; color:rgb(0,0,0); } .servicos{ width: 100%; height:auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; background-color: rgba(230,230,230,0.50); } .servico{ width:90%; height:auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient:horizontal; -webkit-box-direction:normal; -ms-flex-direction:row; flex-direction:row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; border: 1px solid rgba(0,0,0,0.50); margin-top: 15%; } .servico header{ width: 100%; height:159px; background-color: rgba(255,255,255,1); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; } .servico header span{ width: 100%; font-size: 3.5em; } .servico header h1{ } .servico p{ width:100%; height: auto; margin: 8% 0; line-height: 30px; } .servico a{ width:132px; height:45px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: rgba(0,0,0,1); border: 1px solid rgba(0,0,0,0.50); border-radius: 39px; margin-bottom:12%; margin-left: 25.5%; font-weight: 700; } /* Área sobre informações da empresa */ .nossaempresa{ width:100%; height:auto; background-color:rgba(255,255,255,1); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack:center; align-content:center; text-align: justify; margin: auto; padding: 20% 0; } .nossaempresa article{ width:90%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack:center; align-content:center; margin:auto; }.nossaempresa article h1{ font-size: 36px; font-weight: 400; text-align: center; width:100%; } .nossaempresa article img{ width:100%; height:auto; max-width: 100%; margin: 10% 0; } .nossaempresa article h3.diferente{ color: #45c4e9; } .nossaempresa article p{ color:#848484; line-height: 25px; } .nossaempresa article h1, img, h3, p{ margin: 5% 0; } .nossaempresa article a{ width:70%; height :50px; background-color: #45c4e9; color:rgb(255,255,255); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap:nowrap; flex-wrap:nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 20%; border-radius: 150px; border: 3px solid #45c4e9; position: relative; margin-right:30%; cursor: pointer; } .nossaempresa article a:hover{ background-color: rgb(255,255,255); color: #45c4e9; -webkit-transition: all 1s ease-in 0s; -o-transition: all 1s ease-in 0s; transition: all 1s ease-in 0s; } .vantagem{ width: 100%; height:auto; border: 1px solid rgba(0,0,0,0.20); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; padding: 0 5%; } .vantagem header{ width: 100%; height:auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align:center; -ms-flex-align:center; align-items:center; margin-top:5%; } .vantagem header span{ font-size:2em; color: #45c4e9; } .vantagem header h3{ width: 90%; text-align: center; } .vantagem:hover{ border: 1px solid #45c4e9 ; } /* Informações de contato da empresa */ .detalhesdecontato{ width:100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; background-color: rgba(0,0,0,1); padding: 20% 0; } .infocontato{ width:90%; height:auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; background-color: #2b2b2b; text-align: left; padding: 8%; } .infocontato h1{ color:rgb(255,255,255); font-size: 36px; width:100%; } .infocontato p{ width: 100%; color: rgb(255,255,255); } .infocontato p.cordiferente{ color:#848484; } .infocontato p span{ margin-right: 8%; } .formulariocontatoprincipal{ width: 90%; height:auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-line-pack:center; align-content:center; padding: 20% 0; } .formulariocontatoprincipal h1{ color: rgb(255,255,255); font-weight: 400; font-size: 36px; } .formulariocontatoprincipal input{ width: 100%; height:56px; background-color: rgb(0,0,0); border: 2px inset rgba(230,230,230,0.20); margin: 7% 0; outline: none; } .formulariocontatoprincipal input:focus{ border: 2px inset #45c4e9; } .formulariocontatoprincipal input[type="text"], input[type="email"], input[type="tel"]{ padding: 1% 5%; } .formulariocontatoprincipal input[type="submit"]{ width: 163px; height: auto; background-color: rgb(0,0,0); border: 2px solid #45c4e9; margin: 7% 0; border-radius: 50px; background-color: #45c4e9; font-size: 14px; font-weight:600; color:rgb(255,255,255); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap:nowrap; flex-wrap:nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 15px; float:left; } .formulariocontatoprincipal input[type="submit"]:hover{ background-color: rgba(255,255,255); color: #45c4e9; } .formulariocontatoprincipal input[list] option{ padding: 25%; } /* úLTIMAS POSTAGENS DO BLOG */ .ultimas_postagens_blog{ width:100%; height: auto; background-color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; margin:0; } .ultimas_postagens_blog h1{ font-size: 36px; font-weight: 400; width:100%; text-align: center; margin-top:20%; } .ultima_postagem_blog{ width:90%; height:auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-line-pack: center; align-content: center; margin-top:30px; border: 1px solid rgba(0,0,0,0.10); } } .ultima_postagem_blog header{ width:100%; height: 172px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; } .ultima_postagem_blog header img{ width:100%; height:172px; } .data_postagem{ width:61px; height:auto; background-color: #45c4e9; color: rgb(255,255,255); position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; text-align: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; top:10px; right:10px; padding: 2%; font-size: 16px; line-height:25px; font-weight: 300; } .ultima_postagem_blog div{ width:100%; height:auto; padding: 2%; margin: 10px 0; } .ultima_postagem_blog div h3{ width: 100%; height:auto; color:#848484; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; font-size: 16px; } .ultima_postagem_blog a{ width:100%; text-align: left; } .ultima_postagem_blog a h3{ color: #222222; width:100%; font-size: 22px; font-weight: 400; line-height: 26px; display: block; } .ultima_postagem_blog p{ width:100%; height:auto; color:#848484; margin: 3% 0; } /* Estilizando rodape da postagem */ .rodape_ultima_postagem_blog{ width:100%; height:auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-top: 1px solid rgba(0,0,0,0.20); border-bottom: 1px solid rgba(0,0,0,0.20); padding: 10px; } .rodape_ultima_postagem_blog a{ color:#222222; width:50%; text-align: center; } .rodape_ultima_postagem_blog a span{ margin-right: 7px; } /* ÚLTIMOS PROJETOS FEITOS PELA EMPRESA */ .ultimos_projetos_empresa{ width:100%; height:auto; display: block; background-color: #f7f7f7; padding: 20% 0; } .ultimos_projetos_empresa h1{ width:100%; text-align: center; font-size:36px; font-weight: 400; margin-bottom:20%; } .ultimos_projetos_empresa a{ width:90%; height:273px; display: block; } .ultimos_projetos_empresa a img{ width:100%; height:273px; max-width: 100%; max-height: 100%; margin: 1% 0; } /* Respostas de algumas perguntas frequentes feitas pelos clientes */ .perguntasfrequentes{ width:100%; height: 1200px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; background-color: #848484; } .perguntasfrequentes h1{ width:100%; color:red; } .perguntasfrequentes div{ width:90%; background-color: rgb(255,255,255); border-bottom: 1px solid #ededed; } .perguntasfrequentes div h4{ width:100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; font-size: 18px; padding:4%; } .perguntasfrequentes div h4:hover span{ color:#45c4e9; } .perguntasfrequentes div h4:hover{ color:#45c4e9; } .perguntasfrequentes div h4 span{ margin-right: 40px; font-size: 22px; } .perguntasfrequentes div div{ width: 100%; display:none; } .perguntasfrequentes div div p{ width:70%; float:right; margin-right:0px; color:#848484;; } /* Local onde ficará o slideshow com os banners dos Parceiros da empresa */ .slide_parceiros{ width:100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-line-pack: center; align-content: center; } .slide_parceiros h1{ width:100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 5% 7%; font-size: 36px; font-weight: 400; } .controles_slide_parceiros{ width: 35%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; } .controles_slide_parceiros button{ width:40px; height:40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap:nowrap; flex-wrap:nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border:1px solid rgba(0,0,0,0.50); background-color: rgb(255,255,255); color:#ababab; font-size: 20px; } /* Configurando e estilizando local onde aparecerá o banner dos parceiros da empresa */ .banner_parceiro{ width:100%; height:255px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; padding: 0 25%; } .banner_parceiro a{ width:215px; height:115px; display: block; text-align: center; position: relative; } .bannerparceiro{ width:215px; height:115px; position: relative; border: 1px solid rgba(0,0,0,0.20); } /* ===== Rodapé do site ========= */ .rodapedosite{ width: 100%; height:auto; background-color: rgb(0,0,0); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: row; flex-wrap: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-line-pack: center; align-content: center; padding: 20% 5%; } .rodapedosite h1{ color: rgb(255,255,255); } /* Links úteis do site */ .linksuteis{ width:100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-line-pack: center; align-content: center; padding: 15% 0; } .linksuteis h1{ width:100%; color:rgb(255,255,255); } .linksuteis ul{ padding: 10% 0; } .linksuteis ul li{ width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .linksuteis ul li span{ color:#848484; margin-right: 20%; } .linksuteis ul li a{ color: #848484; font-size: 16px; } .linksuteis ul li span:hover{ color:#45c4e9; margin-right: 20%; } .linksuteis ul li a:hover{ color:#45c4e9; cursor: pointer; } /* Newsletter do site */ .newsletter{ width:100%; height:auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-line-pack: center; align-content: center; } .newsletter h1{ width:100%; font-size:36px; } .newsletter form{ width:100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 10% 0; text-align: left; } .newsletter form input{ width:80%; height:46px; background-color: rgb(255,255,255); } .newsletter form button{ width:20%; height:46px; color:rgb(255,255,255); background-color: #45c4e9; border:none; font-size: 14px; } .newsletter form button:hover{ width:20%; height:46px; color:rgb(255,255,255); background-color: #424141; border:none; font-size: 14px; cursor: pointer; } /* Redes Sociais da empresa */ .redessociais{ width:100%; height:auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-line-pack: center; align-content: center; } .redessociais h1{ width:100%; font-size: 36px; padding:10% 0; } .menu_redes_sociais{ width:100%; height: auto; display: block; margin: 7% 0; } .menu_redes_sociais li{ display: inline-block; margin-left: 10px; height: auto; } .menu_redes_sociais li:first-child{ margin-left: 0; } .menu_redes_sociais li a{ width:40px; height: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap:nowrap; flex-wrap:nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border:2px solid #323232; border-radius: 50%; color: #999999; } .menu_redes_sociais a:hover{ background-color: #45c4e9; } /* Menu no fim do rodapé */ .menu_fim_rodape{ width:100%; height:auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; } .menu_fim_rodape p{ width:100%; font-size: 14px; font-weight:400; text-align: center; } .menu_fim_rodape ul{ } .menu_fim_rodape ul li{ display: inline-block; margin-left: 10px; } .menu_fim_rodape ul li:first-child{ margin-left: 0; } .menu_fim_rodape ul li a{ font-size: 15px; -webkit-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; color: #999999; font-weight: 400; } .menu_fim_rodape ul li a:hover{ color:#45c4e9; } } Se algúem puder me ajudar, eu agradeço.

function criarformulario(){ var formulario = document.createElement("FORM"); var input01 = document.createElement("INPUT"); formulario.appendChild(input01); var attinput01 = document.createAttribute("type"); attinput01.value = "text"; input01.setAttributeNode(attinput01); document.body.appendChild(formulario); } <!DOCTYPE html> <html lang="pt-br"> <head> <title> Criar um atributo em JavaScript</title> <meta charset="utf-8"/> <style> form{ width: 100px; height: 100px; background-color: tomato; } </style> </head> <body onload="criarelementootimzado()"> <div id="formulario"> <a href="" onclick="criarformulario()">Criar Formulário</a> </div> <script src="C:\Users\usuário\libreoffice\Referências JavaScript\criarelemento\_js\criarelemento02.js"></script> </body> </html> Estou tentando fazer com que quando eu clicar sobre o link Criar Formulário, ele crie um formulario com inputs, mas não sei se estou fazendo certo. Alguém pode me ajudar?

@DiF Eu seguia suas dicas e criei minha calculadora básica do zero de novo. Só que eu não criei no meu computador. Eu criei em um site online que suporta html, css e javascript. O código que eu criei funcionou perfeitamente no site, depois passei para o meu computador e incorporei meu arquivo css e js a minha página htm, mas na hora de colocar os valores dentro do input maior, não coloca. O computador emite um erro. Você sabe o que pode ser?

@DiF Muito obrigado pela ajuda eu testei na página que você falou e copiei o código para o meu documento, mas na hora de testar não mostrou dentro do input. Será que pode ser algum problema no meu computador?

@LucasMachadoID Fiz como você falou, mas não mostrou dentro do input maior. Eu consegui pegar o valor do input maior e mostrar pelo alert(), mas ainda não consegui colocar dentro do input maior. Você teria ideia de qual é o problema?

Como assim? Você quer dizer que não está mostrando o resultado por que a caixa de texto é muito pequena? adicionado 4 minutos depois @LucasMachadoID Como assim? Você quer dizer que não está mostrando o resultado por que a caixa de texto é muito pequena?

<!DOCTYPE html> <html lang="pt-br"> <head> <title> Praticando 01 </title> <meta charset="utf-8"> <link rel="stylesheet" href="C:\Users\usuário\Desktop\programção\Javscrript\exercicios\_css\calculadorabasica.css"/> <script src="C:\Users\usuário\Desktop\programção\Javscrript\exercicios\_js\calculadorabasica.js"></script> </head> <body> <form id="calculadora"> <div class="organizar2"> <input type="text" name="n1" id="N1" size="1"/> <input type="text" name="n2" id="N12" size="1"/> <br/> <input type="text" name="resultado" id="RES" size="3" placeholder="Resultado"/> </div> <div class="organizar"> <a href="" onclick="somar()">+</a> <a href="" onclick="">-</a> <a href="" onclick="">*</a> <a href="" onclick="">/</a> </div> </form> </body> </html> function somar(){ var formulario = document.getElementById("calculadora"); var n1 = formulario.n1.value; var n2 = formulario.n2.value; var resultado = formulario.resultado.value; alert(resultado); var soma = +n1 + +n2; document.getElementById("Res").value=soma; } Estou construindo uma calculadora básica. Eu crie quatro links para chamar cada função referente ao tipo de operação escolhida pelo usuário. Eu testei todas as variáveis alertando elas no meu documento e todas estão corretas, mas eu quero colocar o valor do resultado da operação matemática dentro do input maior, mas não estou conseguindo. Alguém poderia me ajudar?