Title e Subtitle Personalizado com css

Title e Subtitle Personalizado com css.

Neste artigo vamos fazer um Title e sub title Personalizado com css.

Vamos Adicionar o html:

<article class="title-personalizado">
  
  <h1 class="title-h1">Loop Nerd </h1>
  
  <p class="subtitle line">
   <span><i class="icon-flash"></i> Html e Css <i class="icon-flash"></i></span>
   </p>
  
  <div class="text">
    
    <p>
        o papel do HTML5 não é apenas estruturar documentos para web, mais também descrever o significado do conteúdo 
        presente nesses documentos por meio de TAGS semânticas.<br>
    </p>

     <a href="https://www.loopnerd.com.br/codigos-pronto/conheca-as-principais-tags-semanticas-do-html5/" title="Saiba mais...">Saiba mais...</a>
  
  </div>

</article>

Vamos Adicionar o Css

.title-h1 {
  
  font-family:'open_sansregular';
  font-size: 2em;
  text-align: center;
  margin-bottom:20px;

}

.title-personalizado {

  width: 100%;
  overflow: hidden;
  margin: 0 auto 50px;

}

.subtitle { margin: 0 0 1.5em 0; }

.line {
  line-height: 0.5;
  text-align: center;
}

.line span {
  display: inline-block;
  position: relative;  
}

.line span:before,
.line span:after {
  content: "";
  position: absolute;
  height: 5px;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
  top: 0;
  width: 500px;
}

.line span:before {
  right: 100%;
  margin-right: 18px;
}

.line span:after {
  left: 100%;
  margin-left: 18px;
}

.line span i { color:#00c6ce; }

.text {

  font-family:'open_sanslight';
  text-align: center;

}

.text p {
  margin: 0 0 1em 0;
}

.text a {
  
  text-decoration:underline;
  color:#00c6ce; 
}

.text a:hover {
  
  color:#232323; 
}

/*Responsivo*/
/*768PX BREAKPOINT*/
@media (min-width:48em){

.title-personalizado { width:60%; }
.title-h1            { font-size:3.2em; }

} 

Veja o Resultado!

Baixar Código Veja Funcionando