"Index 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 lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"><!--link para o estilo externo do template--> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="icon" href="icones/ahbordo_icone.png"><!--para mostrar o icone na tab da página--> <title>Ah Bordo | Home</title> <link rel="stylesheet" href="estilos/index_header.css"><!--link para o estilo da pagina inicial--> <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"/> </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> <!-- navbar float para direita mas sem esconder o link--> <div class="w3-right"> <a href="voluntariado.html" class="w3-bar-item w3-button">Bora ajudar?</a> <a href="transporte.html" class="w3-bar-item w3-button">Fui!</a> <a href="mepoupe.html" 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><!--faz parte do código da navbar, NÃO É POSSÍVEL RETIRAR MAS FOI ALTERADO NO CSS--> <!--termina a navbar--> <section class=" col l2 md6 s3 height-20"><!--ocupa uma seção de 20% da pagina--> <p>Aqui te incentivamos a ser mais independente!</p> </section> <section class=" col l2 md6 s3 height-75"><!--ocupa 75% da pagina--> <div class="content"> <p>O Ah Bordo foi criado para ajudar jovens a fazer a 1ª viagem usando o próprio dinheiro. Seja começando um négocio de bolos ou trabalhando enquanto viaja, consideramos suas skills do mundo real, ou seja, suas habilidades e experiências não profissionais.</p> </div> </section> </section> <section class="col l2 md6 s1 height-88"><!--ocupa 80% da pagina--> <div class="content"> <h1>É fácil.</h1> <p>Aqui voce escolhe pra onde vai, tem dicas de como chegar lá e ainda junta uma grana ajudando o lugar onde vai se hospedar.</p><a href="cadastro.html"><button class="w3-button w3-light-grey w3-block" >Vamos começar?</a></button> </div> </section> <!-- Seção sobre as pessoas --> <div class="container"><!--utilizei para 'centralizar' o centeúdo--> <p style="text-align: center;">Sobre Nós</p> <div class="w3-row-padding w3-grayscale w3-padding-32"style="padding-left: 10em ;"> <div class="w3-col l2 m6 s10 w3-margin-bottom" ><!--responsividade da página--> <img src="imagens/bruna.jpg" alt="Bruna" style="width:100%"> <h3>Bruna Luiza</h3> <h4 class="w3-opacity">Fundadora<br>Gerente</h4> </div> <div class="w3-col l2 m6 s10 w3-margin-bottom"> <img src="imagens/hayme.jpg" alt="Haymê" style="width:100%"> <h3>Haymê M.</h3> <h4 class="w3-opacity">Fundadora<br>Analista</h4> </div> <div class="w3-col l2 m6 s10 w3-margin-bottom"> <img src="imagens/le.jpg" alt="Letícia" style="width:100%"> <h3>Letícia Alves</h3> <h4 class="w3-opacity">Fundadora<br>Designer</h4> </div> <div class="w3-col l2 m6 s10 w3-margin-bottom"> <img src="imagens/nat4.jpg" alt="Natália" style="width:100%"> <h3>Natália Silva</h3> <h4 class="w3-opacity">Fundadora<br>Programadora</h4> </div> <div class="w3-col l2 m6 s10 w3-margin-bottom"> <img src="imagens/matheus.jpg" alt="Matheus" style="width:100%"> <h3>Matheus S.</h3> <h4 class="w3-opacity">Fundador<br>Pesquisador</h4> </div> </div> </div> <!-- final do conteúdo da página --> </div> <!-- Rodapé --> <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"><!--responsividade do rodapé--> <div class="col-xs-12 col-sm-4 col-md-4"> <img id="logo" src="imagens/ahbordo_logo.png" style="width: 470px;height: 300px;"><!--estilização em linha da logo do fim da página--> </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"><!--responsividade do rodapé--> <ul class="list-unstyled list-inline social text-center"> <li class="list-inline-item"><a href=""><i class="fa fa-facebook"></i></a></li><!--icones que seriam links para --> <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"><!--responsividade do rodapé, classes com cores e alinhamento no css--> <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><!--direitos autorais dos códigos utilizados e alterados nesta página--> </div> <hr> </div> </div> </section> </div> <!-- fim rodapé --> </body> </html>
html, body { margin: 0; padding: 0; width: 100%; } body { font-weight: lighter; font-size: 16px; font-family: "Raleway", sans-serif; } /* classe header especial para o index para mostrar e imagem principal*/ header{ width: 100%; height: 100vh; background: url("../imagens/1.jpg") no-repeat 50% 50%; background-size: cover; } h1 { font-size: 4rem; } p { font-size: 2.5rem; font-weight: 300; } /* css das sessões viewport units*/ 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% } /* configuração do logo*/ .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; } .w3-bar .w3-button { padding: 16px; } /*responsividade*/ @media (max-width: 767px) { h1 { font-size: 2rem; } p { font-size: 1.5rem; font-weight: 300; } } /* css do rodapé */ @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); section { padding: 60px 0; } section .section-title { text-align: center; color: #007b5e; margin-bottom: 50px; text-transform: uppercase; } #footer { background: black !important; } #footer h5{ padding-left: 10px; border-left: 3px solid #eeeeee; padding-bottom: 6px; margin-bottom: 20px; color:#ffffff; } #footer a { color: #ffffff; text-decoration: none !important; background-color: transparent; -webkit-text-decoration-skip: objects; } #footer ul.social li{ padding: 3px 0; } #footer ul.social li a i { margin-right: 5px; font-size:25px; -webkit-transition: .5s all ease; -moz-transition: .5s all ease; transition: .5s all ease; } #footer ul.social li:hover a i { font-size:30px; margin-top:-10px; } #footer ul.social li a, #footer ul.quick-links li a{ color:#ffffff; } #footer ul.social li a:hover{ color:#eeeeee; } #footer ul.quick-links li{ padding: 3px 0; -webkit-transition: .5s all ease; -moz-transition: .5s all ease; transition: .5s all ease; } #footer ul.quick-links li:hover{ padding: 3px 0; margin-left:5px; font-weight:700; } #footer ul.quick-links li a i{ margin-right: 5px; } #footer ul.quick-links li:hover a i { font-weight: 700; } @media (max-width:767px){ #footer h5 { padding-left: 0; border-left: transparent; padding-bottom: 0px; margin-bottom: 10px; } }
$(document).ready(function() { $(".menu-icon").on("click", function() { $("nav ul").toggleClass("showing"); }); }); // Scrolling Effect $(window).on("scroll", function() { if($(window).scrollTop() ) { $('nav').addClass('black'); } else { $('nav').removeClass('black'); } }) var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function currentDiv(n) { showDivs(slideIndex = n); } function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" w3-white", ""); } x[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " w3-white"; }

Related: See More


Questions / Comments: