Olá a todos,
Estou aprendendo HTML/CSS, e estou criando uma página para um amigo(ou tentando)…Criei a pagina inicial, e quero criar outra.
Copio o header e footer da inicial para deixar padronizado e mudar somente a section: porém, o footer está ficando em cima da pagina, sobrepondo o header.
Alguém sabe o porque? Podem me ajudar?
Segue o Codigo HTML:
<title>Montana´s Hamburgueria</title>
<link rel= "stylesheet" href= "lib/bootstrap/css/bootstrap.min.css">
<link rel = "stylesheet" href="lib/owl.carousel2/dist/assets/owl.carousel.min.css">
<link rel="stylesheet" href="font-awesome/font-awesome/css/font-awesome.min.css">
<link rel = "stylesheet" href="lib/owl.carousel2/dist/assets/owl.theme.default.min.css">
<link rel= "stylesheet" href= "montana.css">
<header>
<div id="hamburgueria">
<h1>Montana´s Hamburgueria</h1>
</div>
<div id="busca" class="pull-right">
<div class="input-group">
<input type="search" placeholder="Busca...">
<span class="input-group-btn">
<button type="button"><i class="fa fa-search"></i></button>
</span>
</div>
</div>
<div class="img">
<img id="logotipo" src="img/logo-xtudo.png" alt="logotipo">
</div>
<div class="container">
<div class="row">
<nav id="menu" class= "pull-right">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="cardapio.html">Cardápio</a></li>
<li><a href="#">Redes Sociais</a></li>
<li><a href="#">Fale Conosco</a></li>
<li><a href="sobre.html">Sobre Nós</a></li>
</ul>
</nav>
</div>
</div>
</header>
</div>
<div id="promocao" class="container">
<div class="row text-center">
<h2>Nossas Promoções</h2>
<hr>
</div>
<div class="row thumbnails owl-carousel owl-theme">
<div class="promo">
<div class="promos-item">
<img src="img/bacon-duplor.jpg" alt="Promocao">
<h3>Peça já o seu!<small>Promoção Válida de Segunda a Quarta</small></h3>
</div>
</div>
<div class="promo">
<div class="promos-item">
<img src="img/bacon-duplor.jpg" alt="Promocao">
<h3>Peça já o seu!<small>Promoção Válida de Segunda a Quarta</small></h3>
</div>
</div>
<div class="promo">
<div class="promos-item">
<img src="img/bacon-duplor.jpg" alt="Promocao">
<h3>Peça já o seu!<small>Promoção Válida de Segunda a Quarta</small></h3>
</div>
</div>
<div class="promo">
<div class="promos-item">
<img src="img/bacon-duplor.jpg" alt="Promocao">
<h3>Peça já o seu!<small>Promoção Válida de Segunda a Quarta</small></h3>
</div>
</div>
<div class="promo">
<div class="promos-item">
<img src="img/bacon-duplor.jpg" alt="Promocao">
<h3>Peça já o seu!<small>Promoção Válida de Segunda a Quarta</small></h3>
</div>
</div>
<div class="promo">
<div class="promos-item">
<img src="img/bacon-duplor.jpg" alt="Promocao">
<h3>Peça já o seu!<small>Promoção Válida de Segunda a Quarta</small></h3>
</div>
</div>
<div class="promo">
<div class="promos-item">
<img src="img/montanas-triplor.jpg" alt="Promocao">
<h3>Peça já o seu!<small>Promoção Válida de Segunda a Quarta</small></h3>
</div>
</div>
<div class="promo">
<div class="promos-item">
<img src="img/salada-duplor.jpg" alt="Promocao">
<h3>Peça já o seu!<small>Promoção Válida de Segunda a Quarta</small></h3>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-logo">
<img src="img/montanas-hamburgueria.jpg">
</div>
<div class="col-md-8">
<div class="col-md-6 col-endereco">
<h4>Endereço</h4>
<p>
R. São Paulo n.2704
14.600-000</br>
São Joaquim da Barra</br>
Telefone: 3728-4889
</p>
</div>
<div class="col-md-6 col-links">
<h4>Links</h4>
<ul class="list-unstyled">
<li><a href="#"><i class= "fa fa-cutlery"></i> Cardápio</a> </li>
<li><a href="#"><i class= "fa fa-facebook"></i> Facebook</a> </li>
<li><a href="#"><i class= "fa fa-envelope-o"></i> Fale Conosco </a> </li>
<li><a href="#"><i class= "fa fa-angle-down"></i> Sobre Nós </a> </li>
</ul>
</div>
</div>
</div>
</div>
CSS:
@font-face{
font-family:‘Rochester-Regular’;
src: url("…/fonts/Rochester-Regular.tff");
font-size: 1em;
}
header {
background-color:#ff6633;
width: 100%;
height: 176px;
position: absolute;
}
header .container{
position:relative;
}
header .container ul{
margin-left: 296px;
}
header .container li a{
color:#FFFFFF;
text-decoration: none;
text-transform: uppercase;
}
header #logotipo{
position: absolute;
margin-left: 40px;
margin-top: -132px;
}
#menu li{
display: inline-block;
font-size: 16px;
}
#menu{
margin-top: 140px 0;
}
#menu li a{
padding: 10px 25px;
}
#menu ul{
margin-top: 48px;
}
#busca .input-group{
margin-left:1305px;
padding: 7px;
}
#busca{
margin-top: -76px;
}
#busca .input-group i{
font-size: 20px;
color:rgba(255, 255, 255, 1);
}
#banner {
background: url(“img/xtudohd.jpg”) no-repeat;
background-size: cover;
width: 100%;
height: 700px;
}
#hamburgueria h1{
font-family: ‘Rochester’, cursive;
font-size: 60px;
margin-left: 420px;
color: #FFF;
text-shadow: 1px 2px 2px;
transition: 1s;
}
#hamburgueria h1.efeito{
color:red;
font-size: 5em;
}
#promocao h3{
color:#e74c3c;
margin-left:24px;
}
#promocao .thumbnails .promos-item{
}
#promocao .thumbnails .promos-item img{
width: 200px;
}
#promocao .thumbnails{
margin-left: 112px;
}
#promocao hr{
border: 1px solid #f1c40f;
}
#promocao h3 small{
display: block;
font-size: 10px;
color: #2ecc71;
margin-left: -18px;
margin-top: 6px;
font-weight: bold;
}
footer .row-gold{
background-color:#ff6633;
}
footer .col-endereco p{
margin-top: 5px;
margin-bottom: 5px;
text-transform: uppercase;
}
footer .col-logo img {
margin-top: 8px;
margin-bottom: 8px;
}
footer .col-md-8 p{
color:#FFFFFF;
}
footer .col-md-8 ul{
margin-top: 0;
}
footer .col-md-8 li a{
text-decoration: none;
color:#FFFFFF;
text-transform: uppercase;
}
Obrigado a quem puder ajudar!!!