Header Html e Css

Header Html e Css

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.

Veja neste tutorial como criar um Header title css personalizado com html css.

Nesta seção, projetaremos uma estrutura simples na tag <header>, <h2> e a <span> para inserirmos o sub titulo de descrição. 

Essas são as tags que usaremos para criar o nosso Header Html.

Vamos Adicionar o HTML

         <header class="box-header">
              
              <h2 class="header-title">Loop <b>Nerd</b>
                <span>Códigos Html e CSS Prontos</span>
              </h2>
            
         </header> 

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar o nosso Header Html com CSS.

.header-title {

  position: relative;
  padding: 0;
  margin: 0;
  font-family: 'open_sansregular';
  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;
}

.header-title span {

  display: block;
  line-height: 1.3;

}

.header-title b {

  font-style: normal;
  font-weight: bold;
  font-family: 'open_sansbold';
  color: #007cff;

}

.box-header { text-align:center; }

.box-header .header-title {

  text-transform: capitalize;
}

.box-header .header-title:before {

    position: absolute;
    left: 47%;
    bottom: 0;
    width: 70px;
    height: 2px;
    content: "";
    background-color: #007cff;

}

.box-header .header-title span {
  
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 5px;
  line-height: 3em;
  padding-left: 0.25em;
  color: #4c4c4c;
  padding-bottom: 10px;
  
}

Combinando as Duas seções acima com Html e Css  temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando