Last active
May 17, 2016 15:57
-
-
Save silvadias22/88bb986c85f72fd8cebf0ff253436e32 to your computer and use it in GitHub Desktop.
Bootstrap - Marc
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div> | |
<img class="logo" src="img/galeria/logo1.png"> | |
</div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf8"> | |
<link rel="stylesheet" href="css/bootstrap.css"> | |
<link rel="stylesheet" href="css/style.css"> | |
</head> | |
<body> | |
<div class="container"> | |
<?php include "cabecalho.php"; ?> | |
<div class="nav"> | |
<a class="btn btn-success navbar-btn btn-sm" href="#" role="button">Inicio</a> | |
<a class="btn btn-default navbar-btn btn-sm" href="#" role="button">Serviços</a> | |
<a class="btn btn-default navbar-btn btn-sm" href="#" role="button" data-toggle="modal" data-target="#mapa">Galeria</a> | |
<button type="button" class="btn btn-default navbar-btn btn-sm" data-toggle="modal" data-target="#form">Contato</button> | |
</div> | |
<div class="conteudo"> | |
<div class="panel panel-default"> | |
<div class="panel-body" style="margin-bottom: 50px"> | |
<div class="row"> | |
<div class="col-md-4"> | |
<h4 class="text-center" id="titulosGen"> Especialidades </h4> | |
<img src="img/marcenaria.jpg" width="280" alt="..." class="img-circle"> | |
</div> | |
<div class="col-md-4"> | |
<h4 class="text-center" id="titulosGen"> Equipamentos </h4> | |
<img src="img/marcenaria2.jpg" width="280" alt="..." class="img-circle"> | |
</div> | |
<div class="col-md-4"> | |
<h4 class="text-center" id="titulosGen"> Galeria </h4> | |
<img src="img/marcenaria3.jpeg" width="280" alt="..." class="img-circle" style="cursor: pointer;" href="#" role="button" data-toggle="modal" data-target="#mapa"> | |
</div> | |
</div><!-- row --> | |
<div class="row"> | |
<div class="col-md-4"> | |
<div class="textoMd4"> | |
Suco de cevadiss deixa as pessoas mais interessantiss. | |
Leite de capivaris, leite de mula manquis. | |
</div> | |
<a class="textoMd4" id="d" style="cursor: pointer;">Leia mais</a> | |
</div> | |
<div class="col-md-4"> | |
<div class="textoMd4"> | |
Suco de cevadiss deixa as pessoas mais interessantiss. | |
Leite de capivaris, leite de mula manquis. | |
</div> | |
<a class="textoMd4" id="b" style="cursor: pointer;">Leia mais</a> | |
</div> | |
<div class="col-md-4"> | |
<div class="textoMd4"> | |
Suco de cevadiss deixa as pessoas mais interessantiss. | |
Leite de capivaris, leite de mula manquis. | |
</div> | |
<a class="textoMd4" style="cursor: pointer;" href="#" role="button" data-toggle="modal" data-target="#mapa">Exibir galeria de imagens</a> | |
</div> | |
</div><!-- row --> | |
<div class="row" style="margin-left: 1px; margin-right: 1px; margin-top: 25px;"> | |
<div class="dorm5" id="c"> | |
<div class="panel panel-primary"> | |
<div class="panel-heading"> | |
Sobre | |
</div> | |
<div class="panel-body" id="dorm5"> | |
Mussum Ipsum, cacilds vidis litro abertis. Paisis, filhis, espiritis santis. | |
Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e fermentis. | |
Si num tem leite então bota uma pinga aí cumpadi! Per aumento de cachacis, eu reclamis. | |
Mussum Ipsum, cacilds vidis litro abertis. Paisis, filhis, espiritis santis. | |
Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e fermentis. | |
Si num tem leite então bota uma pinga aí cumpadi! Per aumento de cachacis, eu reclamis. | |
</div> | |
</div> <!-- Panel --> | |
</div> <!-- Dorm 5 --> | |
</div> <!-- Row (dorm5)--> | |
</div> <!-- Row --> | |
</div> <!-- Panel Default --> | |
</div> <!-- Conteúdo --> | |
<?php include "footer.php"; ?> | |
</div><!-- Container--> | |
<div class="row"> | |
<div class="text-center" style="color: white; margin: 15px;">- Copyright 2016 © Juliano Rodrigues - Todos os direitos reservados - | |
<br style="margin: 3px;"> Desenvolvido por Fabrício da Silva Dias. | |
</div> | |
</div> | |
</body> | |
<!-- modal --> | |
<div class="marginContato"> | |
<div id="mapa" class="modal fade bs-example-modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"> | |
<div class="modal-dialog modal-lg"> | |
<div class="panel panel-default" style="border-radius: 8px;"> | |
<div class="panel-heading" style="background-color: #F2F2F2;"> | |
<div class="row"> | |
<div class="col-md-8" style="margin-top: 2px;"> | |
<div style="font-size: 17.5px; margin-left: 405px;">Galeria</div> | |
</div> | |
<div class="col-md-4"> | |
<button style="margin-left: 160px; padding-left: 30px; padding-right: 30px;" type="button" class="btn btn-sm btn-danger" data-dismiss="modal"> Sair</button> | |
</div> | |
</div><!-- Row da heading --> | |
</div> <!-- Panel-Heading --> | |
<div class="panel-body" style="padding-left: 35px; background-color: #F2F2F2;"> | |
<div id="galeria" class="carousel slide" data-ride="carousel" style="margin-bottom: 1px;"> | |
<!-- Slides --> | |
<div class="carousel-inner" role="listbox"> | |
<div class="item active"> | |
<img src="img/galeria/0.jpg"> | |
</div> | |
<div class="item"> | |
<img src="img/galeria/1.jpg"> | |
</div> | |
<div class="item"> | |
<img src="img/galeria/2.jpg"> | |
</div> | |
<div class="item"> | |
<img src="img/galeria/3.jpg"> | |
</div> | |
<div class="item"> | |
<img src="img/galeria/4.jpg"> | |
</div> | |
<div class="item"> | |
<img src="img/galeria/5.jpg"> | |
</div> | |
<div class="item"> | |
<img src="img/galeria/6.jpg"> | |
</div> | |
<div class="item"> | |
<img src="img/galeria/7.jpg"> | |
</div> | |
<div class="item"> | |
<img src="img/galeria/8.jpg"> | |
</div> | |
<div class="item"> | |
<img src="img/galeria/7.jpg"> | |
</div> | |
<div class="item"> | |
<img src="img/galeria/6.jpg"> | |
</div> | |
<div class="item"> | |
<img src="img/galeria/5.jpg"> | |
</div> | |
<div class="item"> | |
<img src="img/galeria/4.jpg"> | |
</div> | |
<div class="item"> | |
<img src="img/galeria/3.jpg"> | |
</div> | |
<div class="item"> | |
<img src="img/galeria/2.jpg"> | |
</div> | |
</div><!-- Carroussel-inner --> | |
</div> <!-- Div da Galeria --> | |
<nav><!-- Controles --> | |
<ul style="list-style-type: none; margin: 10 15 0 5px;"> | |
<li style="margin-left: 40%;"><a style="padding-left: 20px; padding-right: 20px; margin-right: 5px; margin-top: 15px;" href="#galeria" role="button" data-slide="prev" class=" glyphicon glyphicon-menu-left btn btn-sm btn-default"></a> | |
<a href="#galeria" role="button" data-slide="next" style="padding-left: 20px; padding-right: 20px; margin-left: 5px; margin-top: 15px;" class="btn btn-sm btn-default glyphicon glyphicon-menu-right"></a></li> | |
</ul> | |
</nav> | |
</div><!-- Panel- body --> | |
<div class="modal-footer" style="background-color: #F6F3F3;"> | |
<div class="row"> | |
<div class="col-md-1"> | |
<ul class="pagination"> | |
<li> | |
<a id="AbrirGal1" href="#gal1" aria-label="Previous"> | |
<span aria-hidden="true" class="glyphicon glyphicon-circle-arrow-left" style="padding: 1 3 0 3px;"></span> | |
</a> | |
</li> | |
</ul> | |
</div> | |
<div class="col-md-10"> | |
<div id="gal1" style="margin: 13 0 30 0px; float: center;"> | |
<img width="75" class="imgGal" src="img/galeria/0.jpg" style="cursor: pointer;" data-target="#galeria" data-slide-to="0"> | |
<img width="75" class="imgGal" src="img/galeria/1.jpg" style="cursor: pointer;" data-target="#galeria" data-slide-to="1"> | |
<img width="75" class="imgGal" src="img/galeria/2.jpg" style="cursor: pointer;" data-target="#galeria" data-slide-to="2"> | |
<img width="75" class="imgGal" src="img/galeria/3.jpg" style="cursor: pointer;" data-target="#galeria" data-slide-to="3"> | |
<img width="75" class="imgGal" src="img/galeria/4.jpg" style="cursor: pointer;" data-target="#galeria" data-slide-to="4"> | |
<img width="75" class="imgGal" src="img/galeria/5.jpg" style="cursor: pointer;" data-target="#galeria" data-slide-to="5"> | |
<img width="75" class="imgGal" src="img/galeria/6.jpg" style="cursor: pointer;" data-target="#galeria" data-slide-to="6"> | |
<img width="75" class="imgGal" src="img/galeria/7.jpg" style="cursor: pointer;" data-target="#galeria" data-slide-to="7"> | |
<img width="75" class="imgGal" src="img/galeria/8.jpg" style="cursor: pointer;" data-target="#galeria" data-slide-to="8"> | |
</div> | |
<!-- Paginação 2 --> | |
<div id="gal2" style="display: none; margin: 13 30 30 0px; float: center;"> | |
<img width="75" class="imgGal" src="img/galeria/7.jpg" style="cursor: pointer;" data-target="#galeria" data-slide-to="9"> | |
<img width="76" class="imgGal" src="img/galeria/6.jpg" style="cursor: pointer;" data-target="#galeria" data-slide-to="10"> | |
<img width="76" class="imgGal" src="img/galeria/5.jpg" style="cursor: pointer;" data-target="#galeria" data-slide-to="11"> | |
<img width="76" class="imgGal" src="img/galeria/4.jpg" style="cursor: pointer;" data-target="#galeria" data-slide-to="12"> | |
<img width="76" class="imgGal" src="img/galeria/3.jpg" style="cursor: pointer;" data-target="#galeria" data-slide-to="13"> | |
<img width="76" class="imgGal" src="img/galeria/2.jpg" style="cursor: pointer;" data-target="#galeria" data-slide-to="14"> | |
<img width="76" class="imgGal" src="img/galeria/1.jpg" style="cursor: pointer;" data-target="#galeria" data-slide-to="1"> | |
<img width="75" class="imgGal" src="img/galeria/8.jpg" style="cursor: pointer;" data-target="#galeria" data-slide-to="8"> | |
</div> | |
</div> | |
<div class="col-md-1"> | |
<ul class="pagination"> | |
<li> | |
<a id="AbrirGal2" href="#gal2" aria-label="Next"> | |
<span aria-hidden="true" class="glyphicon glyphicon-circle-arrow-right" style="padding: 1 3 0 3px;"></span> | |
</a> | |
</li> | |
</ul> | |
</div> <!-- Col-md-1 --> | |
</div> <!-- Row --> | |
</div> <!-- Modal-footer --> | |
</div> <!-- Panel-Default --> | |
</div> <!-- Modal - Dialog --> | |
</div> <!-- Modal id="Mapa" --> | |
</div> <!-- MarginContato --> | |
<!-- modal --> | |
<div class="marginContato"> | |
<div id="form" class="modal fade bs-example-modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"> | |
<div class="modal-dialog modal-lg"> | |
<div class="panel panel-primary" style="border-radius: 8px;"> | |
<div class="panel-heading text-center"> | |
Formulário de contato: | |
</div> | |
<div class="panel-body"> | |
<div class="col-md-6"> | |
<form class="form-group"> | |
<div class="form-group-sm"> | |
<label for="nome">Nome:</label> | |
<input type="text" class="form-control" id="ContatoNome" placeholder="Insira seu Nome"> | |
</div> | |
<div class="form-group-sm"> | |
<label>Email:</label> | |
<input type="email" class="form-control" id="ContatoEmail" placeholder="Insira seu Email"> | |
</div> | |
<div class="marginContato"> | |
<label>Conteúdo:</label> | |
<textarea class="form-control espacoTextArea" style="margin-bottom: 15px;"cols="50" rows="9"></textarea> | |
</div> | |
<input type="submit" class="btn btn-success btn-sm" style="margin: 10 5 0 0px;" value="Enviar"> | |
<input type="button" class="btn btn-danger btn-sm" style="margin: 10 5 0 0px;" data-dismiss="modal" value="Cancelar"> | |
</form> | |
</div> <!-- Col-md-6 --> | |
<div class="col-md-6"> | |
<div class="text-center"> | |
<h4>Informações:</h4> | |
</div> | |
<div class="colCorte"> | |
<p> | |
Suco de cevadiss deixa as pessoas mais interessantiss. | |
Leite de capivaris, leite de mula manquis. Cevadis im ampola pa arma uma pindureta. | |
Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e fermentis. | |
</p> | |
<p> | |
Posuere libero varius. Nullam a nisl ut ante blandit hendrerit. Aenean sit amet nisi. | |
Si num tem leite então bota uma pinga aí cumpadi! Mé faiz elementum girarzis, nisi eros vermeio. | |
Diuretics paradis num copo é motivis de denguis. | |
</p> | |
<p> | |
Quem num gosti di mum que vai caçá sua turmis! | |
Si u mundo tá muito paradis? Toma um mé que o mundo vai girarzis! | |
Ta deprimidis, eu conheço uma cachacis que pode alegrar sua vidis.” | |
Quem num gosta di mé, gente num é. | |
</p> | |
<p> | |
Nullam volutpat risus nec leo commodo, | |
Quem num gosti di mum que vai caçá sua turmis! | |
</p> | |
</div> <!--ColCorte --> | |
</div> <!-- Col-md-6 --> | |
</div> <!-- Panel-Body --> | |
</div> <!-- Panel-primary --> | |
</div> <!-- Modal-Dialog --> | |
</div> <!-- Modal (form) --> | |
</div> <!-- MarginContato --> | |
<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script> | |
<script type="text/javascript" src="js/bootstrap.min.js"></script> | |
<script> | |
$( "#a" ).click(function() { | |
$( "#dorm5" ).toggle( 200 ); | |
}); | |
$( "#b" ).click(function() { | |
$( "#dorm5" ).toggle( 200 ); | |
}); | |
$( "#d" ).click(function() { | |
$( "#dorm5" ).toggle( 200 ); | |
}); | |
$( "#c" ).click(function() { | |
$( "#dorm5" ).toggle( 200 ); | |
}); | |
$( "#AbrirGal2" ).click(function() { | |
$( "#gal2 , #gal1" ).toggle( 550 ); | |
}); | |
$( "#AbrirGal1" ).click(function() { | |
$( "#gal2 , #gal1" ).toggle( 550 ); | |
}); | |
</script> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body{ | |
width: 100%; | |
background-color: #201F1F; | |
} | |
.container{ | |
width: 980px; | |
border: 1px solid gray; | |
background-color: #E6E6E6; | |
padding-top: 5px; | |
} | |
.logo{ | |
width: 70%; | |
margin-top: 10px; | |
margin-bottom: 10px; | |
margin-left: 90px; | |
} | |
.conteudo{ | |
background-color: #F2F2F2; | |
} | |
.nav{ | |
margin-left: 2px; | |
margin-top: 1px; | |
margin-bottom: 1px; | |
background-color: transparent; | |
} | |
.espacoTextArea{ | |
width: 100%; | |
} | |
.marginContato{ | |
width: 100%; | |
} | |
#carousel-example-generic{ | |
width: 100%; | |
} | |
.colCorte{ | |
padding-left: 25px; | |
font-size: 14px; | |
font-variant: small; | |
} | |
.foot{ | |
margin: 10 0 20 0px; | |
} | |
.textoMd4{ | |
margin-left: 4px; | |
margin-top: 15px; | |
} | |
label{ | |
font-size: 13.5px; | |
margin: 6 0 6 0px; | |
} | |
#carousel-example-generic2{ | |
width: 100%; | |
} | |
#galeria{ | |
width: 97%; | |
} | |
.imgGal:active { | |
border: 1px solid green; | |
} | |
#titulosGen { | |
margin-bottom: 20px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment