<style>
#pgscroll::-webkit-scrollbar { width: 5px; }
#pgscroll::-webkit-scrollbar-track { background-color: #111;}
#pgscroll::-webkit-scrollbar-thumb { background-color: #f2bb38; border: 1px solid #111; }
#pg {
background-color: #000;
width: 500px;
height: 200px;
position: relative;
}
.pgstuff {
position: absolute;
width: 470px;
height: 170px;
padding: 5px;
background: #111;
margin-left: 10px;
top: 10px;
color: #ccc;
font-family: calibri;
font-size: 11px;
line-height: 11px;
text-align: justify;
opacity: 0;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.pgstuff:hover {
opacity: 1;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.pgstuff p:first-letter {
font-family: georgia;
font-size: 20px;
float: left;
margin: 0px 7px;
background-color: #f24138;
padding: 8px;
display: inline-block;
color: #ccc;
}
.pgstuff a {
display: inline-block;
width: 80px;
height: 20px;
background: #000;
font-family: arial;
font-size: 9px;
line-height: 20px;
font-weight: bold;
letter-spacing: 1px;
color: #4ecac9;
text-transform: uppercase;
text-decoration: none;
}
.pgstuff a:hover {
color: #68ca4e;
}
.text {
font-family: impact;
font-size: 100px;
fill: none;
stroke-width: 2;
stroke-linejoin: round;
stroke-dasharray: 70 330;
stroke-dashoffset: 0;
-webkit-animation: stroke 6s infinite linear;
animation: stroke 6s infinite linear;
}
.text:nth-child(5n + 1) {
stroke: #f24138;
-webkit-animation-delay: -1.2s;
animation-delay: -1.2s;
}
.text:nth-child(5n + 2) {
stroke: #f27138;
-webkit-animation-delay: -2.4s;
animation-delay: -2.4s;
}
.text:nth-child(5n + 3) {
stroke: #f2bb38;
-webkit-animation-delay: -3.6s;
animation-delay: -3.6s;
}
.text:nth-child(5n + 4) {
stroke: #68ca4e;
-webkit-animation-delay: -4.8s;
animation-delay: -4.8s;
}
.text:nth-child(5n + 5) {
stroke: #4ecac9;
-webkit-animation-delay: -6s;
animation-delay: -6s;
}
@-webkit-keyframes stroke {
100% { stroke-dashoffset: -400; }
}
@keyframes stroke {
100% { stroke-dashoffset: -400; }
}
svg {
width: 100%;
margin: 0 auto 50px;
display: block;
text-transform: uppercase; }
</style>
<center>
<div id="pg">
<svg viewBox="0 0 700 300">
<symbol id="s-text">
<text text-anchor="middle" x="50%" y="50%" dy=".25em">
JEGVIRAG
</text>
</symbol>
<use xlink:href="#s-text" class="text"></use>
<use xlink:href="#s-text" class="text"></use>
<use xlink:href="#s-text" class="text"></use>
<use xlink:href="#s-text" class="text"></use>
<use xlink:href="#s-text" class="text"></use>
</svg>
<div class="pgstuff">
<center>
<a href="http://jegvirag.gportal.h" class="links">link</a>
<a href="http://jegvirag.gportal.h" class="links">link</a>
<a href="http://jegvirag.gportal.h" class="links">link</a>
<a href="http://jegvirag.gportal.h" class="links">link</a>
<a href="http://jegvirag.gportal.h" class="links">©</a>
</center>
<div id="pgscroll" style="width: 460px; height: 140px; overflow: auto; padding: 5px;">
<p>Az oldal PORTLPT ami tartalmazza az albbi linkeket:DESIGN,SCRIPT,HTML kd,Segtsg.2005.04.12.-n indult az oldal azta vrom a segtsgre szorul G-portlos.Ha brmi szrevteled van irhatsz e-mailt
[email protected] vagy irhatsz a vendgknyv be,meg a chat-be is.TANULJ,SZPTSD az oldaladat de a legfontosabb hogy kzbe jl rezd magad!
JgVirg</p>
<p>Szerkeszt:JgVirg
Trhely: gportal.hu
Kategoria:Portlpts
Induls:2005.04.12.
URL:jegvirag.gportal.hu</p>
</div>
</div>
</div>
</center>