Add Reply
New Topic
New Poll

 as i fall ,, slider.
merc
 Posted: Jul 1 2014, 06:57 PM
Quote
Group Icon
merc ▪ Offline



DO NOT USE THIS AS A BASE
LEAVE THE CREDIT ON

if you're using a dark image,
use THIS code.


beatrice flint
slytherin sixth year - seventeen - frida gustavsson
beatrice is what they call her. she's a sixteen year old slytherin girl from a pure-blood and pure-bred family. she believes in pureblood surperiority.


CODE
[dohtml]<link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'><style type="text/css">
#slider { text-align: center; width:400px; height:250px;}

label, #active, img { -moz-user-select:none;-webkit-user-select:none; }
.catch { display: block; height: 0; overflow: hidden; }
#slider { margin: 0 auto; }

#slider input {display: none;}
#slidercr { font-family: oswald; font-size:10px; text-transform:uppercase; }
#slidercr a {color:#206876;}
#slide1:checked ~ #slides .inner { margin-left:0; }
#slide2:checked ~ #slides .inner { margin-left:-100%; }

#controller {width:400px; height:500px; overflow:hidden; background-color:#C9CFBC; border-left:38px solid #463B3F; border-right:38px solid #7DA5A0; }
#overflow {width: 100%;overflow: hidden;}
article img {width: 400px; height:250px;}
#slides .inner {width: 500%;line-height: 0;}
#slides article { width: 20%;float: left;}
#controls {margin-top: -38%; margin-left:16%; margin-right:0%; margin-bottom:0%; width: 68%;height: 50px;}
#controls label { display: none;width: 50px; height: 50px;opacity: 0.3;}
#active {margin: 27% 0 0;text-align: center;}

#active label {-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; display: inline-block; width: 10px;
height: 10px; background: #fcfcfc; }
#active label:hover { background: #fcfcfc; border-color: #fcfcfc!important; }
#controls label:hover { opacity: 0.8; }

#slide1:checked ~ #controls label:nth-child(2),
#slide2:checked ~ #controls label:nth-child(1) { background: url('http://i.imgur.com/Bz767c2.png') no-repeat; float: right; margin: 0 -70px 0 0; display: block;}

#slide1:checked ~ #controls label:nth-child(5),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2),
#slide4:checked ~ #controls label:nth-child(3),
#slide5:checked ~ #controls label:nth-child(4) { background: url('http://i.imgur.com/cbAHWaX.png') no-repeat; float: left; margin: 0 0 0 -70px; display: block; }

#slide1:checked ~ #active label:nth-child(1),
#slide2:checked ~ #active label:nth-child(2),
#slide3:checked ~ #active label:nth-child(3),
#slide4:checked ~ #active label:nth-child(4),
#slide5:checked ~ #active label:nth-child(5) { background: #0e0e0e; border-color: #0e0e0e !important; }

/* Info Box */

.info {line-height: 20px; margin: 0 0 -150%; position: absolute; padding: 30px 30px; opacity: 0; color: #000; align:center; height:400px;}
.firstslide {line-height: 20px; margin: 0 0 -150%; position: absolute; padding: 30px 30px; opacity: 0; color: #000; text-align: justify; height:250px;}
.fstxt { width: 446px; margin-top:360px 0 0 50px; background-color:#463B3F; color:#fcfcfc; font-size:38px; font-family:oswald; text-align:center; padding:15px; text-transform:uppercase; letter-spacing:2px; height:18px;}
.nstxt { width: 250px; margin-top:360px 0 0 50px; color:#191919; background-color:#fcfcfc; font-size:9px; font-family: georgia; text-align:justify; padding:15px; text-transform:lowercase; letter-spacing:2px; line-height: 95%; height:300px; overflow:auto;}
.ntxt { margin-top:52px;background-color:rgba(255,255,255,0.7); background-color:rgb(255,255,255,0.7); color:#463B3F; font-size:38px; font-family:oswald; text-align:center; padding:19px 15px 15px 15px; text-transform:uppercase; letter-spacing:2px; width:315px;}
.ctxt { background-color:rgba(255,255,255,0.7); background-color:rgb(255,255,255,0.7); padding: 0px 15px 18px 15px; text-align:center; font-family:georgia; font-size:11px; text-transform:lowercase; line-height:95%; overflow:auto; width:315px;}
#slides { }
.ctxt b { font-weight:bold; color:#7DA5A0; text-transform:uppercase; font-family:oswald;}

#slides .inner {-webkit-transform: translateZ(0);-webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);  -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);  -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);  transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); }
#activecontour { width:400px; height:500px; border-left: 20px solid #3d3035; border-right:20px solid #c7a7af; background-color:#0e0e0e; display:none; }
#slider { -webkit-transform: translateZ(0);-webkit-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;-o-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}

#controls label{ -webkit-transform: translateZ(0); -webkit-transition: opacity 0.2s ease-out;-moz-transition: opacity 0.2s ease-out;-o-transition: opacity 0.2s ease-out;transition: opacity 0.2s ease-out;}

#slide1:checked ~ #slides article:nth-child(1) .firstslide,
#slide2:checked ~ #slides article:nth-child(2) .info,
#slide3:checked ~ #slides article:nth-child(3) .info,
#slide4:checked ~ #slides article:nth-child(4) .info,
#slide5:checked ~ #slides article:nth-child(5) .info { opacity: 1; -webkit-transition: all 1s ease-out 0.6s;-moz-transition: all 1s ease-out 0.6s;-o-transition: all 1s ease-out 0.6s; transition: all 1s ease-out 0.6s;}
.info, #controls, #slides, #active, #active label { -webkit-transform: translateZ(0); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out;  transition: all 0.5s ease-out; }</style>

<center>
<div id="activecontour"></div>
<div class="fstxt"></div>
<div id="controller"><article id=slider>
<input checked type=radio name=slider id=slide1 />
<input type=radio name=slider id=slide2 />
<input type=radio name=slider id=slide3 />
<input type=radio name=slider id=slide4 />
<input type=radio name=slider id=slide5 />

<div id=slides>
<div id=overflow>
<div class=inner>
<article><div class=firstslide></div>
<img src=http://i.imgur.com/MuxBv21.png /></article>
       
<article><div class=info><div class="ntxt">beatrice flint</div>
<div class="ctxt" style="text-align:center;">
<b>slytherin sixth year</b> - <b>seventeen</b> - <b>frida gustavsson</b><br>
</div></div>
<img src=http://i.imgur.com/3fH1FmA.png /></article>
   
</div>
</div>
</div>
<div id=controls>
 <label for=slide1></label>
 <label for=slide2></label>

</div>
</article>
<center><div class="nstxt"><i>Lorem</i> 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.<br><br><i>Lorem</i> 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.
</div></center>
</div></center>
<center><div id="slidercr"><a href="http://obscurus.jcink.net/index.php?showuser=1">▲</a></div></center>
[/dohtml]
PMEmail
^
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

Topic Options
Add Reply
New Topic
New Poll


 


 


skinned by merc @ caution