Végre rávettem magam hogy készítsek/átalakítsak sok-sok kódot. Már kb. egy hónapja készítgetem őket de folyton elakadok, és a végén már semmi kedvem az egészhez!:D De most befejeztem, és itt is vagyok. Viszont kérek mindenkit hogy írjon ha elvisz valamit, mert elég sokat dolgoztam ezekkel a kódokkal, úgyhogy szeretném látni hogy ki mit visz el, és hova!
HA hasznosnak véltétek ezt a bejegyzést, akkor szavazzatok a blogra, esetleg rám, mert tudjátok, mindnekinek ingyen egy óriási szeretetteljes ölelés jár!:") (már 61-et kiosztottunk!)
Ha keretet látsz a képek körül, (zöld vékony) akkor az csak a sablon miatt van, nem kell figyelembe venni!
Szövegdobozok
Információk
Angel Blog Design
szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg
|
Információk
|
szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg
|
Információk
szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg
Információk
You're never gonna love me, so what's the use? What's the point in playing a game you're gonna lose? What's the point in saying, you love me like a friend? What's the point in saying, it's never gonna end? Lies, don't wanna know, don't wanna know, I can't let you go, can't let you go. I just want it to be perfect, to believe it's all been worth the fight. Lies, don't wanna know, don't wanna know.
You're never gonna love me, so what's the use? What's the point in playing a game you're gonna lose? What's the point in saying, you love me like a friend? What's the point in saying, it's never gonna end? Lies, don't wanna know, don't wanna know, I can't let you go, can't let you go. I just want it to be perfect, to believe it's all been worth the fight. Lies, don't wanna know, don't wanna know.
You're never gonna love me, so what's the use? What's the point in playing a game you're gonna lose? What's the point in saying, you love me like a friend? What's the point in saying, it's never gonna end? Lies, don't wanna know, don't wanna know, I can't let you go, can't let you go. I just want it to be perfect, to believe it's all been worth the fight. Lies, don't wanna know, don't wanna know.
Karakteres dobozok
Zack
|
szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg
|
age
group
pb
group
pb
Lily Moll
szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg és szöveg szöveg szöveg
Zack Godol
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
Zack
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
jenna
online
currently typing...
d currently listening to: rudimental - more than anything
|
hai this is text. this is more text. and this is EVEN MORE text. woo! hai this is text. this is more text. and this is EVEN MORE text. woo! hai this is text. this is more text. and this is EVEN MORE text. woo! hai this is text. this is more text. and this is EVEN MORE text. hai this is text. this is more text. and this is EVEN MORE text. woo! hai this is text. this is more text. and this is EVEN MORE text. woo! hai this is text. this is more text. and this is EVEN MORE text. woo! hai this is text. this is more text. and this is EVEN MORE text. woo! hai this is text. this is more text. and this is EVEN MORE text. woo! hai this is text. this is more text. and this is EVEN MORE text. hai this is text. this is more text. and this is EVEN MORE text. woo! hai this is text. this is more text. and this is EVEN MORE text. woo! hai this is text. this is more text. and this is EVEN MORE text. woo! hai this is text. this is more text. and this is EVEN MORE text. woo! hai this is text. this is more text. and this is EVEN MORE text. woo! hai this is text. this is more text. and this is EVEN MORE text. hai this is text. this is more text. and this is EVEN MORE text. woo! hai this is text. this is more text. and this is EVEN MORE text. woo! hai this is text. this is more text. and this is EVEN MORE text. woo! hai this is text. this is more text. and this is EVEN MORE text. woo! hai this is text. this is more text. and this is EVEN MORE text. woo! hai this is text. this is more text. and this is EVEN MORE text. hai this is text. this is more text. and this is EVEN MORE text. woo! hai this is text. this is more text. and this is EVEN MORE text. woo!
|
szöveg szövegszövegszövegszövegszövegszöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg öveg szöveg szöveg szöveg öveg szöveg szöveg szöveg öveg szöveg szöveg szöveg öveg szöveg szöveg szöveg öveg szöveg szöveg szöveg öveg szöveg szöveg szöveg öveg szöveg szöveg szöveg öveg szöveg szöveg szöveg öveg szöveg szöveg szöveg öveg szöveg szöveg szöveg
Szövegdoboz kódjai
1. kód
<style>
/*place image url in code below */
.hdmg {background-image:url('http://i60.tinypic.com/2mqlt0l.png');}
@font-face { font-family:Silkscreen; src:url('http://static.tumblr.com/9lu3i4y/cRUmwj5m2/slkscre.ttf'); }
.thrd { width:250px; height:500px; background-color:#c64a6e; -webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); -o-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); border-bottom:10px solid #ffd85e; }
.hdmg {width:250px; height:180px; border-bottom:10px solid #ffd85e; position:relative; }
.ovtx { width:250px; height:200px; display:table-cell; vertical-align:middle; color:white; font-family:Francois One, sans-serif; font-size:25px; text-transform:uppercase; letter-spacing:-1px; position:relative; pointer-events:none; }
.ovtx:after { content:''; display:block; position:absolute; top:0px; height:200px; width:250px; background:-webkit-gradient(linear,left top,left bottom,color-stop(rgba(0, 0, 0, 0.4),0),color-stop(rgba(255, 255, 255, 0.3),0.59),color-stop(rgba(0, 0, 0, 0.4),1)); /*@@prefixmycss->No equivalent*/
background:-webkit-linear-gradient(top, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0.3) 59%, rgba(0, 0, 0, 0.4) 100%), url('http://the.midnightchannel.net/design/static.gif') no-repeat; background:-moz-linear-gradient(top, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0.3) 59%, rgba(0, 0, 0, 0.4) 100%), url('http://the.midnightchannel.net/design/static.gif') no-repeat; background:-o-linear-gradient(top, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0.3) 59%, rgba(0, 0, 0, 0.4) 100%), url('http://the.midnightchannel.net/design/static.gif') no-repeat; background:linear-gradient(top, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0.3) 59%, rgba(0, 0, 0, 0.4) 100%), url('http://the.midnightchannel.net/design/static.gif') no-repeat; opacity:0; -webkit-transition:0.5s ease-in-out; -moz-transition:0.5s ease-in-out; -o-transition:0.5s ease-in-out; transition:0.5s ease-in-out; pointer-events:none; }
.ovtx span { position:relative; z-index:55; opacity:000000; -webkit-transition:0.5s ease-in-out 0.1s; -moz-transition:0.5s ease-in-out 0.1s; -o-transition:0.5s ease-in-out 0.1s; transition:0.5s ease-in-out 0.1s; text-shadow:1px 1px 0px #000000, -1px -1px 0px #0; }
.ovtx span:before { content:attr(data-title); position:absolute; -webkit-transition:0.2s ease; -moz-transition:0.2s ease; -o-transition:0.2s ease; transition:0.2s ease; -webkit-transform:skewX(10deg) scale(1.1); -moz-transform:skewX(10deg) scale(1.1); -ms-transform:skewX(10deg) scale(1.1); -o-transform:skewX(10deg) scale(1.1); transform:skewX(10deg) scale(1.1); -webkit-animation:tpp 0.2s linear infinite; -moz-animation:tpp 0.2s linear infinite; -ms-animation:tpp 0.2s linear infinite; -o-animation:tpp 0.2s linear infinite; animation:tpp 0.2s linear infinite; top:12px; left:0; opacity:0.2; text-shadow:1px 1px 0px #00ffff, -1px -1px 0px #ff00ff; }
.ovtx span:after { content:attr(data-title); position:absolute; -webkit-transition:0.2s ease; -moz-transition:0.2s ease; -o-transition:0.2s ease; transition:0.2s ease; -webkit-transform:skewX(-10deg) scale(1.1); -moz-transform:skewX(-10deg) scale(1.1); -ms-transform:skewX(-10deg) scale(1.1); -o-transform:skewX(-10deg) scale(1.1); transform:skewX(-10deg) scale(1.1); -webkit-animation:btt 0.2s linear infinite; -moz-animation:btt 0.2s linear infinite; -ms-animation:btt 0.2s linear infinite; -o-animation:btt 0.2s linear infinite; animation:btt 0.2s linear infinite; top:13px; left:0; opacity:0.2; text-shadow:1px 1px 0px #ff00ff, -1px -1px 0px #00ffff; }
@keyframes tpp { 50% { transform:skewX(-10deg); }}
@keyframes btt { 50% { transform:skewX(10deg); }}
@-webkit-keyframes tpp { 50% { -webkit-transform:skewX(-10deg); }}
@-webkit-keyframes btt { 50% { -webkit-transform:skewX(10deg); }}
@-moz-keyframes tpp { 50% { -moz-transform:skewX(-10deg); }}
@-moz-keyframes btt { 50% { -moz-transform:skewX(10deg); }}
@-o-keyframes tpp { 50% { -o-transform:skewX(-10deg); }}
@-o-keyframes btt { 50% { -o-transform:skewX(10deg); }}
.hdmg:hover .ovtx:after { opacity:0.5; -webkit-transition:0.5s ease-in-out; -moz-transition:0.5s ease-in-out; -o-transition:0.5s ease-in-out; transition:0.5s ease-in-out; }
.hdmg:hover .ovtx > span { opacity:1; -webkit-transition:0.5s ease-in-out; -moz-transition:0.5s ease-in-out; -o-transition:0.5s ease-in-out; transition:0.5s ease-in-out; }
.lilfo,.lilfo a { font-family:Silkscreen, monospace; font-size:8px; color:#444; height:10px; width:250px; margin-top:5px; text-transform:none; font-style:normal; text-decoration:none; font-weight:normal; text-shadow:1px 0px 0px rgba(255, 0, 255, 0.30000000000000004), -1px 0px 0px rgba(0, 255, 255, 0.30000000000000004); }
.tlx { background-color:rgba(255, 255, 255, 0.5); width:230px; height:250px; margin:5px 20px; -webkit-box-shadow:1px 1px 1px rgba(0, 255, 255, 0.050000000000000044), -1px -1px 1px rgba(255, 0, 255, 0.050000000000000044), -2px -2px 1px rgba(0, 255, 255, 0.050000000000000044), 2px 2px 1px rgba(255, 0, 255, 0.050000000000000044); -moz-box-shadow:1px 1px 1px rgba(0, 255, 255, 0.050000000000000044), -1px -1px 1px rgba(255, 0, 255, 0.050000000000000044), -2px -2px 1px rgba(0, 255, 255, 0.050000000000000044), 2px 2px 1px rgba(255, 0, 255, 0.050000000000000044); box-shadow:1px 1px 1px rgba(0, 255, 255, 0.050000000000000044), -1px -1px 1px rgba(255, 0, 255, 0.050000000000000044), -2px -2px 1px rgba(0, 255, 255, 0.050000000000000044), 2px 2px 1px rgba(255, 0, 255, 0.050000000000000044); font-family:arial, sans-serif; font-size:11px; text-align:justify; overflow-y:auto; }
.tlx::-webkit-scrollbar { width:5px; background-color:transparent; }
.tlx::-webkit-scrollbar-thumb { background-color:#444; -webkit-box-shadow:1px 1px 1px rgba(0, 255, 255, 0.050000000000000044), -1px -1px 1px rgba(255, 0, 255, 0.050000000000000044), -2px -2px 1px rgba(0, 255, 255, 0.050000000000000044), 2px 2px 1px rgba(255, 0, 255, 0.050000000000000044); -moz-box-shadow:1px 1px 1px rgba(0, 255, 255, 0.050000000000000044), -1px -1px 1px rgba(255, 0, 255, 0.050000000000000044), -2px -2px 1px rgba(0, 255, 255, 0.050000000000000044), 2px 2px 1px rgba(255, 0, 255, 0.050000000000000044); box-shadow:1px 1px 1px rgba(0, 255, 255, 0.050000000000000044), -1px -1px 1px rgba(255, 0, 255, 0.050000000000000044), -2px -2px 1px rgba(0, 255, 255, 0.050000000000000044), 2px 2px 1px rgba(255, 0, 255, 0.050000000000000044);}
.txtm { width:295px; padding:5px; padding-right:0px; }
.txtm p { margin-top:5px; }
.txtm p:first-letter {text-shadow: 1px 0px 0px rgba(255, 0, 255, 0.30000000000000004), -1px 0px 0px rgba(0, 255, 255, 0.30000000000000004); font-size:11px; line-height:10px; padding-top:1px; float: left; padding-left:15px; padding-right:2px; font-weight:500;}
.dera, .dera a {text-decoration:none; font-family:Verdana, Geneva, sans-serif; font-size:6px; text-transform:uppercase; letter-spacing:4px; color:#fff; text-align:center; text-shadow: 1px 1px 3px rgba(0,0,0, 0); z-index:555; position:relative;}
</style><link href='http://fonts.googleapis.com/css?family=Francois+One' rel='stylesheet' type='text/css'><center><div class="thrd"><div class="hdmg">
<div class="ovtx">
<span data-title="">Információk</span>
</div></div><div class="lilfo">
Angel Blog Design
</div><div class="tlx"><div class="txtm">
<p>szöveg ide</p>
</div></div></div><div class="dera" style="margin-top:-10px;"> <a href=""></a></div></center>
/*place image url in code below */
.hdmg {background-image:url('http://i60.tinypic.com/2mqlt0l.png');}
@font-face { font-family:Silkscreen; src:url('http://static.tumblr.com/9lu3i4y/cRUmwj5m2/slkscre.ttf'); }
.thrd { width:250px; height:500px; background-color:#c64a6e; -webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); -o-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0); border-bottom:10px solid #ffd85e; }
.hdmg {width:250px; height:180px; border-bottom:10px solid #ffd85e; position:relative; }
.ovtx { width:250px; height:200px; display:table-cell; vertical-align:middle; color:white; font-family:Francois One, sans-serif; font-size:25px; text-transform:uppercase; letter-spacing:-1px; position:relative; pointer-events:none; }
.ovtx:after { content:''; display:block; position:absolute; top:0px; height:200px; width:250px; background:-webkit-gradient(linear,left top,left bottom,color-stop(rgba(0, 0, 0, 0.4),0),color-stop(rgba(255, 255, 255, 0.3),0.59),color-stop(rgba(0, 0, 0, 0.4),1)); /*@@prefixmycss->No equivalent*/
background:-webkit-linear-gradient(top, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0.3) 59%, rgba(0, 0, 0, 0.4) 100%), url('http://the.midnightchannel.net/design/static.gif') no-repeat; background:-moz-linear-gradient(top, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0.3) 59%, rgba(0, 0, 0, 0.4) 100%), url('http://the.midnightchannel.net/design/static.gif') no-repeat; background:-o-linear-gradient(top, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0.3) 59%, rgba(0, 0, 0, 0.4) 100%), url('http://the.midnightchannel.net/design/static.gif') no-repeat; background:linear-gradient(top, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0.3) 59%, rgba(0, 0, 0, 0.4) 100%), url('http://the.midnightchannel.net/design/static.gif') no-repeat; opacity:0; -webkit-transition:0.5s ease-in-out; -moz-transition:0.5s ease-in-out; -o-transition:0.5s ease-in-out; transition:0.5s ease-in-out; pointer-events:none; }
.ovtx span { position:relative; z-index:55; opacity:000000; -webkit-transition:0.5s ease-in-out 0.1s; -moz-transition:0.5s ease-in-out 0.1s; -o-transition:0.5s ease-in-out 0.1s; transition:0.5s ease-in-out 0.1s; text-shadow:1px 1px 0px #000000, -1px -1px 0px #0; }
.ovtx span:before { content:attr(data-title); position:absolute; -webkit-transition:0.2s ease; -moz-transition:0.2s ease; -o-transition:0.2s ease; transition:0.2s ease; -webkit-transform:skewX(10deg) scale(1.1); -moz-transform:skewX(10deg) scale(1.1); -ms-transform:skewX(10deg) scale(1.1); -o-transform:skewX(10deg) scale(1.1); transform:skewX(10deg) scale(1.1); -webkit-animation:tpp 0.2s linear infinite; -moz-animation:tpp 0.2s linear infinite; -ms-animation:tpp 0.2s linear infinite; -o-animation:tpp 0.2s linear infinite; animation:tpp 0.2s linear infinite; top:12px; left:0; opacity:0.2; text-shadow:1px 1px 0px #00ffff, -1px -1px 0px #ff00ff; }
.ovtx span:after { content:attr(data-title); position:absolute; -webkit-transition:0.2s ease; -moz-transition:0.2s ease; -o-transition:0.2s ease; transition:0.2s ease; -webkit-transform:skewX(-10deg) scale(1.1); -moz-transform:skewX(-10deg) scale(1.1); -ms-transform:skewX(-10deg) scale(1.1); -o-transform:skewX(-10deg) scale(1.1); transform:skewX(-10deg) scale(1.1); -webkit-animation:btt 0.2s linear infinite; -moz-animation:btt 0.2s linear infinite; -ms-animation:btt 0.2s linear infinite; -o-animation:btt 0.2s linear infinite; animation:btt 0.2s linear infinite; top:13px; left:0; opacity:0.2; text-shadow:1px 1px 0px #ff00ff, -1px -1px 0px #00ffff; }
@keyframes tpp { 50% { transform:skewX(-10deg); }}
@keyframes btt { 50% { transform:skewX(10deg); }}
@-webkit-keyframes tpp { 50% { -webkit-transform:skewX(-10deg); }}
@-webkit-keyframes btt { 50% { -webkit-transform:skewX(10deg); }}
@-moz-keyframes tpp { 50% { -moz-transform:skewX(-10deg); }}
@-moz-keyframes btt { 50% { -moz-transform:skewX(10deg); }}
@-o-keyframes tpp { 50% { -o-transform:skewX(-10deg); }}
@-o-keyframes btt { 50% { -o-transform:skewX(10deg); }}
.hdmg:hover .ovtx:after { opacity:0.5; -webkit-transition:0.5s ease-in-out; -moz-transition:0.5s ease-in-out; -o-transition:0.5s ease-in-out; transition:0.5s ease-in-out; }
.hdmg:hover .ovtx > span { opacity:1; -webkit-transition:0.5s ease-in-out; -moz-transition:0.5s ease-in-out; -o-transition:0.5s ease-in-out; transition:0.5s ease-in-out; }
.lilfo,.lilfo a { font-family:Silkscreen, monospace; font-size:8px; color:#444; height:10px; width:250px; margin-top:5px; text-transform:none; font-style:normal; text-decoration:none; font-weight:normal; text-shadow:1px 0px 0px rgba(255, 0, 255, 0.30000000000000004), -1px 0px 0px rgba(0, 255, 255, 0.30000000000000004); }
.tlx { background-color:rgba(255, 255, 255, 0.5); width:230px; height:250px; margin:5px 20px; -webkit-box-shadow:1px 1px 1px rgba(0, 255, 255, 0.050000000000000044), -1px -1px 1px rgba(255, 0, 255, 0.050000000000000044), -2px -2px 1px rgba(0, 255, 255, 0.050000000000000044), 2px 2px 1px rgba(255, 0, 255, 0.050000000000000044); -moz-box-shadow:1px 1px 1px rgba(0, 255, 255, 0.050000000000000044), -1px -1px 1px rgba(255, 0, 255, 0.050000000000000044), -2px -2px 1px rgba(0, 255, 255, 0.050000000000000044), 2px 2px 1px rgba(255, 0, 255, 0.050000000000000044); box-shadow:1px 1px 1px rgba(0, 255, 255, 0.050000000000000044), -1px -1px 1px rgba(255, 0, 255, 0.050000000000000044), -2px -2px 1px rgba(0, 255, 255, 0.050000000000000044), 2px 2px 1px rgba(255, 0, 255, 0.050000000000000044); font-family:arial, sans-serif; font-size:11px; text-align:justify; overflow-y:auto; }
.tlx::-webkit-scrollbar { width:5px; background-color:transparent; }
.tlx::-webkit-scrollbar-thumb { background-color:#444; -webkit-box-shadow:1px 1px 1px rgba(0, 255, 255, 0.050000000000000044), -1px -1px 1px rgba(255, 0, 255, 0.050000000000000044), -2px -2px 1px rgba(0, 255, 255, 0.050000000000000044), 2px 2px 1px rgba(255, 0, 255, 0.050000000000000044); -moz-box-shadow:1px 1px 1px rgba(0, 255, 255, 0.050000000000000044), -1px -1px 1px rgba(255, 0, 255, 0.050000000000000044), -2px -2px 1px rgba(0, 255, 255, 0.050000000000000044), 2px 2px 1px rgba(255, 0, 255, 0.050000000000000044); box-shadow:1px 1px 1px rgba(0, 255, 255, 0.050000000000000044), -1px -1px 1px rgba(255, 0, 255, 0.050000000000000044), -2px -2px 1px rgba(0, 255, 255, 0.050000000000000044), 2px 2px 1px rgba(255, 0, 255, 0.050000000000000044);}
.txtm { width:295px; padding:5px; padding-right:0px; }
.txtm p { margin-top:5px; }
.txtm p:first-letter {text-shadow: 1px 0px 0px rgba(255, 0, 255, 0.30000000000000004), -1px 0px 0px rgba(0, 255, 255, 0.30000000000000004); font-size:11px; line-height:10px; padding-top:1px; float: left; padding-left:15px; padding-right:2px; font-weight:500;}
.dera, .dera a {text-decoration:none; font-family:Verdana, Geneva, sans-serif; font-size:6px; text-transform:uppercase; letter-spacing:4px; color:#fff; text-align:center; text-shadow: 1px 1px 3px rgba(0,0,0, 0); z-index:555; position:relative;}
</style><link href='http://fonts.googleapis.com/css?family=Francois+One' rel='stylesheet' type='text/css'><center><div class="thrd"><div class="hdmg">
<div class="ovtx">
<span data-title="">Információk</span>
</div></div><div class="lilfo">
Angel Blog Design
</div><div class="tlx"><div class="txtm">
<p>szöveg ide</p>
</div></div></div><div class="dera" style="margin-top:-10px;"> <a href=""></a></div></center>
2. kód
<link href='http://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
<style>
.sofetch { background: #F0A830; color: #000000; text-align: justify; width: 235px; height: 20px; transition-duration: 0.8s;-moz-transition-duration: 0.8s;-webkit-transition-duration: 0.8s;-o-transition-duration: 0.8s; opacity: 1.0; }
.sofetch:hover { background: #F07818; opacity: 1.00; }
</style>
<center>
<div style="width: 250px; background: url('http://colourlovers.com.s3.amazonaws.com/images/patterns/582/582552.png?1250954754'); padding: 10px; border-radius:20px;">
<div style="background: #eeeeee; border: 1px dotted #cccccc; padding: 10px;">
<table width=230px><tr>
<td>
<img src="http://24.media.tumblr.com/tumblr_mbfmdfPrT11ri5a3wo1_500.jpg" width="230">
</td>
</tr>
<tr>
<td>
<div style="color: #78C0A8; font-family: 'Satisfy', cursive; font-size: 30px; font-style: italic; margin: 0px 20px -5px 0px; text-align: right; text-shadow: 1px 0px #ddd, 0px 1px #ddd, -1px 0px #ddd, 0px -1px #ddd; line-height: 100%;">Információk</div>
<div class="sofetch"></div>
</td>
</tr>
<tr>
<td>
<div style="background: #FFFFFF; padding: 15px;">
<div style="font-family: tahoma; font-size: 12px; line-height: 100%; text-align: justify; color: #333333; ">
szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg
</div>
</div>
</td>
</tr></table>
<div class="sofetch"></div>
</div>
</div>
<div style="color: #777777; padding: 5px 0px 0px 0px; text-align: center; font: 10px trebuchet ms; line-height: 11pt; text-decoration: none;">
<i> <a href=""></a> <a href=""></a> <a href=""></a> </i>
</div>
3. kód
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<center>
<div style="width: 250px; border-bottom: 1px dashed #aaaaaa; border-right: 1px dashed #aaaaaa; border-top: 20px solid #57405A; border-left: 20px solid #57405A;">
<div style="border-top: 1px dashed #aaaaaa; border-left: 1px dashed #aaaaaa; border-bottom: 20px solid #D5C5D0; border-right: 20px solid #D5C5D0;">
<div style="background-color: #eeeeee; padding:10px;">
<img src="http://24.media.tumblr.com/tumblr_mbyhomGJKR1rj2orjo1_500.gif" width="210px">
<div style="color: #332D39; font-family: 'Open Sans Condensed', sans-serif; font-size: 26px; text-transform: uppercase; letter-spacing: 3; margin: 10px 0px 10px 0px; line-height: 100%;">Információk</div>
<div style="border-top: 20px solid #4A073C;"></div>
<div style="background: #FFFFFF; padding: 10px; font-family: calibri; font-size: 13px; line-height: 100%; text-align: justify; color: #333333; height: auto;">
szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg
</div>
<div style="border-bottom: 20px solid#4A073C;"></div>
</div></div></div>
<div style="color: #999999; padding: 5px 0px 0px 0px; text-align: center; font: 10px trebuchet ms; line-height: 11pt; text-decoration: none;">
<i> <a href=""></a> <a href=""></a> <a href=""></a> </i>
</div>
</center>
<center>
<div style="width: 250px; border-bottom: 1px dashed #aaaaaa; border-right: 1px dashed #aaaaaa; border-top: 20px solid #57405A; border-left: 20px solid #57405A;">
<div style="border-top: 1px dashed #aaaaaa; border-left: 1px dashed #aaaaaa; border-bottom: 20px solid #D5C5D0; border-right: 20px solid #D5C5D0;">
<div style="background-color: #eeeeee; padding:10px;">
<img src="http://24.media.tumblr.com/tumblr_mbyhomGJKR1rj2orjo1_500.gif" width="210px">
<div style="color: #332D39; font-family: 'Open Sans Condensed', sans-serif; font-size: 26px; text-transform: uppercase; letter-spacing: 3; margin: 10px 0px 10px 0px; line-height: 100%;">Információk</div>
<div style="border-top: 20px solid #4A073C;"></div>
<div style="background: #FFFFFF; padding: 10px; font-family: calibri; font-size: 13px; line-height: 100%; text-align: justify; color: #333333; height: auto;">
szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg
</div>
<div style="border-bottom: 20px solid#4A073C;"></div>
</div></div></div>
<div style="color: #999999; padding: 5px 0px 0px 0px; text-align: center; font: 10px trebuchet ms; line-height: 11pt; text-decoration: none;">
<i> <a href=""></a> <a href=""></a> <a href=""></a> </i>
</div>
</center>
4. kód
<center>
<link href='http://fonts.googleapis.com/css?family=Lekton:400' rel='stylesheet' type='text/css'>
<style>
.liesscroll::-webkit-scrollbar { height: 7px; background: #7f6603; }
.liesscroll::-webkit-scrollbar-thumb { background: url(http://i4.minus.com/iqHJC7Qg3J4yE.png); }
.liesscroll::-webkit-scrollbar-corner { background: url(http://i4.minus.com/iqHJC7Qg3J4yE.png); }
.lies { width: 200px; height: 200px; transition-duration: 2.0s;-moz-transition-duration: 1.0s;-webkit-transition-duration: 1.0s;-o-transition-duration: 1.0s; opacity: 0.0; color: #FFFFFF; font-family: Lekton; }
.lies:hover { opacity: 1.0; }
.liesbground { background: #FFFFFF; width: 220px; padding: 15px; border-radius: 200px 200px 0px 0px; opacity: 1.0; }
</style>
<div class="liesbground">
<div style="background: #dae4ee; width: 200px; padding: 10px; border-radius: 200px 200px 0px 0px;">
<div style="background: url(http://i4.minus.com/ibqA5xdxNRxmdd.png); height: 200px; width: 200px; border-radius: 200px;"><div class="lies"><div style="width: 150px; height: 20px; background: #7f6603; position: relative; top: 150px; padding: 10px; color: #FFFFFF;">Információk</div></div>
</div>
<div style="padding-top: 10px;"></div>
<div class="liesscroll" style="background: #f0f0f7; width: 190px; height: 140px; font-family: 'Lekton', sans-serif; color: #2e1901; opacity: 0.8; overflow: auto; padding: 5px; letter-spacing: 0px; line-height: 90%; text-align: justify;">
szoveeeeeg ide
<br><br>
szoveeeeeeeg es ide
</div>
</div>
<div style="font-family: 'Lekton', sans-serif; color: #917f32;"><a href=""><span style="color: #917f32;"></span></a></div>
</center>
Karakteres dobozok
1. kód
<center>
<div style="width: 310px; background: #181419; border-top: 1px dotted #999999; border-bottom: 1px dotted #999999;">
<div style="border-top: 20px solid #7A0A32; border-bottom: 20px solid #7A0A32; padding: 5px;">
<div style="font-family: 'Orator std', sans-serif; color: #ffffff; font-size: 15px; padding: 4px;">
Zack
</div>
<table width="300px">
<tr>
<td width="100px" valign="top">
<img src="http://media.tumblr.com/tumblr_mbyap7pr361rtzgos.png" width="100px" height="100px" style="border: 5px solid #000000;">
</td>
<td width="200px" valign="top">
<div style="background: #363837; border: 5px solid #000000; height: 90px; overflow: auto; color: #cccccc; font-family: trebuchet ms; font-size: 11px; text-align: justify; padding: 5px; line-height: 90%;">
szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg
</div>
</td>
</tr>
</table>
<div style="width: 290px; background: #000000; color: #cccccc; font-family: 'courier new'; font-size: 10px; padding: 2px;">
<marquee>
IDE IS ÍRHATSZ
</marquee>
</div>
</div>
</div>
<div style="color: #999999; padding: 5px 0px 0px 0px; text-align: center; font: 10px trebuchet ms; line-height: 11pt; text-decoration: none;">
<i> <a href=""> </a> <a href=""> </a> <a href=""> </a> </i>
</div>
</center>
<div style="width: 310px; background: #181419; border-top: 1px dotted #999999; border-bottom: 1px dotted #999999;">
<div style="border-top: 20px solid #7A0A32; border-bottom: 20px solid #7A0A32; padding: 5px;">
<div style="font-family: 'Orator std', sans-serif; color: #ffffff; font-size: 15px; padding: 4px;">
Zack
</div>
<table width="300px">
<tr>
<td width="100px" valign="top">
<img src="http://media.tumblr.com/tumblr_mbyap7pr361rtzgos.png" width="100px" height="100px" style="border: 5px solid #000000;">
</td>
<td width="200px" valign="top">
<div style="background: #363837; border: 5px solid #000000; height: 90px; overflow: auto; color: #cccccc; font-family: trebuchet ms; font-size: 11px; text-align: justify; padding: 5px; line-height: 90%;">
szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg
</div>
</td>
</tr>
</table>
<div style="width: 290px; background: #000000; color: #cccccc; font-family: 'courier new'; font-size: 10px; padding: 2px;">
<marquee>
IDE IS ÍRHATSZ
</marquee>
</div>
</div>
</div>
<div style="color: #999999; padding: 5px 0px 0px 0px; text-align: center; font: 10px trebuchet ms; line-height: 11pt; text-decoration: none;">
<i> <a href=""> </a> <a href=""> </a> <a href=""> </a> </i>
</div>
</center>
2. kód
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=PT+Mono' rel='stylesheet' type='text/css'>
<style>
/*put 100x100 icon in the coding right below!*/
.iox {background-image: url('http://i43.tinypic.com/mjrdjp.png');}
.cox {margin: 0 auto; width:315px; height:120px;}
.pox {background-color:#F4F4F2; width:315px; height:120px; margin: 0 auto; z-index:4; position:absolute;}
.loxc {width: 0px; height: 0px; border-style: solid; border-width: 25px 60px 25px 0; border-color: transparent #243A69 transparent transparent; position:absolute; margin-left: -60px; margin-top:35px; z-index:1;}
.loxs {border-width: 17.5px 35px 17.5px 0; border-style: solid; border-color: transparent #243A69 transparent transparent; position:absolute; margin-left: -35px; width: 0px; height: 0px; z-index:1;}
.roxc {width: 0px; height: 0px; border-style: solid; border-width: 25px 0px 25px 60px; border-color: transparent transparent transparent #243A69; position:absolute; margin-left: 315px; margin-top:35px; z-index:1;}
.roxs {border-width: 17.5px 0px 17.5px 35px; border-style: solid; border-color: transparent transparent transparent #243A69; position:absolute; margin-left: 315px; width: 0px; height: 0px; z-index:1;}
.fox {margin-left:10px; margin-top:3px;border:3px solid #243A69; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; height:104px; width:104px; position:absolute; position:absolute; padding:2px;}
.iox {border:2px solid #243A69; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; height:100px; width:100px;}
.oox {background-color:#f1f1f1; width:100px; height:100px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; opacity:0; -webkit-transition: 1s all ease; -moz-transition: 1s all ease; -o-transition: 1s all ease; -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s;}
.ooxt {color:#5B88A5; width:80px; font-family: 'PT Mono', sans-serif; font-size: 11px; text-transform:uppercase; -webkit-transition: 1s all ease-in-out; -moz-transition: 1s all ease-in-out; -o-transition: 1s all ease-in-out; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -o-transition-delay: 1s; opacity:0; padding-top:25; padding-left:10px; text-align:center;}
.tox {width:160px; height: 80px; margin-left:140px; color:#191013; line-height: 90%; text-align:justified; font-size:9px; font-family: 'PT Mono', sans-serif; text-transform:lowercase; position:absolute; z-index:5; overflow:hidden;}
.hox {margin-left:140px; margin-top:15px; text-align:center; font-size:25px; font-family: 'Oswald', sans-serif; color:#B81D3A; width:160px; z-index:10; margin-bottom:7px; text-shadow: 1px 0px 0px #243A69, 2px 0px 0px #243A69; text-transform:uppercase;}
.dox, .dox a {position:relative; z-index:29; font-family:Verdana, Geneva, sans-serif; font-size:6px; text-transform:uppercase; letter-spacing:2px; color:#000; text-align:center; text-shadow: 1px 1px 1px rgba(150, 150, 150, 0.7); font-weight:500; text-decoration:none;}
.fox, .iox, .loxc, .loxs, .roxc, .roxs {-webkit-transition: 1s all ease-in; -moz-transition: 1s all ease-in; -o-transition: 1s all ease-in;}
.cox:hover .fox, .cox:hover .iox {border-color:#5B88A5; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg);}
.cox:hover .loxc, .cox:hover .loxs{border-color:transparent #5B88A5 transparent transparent;}
.cox:hover .roxc, .cox:hover .roxs{border-color: transparent transparent transparent #5B88A5;}
.cox:hover .oox {opacity:0.7;}
.cox:hover .ooxt {opacity:1;}
</style>
<div class="cox">
<div class="loxs" style="margin-top:15px;"></div><div class="loxc"></div><div class="loxs" style="margin-top:70px;"></div>
<div class="pox">
<div class="fox"><div class="iox"><div class="oox"><div class="ooxt">
age<br><br>
group<br><br>
pb</div></div></div></div>
<div class="hox">Lily Moll</div>
<div class="tox"> szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg és szöveg szöveg szöveg
</div>
</div><div class="roxs" style="margin-top:15px;"></div><div class="roxc"></div><div class="roxs" style="margin-top:70px;"></div></div><div class="dox"> <a href=""></a> <a href=""></a></div></div>
3. kód
<center>
<link href='http://fonts.googleapis.com/css?family=Fugaz+One' rel='stylesheet' type='text/css'>
<div style="font-family: 'Fugaz One', sans-serif; font-size: 30px; color: #FF003C; line-height: 100%; margin-bottom: -8px; text-shadow: 1px 0px #fff, 0px 1px #fff, -1px 0px #fff, 0px -1px #fff;"> Zack Godol</div>
<div style="width: 500px;background: #eeeeee; border-top: 20px solid #000000; border-left: 20px solid #000000; border-bottom: 1px dashed #000000; border-right: 1px dashed #000000; padding: 5px; border-radius: 10px;">
<table>
<tr>
<td width="230px" valign="top">
<img src="http://24.media.tumblr.com/tumblr_md3c56TSLX1rjscobo1_500.jpg" width="230px">
</td>
<td width="270px" valign="top">
<div style="height: 264px; overflow: auto; background: #ffffff; color: #000000; padding: 10px; text-align: justify; font: 13px calibri; line-height: 100%;">
szöveg ideee
</div>
</td>
</tr>
</table>
</div>
<div style="color: #999999; padding: 5px 0px 0px 0px; text-align: center; font: 10px trebuchet ms; line-height: 11pt; text-decoration: none;">
<i> <a href=""></a> <a href=""> </a> <a href="> </a> </i>
</div>
</center>
4. kód
<center>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200' rel='stylesheet' type='text/css'>
<div style="width: 400px; border: 30px solid #542437;">
<div style="background: #cccccc; padding: 10px;">
<img src="http://media.tumblr.com/tumblr_md704yW0HI1rxdrzz.png" width=" 150px" style="padding-right: 10px; float: left;">
<div style="color: #924458; font-family: 'Yanone Kaffeesatz', sans-serif; text-align: center; font-weight: 200; line-height: 100%; font-size: 34px; text-transform: uppercase; padding-bottom: 8px;">Zack</div>
<div style="color: #000000; font: 13px calibri; line-height: 95%; text-align: justify; font-style: italic;">
szöveg ideeeeee
</div></div></div>
<div style="color: #999999; padding: 5px 0px 0px 0px; text-align: center; font: 10px trebuchet ms; line-height: 11pt; text-decoration: none;">
<i> <a href=""> </a> </i>
</div>
</center>
5. kód
<center>
<link href='http://fonts.googleapis.com/css?family=Lily+Script+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'>
<div style="background: url('http://i272.photobucket.com/albums/jj194/lapicturing/coding/woodtexture_zpsbf88e082.png'); width: 320px; height: 170px; border-left: 8px solid #9c0a17; padding: 20px; box-shadow: 2px 2px 3px; opacity: 0.85;">
<style>
.scrollim::-webkit-scrollbar { width: 7px; background: #433836; }
.scrollim::-webkit-scrollbar-thumb { background: #99A34C; }
.scrollim::-webkit-scrollbar-corner { background: #99A34C; }
</style>
<table><td><style>
.fliptwo { -webkit-perspective: 1000; -moz-perspective: 1000; -o-perspective: 1000; width: 100px; height: 100px; }
.flipit { -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; width: 100px; height: 100px; }
.fliptwo:hover .flipit { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); }
.one { overflow: hidden; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; position: absolute; }
.two { overflow: hidden; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); opacity: 0; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; position: absolute; width: 100px; height: 100px; overflow: auto; }
.fliptwo:hover .two {-webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; opacity: 1; }
</style>
<div style="background: #ededed; padding: 5px;"><div class="fliptwo"><div class="flipit"><div class="one"><div style="border-radius: 100px; width: 100px; height: 100px; background: url('http://i272.photobucket.com/albums/jj194/lapicturing/coding/wassappp_zps0b4133fb.png');"></div></div>
<div class="two">
<div style="background: #f4f4f4; border-radius: 100px; padding: 20px; height: 60px;"><div style="font-family: Lily Script One; font-size: 20px; color: #9c0a17; text-align: center;">jenna</div>
<div style="font-family: Trebuchet MS; font-size: 10px; color: #918d7a; text-align: center; letter-spacing: 1px; line-height: 90%; margin-top: -5px;"><b><u>szöveg ide is</u></b><br>
IDE IS SZÖVEG</div>
</div></div></div>
</div></div>
<div style="background: #f4f4f4; width: 90px; height: 25px; padding: 10px; font-family: Trebuchet MS; font-size: 10px; color: #918d7a; letter-spacing: 0px; line-height: 80%; text-align: center;"> IDE IS SZÖVEG <b>rudimental</b> - <u>IDE IS SZÖVEG<u></div></td>
<td><div style="padding-left: 10px;"></div><div style="background: #ededed; padding: 5px;"><div class="scrollim" style="background: #f4f4f4; width: 180px; height: 135px; padding: 5px; font-family: Trebuchet MS; font-size: 10px; text-align: justify; overflow: auto; letter-spacing: 0px; line-height: 80%; color: #918d7a;"> SZÖVEG IDE IDE IDE</div></div></td>
</table>
</div>
<div style="font-family: Oswald; text-transform: lowercase; font-size: 10px; color: #19181e; letter-spacing: 5px;"><a href=""></a></div>
</center>
<link href='http://fonts.googleapis.com/css?family=Lily+Script+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'>
<div style="background: url('http://i272.photobucket.com/albums/jj194/lapicturing/coding/woodtexture_zpsbf88e082.png'); width: 320px; height: 170px; border-left: 8px solid #9c0a17; padding: 20px; box-shadow: 2px 2px 3px; opacity: 0.85;">
<style>
.scrollim::-webkit-scrollbar { width: 7px; background: #433836; }
.scrollim::-webkit-scrollbar-thumb { background: #99A34C; }
.scrollim::-webkit-scrollbar-corner { background: #99A34C; }
</style>
<table><td><style>
.fliptwo { -webkit-perspective: 1000; -moz-perspective: 1000; -o-perspective: 1000; width: 100px; height: 100px; }
.flipit { -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; width: 100px; height: 100px; }
.fliptwo:hover .flipit { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); }
.one { overflow: hidden; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; position: absolute; }
.two { overflow: hidden; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); opacity: 0; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; position: absolute; width: 100px; height: 100px; overflow: auto; }
.fliptwo:hover .two {-webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; opacity: 1; }
</style>
<div style="background: #ededed; padding: 5px;"><div class="fliptwo"><div class="flipit"><div class="one"><div style="border-radius: 100px; width: 100px; height: 100px; background: url('http://i272.photobucket.com/albums/jj194/lapicturing/coding/wassappp_zps0b4133fb.png');"></div></div>
<div class="two">
<div style="background: #f4f4f4; border-radius: 100px; padding: 20px; height: 60px;"><div style="font-family: Lily Script One; font-size: 20px; color: #9c0a17; text-align: center;">jenna</div>
<div style="font-family: Trebuchet MS; font-size: 10px; color: #918d7a; text-align: center; letter-spacing: 1px; line-height: 90%; margin-top: -5px;"><b><u>szöveg ide is</u></b><br>
IDE IS SZÖVEG</div>
</div></div></div>
</div></div>
<div style="background: #f4f4f4; width: 90px; height: 25px; padding: 10px; font-family: Trebuchet MS; font-size: 10px; color: #918d7a; letter-spacing: 0px; line-height: 80%; text-align: center;"> IDE IS SZÖVEG <b>rudimental</b> - <u>IDE IS SZÖVEG<u></div></td>
<td><div style="padding-left: 10px;"></div><div style="background: #ededed; padding: 5px;"><div class="scrollim" style="background: #f4f4f4; width: 180px; height: 135px; padding: 5px; font-family: Trebuchet MS; font-size: 10px; text-align: justify; overflow: auto; letter-spacing: 0px; line-height: 80%; color: #918d7a;"> SZÖVEG IDE IDE IDE</div></div></td>
</table>
</div>
<div style="font-family: Oswald; text-transform: lowercase; font-size: 10px; color: #19181e; letter-spacing: 5px;"><a href=""></a></div>
</center>
6. kód
<center><div style="width: 400px; height: 300px; background-color: #f1e3d6; padding: 5px;">
<div style="float: left;">
<div style="width: 195px; height: 200px; font: 10px trebuchet ms; text-align: justify; color: black; line-height: 100%; owerflow: auto; "> <br />szöveg szövegszövegszövegszövegszövegszöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg szöveg öveg szöveg szöveg szöveg öveg szöveg szöveg szöveg öveg szöveg szöveg szöveg öveg szöveg szöveg szöveg öveg szöveg szöveg szöveg öveg szöveg szöveg szöveg öveg szöveg szöveg szöveg öveg szöveg szöveg szöveg öveg szöveg szöveg szöveg öveg szöveg szöveg szöveg</div>
<div style="width: 195px; height: 100px; background-color: #391d1b;"></div></div>
<div style="float: right; width: 200px; height: 300px; background-image: url(http://i57.tinypic.com/t5oq5x.png);"></div>
</div></center>
További szép napot,
Angel❤
Szia, Angel!
VálaszTörlésElvittem a negyedik szövegdobozt :) Köszönöm :-*
http://csiribi-csiriba-larry-fanfiction.blogspot.hu/ - Jelenleg meghívós, mert még dolgozom a dizin :3
Love Ya,
Mace
elvittem az utolsót :D
VálaszTörlésmég az 1-et vittem
VálaszTörlésVittem a 2. karakteres dobozt ^^ Nagyon szépek, köszönöm!
VálaszTörlés