Nota Keyword
Una nota mas palabras claves!
Una nota mas palabras claves!
<!--Nota mas boton flow - Keyword = Nota Keyword-- >
<!-- Nota mas boton flow - Keyword = Nota Keyword--><p class="titulo">Keyword</p>
<p class="nota">Mi cuenta de twitter es <a href="https://twitter.com/mrjopino">@mrjopino</a> hoy 26 de noviembre amaneci con ganas de programar, cualquier cosa asi sea un simple boton o esta nota.</p>
<div class="flow">
<boton class="Keyword">Keyword</boton>
<boton class="Keyword">Keyword</boton>
</div><p class="nota">Solamente es de imaginar, cojer la laptop y comenzar a desarrollar tu mundo creativo con <a href="https://twitter.com/mrjopino">HTML5</a> y <a href="https://twitter.com/mrjopino">CSS3</a></p>
<div class="flow">
<boton class="Keyword">Keyword</boton>
<boton class="Keyword">Keyword</boton>
</div><p class="corazon">♥</p>
/* Keyword design by @mrjopino */
/* Keyword design by @mrjopino */@import url(http://fonts.googleapis.com/css?family=Lobster|Titan+One);
body {font: 16px/1.5em Lobster, sans-serif;
margin: 0 auto;
padding: 3em 0 2em;
max-width: 540px;
}
.titulo {text-align:center;
margin:auto;
font-family: Titan One;
font-size:60px;
color:#303338;
margin: 2% auto 0;}
.corazon {text-align:center;
margin:auto;
font-family: Titan One;
font-size:60px;
color:#e8367f;
margin: 2% auto 0;}
.nota {margin: 3em 0 0 2em;
padding: 0.5em 0 0.5em 2em;
border-left: 1px solid #b3b3b3;
color: #b3b3b3;
}
.nota a {
color: #1a1a1a;
text-decoration: none;
}
.nota a:hover {
border-bottom: 1px solid #33bbff;
}
/* Boton */.flow boton {
border: none;
background: hsl(192, 15%, 84%);
border-radius: 4px;
outline: none;
padding: 7px 10px;
color: #fff;
font-size: 12px;
}
.flow boton:hover {
background: hsl(204, 8%, 76%);
transition: background .7s;
}
.flow boton:active {
background: hsl(204, 8%, 66%);
}
.flow .Keyword {
border: none;
background: hsl(6, 78%, 57%);
}
.flow .Keyword:hover {
background: #7db9e8
}
.flow .Keyword:active {
background: hsl(6, 64%, 36%)
}