Jump to content

Recommended Posts

Olá! eu estava aqui fazendo meu site, quando me deparei com o problema de fazer um menu "bonito" baixei este template depois de ver o exemplo na net, mas ele é muito complicado pra mim, não sou profissional (mas sou programador iniciante em c#)

TEMPLATE

mas se alguém puder me ajudar a criar uma pagina deste tipo, sem tantos códigos, eu agradeço, pois do jeito que está eu não consigo nem alterar as cores...

pode ser com tutoriais, dicas, videos, etc...

 

~Grato desde já~

Share this post


Link to post
Share on other sites

Amigo sem querer ser chato, aqui no forum as pessoas são voluntárias isso quer dizer que muitos tem muito pouco tempo pra ficar no forum, então é tirado dúvidas pontuais, o que percebo é que você precisa de conceitos de front-end o que você quer se chama landing-page é existem muitos tutoriais na internet, então seria muito trabalhoso construir um tutorial afinal você e que tem que fazer o trabalho duro que é aprender desculpa ser duro mas essa é a realidade. quando você diz que não dá que é muito complicado pra você isso não é verdade e irei provar pra você que você consegue mudar a cor:

 

o projeto que baixou usa muitas ferramentas para desenvolvimento: less, sass, gulp, node mas pelo que entendi você quer apenas o template correto? Então você precisa do index.html, img(pasta), css(pasta), vendor(pasta) e js(pasta) caso va aproveitar algum evento

 

img

css

vendor

js(opcional)

index.html

 

agora pra você mechar no template hoje no index.html ele está com esse link de estilo:

<!-- Theme CSS -->
<link href="css/agency.min.css" rel="stylesheet">

basicamente troque por:

<!-- Theme CSS -->
<link href="css/agency.css" rel="stylesheet">

assim vai conseguir alterar o arquivo css legivel, e aplicar as suas alterações, bom tá a minha dica, agora é com você meu chapa!

Share this post


Link to post
Share on other sites

Obrigado pela resposta, mas devido a demora acabei refazendo tudo do zero, vento um tutorial aqui, outro ali, etc... mas ainda sim vou executar essa base para ter uma ideia de como funciona...

 

(não consigo reagir ao seu comentário... print)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By chuxi
      <div class="fab"> <button class="main"> </button> <ul> <li> <label for="opcao1">Opção 1</label> <button id="opcao1"> ⎈ </button> </li> <li> <label for="opcao2">Opção 2</label> <button id="opcao2"> ⎗ </button> </li> <li> <label for="opcao3">Opção 3</label> <button id="opcao3"> ☏ </button> </li> </ul> </div> body{ font-family: sans-serif; } .fab{ position: fixed; bottom:10px; right:10px; } .fab button{ cursor: pointer; width: 48px; height: 48px; border-radius: 30px; background-color: #cb60b3; border: none; box-shadow: 0 1px 5px rgba(0,0,0,.4); font-size: 24px; color: white; -webkit-transition: .2s ease-out; -moz-transition: .2s ease-out; transition: .2s ease-out; } .fab button:focus{ outline: none; } .fab button.main{ position: absolute; width: 60px; height: 60px; border-radius: 30px; background-color: #5b19b7; right: 0; bottom: 0; z-index: 20; } .fab button.main:before{ content: '⏚'; } .fab ul{ position:absolute; bottom: 0; right: 0; padding:0; padding-right:5px; margin:0; list-style:none; z-index:10; -webkit-transition: .2s ease-out; -moz-transition: .2s ease-out; transition: .2s ease-out; } .fab ul li{ display: flex; justify-content: flex-start; position: relative; margin-bottom: -10%; opacity: 0; -webkit-transition: .3s ease-out; -moz-transition: .3s ease-out; transition: .3s ease-out; } .fab ul li label{ margin-right:10px; white-space: nowrap; display: block; margin-top: 10px; padding: 5px 8px; background-color: white; box-shadow: 0 1px 3px rgba(0,0,0,.2); border-radius:3px; height: 18px; font-size: 16px; pointer-events: none; opacity:0; -webkit-transition: .2s ease-out; -moz-transition: .2s ease-out; transition: .2s ease-out; } .fab button.main:active, .fab button.main:focus{ outline: none; background-color: #7716ff; box-shadow: 0 3px 8px rgba(0,0,0,.5); } .fab button.main:active:before, .fab button.main:focus:before{ content: '↑'; } .fab button.main:active + ul, .fab button.main:focus + ul{ bottom: 70px; } .fab button.main:active + ul li, .fab button.main:focus + ul li{ margin-bottom: 10px; opacity: 1; } .fab button.main:active + ul li:hover label, .fab button.main:focus + ul li:hover label{ opacity: 1; } Como faço pra movimentar meu botão flutuante pra qualquer lado da tela igual o messenger?
    • By gbilibio
      Olá, estou montando um layout para uma atividade da faculdade, o layout está pronto, mas está com um problema na estrutura, quando diminui o tamanho do
      navegador o página fica mais uma margem a direita e as div's não ficam fixas, segue o código html e css:
       
      Página HTML
       
      <!DOCTYPE html>
      <html lang="pt-br">
          <head>
              <meta charset="UTF-8"/>
              <title>Aula 07</title>
              <link rel="stylesheet"
              type="text/css" href="style.css"/>
              <meta name="viewport"
              content="width=device-width, 
              initial-scale=1.0"/>
          </head>
          <body>
              <header>
                  <div class="contatos">
                      <div class="cont">
                          <p> <img src="Icones/telefone.png" width="20" height="20"> (41) 3019-7838</p>
                      </div>
                      <div class="cont">
                          <p> <img src="Icones/email.png" width="20" height="20"> contato@email.com</p>
                      </div>
                      <div class="cont">
                          <p> <img src="Icones/locationmarker.png" width="20" height="20"> R. Rua, 00 - Curitiba </p>
                      </div>
                  </div>
              </header>
              <div class="topo">
                  <div class="contatos2">
                      <div class="cont2">
                          <img  align="right" src="logo.png">
                      </div>
                      <div class="cont2">
                          <p> HOME </p>
                      </div>
                      <div class="cont2">
                          <p> EMPRESA </p>
                      </div>
                      <div class="cont2">
                          <p> SERVIÇOS </p>
                      </div>
                      <div class="cont2">
                          <p> HOSPEDAGEM </p>
                      </div>
                      <div class="cont2">
                          <p> PORTIFÓLIO </p>
                      </div>
                      <div class="cont2">
                          <p> CONTATO </p>
                      </div>
                  </div>
              </div>
              <div class="banner">
              
              </div>
              <div class="banner2">
              
                  <div class="banneresq">
                  <h1> <font color="#2B47AE">BEM-VINDO AO</font> <br> <font color="#A11606">NOSSO SITE</font> </h1>
                  <div class="linhatexto">
                  
                  </div>
                  <p> 
                  Especialista em desenvolvimento de sites o Projeto Web oferece oque há de melhor<br>
                  no mercado para construção de site, tecnologia avançada e modernismo nos Layouts<br>
                  são as principais caracteristicas de nossos Layouts, com a Metodologia de Atender<br>
                  Bem para Atender Sempre.<br>
                  </p>
                  <div class="botaoentrar" >
                  <h1>Entrar</h1>
                  </div>
                  </div>
                  
                  <div class="bannerdir">
                  
                  <img src="Imagens/bannerdireita2.jpg" width="320" height="280">
                  
                  </div>
              </div>
              <div class="banner3">
                  
                  <div class="caixamaior">
                      <div class="caixa1">
                          <img src="Imagens/box1.jpeg" width="250" height="200">
                              <div align="center">
                                  <p> CRIAÇÃO DE SITES </p>
                              </div>
                              <div class="caixa1texto">
                                  <h1> 
                                  Temos desde sites simples de 1 página,<br>
                                  modelos padrões e personalizados<br>
                                  com páginas internas. Confira nossos<br>
                                  modelos ou solicite um.<br>
                                  </h1>
                              </div>
                              <div class="botaosaibamais">
                                  <h1>Saiba Mais</h1>
                              </div>
                      </div>
                      <div class="caixa2">
                          <img src="Imagens/box2.jpg" width="250" height="200">
                              <div align="center">
                                  <p> HOSPEDAGEM DE SITES </p>
                              </div>
                              <div class="caixa2texto">
                                  <h1>
                                  Hospede um site em um servidor<br>
                                  confiável e de qualidade, que sempre<br>
                                  lhe dê suporte necessário. Deixe seu<br>
                                  site 100% online.<br>
                                  </h1>
                              </div>
                              <div class="botaosaibamais">
                                  <h1>Saiba Mais</h1>
                              </div>
                      </div>
                      <div class="caixa3">
                          <img src="Imagens/box3.jpg" width="250" height="200">
                              <div align="center">
                                  <p> MANUTENÇÃO DE SITES </p>
                              </div>
                              <div class="caixa3texto">
                                  <h1>
                                  Mantenha seu site sempre atualizado,<br>
                                  passando credibilidade aos seus<br>
                                  clientes e ganhando ponto com o<br>
                                  Google e outros buscadores.<br>
                                  </h1>
                              </div>
                              <div class="botaosaibamais">
                                  <h1>Saiba Mais</h1>
                              </div>
                          
                      </div>
                      
                  </div>
              
              </div>
          </body>
      </html>
       
      PÁGINA CSS
       
      @import url('https://fonts.googleapis.com/css?family=Muli:300,400,700');
      @import url('https://fonts.googleapis.com/css?family=Cabin:400,500,600,700');
      @import url('https://fonts.googleapis.com/css?family=Oxygen:300,400,700');
      @import url('https://fonts.googleapis.com/css?family=Roboto:100,400,500,700');
      @import url('https://fonts.googleapis.com/css?family=Scada:400,400i,700');
      @import url('https://fonts.googleapis.com/css?family=Karla:400,700');
      header{
          width: 100%;
          height: auto;
          overflow: hidden;
          background-color: #023180;
          margin: auto;
      }
      body{
          margin: 0px;
      }
      .contatos{
          width: 100%;
          max-width: 900px;
          height: auto;
          overflow: hidden;
          margin: auto;
      }
      .cont{
          width: 33.3%;
          height: 40px;
          float: left;
      }
      .cont p{
          color:#ffffff;
          font-family: 'Muli';
          font-weight: 400;
      }
      .topo{
          width:80%;
          height:120px;
          float:right;
          
      }
      .cont2{
          font-family:'Cabin';
          color:#023180;
          width:13.3%;
          height:40px;
          float:left;
          
      }
      .cont2 p{
          font-size:15px;
          margin-left:100px;
          margin-top:30px;
          
      }
      .logo{
          margin-left:350px;
          margin-top:10px;
      }
      .banner{
          width:100%;
          height:500px;
          background:url(Imagens/banner.jpg);
          float:left;
          margin-top:30px;
      }
      .banner3{
          width:100%;
          height:500px;
          background-color:#083875;
          float:left;
          margin-top:50px;
          vertical-align: middle;
      }

      .caixamaior{
          width:100%;
          height:auto;
          
      }
      .caixamaior p{
          color:#FFFFFF;
          font-family:'Scada';
          
      }
      .caixa1texto h1{
          font-size:12px;
          font-family:'Karla';
          text-align:center;
          color:#FFFFFF;
      }
      .caixa2texto h1{    
          font-size:12px;
          font-family:'Karla';
          text-align:center;
          color:#FFFFFF;
      }
      .caixa3texto h1{
          font-size:12px;
          font-family:'Karla';
          text-align:center;
          color:#FFFFFF;
      }
      .botaosaibamais{
          
          width:150px;
          height:50px;
          background-color:#21588E;
          text-align:center;
          vertical-align: middle;
          line-height: 3;
          margin-left:45px;
          margin-top:20px;
      }
      .botaosaibamais h1{
          font-family:'Scada';
          font-size:15px;
          color:#ffffff;
          vertical-align: middle;    
      }
      .caixa1{
          margin-left:15%;
          margin-top:5%;
          float:left;    
      }
      .caixa2{
          
          margin-left:10%;
          margin-top:5%;
          float:left;    
      }
      .caixa3{    
          margin-left:10%;
          float:left;
          margin-top:5%;
      }
      .banneresq{
          float:left;
          margin-left:120px;
          margin-top:65px;
      }
      .banneresq h1{
          font-family: 'Oxygen';
      }
      .banneresq p{
          color:#3F3B3B;
          font-family: 'Oxygen';
          font-size:16px;
      }
      .linhatexto{
          width:75px;
          height:4px;
          background-color:#A11606;
          margin-top:-5px;
      }
      .botaoentrar{
          width:150px;
          height:50px;
          background-color:#800000;
          text-align:center;
          vertical-align: middle;
          line-height: 3;
      }
      .botaoentrar h1{
          font-family:'Oxygen';
          font-size:15px;
          color:#ffffff;
          vertical-align: middle;
      }
      .bannerdir{
          float:left;
          margin-top:60px;
          margin-left:70px;    
      }
      @media only screen and (max-width: 600px){
          .cont{
              width: 100%;
          }
          .cont p{
              text-align: center;
          }
          
          .banner{
              width:100%;
          
          }
      }
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.