Skip to content

Instantly share code, notes, and snippets.

@silvadias22
Last active May 17, 2016 15:57
Show Gist options
  • Save silvadias22/88bb986c85f72fd8cebf0ff253436e32 to your computer and use it in GitHub Desktop.
Save silvadias22/88bb986c85f72fd8cebf0ff253436e32 to your computer and use it in GitHub Desktop.
Bootstrap - Marc
<div>
<img class="logo" src="img/galeria/logo1.png">
</div>
<!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>
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