Title e Subtitle Vintage com Css

Title e Subtitle Vintage com Css

Este tutorial mostra como criar um Title e subtitle com html e css estilo vintage.

Nesta seção, projetaremos uma estrutura simples na tag <div>. 

temos dentro da tag <div> as tags <h1> e <span>.

Essas tags usaremos para criar o nosso title vintage com html e css.

Vamos Adicionar o HTML:

    <div class="box-title">

       <h1> 

          <span class="title"> Loop Nerd </span>
          <span class="subtitle"> Códigos Html e Css Prontos </span>
                  
       </h1>

    </div>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para projetar o nosso Title e subtitle.

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

.box-title h1 { 

    overflow: hidden; 
    position: relative; 
    display: inline-block;
    width: 100%; 

}

.box-title h1 .title { 

    position: relative; 
    display: inline-block; 
    font-family: 'Dancing Script', cursive;
    font-weight: bold;
    font-size: 1.5em;
    color: #826035;
    margin-bottom: 10px; 

}

.box-title h1 .title:before {

  position: absolute;
  top: 50%;
  left: 100%;
  width: 1000px;
  height: 1px;
  margin-left: 10px;
  background: #9b9b9b;
  content: "";
}

.box-title h1 .title:after {

  position: absolute;
  top: 50%;
  right: 100%;
  width: 1000px;
  height: 1px;
  margin-right: 10px;
  background: #9b9b9b;
  content: "";

}

.box-title h1 .subtitle {

  display: block;
  font-family: 'Dancing Script', cursive; 
  font-size: 1em;
  color: #9b9b9b;

}

/*Responsivo*/

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

.box-title h1           { width:50%; }
.box-title h1 .title    { font-size:2.5em; }
.box-title h1 .subtitle { font-size: 1.2em; }

} 

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

Veja o Resultado baixo!

Baixar Código Veja Funcionando