"Me poupe Ah Bordo"
Bootstrap 4.1.1 Snippet by letrux

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <link rel="icon" href="icones/ahbordo_icone.png"><!--para mostrar o icone na tab da página--> <title>Ah Bordo | Me poupe</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="estilos/index.css"><!--link para o estilo da pagina--> <link rel="stylesheet" href="js/index.css"><!--link para o js da pagina inicial--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Raleway:800,300" rel="stylesheet" type="text/css"/> <script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script> <script src="jquery/dist/js/jquery.smartTab.js"></script> <link href="jquery/dist/css/smart_tab_brick.min.css" rel="stylesheet" /> <script type="text/javascript" src="dist/js/jquery.smartTab.min.js"></script> <style> * { box-sizing: border-box; } /* 5 colunas de cards */ .column { float: left; width: 20%; padding: 0 10px; } /* Remove espaço extra */ .row {margin: 0 -5px;} /* limpar o float depois das colunas */ .row:after { content: ""; display: table; clear: both; } /* responsividade das colunas */ @media screen and (max-width: 600px) { .column { width: 100%; display: block; margin-bottom: 20px; } } /* estilo dos cards */ .card { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); padding: 16px; text-align: center; background-color: #f1f1f1; } </style> </head> <body> <!-- Navbar presa no topo --> <div class="w3-top"> <div class="w3-bar w3-white w3-wide w3-padding w3-card"> <a href="index.html" class="w3-bar-item"><img src="imagens/ahbordo_logo.png" style="width: 20%;"></a> <!-- float links para a direita mas não esconde os links, alterado do código do w3 schools --> <div class="w3-right "> <a href="voluntariado.html" class="w3-bar-item w3-button centraliza">Bora ajudar?</a> <a href="transporte.html" class="w3-bar-item w3-button">Fui!</a> <a href="#" class="w3-bar-item w3-button">Me poupe!</a> <a href="destinos.html" class="w3-bar-item w3-button">Brota aí!</a> <a href="cadastro.html" class="w3-bar-item w3-button">Cadastro</a> <a href="login.html" class="w3-bar-item w3-button">Login</a> </div> </div> </div> <header></header> <!-- Conteúdo da página vai aqui dentro, já está estilizado, não mexer --> <!-- barra de navegação vertical, mostra na mesma página as diferentes opções,feita com jquery --> <div class="w3-content w3-padding" style="max-width:1564px"> <section class="col-xs-12 col-sm-6 col-md-12 height-80"> <p style="text-align: center;">ME POUPE</p> <hr> <div id="smarttab" class="st st-justified st-theme-brick st-vertical"> <ul class="nav"> <li> <a class="nav-link" href="mepoupe.html#tab-1"> <strong>FORMAS DE GANHAR DINHEIRO</strong> </a> </li> <li> <a class="nav-link" href="mepoupe.html#tab-2"> <strong>Forma 1</strong> Bolo de Pote </a> </li> <li> <a class="nav-link" href="mepoupe.html#tab-3"> <strong>Forma 2</strong> Brigadeiro </a> </li> <li> <a class="nav-link active" href="mepoupe.html#tab-4"> <strong>Forma 3</strong> Passear com Cachorro </a> </li> <li> <a class="nav-link active" href="mepoupe.html#tab-5"> <strong>Forma 4</strong> Faça um Brechó </a> </li> </ul> <div class="tab-content" style="height: 361.438px;"> <div id="tab-1" class="tab-pane" role="tabpanel" style="position: static; top: auto; display: none;"> <h3>Formas de ganhar dinheiro</h3> <div>Aqui vamos te dar algumas dicas de como juntar aquela grana para que você possa realizar sua primeira viagem. Mas antes, pense em qual destino deseja ir, e planeje a sua forma de ir, além de se você quer passear pela cidade estipular quanto por dia você deseja gastar, assim será mais fácil você estimar uma quantia inicial para juntar. <div class="row"> <div class="column"> <br> <div class="card"> <h3>Dica 1</h3> <h7>Definir o orçamento para a viagem e a necessidade de adaptar</h7> </div> </div> <div class="column"> <div class="card"> <h3>Dica 2</h3> <h7>Definir um destino que é fácil de juntar a grana e definir você mesmo o seu roteiro de passeios<br></h7> </div> </div> <div class="column"> <div class="card"> <h3>Dica 3</h3> <h7>Caso, for comprar passagens aéreas, <br>analisar histórico de preços e emitir alertas para passagens antes da comprar</h7> </div> </div> <div class="column"> <div class="card"> <h3>Dica 4</h3> <h7>Definir em quanto tempo você vai levantar por semana ou por mês para ter uma estimativa de tempo para juntar todo o dinheiro que você irá precisar.<h7> </div> </div> <div class="column"> <div class="card"> <h3>Dica 5</h3> <h7>Definir qual ou quais atividade(s) irá fazer para atingir seu objetivo</h7> </div> </div> </div> </div> </div> <div id="tab-2" class="tab-pane" role="tabpanel" style="position: static; top: auto; display: none;"> <h3>Bolo no Pote</h3> <div>A ideia mais comum a pensar é vender bolo no pote, e porque não?! A cada dia que passa o bolo no pote é um dos lanches e sobremesas favoritos de muitas pessoas, principalmente por ser um bolo mais molhadinho. E uma ótima forma de levantar aquela graninha. <div class="row"> <div class="column"> <br> <div class="card"> <h3><a href="https://bolodepoteparavender.com.br/">Bolo de Pote Para Vender</a></h3> <h7>Um curso com um único pagamento, e nele você aprende a fazer, eles disponibilizam uma calculadora para você calculadora de custos e dicas de como aumentar suas vendas e como deixar seus bolos mais apresentáveis.</h7> </div> </div> <div class="column"> <br><br> <div class="card"> <h3><a href="https://www.amandocozinhar.com/2015/01/5-receitas-fazer-bolos-no-pote-vender.html">Amando Cozinhar</a></h3> <h7>No site você vai encontrar algumas receitas e como montar o seu bolo no pote para vender</h7> </div> </div> <div class="column"> <br> <div class="card"> <h3><a href="https://comidinhasdochef.com/como-montar-o-bolo-no-pote-e-quanto-cobrar/">Comidinhas do Chef</a></h3> <h7>Aqui você aprende a calcular seu custo, ou seja, quanto para você fazer seus bolos e como calcular o preço para venda, além é claro de uma receita e dicas de como fazer</h7> </div> </div> </div> </div> </div> <div id="tab-3" class="tab-pane" role="tabpanel" style="position: static; top: auto; display: none;"> <h3>Brigadeiro</h3> O tradicional doce brasileiro e o queridinho das festas infantis é uma solução deliciosa e bastante atrativa para conseguir levantar a grana para a sua primeira viagem <div class="row"> <div class="column"> <br> <div class="card"> <h3><a href="https://www.acasaencantada.com.br/receita/brigadeiro-gourmet/">A Casa Encantada</a></h3> <h7>Dicas de como fazer seus brigadeiros</h7> </div> </div> <div class="column"> <br><br> <div class="card"> <h3><a href="https://negociocaseiro.com.br/receita-de-brigadeiro-gourmet-para-vender/">Negócio Caseiro</a></h3> <h7>Vão te ensinar a fazer um brigadeiro gourmet para vender, dicas de como fazer um delicioso brigadeiro e como calcular o preço para o seu produto</h7> </div> </div> <div class="column"> <br> <div class="card"> <h3><a href="https://negociodecozinha.com.br/brigadeiro-para-vender/">Negócio de Cozinha</a></h3> <h7>Vão te ensinar a fazer o brigadeiro tradicional e o gourmet, vai te dar dicas de como ganhar mais dinheiro, formas de vender o brigadeiro</h7> </div> </div> </div> </div> <div id="tab-4" class="tab-pane" role="tabpanel" style="position: static; top: auto;"> <h3>Passear com cães</h3> Essa talvez seja a menos trabalhosa, a única coisa que você precisa é gostar de cachorro e ter tempo para passear com os bichinhos. Simples e prático! Para começar você poder baixar aplicativos como: <div class="row"> <div class="column"> <br> <div class="card"> <h3><a href="https://www.doghero.com.br/">DogHero</a></h3> </div> </div> <div class="column"> <br> <div class="card"> <h3><a href="http://www.dogwalk.com.br/">Dog Walk</a></h3> </div> </div> </div> </div> <div id="tab-5" class="tab-pane" role="tabpanel" style="position: static; top: auto;"> <h3>Faça um Brechó</h3> Comece vendendo aquelas roupas que você não usa mais e que estão em bom estado, depois disso comece a comprar algumas peças para revender, use as redes sociais para divulgar suas peças e dê sugestões de looks, assim você pode fazer venda casada, a pessoa vê uma peça e acaba comprando outra por gostar do look. Use sites e aplicativos como: <div class="row"> <div class="column"> <br> <div class="card"> <h3><a href="https://www.olx.com.br/">OLX</a></h3> </div> </div> <div class="column"> <br> <div class="card"> <h3><a href="https://www.mercadolivre.com.br/">Mercado Livre</a></h3> </div> </div> <div class="column"> <br> <div class="card"> <h3><a href="https://www.enjoei.com.br/">Enjoei</a></h3> </div> </div> </div> </div> </div> </div> </div> <p style="text-align: center;">Ah, Ah Bordo, eu já sei para onde ir, como ir e o quanto eu pretendo gastar ao todo na viagem e agora?</p><br><button class="btn btn-outline-info w3-block btn-lg"><a href="destinos.html"><p>Brota aí!</p></a></button> </section> </div> <!-- fim conteudo da pagina --> <!--script que faz a mudança de conteudo das tabs --> <!-- Rodapé já comentado em outros códigos, padrão, alterado do bootsnip por leticia--> <link rel="stylesheet" href="estilos/rodape.css"><!--link para o estilo do rodapé--> <section id="footer"> <div class="container"> <div class="row text-center text-xs-center text-sm-left text-md-left"> <div class="col-xs-12 col-sm-4 col-md-4"> <img id="logo" src="imagens/ahbordo_logo.png" style="width: 470px;height: 300px;"> </div> <div class="col-xs-12 col-sm-4 col-md-4"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 mt-2 mt-sm-5"> <ul class="list-unstyled list-inline social text-center"> <li class="list-inline-item"><a href="#"><i class="fa fa-facebook"></i></a></li> <li class="list-inline-item"><a href="#"><i class="fa fa-twitter"></i></a></li> <li class="list-inline-item"><a href="#"><i class="fa fa-instagram"></i></a></li> <li class="list-inline-item"><a href="#"><i class="fa fa-google-plus"></i></a></li> <li class="list-inline-item"><a href="#" target="_blank"><i class="fa fa-envelope"></i></a></li> </ul> </div> <hr> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 mt-2 mt-sm-2 text-center text-white"> <p><h6>Ah Bordo com você.</h6> </p> <p class="h6">© Todos os Direitos reservados. Imagens by<a href="http://www.freepik.com">Freepik Template by <a href="https://www.w3schools.com/w3css/default.asp" title="W3.CSS" target="_blank">w3.css</a></p> </div> <hr> </div> </div> </section> </div> <!-- fim rodapé --> </body> </html> <!--parte de jquery externa em outro bootsnip-->
html, body { margin: 0; padding: 0; width: 100%; } body { font-weight: lighter; font-size: 16px; font-family: "Raleway", sans-serif; } /*em vez da foto na pagina inicial adiciona um espaço entre a navbar e o conteúdo para funcionar ok a responsividade*/ header { width: 15%; height: 15vh; background-size: cover; } h1 { font-size: 4rem; } p { font-size: 2.5rem; font-weight: 300; } section { display: table; width: 100%; } .center{ margin-top: 10px; } .height-88 { background: #FF6347; height: 80vh; } .height-75 { background: #4682B4; height: 78vh; } .height-95 { background: white; height: 95vh; } .height-20 { background: white; height: 20vh; text-align: center; } .height-85 { background: #4169E1; height: 100vh; text-align: center; } .content { color: #ffffff; display: table-cell; vertical-align: middle; padding: 7%; } #logo{ width: 40% } .logo { line-height: 60px; position: fixed; float: center; margin: 16px 46px; color: #fff; font-weight: bold; font-size: 20px; letter-spacing: 2px; align-content: center; } body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif} body, html { height: 100%; line-height: 1.8; } /* Full height image header */ .bgimg-1 { background-position: center; background-size: cover; background-image: url("/w3images/mac.jpg"); min-height: 100%; } .w3-bar .w3-button { padding: 16px; } @media (max-width: 767px) { h1 { font-size: 2rem; } p { font-size: 1.5rem; font-weight: 300; } header { width: 25%; height: 25vh; background-size: cover; } }
$('#smarttab').smartTab({ // Selected Tab, 0 = first tab selected: 0, // Theme theme: 'brick', // Or 'vertical' orientation: 'vertical', // Justified layout for tabs justified: true, // Auto adjust content height autoAdjustHeight: true, // Supports for Back button backButtonSupport: true, // Enables URL hash enableURLhash: true, // Configs animations here transition: { // deslizar na vertical animation: 'slide-vertical', // velocidade de transição speed: '400', // easing function easing: '' }, // mudar automaticamente o conteudo entre as tabs autoProgress: { // enable enabled: false, // interval in ms interval: 3500, // stop on focus stopOnFocus: true }, // navegação do teclado keyboardSettings: { // enable keyNavigation: true, // keycodes keyLeft: [37], keyRight: [39] } });

Related: See More


Questions / Comments: