Páginas

Cartões de Natal com mensagem com opção assinar Feed e Volte ao Topo!






Como vão?
Faz tempo que não venho aqui, não é?
Pois então...Meu pc pifou e perdi tudo desde dos meus usuários até minhas senhas (Graças a Deus, eu deixo ela conectada diretamente com meu celular), depois de enlouquecer geral, me lembrei de que eu podia fazer outro usuário e usa-lo como autor.
Pois é, meio burrice, mais deu certo.
Vamos ao que interessa...
Mais antes vamos falar um pouquinho sobre os cartões de natal e os volte.
Então essas imagens foram encontradas todas na internet, eu apenas adaptei para cartões e botões de volte ao topo.
O cartões de Natal estão lindos, gente.
Modelo 

Que seu Natal seja perfeito e que a magia que Ele nos traz dure sempre em sua vida e para quem você ame. Espero que 2018 te faça tão feliz e que não exista nada que possa te impedir de sonhar ainda mais alto e mais forte, mas sonhe acordado, para alcançar tudo o que for seu. Quero continuar recebendo você aqui para que meu ano também comece bem. Por isso, digite seu e-mail abaixo e receba atualizações do blog: OK
ESCREVA AQUI


Por isso, digite seu e-mail abaixo e receba atualizações do NOME DO SEU BLOG:

Código:


<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Gabriela');
#card2 {
  height: 450px;
  padding: 0;
  position: relative;
  width: 300px;
}
#r12 {
  position: absolute;
  z-index: 2;
  -webkit-transform-origin: 1315px 500px;
  -webkit-transform: translate(-1030px, -500px) rotate(-32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -moz-transform-origin: 1315px 500px;
  -moz-transform: translate(-1030px, -500px) rotate(-32deg);
  -moz-transition-property: -moz-transform, -moz-transform-origin;
  -moz-transition-duration: 1s;
}
#p12 {
  height: 1388px;
  overflow: hidden;
  width: 1285px;
}
#p12 > div {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVu8Y-Q8ciUCeFpjRpSZE-2x5gSaokbFk34edJmQGU3KiAvLwSkVuZZxSL2FWXosgfIVQUueNE5mJvtP2b4R8Ebabi0PFeo0SgykGlmj6kMF1sCIdVUy0w5swA33rTBkht8SkYnfh0UQg/s1600/capa.jpg);
  height: 388px;
  width: 285px;
  -webkit-transform-origin: 285px 0;
  -webkit-transform: translate(1030px, 500px) rotate(32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -moz-transform-origin: 285px 0;
  -moz-transform: translate(1030px, 500px) rotate(32deg);
  -moz-transition-property: -moz-transform, -moz-transform-origin;
  -moz-transition-duration: 1s;
}
#p12 > div > div {
  height: 388px;
  width: 10px;
}
 #p22 > div {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi3NSmPTAfdlVBTOoUgzP8FKIA-aM_ie86rVU190WigJQH4OHGrfu98HQrzDfhZ5pRNakPU6YBSFy7r6qOeYqg0bfimHGX2vodNFqlzlEkN8CTrNOM9QuHjWQvJSi6hbh5YpYrHl0_V-k/s1600/capa2.jpg);
  box-shadow: 0 0 11px rgba(0, 0, 0, .5);
  height: 388px;
  position: absolute;
  width: 285px;
  z-index: 1;
}
#r32 {
  position: absolute;
  z-index: 2;
  -webkit-transform-origin: 1315px 500px;
  -webkit-transform: translate(-1030px, -500px) rotate(-32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -moz-transform-origin: 1315px 500px;
  -moz-transform: translate(-1030px, -500px) rotate(-32deg);
  -moz-transition-property: -moz-transform, -moz-transform-origin;
  -moz-transition-duration: 1s;
}
#s32 {
  position: absolute;
  z-index: 1;
  -webkit-transform-origin: 70px 500px;
  -webkit-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -moz-transform-origin: 70px 500px;
  -moz-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0);
  -moz-transition-property: -moz-transform, -moz-transform-origin;
  -moz-transition-duration: 1s;
}
#card2:hover #s32 {
  -webkit-transform-origin: 325px 500px;
  -webkit-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0);
  -moz-transform-origin: 325px 500px;
  -moz-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0);
}
#sp32 {
  height: 1000px;
  overflow: hidden;
  width: 25px;
  -webkit-transition-property: width;
  -webkit-transition-duration: 1s;
  -moz-transition-property: width;
  -moz-transition-duration: 1s;
}
#card2:hover #sp32 {
  width: 11px;
}
.s2 {
  height: 388px;
  position: absolute;
  overflow: hidden;
  width: 285px;
  z-index: 3;
}
#s22 {
  position: absolute;
  -webkit-transform-origin: 45px 500px;
  -webkit-transform: translate(240px, -500px) rotate(-32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -moz-transform-origin: 45px 500px;
  -moz-transform: translate(240px, -500px) rotate(-32deg);
  -moz-transition-property: -moz-transform, -moz-transform-origin;
  -moz-transition-duration: 1s;
}
#sp22 {
  height: 1000px;
  overflow: hidden;
  width: 15px;
}
#s42 {
  opacity: 1;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
}
#card2:hover #s42 {
  opacity: 0;
}
#card2:hover #s22 {
  -webkit-transform-origin: 300px 500px;
  -webkit-transform: translate(-15px, -500px) rotate(0deg);
  -moz-transform-origin: 300px 500px;
  -moz-transform: translate(-15px, -500px) rotate(0deg);
}
#p32 {
  height: 1388px;
  overflow: hidden;
  width: 1285px;
}
#p32 > div {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJZYkA37RbRI45S38Y6NG09VKEf4zEcG_-GMFlecK2XP6pAHlJMKk7tjvk19l9YJm9vGnaYlmM3Hp1EzqMg_jC5rnogw7Y7X6y0kz1SyWmb862Iby53STV1Hzb9fac1aF2liusYPijKfw/s1600/capa3.jpg);
  box-shadow: 0 0 11px rgba(0, 0, 0, .5);
  overflow: hidden;
  height: 388px;
  width: 285px;
  -webkit-transform-origin: 0 0;
  -webkit-transform: translate(1255px, 500px) rotate(-32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -moz-transform-origin: 0 0;
  -moz-transform: translate(1255px, 500px) rotate(-32deg);
  -moz-transition-property: -moz-transform, -moz-transform-origin;
  -moz-transition-duration: 1s;
}
#p32 > div > div {
  float: right;
  height: 500px;
  width: 9px;
}
#card2:hover #r12 {
  -webkit-transform-origin: 1570px 500px;
  -webkit-transform: translate(-1285px, -500px) rotate(0deg);
  -moz-transform-origin: 1570px 500px;
  -moz-transform: translate(-1285px, -500px) rotate(0deg);
}
#card2:hover #p12 > div {
  -webkit-transform-origin: 285px 0;
  -webkit-transform: translate(1285px, 500px) rotate(0deg);
  -moz-transform-origin: 285px 0;
  -moz-transform: translate(1285px, 500px) rotate(0deg);
}
#card2:hover #r32 {
  -webkit-transform-origin: 1570px 500px;
  -webkit-transform: translate(-1285px, -500px) rotate(0deg);
  -moz-transform-origin: 1570px 500px;
  -moz-transform: translate(-1285px, -500px) rotate(0deg);
}
#card2:hover #p32 > div {
  -webkit-transform-origin: 0 0;
  -webkit-transform: translate(1000px, 500px) rotate(0deg);
  -moz-transform-origin: 0 0;
  -moz-transform: translate(1000px, 500px) rotate(0deg);
}
#conteudo2 {
  color: #FFF;
  display: block;
  font-family: 'Gabriela', serif;
  font-size: 12px;
  height: 200px;
  margin: -20000px 0 0;
  position: absolute;
  text-align: center;
  width: 250px;
  z-index: 3;
  -webkit-transition-duration: 0.01s;
  -webkit-transition-property: margin;
  -moz-transition-duration: 0.01s;
  -moz-transition-property: margin;
}
#card2:hover #conteudo2 {
  margin: 30px 0 0 15px;
  -webkit-transition-delay: .8s;
  -moz-transition-delay: .8s;
}
.Feeed2{
  padding: 5px;
  color: #fff;
  font-family: 'Gabriela', serif;
  font-size: 12px;
  text-align: center;
}
.assine2 a{
color:#7e0e1a; /* cor do link */
text-decoration: none;
border-bottom: 1px dashed;
}
/* AREA GERAL DO WIDGET */
.assine2{
margin:10px;
margin-top:-10px;
color:#fff;
}
/* BOTAO ASSINAR */
.assine2 input[type="submit"]{
background:#7e0e1a;
color:#fff;
padding:3px 8px;
border-radius:5px;
margin:5px;
border:0;
}
.assine2 input[type="submit"]:hover{
background:#bf0c20;
color:#fff;
}
/* AREA ONDE DIGITA O EMAIL */
.assine2 input[type="text"]{
width:200px !important;
padding:6px;
border-radius:5px;
margin:5px;
box-shadow:inset 0 2px 3px #aaa;
border:0
}
</style>
<br />
<div id="card2">
<div id="r12">
<div id="p12">
<div>
<div>
</div>
</div>
</div>
</div>
<div id="p22">
<div>
</div>
</div>
<div id="r32">
<div id="p32">
<div>
<div>
</div>
</div>
</div>
</div>
<div class="s2">
<div id="s32">
<div id="sp32">
</div>
</div>
</div>
<div class="s2" id="s42">
<div id="s22">
<div id="sp22">
</div>
</div>
</div>
<div id="conteudo2">
Que seu Natal seja perfeito e que a magia que Ele nos traz dure sempre em sua vida e para quem você ame.
Espero que 2017 te faça tão feliz e que não exista nada que possa te impedir de sonhar ainda mais alto e mais forte, mas sonhe acordado, para alcançar tudo o que for seu.
Quero continuar recebendo você aqui para que meu ano também comece bem.
Por isso, digite seu e-mail abaixo e receba atualizações do Reino Kawaii:

 OK
<div style="text-align: center;">
<div class="Feeed2">
<!--INICIO CANDY FEEDBURNER-->
<br />
<div center="" class="assine2">
<!--FORMULARIO INSCRIÇAO EMAIL-->
<br />
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=XXXX', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="border: 0; padding: 3px;" target="popupwindow">
Por isso, digite seu e-mail abaixo e receba atualizações do <a href="http://feeds.feedburner.com/AutoraBrbaraAmorimBrando">Autora Bárbara Amorim Brandão</a>:
<br />
<center>
<input name="email" style="width: 250px;" type="text" /><br />
<input name="uri" type="hidden" value="XXXX" />
<input name="loc" type="hidden" value="pt_BR" />
<input type="submit" value="OK" />
</center>
</form>
</div>
</div>
<!--FIM CANDY FEEDBURNER by www.candylland.org-->
</div>
<div style="clear: both;">
</div>
</div>
</div>

Exemplos de capas:

       

Agora vamos para os botões de Volte ao topo!

https://orig00.deviantart.net/3db1/f/2017/325/e/7/volta_para_o_topo_by_barbaramorik-dbuewki.png
https://orig00.deviantart.net/fa6b/f/2017/325/7/8/volta_ao_topo_para_blog_by_barbaramorik__by_barbaramorik-dbuey4q.png
https://orig00.deviantart.net/6edf/f/2017/325/4/0/volta_ao_topo_para_blog_by_barbaramorik-dbuenoy.png
No decorrer dessa semana e da outra vou acrescentando mais.
Credito do tutorial vai para: ReinoKawaii
Marcadores: ✩

Nenhum comentário:

Postar um comentário
© Seu Blog Aqui - 2017 | Todos os direitos reservados.
Desenvolvimento por: Renata Massa | Tecnologia do Blogger.		 imagem-logo