1
I don’t know where I’m going wrong, but my footer is in the middle of the page. It’s my future portfolio, so it’s not all going to be final. Other suggestions are welcome.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family:'Open Sans';
}
header{
width: 100%;
height: 65px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
z-index: 1;
}
h1{
padding: 20px;
}
#menu ul{
margin-right: 5%;
}
#menu li{
margin-right: 0.5%;
display: inline;
padding: 20px;
float: right;
}
#menu li a{
color: #ffffff;
font-family: 'Open Sans';
text-decoration: none;
padding: 10px;
}
#menu a:hover{
text-decoration: underline;
}
h1{
margin-left: 5%;
color:#fff;
text-decoration: none;
float: left;
font-size: 20px;
}
#banner{
position: relative;
background:url(img/code-3.jpeg) no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
background-position:0px 0px ;
/*margin-bottom: 30px;*/
}
#banner p{
position: relative;
text-align: center;
color: #fff;
font-family: 'Open Sans';
font-size: 3.5em;
top:48%;
/*left: 400px;*/
}
.secao{
position: absolute;
width: 100%;
/*height: 100vh;*/
background-color: #eee;
}
.servicos{
padding: 1.5%;
margin-top: 60px;
margin-left: 10%;
width: 35%;
float: left;
border-radius:7px;
/*height: 300px;*/
color:#2d2d2d;
/*background-color: #eee;*/
text-align: center;
}
.servicos h2{
font-family: 'Roboto';
font-size: 2.4em;
margin-bottom: 2%;
}
.servicos p{
font-family: 'Open Sans';
font-size: 120%;
line-height: 30px;
}
.tecnologias{
margin:10% 0;
width: 100%;
}
.tecnologias h2{
margin-bottom: 4%;
}
.tecno{
display: inline-block;
margin-left: 2%;
}
footer{
position: relative;
background-color: red;
font-size: 40px;
}<!DOCTYPE html>
<html lang="pt-br">
<title>Alexandre | Desenvolvedor Web</title>
<meta charset="utf-8">
<link rel="stylesheet" href="estilo.css">
<link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans:300|Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhaijaan|Montserrat|Slabo+27px" rel="stylesheet">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<body>
<header id="cabecalho">
<h1>Alexandre | Front End Developer <i class="fa fa-code"></i></h1>
<nav id="menu">
<ul id="lista">
<li> <a href="#">Home</a></li>
<li><a href="#">Sobre</a></li>
<li> <a href="#">Contato</a></li>
<li> <a href="#">Serviços</a></li>
</ul>
</nav>
</header>
<div id="banner"><p>Posso Te Ajudar A Ter Um Site Só Seu</p></div>
<section class="secao">
<div class="servicos">
<h2>Quem Sou Eu</h2>
<p>Oi! Me chamo Alexandre e sou Desenvolvedor Front End.</p>
<p>Isso quer dizer que se você tem uma empresa, um hobbie, ou um projeto e precisa de um site para exibir na web eu posso te ajudar.</p>
</div>
<div class="servicos">
<h2>Serviços</h2>
<p>Trabalho com desenvolvimento de sites usando as mais atuais tecnologias buscando os melhores resultados possíveis.</p>
</div>
<div class="servicos tecnologias">
<h2>Tecnologias Que Uso</h2>
<div class="tecno">
<figure>
<img src="img/html5-badge-156.png" alt="logo html5">
<figcaption>HTML5</figcaption>
</figure>
</div>
<div class="tecno">
<figure>
<img src="img/css3-156.png" alt="logo css3">
<figcaption>CSS3</figcaption>
</figure>
</div>
<div class="tecno">
<figure>
<img src="img/javascript-156.png" alt="logo javascript">
<figcaption>JAVASCRIPT</figcaption>
</figure>
</div>
<div class="tecno">
<figure>
<img src="img/wordpress-156.png" alt="wordpress logo">
<figcaption>WORDPRESS</figcaption>
</figure>
</div>
</div>
</section>
<footer>
<p>teste</p>
</footer>
</body>
</html>
And how you want the footer to look?
– Wictor Chaves
For your footer to always be at the end of the screen you have to use javascript, because the screen size depends on each user. You’re saying the footer is in the middle of the screen, I have to scroll to see it. You have to take the client screen size and then adjust your footer accordingly.
– Helder Pereira
I want it to be at the bottom of the page. I thought I might be missing some position in the code.
– Alexandre Oliveira