Espaco branco entre as divs
Olá, boa tarde a todos.
Queria uma ajuda estou desenvolvendo um site para uma barbearia (meu tcc) e estou enfrentando um problema, minhas divs tem espaços brancos entre elas, aqui o codigo:
HTML
Spoiler
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!--jquery da google para rodar os scripts-->
<link rel="stylesheet" type="text/css" href="css/estilo.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LM</title>
</head>
<body>
<!--criando o Menu bar-->
<div class="wrapper">
<nav>
<div class="logo"><font face="Lumberjack"><center>L&M Barbearia</center> </font></div>
<img src="ur" alt="">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#">Produtos</a></li>
<li><a href="#servicos">Servicos</a></li>
<li><a href="#historia">Historia</a></li>
<li><a href="#formulario">Fale Conosco</a></li>
</ul>
</nav>
<div id="home"></div>
<section class="sec1"></section>
<section class="content"><p>Lorem Ipsum é simplesmente uma simulação de texto da indústria
tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor
desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de
tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a
editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou
na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum,
e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica
como Aldus PageMaker.Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e
de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma
bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não
só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado.
Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente
quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.</p>
</section>
</div>
<script type="text/javascript">
//menu preto quando rola o site
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
//script para rolagem suave com ancora em div
var $doc = $('html, body');
$('a').click(function() {
$doc.animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});
</script>
<div id="servicos">
<p>
<img src="teste.png" width="1339" height="500">
</p>
</div>
<!--criacao do serviços-->
<!--criando o formulario-->
<div id="historia"><p>
<img src="historialm.png" width="1339" height="500">
</p></div>
<div id="formulario">
<form name="form" action="" method="POST" >
<h2><font face="Lumberjack">Fale Conosco</font></h2>
<p class="nome">
<input type="text" name="nome" placeholder="Nome" required="required">
</p>
<p class="email">
<input type="email" name="email" placeholder="Email" required="required">
</p>
<p class="assunto">
<input type="assunto" name="assunto" placeholder="Assunto" required="required">
</p>
<p class="mensagem">
<textarea name"mensagem" placeholder="Mensagem"> </textarea>
</p>
<p class="enviar">
<input type="submit" name="enviar" value="Enviar">
</p>
</form>
</div>
<div id="mapa">
<p>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3675.878763330844!2d-43.467833285478896!3d-22.88093654270053!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9bdfeb5d9d57ad%3A0xf168e26d9efa7959!2sL+%26+M+Barbearia!5e0!3m2!1spt-BR!2sbr!4v1533766022158"
width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</p>
</div>
<!--termina aqui-->
<!--div id="box1">
<center><font color="#FFFFFF"><h3>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.</h3></font></center>
</div>
<div id="box2">
<h1>Julio</h1>
</div-->
</body>
</html>
**CSS:**
Spoiler
body{
margin: 0;
padding: 0;
}
nav {
position:fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
padding: 10px 100px;
box-sizing: border-box;
transition: .3s;
}
nav.black {
background: rgba(16, 16, 16);
height: 100px;
padding: 10px 100px;
}
nav .logo {
padding: 0px 0px;
height: 100px;
width: 100px;
float: left;
font-size: 24px;
transition: .3s;
}
nav.black .logo {
color: #fff;
}
nav ul {
list-style: none;
float: right;
margin: 0;
padding: 0;
display: flex;
}
nav ul li {
list-style: none;
}
nav ul li a {
line-height: 80px;
color:#151515;
padding: 12px 30px;
text-decoration: none;
text-transform: uppercase ;
transition: .3s;
}
nav.black ul li a{
color: #fff;
}
nav ul li a:focus {
outline: none;
}
nav ul li a.active {
background: #E2472F;
color: #fff;
border-radius: 6px;
}
section.sec1 {
width: 100%;
height: 100vh;
background: url(intro_site.png) ;
background-size: cover;
background-position: center;
}
.content {
margin-top: 80px;
}
.content p{
widows: 900px;
margin:30px auto;
text-align: justify;
font-size: 20px;
line-height: 30px;
}
#box1{
height:100vh;
width: 100%;
background-image: url(testeparallax.jpg);
background-size: cover;
background-attachment: fixed;
display: table;
}
#box2{
height:100vh;
width: 100%;
background-image: url(testeparallax1.jpg);
background-size: cover;
background-attachment: fixed;
display: table;
}
h1{
font-family: Consolas black;
font-size: 50px;
color:white;
margin: 0px;
text-align: center;
}
#servicos {
position:justify;
left:12px;
top:13px;
width:100%;
height:20px;
z-index:1;
background:#ede6dc;
color: white;
display: table ;
}
#teste {
position:justify;
left:12px;
top:13px;
width:100%;
height:20px;
z-index:1;
background:#a9a9a9;
color: white;
display: table ;
}
#formulario {
background:#9d8a7b ;
}
form{
font-size: 16px ;
background: #9d8a7b ;
margin: 0 auto;
padding: 0 10px 10px 10px;
}
h2 {
color: #333;
}
input, textarea {
width: 470px ;
padding: 10px ;
}
.enviar input {
background: #212121 ;
height: 40px;
width: 150px;
font-weight: bold ;
border-radius: 5px;
border: 1px solid;
color: #fff;
cursor: pointer;
}
.enviar input:hover {
background: #595353;
}
textarea{
width: 470px;
height: 120px;
line-height: 20px;
}
#mapa {
background: #9d8a7b;
}
Aqui estao fotos do meu site e os espacos.Discussão (3)
Carregando comentários...