<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";
}
