Username   Password  
Remember   Register   |   Forgot your password?

Chapter 0 - c:

Home » Mosstalon08 » Stories » ffr template » Chapter 0 - c:
ffr template
Author
Mosstalon08
Mosstalon08
Submitted
September 29, 2013
Updated
September 29, 2013
Status
Incomplete
Chapters: 1
Size: 25k
Words: 1,100
Comments: 0
Views: 1,358
Faves...: 0
Rating: 0
Read this story >>
Category: Miscellaneous

Chapter 0 - c:

Chapter 0 - c:



<link href='http://fonts.googleapis.com/css?family=Lobster+Two:700'; rel='stylesheet' type='text/css'>

<div style=
"width:100%px;
height:125px;
box-shadow: 1px 1px 10px #A71B4A;
border: 1px solid #A71B4A; 
padding:10px;
margin: 10px; 
background-image:url(http://colourlovers.com.s3.amazonaws.com/images/patterns/360/360248.png);
color:#A71B4A;">
<br><div align="right"><font size=8><b><span style="text-shadow: 1px 1px 10px #F7FDDF;">welcome</span></b></font size></div>
</div>

<div style=
"width:200px; 
height:125px; 
overflow:hidden;
box-shadow: 1px 1px 10px #A71B4A; 
border: 1px solid #F7FDDF;
padding:10px; 
margin: 10px;
float:left;
background:#EE2853;
color:#F7FDDF;">
<div align="right"><h1>header here</h1></div>
<br>bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics taffeta 
</div>

<div style=
"width:200px; 
height:125px; 
overflow:hidden;
box-shadow: 1px 1px 10px #A71B4A; 
border: 1px solid #A71B4A;
padding:10px; 
margin: 10px;
float:left;
background:#F7FDDF;
color:#A71B4A;">
<center><br><marquee behavior="scroll" onmouseover="this.stop();" onmouseout="this.start();" id="marquee"><img src=http://colourlovers.com.s3.amazonaws.com/images/patterns/360/360248.png></img> <img src=http://colourlovers.com.s3.amazonaws.com/images/patterns/360/360248.png></img> <img src=http://colourlovers.com.s3.amazonaws.com/images/patterns/360/360248.png></img></marquee>
</div>

<div style=
"width:150px; 
height:382px; 
overflow:hidden;
box-shadow: 1px 1px 10px #A71B4A; 
border: 1px solid #A71B4A;
padding:10px; 
margin: 10px;
float:right;
background:#F7FDDF;
color:#A71B4A;">
<center><br><br><br><a class="compose" cid="43641">message</a>
<br><a href=/report.php?loc=1&other=43641>report</a>
<br><a href=/searchtopics.php?subject=&author=43641&mweor=&board=0&search=Search>my posts</a>
<br><br><br><br><br><a href=/usershop.php?id=43641>shop</a>
<br><a href=/cattery_offspring.php?id=43641>offspring</a>
<br><a href=/cattery_expected.php?id=43641>expected</a>
<br><a href=/cattery_retired.php?id=43641>retired</a>
<br><br><br><br><br><a href=/cattery.php>cattery</a>
<br><a href=/explore.php>explore</a>  
<br><a href=/chat.php>chat</a>
<br><a href=/news.php>news</a> 
<br><a href=/help.php>help</a> 
<br><a href=/logout.php>logout</a> 
<br><br><br><span class="tip" tip="coding credits: #43641 <br>palette: <u>just: lovers</u> by <b>lauren-laughs</b>, colourlovers <br>pattern: <u>candy stripes</u> by <b>vampirious</b>, colourlovers <br>layout owner: #" class="trans">☆</span></center>
</div>

<div style=
"width:270px; 
height:125px; 
overflow:hidden;
box-shadow: 1px 1px 10px  #A71B4A; 
border: 1px solid  #F7FDDF;
padding:10px; 
margin: 10px;
float: right;
background:#EE2853;
color: #F7FDDF;">
<div align="right"><h1>header here</h1></div>
<br>bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics taffeta photographs buttons c'est la vie
</div>

<br><br><div style=
"width:442px; 
height:213px; 
overflow:hidden;
box-shadow: 1px 1px 10px #A71B4A; 
border: 1px solid #F7FDDF;
padding:10px;
margin: 10px;
float:left; 
background:#EE2853;
color:#F7FDDF;">
<div align="right"><h1>header here</h1></div>
<br>bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics taffeta photographs buttons c'est la vie bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics taffeta photographs buttons c'est la vie bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics taffeta photographs buttons c'est la vie bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots
</div>

<div style=
"width:125px; 
height:100px; 
overflow:hidden;
box-shadow: 1px 1px 10px  #A71B4A; 
border: 1px solid  #A71B4A;
padding:10px; 
margin: 10px;
float: left;
background:#F7FDDF;
color: #A71B4A;">
<div align="right"><font size=1><h1>mweors</h1></font size></div>
<a href="/mweor.php?id=582701&pat=yes"><img src=/mweori.php?id=582701&tiny=1></a>
<a href="/mweor.php?id=2148827&pat=yes"><img src=/mweori.php?id=2148827&tiny=1></a>
<a href="/mweor.php?id=2572148&pat=yes"><img src=/mweori.php?id=2572148&tiny=1></a>
<a href=/mweor.php?id=2588261&pat=yes"><img src=/mweori.php?id=2588261&tiny=1></a>
<a href="/mweor.php?id=2473330&pat=yes"><img src=/mweori.php?id=2473330&tiny=1></a>
</div>

<div style=
"width:100px; 
height:100px; 
overflow:hidden;
box-shadow: 1px 1px 10px  #A71B4A; 
border: 1px solid  #F7FDFF;
padding:10px; 
margin: 10px;
float: right;
background:#EE2853;
color: #F7FDFF;">
<h1><font size=4.5><b>"Be yourself; everyone else is already taken." - Oscar Wilde</b></font size></h1>
</div>

<div style=
"width:272px; 
height:73px; 
overflow:hidden;
box-shadow: 1px 1px 10px  #A71B4A; 
border: 1px solid  #A71B4A;
padding:10px; 
margin: 10px;
float: right;
background:#F7FDDF;
color: #A71B4A;">
<br>bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics taffeta photographs buttons c'est la vie
</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<link rel="stylesheet" href="gallery.css">
<link rel="stylesheet" href="gallery.theme.css">
<div class="gallery autoplay items-3">
<div id="item-1" class="control-operator"></div>
<div id="item-2" class="control-operator"></div>
<div id="item-3" class="control-operator"></div>
<figure class="item">
<div align="right"><h1>header here</h1></div>
<br><blockquote>bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics taffeta photographs buttons c'est la vie bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics taffeta photographs buttons c'est la vie bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics taffeta photographs buttons c'est la vie bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots  tan lines thank-you notes new notebooks golden rings tutus daisies metallics taffeta photographs buttons c'est la vie bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books</blockquote>
</figure>
<figure class="item">
<div align="right"><h1>header here</h1></div>
<br><blockquote>bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics taffeta photographs buttons c'est la vie bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics taffeta photographs buttons c'est la vie bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics taffeta photographs buttons c'est la vie bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots  tan lines thank-you notes new notebooks golden rings tutus daisies metallics taffeta photographs buttons c'est la vie bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books</blockquote>
</figure>
<figure class="item">
<div align="right"><h1>header here</h1></div>
<br><blockquote>bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics taffeta photographs buttons c'est la vie bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics taffeta photographs buttons c'est la vie bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots tan lines thank-you notes new notebooks golden rings tutus daisies metallics taffeta photographs buttons c'est la vie bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books grey cats rain boots  tan lines thank-you notes new notebooks golden rings tutus daisies metallics taffeta photographs buttons c'est la vie bicycles ponies rainbows hot chocolate peppermint ice cream snow cones blizzards beach days ribbons tattered old books</blockquote>
</figure>
<br><br>
<div class="controls"> <a href="#item-1" class="control-button">•</a> <a href="#item-2" class="control-button">•</a> <a href="#item-3" class="control-button">•</a> </div>
</div>

<style>
/////////////////////////////////////////////DO NOT TOUCH CODING BEYOND THIS POINT///////////////////////////////////////////////
</style>

<font color=#F7FDDF>

<style>
#marquee
{-webkit-marquee-style: alternate;
-webkit-transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
opacity: .85;}
#marquee:hover
{opacity: 1;}
</style>

<style>
#topbanner,
#bottombanner,
#titlebar,
#bodyi, .titlebar, ul, 
#footer{display:none;}
#titleimg { display:none;}
#titletxt { display:none; }
.titlebar { display:none; height:0px}
#topbanner { display:none;}
#bottombanner img { display:none;}
#menu_holder { display:none; }
#cattery_infobox { display:none;}
img.trans {display:none;}
</style>

<style>
#cattery_descbox
{background:#EB7879;
width:991px;
height:850px;
float: right;
left:250px;
background-repeat:repeat;
background-attachment:fixed;
background-position:right;}
body
{background:#EB7879;
background-repeat:repeat;
background-attachment:fixed;
background-position:right;}
#content 
{background:#EB7879;
width:991px;
height:800px;
float:right;
background-repeat:repeat;
background-attachment:fixed;
background-position:right;}
</style>

<style>
.button
{color:#A71B4A;
background:#F7FDDF;
border:1px solid #A71B4A;
font-family: 'Lobster Two', cursive;
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-o-transition-duration: 2s;}
.button:hover
{color:#33AFA5;
border:1px solid#33AFA5;}
#notice
{background: #EE2853;
font-family:verdana;
box-shadow: 1px 1px 10px #A71B4A;
color:#F7FDDF; 
border:1px solid #F7FDDF;
width:955px;
text-align:center;
margin:0px}
.theader
{property: value;
box-shadow: 1px 1px 10px #A71B4A;
background: #EE2853;
font-family:verdana;
color:#F7FDDF; 
position:relative;}
#eventtxt
{color:#F7FDDF;
background:#EE2853;
box-shadow: 1px 1px 10px #A71B4A;
font-family:verdana;
position: relative;
border:1px solid #F7FDDF;} 
.popup 
{background-image:url(http://colourlovers.com.s3.amazonaws.com/images/patterns/360/360248.png);
color:#F7FDDF; 
border: 1px solid #F7FDDF;
box-shadow: 1px 1px 10px #A71B4A;
font-family:verdana;}
#lightbox-container-image
{background-image:url(http://colourlovers.com.s3.amazonaws.com/images/patterns/360/360248.png);
color:#F7FDDF; 
border: 1px solid #F7FDDF;
font-family:verdana;}
.mweorbox
{color:#A71B4A;
background:#F7FDDF;
box-shadow: 1px 1px 10px #A71B4A;
font-family:verdana;
border:7px solid transparent;
-webkit-border-image:url(http://www.colourlovers.com/paletteImg/33AFA5/F7FDDF/EB7879/EE2853/A71B4A/just:_lovers.png?cPW=MC...) 30 30 stretch; 
-o-border-image:url(http://www.colourlovers.com/paletteImg/33AFA5/F7FDDF/EB7879/EE2853/A71B4A/just:_lovers.png?cPW=MC...) 30 30 stretch; 
border-image:url(http://www.colourlovers.com/paletteImg/33AFA5/F7FDDF/EB7879/EE2853/A71B4A/just:_lovers.png?cPW=MC...) 30 30 stretch;}
.trow1, .trow1 tr, .trow1 td, 
.trow2, .trow2 tr, .trow2 td, 
.trow3, .trow3 tr, .trow3 td,
.trow1 table, .trow2 table, .trow3 table
{color: #A71B4A;
font-family:verdana;
background:#F7FDDF;}
#tooltip
{background: #EE2853;
color:#F7FDDF;
box-shadow: 1px 1px 10px #A71B4A; 
border:7px solid transparent;
-webkit-border-image:url(http://www.colourlovers.com/paletteImg/33AFA5/F7FDDF/EB7879/EE2853/A71B4A/just:_lovers.png?cPW=MC...) 30 30 stretch; 
-o-border-image:url(http://www.colourlovers.com/paletteImg/33AFA5/F7FDDF/EB7879/EE2853/A71B4A/just:_lovers.png?cPW=MC...) 30 30 stretch; 
border-image:url(http://www.colourlovers.com/paletteImg/33AFA5/F7FDDF/EB7879/EE2853/A71B4A/just:_lovers.png?cPW=MC...) 30 30 stretch;}
font-family:verdana;}
</style>

<style>
font
{color:#F7FDDF;
font-family:verdana;}
a 
{color:#33AFA5;
text-shadow: 0px 0px 10px #F7FDDF;
font-family:verdana;
-webkit-transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;}
a:hover
{color:#A71B4A;
font-family:verdana;}
i
{display:none;}
h1
{color:#33AFA5;
font-family: 'Lobster Two', cursive;
text-shadow: 0px 0px 10px #F7FDDF;}
b
{color:#A71B4A;
font-family: 'Lobster Two', cursive;}
</style>

<style>
.gallery .control-operator:target ~ .controls .control-button 
{color: #33AFA5;}
.gallery .control-button:first-of-type,
.items-2 .control-operator:nth-of-type(1):target ~ .controls .control-button:nth-of-type(1),
.items-2 .control-operator:nth-of-type(2):target ~ .controls .control-button:nth-of-type(2),
.items-3 .control-operator:nth-of-type(1):target ~ .controls .control-button:nth-of-type(1),
.items-3 .control-operator:nth-of-type(2):target ~ .controls .control-button:nth-of-type(2),
.items-3 .control-operator:nth-of-type(3):target ~ .controls .control-button:nth-of-type(3),
.items-4 .control-operator:nth-of-type(1):target ~ .controls .control-button:nth-of-type(1),
.items-4 .control-operator:nth-of-type(2):target ~ .controls .control-button:nth-of-type(2),
.items-4 .control-operator:nth-of-type(3):target ~ .controls .control-button:nth-of-type(3),
.items-4 .control-operator:nth-of-type(4):target ~ .controls .control-button:nth-of-type(4),
.items-5 .control-operator:nth-of-type(1):target ~ .controls .control-button:nth-of-type(1),
.items-5 .control-operator:nth-of-type(2):target ~ .controls .control-button:nth-of-type(2),
.items-5 .control-operator:nth-of-type(3):target ~ .controls .control-button:nth-of-type(3),
.items-5 .control-operator:nth-of-type(4):target ~ .controls .control-button:nth-of-type(4),
.items-5 .control-operator:nth-of-type(5):target ~ .controls .control-button:nth-of-type(5) 
{color: #EB7879;}
.gallery .item:first-of-type 
{position: absolute;
  opacity: 1;}
.gallery .item 
{position: absolute;
margin: 10px;
 float:left;
  top: 25px;
  width:970px;
  height: 200px;
  opacity: 0;
box-shadow: 1px 1px 10px #A71B4A;
color:#F7FDDF;
font-family:verdana;
text-align:left;
  -webkit-transition: opacity .5s;
  -o-transition: opacity .5s;
  transition: opacity .5s;}
.gallery .control-operator 
{display: none;}
.gallery .control-operator:target ~ .item 
{pointer-events: none;
  opacity: 0;
  -webkit-animation: none;
  -o-animation: none;
  animation: none;}
.gallery .control-operator:target ~ .controls .control-button 
{-webkit-animation: none;
  -o-animation: none;
  animation: none;}
@-webkit-keyframes controlAnimation-2 
{0% 
{color: #33AFA5;}
14.3%, 50% 
{color: #EB7879;}
64.3%, 100% 
{color: #33AFA5;}
}
@-o-keyframes controlAnimation-2 
{0% 
{color: #33AFA5;}
14.3%, 50% 
{color: #EB7879;}
64.3%, 100% 
{color: #33AFA5;}
}
@keyframes controlAnimation-2 
{0% 
{color: #33AFA5;}
14.3%, 50% 
{color: #EB7879;}
64.3%, 100% 
{color: #33AFA5;}
}
@-webkit-keyframes galleryAnimation-2 {
  0% 
{opacity: 0;}
14.3%, 50% 
{opacity: 1;}
64.3%, 100% 
{opacity: 0;}
}
@-o-keyframes galleryAnimation-2 
{0% 
{opacity: 0;}
14.3%, 50% 
{opacity: 1;}
64.3%, 100% 
{opacity: 0;}
}
@keyframes galleryAnimation-2 
{0% 
{opacity: 0;}
14.3%, 50% 
{opacity: 1;}
64.3%, 100% 
{opacity: 0;}
}
.items-2.autoplay .control-button
{ -webkit-animation: controlAnimation-2 14s infinite;
  -o-animation: controlAnimation-2 14s infinite;
  animation: controlAnimation-2 14s infinite;}
.items-2.autoplay .item 
{-webkit-animation: galleryAnimation-2 14s infinite;
  -o-animation: galleryAnimation-2 14s infinite;
  animation: galleryAnimation-2 14s infinite;}
.items-2 .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) 
{ pointer-events: auto;
  opacity: 1;}
.items-2 .control-button:nth-of-type(1),
.items-2 .item:nth-of-type(1) 
{-webkit-animation-delay: -2s;
  -o-animation-delay: -2s;
  animation-delay: -2s;}
.items-2 .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) 
{pointer-events: auto;
  opacity: 1;}
.items-2 .control-button:nth-of-type(2),
.items-2 .item:nth-of-type(2) 
{-webkit-animation-delay: 5s;
  -o-animation-delay: 5s;
  animation-delay: 5s;}
@-webkit-keyframes controlAnimation-3 
{0% 
{color: #33AFA5;}
9.5%, 33.3% 
{color: #EB7879;}
42.9%, 100% 
{color: #33AFA5;}
}
@-o-keyframes controlAnimation-3 {
  0% 
{color: #33AFA5;}
9.5%, 33.3% 
{color: #EB7879;}
42.9%, 100% 
{color: #33AFA5;}
}
@keyframes controlAnimation-3 {
  0% 
{color: #33AFA5;}
9.5%, 33.3% 
{color: #EB7879;}
42.9%, 100% 
{color: #33AFA5;}
 }
@-webkit-keyframes galleryAnimation-3 
{0% 
{opacity: 0;}
9.5%, 33.3% 
{opacity: 1;}
42.9%, 100% 
{opacity: 0;}
}
@-o-keyframes galleryAnimation-3 
{ 0% 
{opacity: 0;}
9.5%, 33.3% 
{opacity: 1;}
42.9%, 100% 
{opacity: 0;}
}
@keyframes galleryAnimation-3 
{0% 
{opacity: 0;}
9.5%, 33.3% 
{opacity: 1;}
42.9%, 100% 
{opacity: 0;}
}
.items-3.autoplay .control-button 
{-webkit-animation: controlAnimation-3 21s infinite;
  -o-animation: controlAnimation-3 21s infinite;
  animation: controlAnimation-3 21s infinite;}
.items-3.autoplay .item 
{-webkit-animation: galleryAnimation-3 21s infinite;
  -o-animation: galleryAnimation-3 21s infinite;
  animation: galleryAnimation-3 21s infinite;}
.items-3 .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) 
{pointer-events: auto;
  opacity: 1;}
.items-3 .control-button:nth-of-type(1),
.items-3 .item:nth-of-type(1) {
  -webkit-animation-delay: -2s;
  -o-animation-delay: -2s;
  animation-delay: -2s;}
.items-3 .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2)
 {pointer-events: auto;
  opacity: 1;}
.items-3 .control-button:nth-of-type(2),
.items-3 .item:nth-of-type(2) 
{ -webkit-animation-delay: 5s;
  -o-animation-delay: 5s;
  animation-delay: 5s;}
.items-3 .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) 
{pointer-events: auto;
  opacity: 1;}
.items-3 .control-button:nth-of-type(3),
.items-3 .item:nth-of-type(3) 
{ -webkit-animation-delay: 12s;
  -o-animation-delay: 12s;
  animation-delay: 12s;}
@-webkit-keyframes controlAnimation-4 
{0% 
{color: #33AFA5;}
7.1%, 25% 
{color: #EB7879;}
32.1%, 100% 
{color: #33AFA5;}
}
@-o-keyframes controlAnimation-4 
{0% 
{color: #33AFA5;}
7.1%, 25% 
{color: #EB7879;}
32.1%, 100% 
{color: #33AFA5;}
}
@keyframes controlAnimation-4 
{0% 
{color: #33AFA5;}
7.1%, 25% 
{color: #EB7879;}
32.1%, 100% 
{color: #33AFA5;}
}
@-webkit-keyframes galleryAnimation-4 
{0% 
{opacity: 0;}
7.1%, 25% 
{opacity: 1;}
32.1%, 100% 
{opacity: 0;}
}
@-o-keyframes galleryAnimation-4 
{0% 
{opacity: 0;}
7.1%, 25% 
{opacity: 1;}
32.1%, 100% 
{opacity: 0;}
}
@keyframes galleryAnimation-4 
{0%
{opacity: 0;}
7.1%, 25% 
{opacity: 1;}
32.1%, 100% 
{opacity: 0;}
}
.items-4.autoplay .control-button 
{-webkit-animation: controlAnimation-4 28s infinite;
  -o-animation: controlAnimation-4 28s infinite;
  animation: controlAnimation-4 28s infinite;}
.items-4.autoplay .item 
{ -webkit-animation: galleryAnimation-4 28s infinite;
  -o-animation: galleryAnimation-4 28s infinite;
  animation: galleryAnimation-4 28s infinite;}
.items-4 .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) 
{ pointer-events: auto;
  opacity: 1;}
.items-4 .control-button:nth-of-type(1),
.items-4 .item:nth-of-type(1) 
{ -webkit-animation-delay: -2s;
  -o-animation-delay: -2s;
  animation-delay: -2s;}
.items-4 .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) 
{pointer-events: auto;
  opacity: 1;}
.items-4 .control-button:nth-of-type(2),
.items-4 .item:nth-of-type(2) 
 -webkit-animation-delay: 5s;
-o-animation-delay: 5s;
  animation-delay: 5s;}
.items-4 .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) 
{pointer-events: auto;
  opacity: 1;}
.items-4 .control-button:nth-of-type(3),
.items-4 .item:nth-of-type(3) 
{ -webkit-animation-delay: 12s;
  -o-animation-delay: 12s;
  animation-delay: 12s;}
.items-4 .control-operator:nth-of-type(4):target ~ .item:nth-of-type(4) 
{pointer-events: auto;
  opacity: 1;}
.items-4 .control-button:nth-of-type(4),
.items-4 .item:nth-of-type(4) 
{ -webkit-animation-delay: 19s;
  -o-animation-delay: 19s;
  animation-delay: 19s;}
@-webkit-keyframes controlAnimation-5 
{ 0% 
{color: #33AFA5;}5.7%, 20% 
{color: #EB7879;}
25.7%, 100% 
{color: #33AFA5;}
}
@-o-keyframes controlAnimation-5 
{0% 
{color: #33AFA5;}
5.7%, 20% 
{color: #EB7879;}
25.7%, 100% 
{color: #33AFA5;}
}
@keyframes controlAnimation-5 
{0% 
{color: #33AFA5;}
5.7%, 20% 
{color: #EB7879;}
25.7%, 100% 
{color: #33AFA5;}
}
@-webkit-keyframes galleryAnimation-5 
{0%
{opacity: 0;}
5.7%, 20%
{opacity: 1; }
25.7%, 100% 
{opacity: 0;}
}
@-o-keyframes galleryAnimation-5 
{ 0% 
{opacity: 0;}
5.7%, 20% 
{opacity: 1;}
25.7%, 100% 
{opacity: 0;}
}
@keyframes galleryAnimation-5 {
  0% 
{opacity: 0;}
5.7%, 20% 
{opacity: 1;}
25.7%, 100% 
{opacity: 0;}
}
.items-5.autoplay .control-button 
{  -webkit-animation: controlAnimation-5 35s infinite;
  -o-animation: controlAnimation-5 35s infinite;
  animation: controlAnimation-5 35s infinite;}
.items-5.autoplay .item 
{  -webkit-animation: galleryAnimation-5 35s infinite;
  -o-animation: galleryAnimation-5 35s infinite;
  animation: galleryAnimation-5 35s infinite;}
.items-5 .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) 
{  pointer-events: auto;
  opacity: 1;}
.items-5 .control-button:nth-of-type(1),
.items-5 .item:nth-of-type(1) 
{  -webkit-animation-delay: -2s;
  -o-animation-delay: -2s;
  animation-delay: -2s;}
.items-5 .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) 
{  pointer-events: auto;
  opacity: 1;}
.items-5 .control-button:nth-of-type(2),
.items-5 .item:nth-of-type(2) 
{  -webkit-animation-delay: 5s;
  -o-animation-delay: 5s;
  animation-delay: 5s;}
.items-5 .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) 
{  pointer-events: auto;
  opacity: 1;}
.items-5 .control-button:nth-of-type(3),
.items-5 .item:nth-of-type(3) 
{  -webkit-animation-delay: 12s;
  -o-animation-delay: 12s;
  animation-delay: 12s;}
.items-5 .control-operator:nth-of-type(4):target ~ .item:nth-of-type(4) 
{  pointer-events: auto;
  opacity: 1;}
.items-5 .control-button:nth-of-type(4),
.items-5 .item:nth-of-type(4) 
{  -webkit-animation-delay: 19s;
  -o-animation-delay: 19s;
  animation-delay: 19s;}
.items-5 .control-operator:nth-of-type(5):target ~ .item:nth-of-type(5) 
{  pointer-events: auto;
  opacity: 1;}
.items-5 .control-button:nth-of-type(5),
.items-5 .item:nth-of-type(5) 
{ -webkit-animation-delay: 26s;
  -o-animation-delay: 26s;
  animation-delay: 26s;}
.gallery .control-button
{color: #33AFA5;}
.gallery .control-button:hover 
{color: #EB7879;}
.gallery 
{ position: relative;}
.gallery .item 
{ height: 200px;
  overflow: hidden;
  text-align: center;
 float:left;
  background: #EE2853;
border: 1px solid #F7FDDF;}
.gallery .controls 
{  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;}
.gallery .control-button 
{  display: inline-block;
  margin: 0 .02em;
  font-size: 3em;
  text-align: center;
  text-decoration: none;
  -webkit-transition: color .1s;
  -o-transition: color .1s;
  transition: color .1s;}
</style>

</div>

Comments

Comments (0)

You are not authorized to comment here. Your must be registered and logged in to comment