Header Html Estilo Orgânico
PRÓXIMO
Header Html Estilo Fast food
ANTERIOR
Header Html Design em Linhas
Postado: 26 de maio de 2023
Tempo de Leitura: 2 Minutos
Header Html Estilo Orgânico
O elemento HTML <header> representa um grupo de suporte introdutório ou navegacional. Pode conter alguns elementos de cabeçalho mas também outros elementos como um logo, seções de cabeçalho, formulário de pesquisa, e outros.
A tag Header é usado para definir uma seção de header, mas em relação ao elemento que a contém. Ou seja, pode ser usado como título de uma página inteira o uso mais comum, mas também como título de um artigo ou de qualquer outra parte do conteúdo da página.
Veja neste artigo como criar um Header Html Estilo Orgânico personalizado com html css.
Nesta seção, projetaremos uma estrutura simples na tag <header> e a <h1> para inserirmos o titulo.
Essas são as tags que usaremos para criar o nosso Header Estilo Orgânico com css.
Vamos Adicionar o HTML
HTML
<header class="box-header">
<h1 class="the-title">Produtos Orgânicos <span>Comer bem para viver melhor.</span></h1>
</header> Vamos Adicionar o CSS
Nesta seção, usaremos algumas propriedades CSS para estilizar o nosso Header Estilo Orgânico
Lembrando aqui que usamos a font do google Pacifico.
Além disso se você não sabe como inserir font do google no html e css.
Veja detalhado aqui neste outro artigo. Como usar fonts do Google no CSS!
CSS
@import url('https://fonts.googleapis.com/css2?family=Grand+Hotel&family=Pacifico&display=swap');
.the-title {
position: relative;
padding: 0;
margin: 0;
font-family: "Raleway", sans-serif;
font-weight: 300;
font-size: 40px;
color: #080808;
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.the-title span {
display: block;
font-size: 0.7em;
line-height: 2;
letter-spacing: 4px;
color: #696969;
}
.box-header .the-title {
font-size:30px;
text-align:center;
line-height:1.5em;
padding-bottom:50px;
font-family: 'Pacifico', cursive;
letter-spacing: 1px;
color:#5aae63;
}
.box-header .the-title:before {
position: absolute;
left: 0;
bottom: 20px;
width: 30%;
left: 50%;
margin-left: -15%;
height: 1px;
content: "";
background-color: #bae3bf;
z-index: 4;
}
.box-header .the-title:after {
position: absolute;
width: 50px;
height: 50px;
left: 50%;
margin-left: -20px;
bottom: 5px;
font-family: 'IcoFont';
content: '\eb9c';
font-size: 50px;
line-height: 59px;
color: #5aae63;
font-weight: 400;
z-index: 5;
display: block;
background-color: #fff;
}Combinando as Duas seções acima com Html e Css temos o seguinte Resultado!
Conclusão
O HTML Header, seja como <head> ou <header>, é essencial para o funcionamento e organização de uma página web. O primeiro serve para fornecer informações técnicas e de configuração, enquanto o segundo estrutura e apresenta informações iniciais visíveis ao usuário. Ambos são indispensáveis para criar sites eficientes, bem organizados e acessíveis.
Veja o Resultado baixo!
Deixe um comentário